The sharp jquery

Today always find something to learn, in fact, there are a lot of things to record, slowly write, read today, these days to read this book, here to remember some points

Remember from the beginning.

Chapter One Understanding jquery

$ is the shorthand for jquery.

$ (function () {}) is $ (document). Shorthand for Ready (function () {})

Three points compared to window.onload (timing of execution, number of writes, no shorthand)

DOM---Document Object model, BOM---Browser object model

Chapter II jquery Selector

Same as CSS selector

Basic selector:

<1> $ ("#test") ID Selector

<2> $ (". Test") class selector

<3> $ ("P") Tag Selector

<4>$ ("*") Select all elements

<5>$ ("Div,span,.myclass") combination------can be combined, this is very useful

Hierarchy selector:

<1>$ ("div span") Select the span descendant element in the Div

<2>$ ("div >span") Select child elements of span in Div

<3>$ (". One + div") Select one of the next DIV elements ———— equivalent to $ (". One"). Next ("div")//Sibling

<4>$ ("#two ~ div") Select the trailing all <div> sibling element with ID ———— equivalent to $ ("#two"). Nextall ("div"); does not contain #two

Filter selector:

<1>$ ("Div:first") the first div in all DIV elements
<2>$ ("Div:last") the last div in all DIV elements
<3>$ ("Input:not (. MyClass)") is not a <input> element of class MyClass
<4>$ ("Input:even") index to an even number of input//can do interlaced color
<5>$ ("input:odd") index is an odd input
<6>$ ("Input:eq (1)") Index of input of 1 —————— index starting from 0//$ (' div:eq (1) '). CSS (' backgroundcolor ', ' red '); Single Choice
The <7>$ ("INPUT:GT (1)") Index of input greater than 1 starts from 0 and does not contain 1//$ (' #one a:gt (0) '). CSS (' Color ', ' red '); Down number
<8>$ ("input:lt (1)") index less than 1 input starting from 0// up number
<9>$ (": Header") all <10>$ ("div:animated") is performing an animated <div>
<11>$ ("Div:contains (' I ')") contains the text ' I ' div
<12>$ ("Div:empty") empty div
<13>$ ("Div:has (P)") contains <p> <div>//$ (' #one a:has (span) '). CS    S (' Color ', ' red '); A that contains span  
<14>$ ("Div:parent") contains sub-elements of the <div>
<15> $ (": hidden") all invisible elements
<16>$ ("div:visible") all visible <div>
<17>$ ("Div[id]") with id attribute <div>
<18>$ ("div[title=test]") <div> with title test
<19> $ ("div [title!=test]") title is not test <div>
<20> $ ("div[title^=test]") title div starting with "test"
<21>$ ("div [title$=test]") title the div ending with "test"
<22>$ ("Div[title*=test]") title contains the div of test
<23>$ ("div[id][title$=test]") combination multi-criteria selection
<24>:nth-child (index/even/odd/equation) ———————— index starting from 1
<25>:first-child
<26>:last-child
<27>: Only-child
<28> $ ("#form1: Enabled") all available elements in a form with id "Form1"
<29>$ ("#form2:d isable")
<30>$ ("input:checked") all selected <input> elements
<31>$ ("select:selected") all selected <select> elements
<32>$ (": Input") all <input> <textarea><select><button> elements
<33>$ (": Text") all single-line text boxes
<34>$ (":p assword") All password boxes
<35>$ (": Radio") all the radio boxes
<36>$ (": CheckBox") all check boxes
<37>$ (": Submit") all the Submit buttons
<38>$ (": Image") All image buttons
<39>$ (": RESET") all reset buttons
<40>$ (": Button") all buttons
<41>$ (": File") all upload domains
<42>$ (": Hidden") all invisible elements

Some are used, some are not used, here is a record

In order to practice writing a small example, select all, all do not choose

<input type="Button"Value='Quanxuan'/><input type="Button"Value='Quanbuxuan'/><input type="checkbox"/><input type="checkbox" checked='checked'/><input type="checkbox"/><script>$('Input[value=quanxuan]'). Click (function () {$ ('input:gt (1)'). Prop ('checked',true)})$('Input[value=quanbuxuan]'). Click (function () {$ ('input:gt (1)'). Prop ('checked',false)})</script>

Of course, this book begins with the great advantage of jquery being that it can be chained, so it can be written like this

$ ('Input[value=quanxuan]'). Click (function () {    $ ('input:gt ( 1). Prop ('checked',true)}). Next (). Click (Function () {    $ ('input:gt (1)'). Prop ('checked' ) ,false)})

Chapter III DOM manipulation in jquery

1. Deleting nodes

$ (' ul li:eq (1) '). Remove (); After getting the second <li> element node, remove it from the Web page

$ (' ul Li '). Remove (' li[title!= pineapple] '); You can do selective deletions.

Empty () Empties node contents

2. Replication nodes

Clone ()//$ (' ul Li '). Clone (). AppendTo (' ul '); Copy Li and append to UL Copy the event if Clone (True), if true, copies the events he binds (by default, the event is not copied)

The sharp jquery