jQuery syntax is compiled for the selection of HTML elements and can perform certain operations on the elements. This is the key point. Beginners must know what the things you learn are used for.
The basic syntax is: $(selector).action(). All jQuery revolves around this, selecting elements on the page and then performing certain operations on the elements.
Example
$(this).hide() - Hide the current element
Document ready function:
is to prevent jQuery code from running before the document is fully loaded (ready). Due to jQuery's convention, all JavaScript code is best placed here.
$(document).ready(function(){
});
Copy after login
##jQuery Element selectors and attribute selectors: They allow you to select HTML elements by tag name, attribute name or content. Corresponds to the first half of $(selector).action().
jQuery element selector:
$("p") Selects the
element.
$("p.intro") Selects all
elements with class="intro".
$("p#demo") Selects all
elements with id="demo".
jQuery attribute selector:
$("[href]") Select all items with href attribute of the element. $("[href='#']") Selects all elements with an href value equal to "#". $("[href!='#']") Selects all elements with an href value not equal to "#".
$("[href$='.jpg']") Selects all elements whose href value ends with ".jpg".
jQuery CSS selector:
$("p").css("background-color","red");For the complete jquery selector reference manual: http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
jQuery event function: corresponds to the second half of $(selector).action().
Event handlers refer to methods that are called when certain events occur in HTML.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Copy after login
##Event function
Bind function to
$(document).ready(function)
Bind the function to the document’s ready event (when the document has finished loading)
$(selector).click(function)
Trigger or bind a function to the click event of the selected element
$(selector).dblclick(function)
Trigger or bind a function to the double-click event of the selected element
$(selector).focus(function)
Trigger or bind the function to the focus event of the selected element
$(selector).mouseover(function)
Trigger or bind the function Mouseover event bound to the selected element
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
You can use the animate() method to operate all CSS properties. One important thing to remember: when using animate(), you must use Camel notation to write all property names, for example, You must use paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.
It moves the
element to the left until the left attribute is equal to 250 pixels:
The Callback function is executed after the current animation is 100% completed.
$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden" );
});
Full animation: http://www.w3school.com.cn/jquery/jquery_ref_effects.asp
jQuery has powerful methods for manipulating HTML elements and attributes.
jQuery DOM operation:
DOM = Document Object Model, "The W3C Document Object Model is a platform- and language-independent interface that allows programs and scripts to dynamically access and update documents. Content, structure and style.”
##Get the value in dom:
三A simple and practical jQuery method for DOM manipulation:
text() - Set or return the text content of the selected element
html () - Sets or returns the content of the selected element (including HTML tags)
val() - Sets or returns the value of the form field
The callback function of text(), html() and val(), The callback function consists of two parameters: the selected element The index of the current element in the list, and the original (old) value. Then the return content of the function return is used as the new value.
eq() method returns the element with the specified index number among the selected elements. Index numbers start at 0, so the first element has index number 0 instead of 1. The following example selects the second
The filter() method allows you to specify a criterion. Elements that do not match this criterion are removed from the collection, and matching elements are returned.
not() method returns all elements that do not match the criteria. Tip: The not() method is the opposite of filter().
The above is the detailed content of jQuery basic syntax summary. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
