Chapter 1 Selector
1. Basic selector
("#id"): Id selector, return a single element (".class"): class selector, return set element
(“element”): select the element matching the specified element name, return set element ("*"): wildcard selector, select all elements, return set element
$(“selector1,selector2”): select all elements matched by the selector , Return collection elements
2. Level selector
(“ancestor descendant”): Select all descendant descendant elements of the ancestor element, and return the set element (“parent>child”): select the child element under parent,: select the next element of the same generation
(“prev+next”)immediately after prev (“prev~siblings”): get all the siblings elements of the same generation after prev
Description: Equal to effect
(“prev+next”)and (“prev”).next()equal
(“prev~siblings”)to (“prev”).sibling()effect
3. Basic filter selector
:first: Select the first element, return a single element
:last: select the last element, return a single element
:not(selector): remove all elements matched by a given selector, return set elements
:even: select all elements with an even number, the index number starts from 0, and return Collection element
:odd: select all elements with an odd index, the index number starts from 0, return to the collection element
:ep(index): select the element whose index is equal to index, and the index starts from 0 to return a single element
:gt(index): select all elements whose index number is greater than index, and return to the collection element
:lt(index): select For all elements whose index is less than index, return to the set element
:header: select all the title elements, return to the set element
:animated: select the element that is performing the animation, return to the set element
:focus: select the element that currently has the focus, return to the set element
4. Content filtering selector
:contains(text): Select the element with text content as text, return to the set element
:empty: select the empty element without child nodes or text, return to the set element
:has(selector): select the element that contains the element matched by the selector, return to the set element
:parent: select the child node or text Element, returns the collection element
5. Visibility filter selector
:hidden: Select all invisible elements and return to set elements
:visible: select all visible elements and return to set elements
6. Attribute filter selector
[attribute]: Select the element with this attribute and return to the set element
:[attribute=value]: select the element whose attribute value is value, and return to the set element
:[attribute!=value]: select the element whose attribute value is not value, and return to the set element
:[attribute^=value]: select the element whose attribute value starts with value, and return Set element
:[attribute$=value]: select the element whose attribute value ends with value, return set element
:[attribute*=value]: select the element whose attribute value contains value, and return set element
:[attribute|=value]: select the attribute whose value is equal to value or prefixed with value (ie "value-", value Followed by a hyphen), return set element
:[attribute~=value]: select the element whose attribute value contains value in the value separated by spaces, return set element
:[attribute1][attribute1]……[attributeN1]: combine multiple attribute selectors into a composite attribute selector, return set element
7. Sub-elements filter selector
:nth-child(index/even/odd): Select the index child element under the parent element, the index value starts from 1, or select the odd-even child element, return to the set element
:first-child: select the first element under the parent element, return to the set element
:last-child: select the last child element under the parent element , Return set element
:only-child: if the element is the only element of the parent element, select it, otherwise, do not select, return to the set element.
In addition, :nth-child()you can also select a group of specific elements through mathematical expressions, such as
:nth-child(3n):: select all 3 of the parent element Sub-elements of multiples (n starts from 1, that is, the 3rd, 6th, 9th, ... elements are selected)
8. Form selector
:input: Select all input, textarea, select, button elements, return to set elements
:text: select all single-line text boxes, return to set elements
:password: select all password boxes, return to set elements
:radio: select all radio buttons, return to set elements
:checkbox: select all Return to the collection element
:submit: select all the submit buttons, return to the collection element
:image: select all the image buttons, return to the collection element
:reset: select all the reset buttons, return to the collection element
:button: select all the buttons, return to the collection element
:file: select all Upload domain, return collection element
9, form object attribute filter selector
:enabled: Select all available elements, return to set elements
:disabled: select all unavailable elements, return to set elements
:checked: select all selected elements (single and multi-
:selectedselect boxes), return to set elements : select all selected elements (drop-down list) , Return collection elements
Chapter 2 DOM Operation
1. Find, set, delete attributes ###
1. Attr() method: accepts one or two parameters, one parameter is to get the attribute value, and the two parameters are to set the attribute. When multiple attributes need to be set, the parameter of the attr method It can be a json data format composed of attributes and attribute values
$("div").attr("background");//Get the attribute value
$("div").attr("background","blue");//Set the attribute value
$("div").attr ({"Background":"blue","height":"200px"});//Set multiple attribute values
** 2, css() method:
**Accept one or two parameters, when one parameter is an attribute Name, get the attribute value, when there are two parameters, set the first parameter of the attribute as the attribute name, and the second parameter as the attribute value. When multiple attributes need to be set, the parameter of the css method can be one consisting of attribute and attribute value Composed json data format
$("div").css("background");//Get the attribute value
$("div").css("background","blue");//Set the attribute value
$("div").css ({"Background":"blue","height":"200px"});//Set multiple attribute values
In addition, the width() method and height() method can directly obtain the width and height
** 3. addClass()
**: Add a class value to the element, you can add attributes and values in batches
$("div").addClass("myclass");
***4, removeAttr()***: delete the specified attribute
$("div").removeAttr("background");
***5, removeClass()***: When there are parameters, delete the specified class value, when there are no parameters, delete all the class values
$("div").removeClass("myclass");
$("div").removeClass();
***6, hasClass()***: Determine whether the matched element has a certain class value, if there is Return true, false if not
$(“div”).hasClass(“myclass”);
2. Create element, text, attribute node
You can directly add elements, text, and attributes to the () method, such as: var p=(“
Pretend to be the title
”)3. Insert node
***1, append()***: Add nodes to the inside of the element, such as:
html code:
I am the content
jQuery code: $("p").append("I am appending content"); Result:I am the content I am the additional content
***2, appendTo()***: Add the element to the inside of the specified element, that is, the members of the chain operation in the append method exchange positionshtml code:
I am the content
jQuery code: $("I am appending content").appendTo("p"); Result:I am the content I am the additional content
***3, prepend()***: prepend content to the inside of the elementhtml code:
I am the content
jQuery code: $("p").prepend("I am the additional content"); Result:I am the additional content I am the content
***4, prependTo()***: Prepend the node to the specified element, that is, exchange positions of members in the chain operation in the prepend methodhtml code:
I am the content
jQuery code: $("I am appending content").prependTo("p"); Result:I am the additional content I am the content
***5, after()***: Add a node after each element nodehtml code:
I am the content
jQuery code: $("p").after("I am additional content"); Result:I am the content
I am the additional content ***6, insertAfter()***: Talking about the node inserted after the specified node, that is, the member exchange position in the chain operation in the after methodhtml code:
I am the content
jQuery code: $("I am the additional content").insertAfter("p"); Result:I am the content
I am the additional content***7, before()***: insert the node before the nodehtml code:
I am the content
jQuery code: $("p").before("I am the additional content"); Result: I am the additional contentI am the content
***8, insertBefore()***: insert the node in front of the specified elementhtml code:
I am the content
jQuery code: $("I am the additional content").insertBefore("p"); Result: I am the additional contentI am the content
4. Delete the node
1. remove() : Remove all matched elements from the DOM, and all descendant nodes contained in the node will be deleted at the same time, because the return value is a reference to the deleted node, so you can continue to use these elements in the future, but at this time Events bound to these nodes will also be deleted, such as:
var li = li =l i= ("Ul li:eq(1)").remove();//Delete the node
$li.appendTo("ul");//Add the node back
2. Detach(): Almost the same as remove(), The difference is that the detach method will not delete the events and additional data bound to the node.
3. empty(): empty the matched node
$("ul li:eq(1)").empty();//At this time, there is no content or node in the first li tag
5. Copy node
clone(): Copy the node, which can have the parameter true, when there is a true parameter, the events bound to the node will be copied at the same time, such as:
$(“ul li:eq(1)”).clone(true).apppendTo(“ul”);
6. Replace the node
1. replaceWith() : Replace the matched node with the specified node
$(“p”).replaceWith("
2. replaceAll() : Replace the corresponding node with the specified node, that is, the member exchange position in the chain operation in the replaceWith method
$("
7. Package node
1. wrap() : Wrap the matched node separately with the specified node
html code:
I am the content
I am another content
jQuery code: $("p").wrap(" "); Result:I am the content
I am another content
**2, wrapAll()**: Wrap all matched nodes with specified nodeshtml code:
I am the content
I am another content
jQuery code: $("p").wrap(" "); Result:I am the content
I am another content
**3, wrapInner()**: wrap the node or text content inside the matched node with the specified nodehtml code:
I am the content
jQuery code: $("p").wrapInner(" "); Result:I am the content
8. Set and get text, HTML and values
**
1、html()
**
: Similar to the innerHTML attribute in native JavaScript, it is obtained when there are no parameters, including element nodes and text nodes, when there are string parameters inside, the node content and text content are reset
$("p").html();
2. text() : similar to the innerText property in native JavaScript. If there are no parameters, it will get the text node. If there are string parameters inside, it will reset the text content.
$("p").text("I am the content");
3. val() : Similar to the value attribute in native JavaScript, it can be used to get and set the value of an element, whether it is an element or a text box, a drop-down list Or a single selection box, if the element is multiple selection, it returns an array containing all selected values
9, traverse the nodes
1. children() : Get all the child elements collection, return an array, only consider the child elements, and do not consider other descendant elements
html code:
I am the content I am the embedded content
I am another content
html code:
I am the content
I am another content
html code:
I am another content
I am the content
html code:
I am another content
I am the content
- I am a list
html code:
I am the content
html code:
I am the content
html code:
I am the content
10. Element positioning
1. Offset() : Get the relative offset of the element in the current window, and return an object. The object contains two attributes, top and left.
html code:
html code:
I am the content
Chapter 3 Events and Animation
1. Load DOM###
(document).ready(): It has a similar function to the window.onload() method of native JavaScript. The window.onload() method is used for all elements in the web page (including all the elements related File) is executed after it is completely loaded into the browser, and (docuemnt).ready() can be called when the DOM is fully ready. This does not mean that these associated files have been downloaded; in addition, (document).ready () can be used multiple times, while window.onload() can only be used once, and it will be overwritten when used multiple times. In addition, it can be abbreviated as ().ready();
2. Event binding ###
bind(): There can be three parameters, the first parameter is the event type, the second parameter is optional, as an additional data object passed to the event object as the value of the event.data attribute, the third The parameter is the processing function
bind(type data fn);
Common event types:
blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mouseover,
mousemove, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keyup, error
In addition, like click, mouseover, mouseout Common events of the class can be abbreviated as follows:
$(function(){ $(“h1”).mouseover(function(){ $(this).next().show() }).mouseout(function(){ $(this).next().hide () }) }) 3. Synthetic events ### There are two synthetic events in jQuery-hover() and toggle() methods 1. hover(): used to simulate cursor hovering events, syntax
hover(enter,leave);
When the cursor moves to the element, the first function will be triggered, and the second function will be triggered when it leaves.
2, toggle(): Used to simulate the continuous mouse click event, syntax
toggle(fn1,fn2,……,fn);
4. Preventing additional problems beyond events ##
1. Stop event bubbling
Use the stopPropagation() method to stop event bubbling, such as:
$("span").bind("click",function(event){ //event handler event.stopPropagation() }) 2. Prevent the default behavior. Use the preventDafault() method to prevent the default behavior. Of course, you can also use native Return false in JavaScript such as:
$(a").bind("click",function(event){ //event handler event.preventDafault(); //or return false; }) 3. Event capture Event capture and event bubbling are exactly two In the opposite process, jQuery does not support event capture.
5. Event object##
Adding an event object is very simple, you only need to add a parameter to the function, usually event is used
$(a").bind("click",function(event){ //event handler }) 1. The attributes of the event object (1) event.type: get the type of the event
$(a").bind("click",function(event){ alert(event.type); }) (2)event.target: Get the object element that triggered the event
$(a").bind("click",function(event){ alert(event.target.href); }) (3) event.pageX and event.pageY: get the x and y coordinates of the cursor relative to the page
$(a").bind("click",function(event){ alert(event.pageX); alert(event.pageY); }) (4)event.which: get to the left of the mouse when the mouse is clicked , Middle, and right keys; get keyboard keys in keyboard events
$(a").mousedown(function(event){ alert(event.which); }) $(a").keyup(function(event){ alert(event.which); }) (5)event.metaKey : Get the ctrl button 2, the method of the event object in the keyboard event (1) event.preventDefault(): prevent the default event (2) event.stopPropagation(): prevent the event from bubbling
6. Remove events ##
unbind(): When there are no parameters, delete all bound events. There can be two parameters. The first parameter is the event type, and the second parameter is the function to be removed. The event is provided. Type, only the event type will be deleted. If an event processing function is provided, only this event processing function will be deleted. The syntax structure is as follows
unbind(type,data)
$("a").click(function(){ $("#btn").unbind("click",fn1); } In addition, for only triggering once and then immediately unbinding In the case of jQuery, jQuery provides a shorthand method—one() method, which can bind processing functions to elements, and when the function is triggered once, it will be deleted immediately;
7. Other usage of events ##
1. Simulate operation
trigger(): This method can simulate operation, for example
$("#btn").triggle("click");
This code can trigger the click event of the button with id btn. The
trigger() method will trigger the browser's default event. If you don't want to perform the browser's default operation, you can Use another method in jQuery, triggerHandler() method
2, bind multiple event types
bind can bind multiple event types for elements
$(function(){ $("div").bind("mouseover mouseout",function(){ $(this).toggleClass("over");}); }) This code has the same effect as the code below
$(function(){ $("div").bind("mouseover",function(){ $(this).toggleClass("over"); }).bind("mouseout",function(){ $( this).toggleClass("over"); }); }) 8. Animation## 1. show() and hide(): These two are the most basic animations in jQuery, when these two methods do not contain parameters The effect is similar to directly changing the display attribute of the element to block and none. When these two methods have parameters, the element can be displayed slowly. The speed keywords are slow, normal, and fast. In addition, you can directly Specify a number as the display time parameter in milliseconds. The display time of slow is 600 milliseconds, the display time of normal is 400 milliseconds, and the display time of fast is 200 milliseconds. These two methods are to change the height and width of the element at the same time. And opacity
$("p").toggle(function(){ $(this).next().hide(600); },function(){ $(this).next().show(600); }) 2 , FadeIn() and fadeOut(): These two functions only change the opacity of the element, and can also have the above speed parameters
$("p").toggle(function(){ $(this).next().fadeOut(); },function(){ $(this).next().fadeIn(600); }) 3. slideUp() and slideDown(): These two methods only change the height of the element. The slideDown() method makes the element extend and display from top to bottom, while the slideUp() method makes the element shortened and hidden from bottom to top, which also has the above-mentioned time parameter
$("p").toggle(function(){ $(this).next().slideUp(); },function(){ $(this).next().slideDown(600); }) 4. toggle(): Switch the visible state of the element, if the element is visible, then switch to hidden, if the element is hidden, then switch to visible, grammatical structure
toggle(speed,callback);
$(this).next().toggle(); The
effect is similar to hide() and show() methods
5. slideToggle(): switch the visibility of elements by height, syntax structure
slideToggle(speed,easing,callback);
6. fadeTo(): Adjust the opacity of the element to the specified value in a gradual manner. This animation only adjusts the opacity of the element, the grammatical structure
fadeTo(speed,opacity,callback)
$(this).fadeTo(100,0.3);
7. fadeToggle(): switch the visibility of elements through opacity, syntax structure
fadeToggle(speed,easing,callback);
8. animate(): custom animation, grammatical structure
animate(params,speed,callback);
params: a mapping containing style attributes and values, such as: {left: "400px", height: "500px"}
speed: speed parameters, optional
callback: executed after the animation is completed Function, optional.
In addition, animate can add accumulation and subtraction animations, such as:
$(function(){ $("p").click(function(){ $(this).animate({left:"+=500px"},300) }); }); Use the first in animate One parameter is easy to achieve the effect of executing multiple animations at the same time, and you need to execute the animations in sequence, you only need to write the animate animation in sequence, and you can also use chain operations
$(this).animate({left:“500px”},300);
$(this).animate({height:“500px”},300);
equivalent to
$(this).animate({left:“500px”},300).animate({height:“500px”},300);
9. Determine whether the element is in an animated state
if(!$("p").is(":animated")){ //There is no program executed when it is in the animation state } 10. Delayed animation Delayed animation uses the delay() method
$(this).animate({left:“500px”},200).delay(1000);