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:
< ;body>
< ;/p>
jQuery provides queue functionality for animations, which means that if you write multiple animate() calls, jQuery creates an "internal" queue containing these method calls. Then run these animate calls one by one.
$("button").click(function(){ var p=$("p"); p.animate({height:'300px',opacity:'0.4 '},"slow"); p.animate({width:'300px',opacity:'0.8'},"slow"); p.animate({height:'100px',opacity: '0.4'},"slow"); p.animate({width:'100px',opacity:'0.8'},"slow");
##jQuery stop() method is used to stop animations or effects before they are completed. Make a stop. $(selector).stop(stopAll,goToEnd);The optional stopAll parameter specifies whether the animation queue should be cleared. The default is false, which only stops active animations, allowing any queued animations to execute backwards. The optional goToEnd parameter specifies whether to complete the current animation immediately. The default is false.
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.
jQuery traversal, which means "move", is used to move based on its relative to other elements. Relationships to "find" (or select) HTML elements. Start with a selection and move along this selection until you reach your desired element.
With jQuery traversal in a family tree, you can start from the selected (current) element and easily move up (ancestors), down (descendants), and horizontally (siblings) in the family tree. ). This movement is called traversing the DOM.
jQuery provides a variety of methods for traversing the DOM. The largest category of traversal methods is tree-traversal.
Traverse up the DOM tree
These jQuery methods are useful for traversing up the DOM tree:
parent()
parents()
parentsUntil()
parent() method returns the direct parent element of the selected element. This method only traverses the DOM tree one level up.
$(document).ready(function(){
$("span").parent();
});
parents() method returns the selected All of the element's ancestors, all the way up to the document's root element ().
You can also use optional parameters to filter the search for ancestor elements.
The following example returns all ancestors of all elements that are
There are many useful methods that allow us to navigate the DOM tree Perform horizontal traversal:
siblings()
next()
##nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
siblings() method returns all sibling elements of the selected element. Does not include itself. You can also use optional parameters to filter the search for sibling elements. $(document).ready(function(){
$("h2").siblings("p"); });
next() method Returns the next sibling element of the selected element. This method only returns one element. $(document).ready(function(){
$("h2").next(); });
nextAll() method returns the selected All following sibling elements of the element. Returns all subsequent elements. nextUntil() method returns all following sibling elements between the two given parameters. Excludes elements at both ends. The prev(), prevAll() and prevUntil() methods work similarly to the above methods, but in the opposite direction: they return the previous sibling element (along the sibling elements in the DOM tree) traverse backward, not forward).
The three most basic filtering methods are: first(), last() and eq(), which allow You select a specific element based on its position within a set of elements. Other filtering methods, such as filter() and not() allow you to select elements that match or do not match a specified criterion. first() method returns the first element of the selected element.
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)
