JQuery method Query

1. Core: $ is an alias of the jquery class. $ () constructs a jquery object. jQuery's core functions are implemented through this function. Everything in jQuery is based on this function, or is using this function in some way. 21, $ {expression}: According to this expression... SyntaxHighlighter. all ();

1. Core: $ is an alias of the jquery class. $ () constructs a jquery object. jQuery's core functions are implemented through this function. Everything in jQuery is based on this function, or is using this function in some way.

21, $ {expression}: Find all matching elements based on this expression.

3 eg: $ ("div> p"); find all p elements, and these p elements are subelements of div.

4 $ ("input: radio", document. forms [0]); find all the radio buttons in the first form of the document.

5 $ ("div", xml. responseXML); find all div elements in an xml document returned by ajax.

62. $ (html Tag string): Creates dom elements encapsulated by the jquery object based on the provided html string.

7 eg: $ ("

Hello

"). AppendTo (" body ");

8. CreateThe element must set the type attribute at the same time.

9 $ ("")

10

113, $ (dom element): converts one or more dom elements to jquery objects.

12 eg: background (document.body).css ("background", "black"); set the page background color

134, $ (document). ready (function () {}) == (function () {}); Code automatically executed after the page is loaded.

14

15. jquery object access. Eq returns a jquery object. Only the jquery method can be used. get returns a dom Element Object. Only the dom method can be used.

16 1. $ (dom element). each (function () {}): execute a function using each matching element as the context.

17 2. $ (dom element). size () = $ (dom element). length; number of elements in the object. Eg:, jquery code: $ ("img"). size (); returns 2

18 3. context: return the original DOM node content that is passed to jQuery (), that is, the second parameter of jQuery. If not specified, context points to the current document ).

19 4. $ (dom element). get (): gets a set of all matching dom elements. This function is very useful if you want to directly operate DOM objects instead of jQuery objects.

20 5. $ (dom element). get (index): gets a matching element.

21 6. $ (dom element). index (): searches for elements that match the object indicated by the parameter and returns the index value of the corresponding element.

22

23. Plug-in mechanism:

241. jQuery. fn. extend (object); extends the jQuery element set to provide a new method for a dom element.

25 eg: jQuery. fn. extend ({

26 check: function () {return this. each (function () {this. checked = true ;});},

27 uncheck: function () {return this. each (function () {this. checked = false ;});}

28 });

29 call:

30 $ ("input [type = checkbox]"). check ();

31 $ ("input [type = radio]"). uncheck ();

32

332, $. extend (object); used to add new functions to the jQuery namespace for all dom elements.

34 $. extend ({

35 min: function (a, B) {return

36 max: function (a, B) {return a> B? A; B ;}

37 });

38 call: $. max (10, 20 );

39

40. Selector

41 basic:

42 1. $ ("# id"): matches an element with a given ID.

43 2. $ ("dom element name"): all elements are matched based on the given element name.

44 3. $ (". Class name"): matches elements based on the given Class.

45 4, $ ("*"): matches all elements.

46 5. $ ("dom element. class name"): select the dom element whose class attribute is the specified class name.

47 6. $ (". stripe tr"): obtain all rows under the table element whose class attribute is stripe.

48

Level 49:

50 1. $ ("ancestor descendant"): matches all descendant elements under a given ancestor element.

51 2. $ ("parent> child"): match all child elements under a given parent element.

52 3. $ ("prev + next"): match all the next elements following the prev element.

53 4, $ ("prev ~ Siblings "): match all the siblings (same level) elements after the prev Element

54

55 simple:

561, $ ("tr: first") matches the first element found

572, $ ("tr: last") matches the last element found

583, $ ("input: not (: checked)") Remove all elements that match the given Selector

594, $ ("tr: even") matches all the elements with an even index value and starts counting from 0.

605, $ ("tr: odd") matches all elements with an odd index value and starts counting from 0.

616, $ ("tr: eq (1)") matches an element of a given index value

627, $ ("tr: gt (0)") match all elements greater than the given index value

638, $ ("tr: lt (2)") match all elements smaller than the given index value

64 content:

651, $ ("div: contains ('john')") match the element containing the given text

662, $ ("div: has (p)") matches all div elements containing p elements

673, $ ("td: empty") Find all empty elements that do not contain child elements or text

68

69 visibility:

701, $ ("tr: visible") Find all visible tr Elements

712, $ ("tr: hidden") matches all the invisible elements. If the type attribute of the input element is "hidden", it will also be matched

72 attributes:

731, $ ("div [id]") to find all div elements containing the id attribute

742, $ ("input [name = 'newsletter ']") Find all the input elements whose name attribute is newsletter

753, $ ("input [name! = 'Newsletter '] ") Find all input elements whose name attribute is not newsletter

764, $ ("input [name ^ = 'News']") Find all input elements whose names start with 'News'

775, $ ("input [name $ = 'letter']") Find all input elements whose names end with 'letter'

786, $ ("input [name * = 'man']") Find all input elements whose names contain 'man'

797, $ ("input [id] [name $ = 'man']") Find all attributes that contain id and whose name attribute ends with man

80 child elements:

811, nth-child (even)/: nth-child (odd)/: nth-child (3n)/: nth-child (2 )/: nth-child (3n + 1)/: nth-child (3n + 2) matches the nth child or parity element under the parent Element

822, $ ("ul li: first-child") Search for the first li in each ul

833, $ ("ul li: last-child") Search for the last li

844, $ ("ul li: only-child") in ul, find the li

85 form:

861, $ (": input") to find all input Elements

872, $ ("text") match all single row text boxes

883, $ (": password") match all password boxes

894, $ ("radio") match all radio buttons

905, $ ("checkbox") match all check boxes

916, $ ("submit") match all submit buttons

927, $ ("image") match all image Domains

938, $ ("button") match all buttons

949, $ ("file") matches all file Fields

9510, $ ("hidden") matches all invisible elements, or elements whose type is hidden

96 form object attributes:

971, $ ("input: checked") match all selected elements (check box, single-choice, etc., excluding option in select)

982, $ ("input: enabled") matches all available elements

993, $ ("input: disabled") matches all unavailable Elements

1004, $ ("select option: selected") matches all selected option Elements

101

102

103. Attribute operations

104 operation attributes:

105 1. $ ("img"). attr ("src"); return the src attribute value of the first image in the document.

106 2. $ ("img"). attr ("src", "test.jpg"); set a property value for all matching elements

107 3. $ ("img"). attr ("title", function () {return this. src}); set a calculated attribute value for all matched elements

108 4. $ ("img"). removeAttr ("src"); delete an attribute from each Matching Element

109 5. $ ("img "). attr ({src: "test.jpg", alt: "Test Image"}); sets an object in the form of "name/value" to attributes of all matching elements.

110 perform operations on CSS:

111 1. $ ("p"). addClass ("selected"); Add the specified class name for each Matching Element

112 2. $ ("p"). removeClass ("selected"); Delete All or specified classes from all matching elements. One or more CSS class names to be deleted must be separated by Spaces

113 $ ("p"). removeClass (); Delete all classes of matching elements

114 3. $ ("p"). toggleClass ("selected"); Delete (ADD) a class if it exists (does not exist)

115 4. var count = 0;

116 $ ("p"). click (function (){

117 $ (this). toggleClass ("highlight", count ++ % 3 = 0 );

118}); Add the 'selected' class every three clicks

119HTML code:

120 1. $ ("div" ).html (); obtain the html content of the First Matching Element

121 2. $ ("div" pai.html ("

Hello Again

"); Set the html content of each Matching Element

122 text:

1231, $ ("p"). text (); get the content of all matching elements

1242, $ ("p"). text ("SomeNew text. "); set the text content of all matching elements

Value 125:

1261, $ ("# single"). val () Get the current value of the First Matching Element.

1272, $ ("input"). val ("hello world! "); Set the value of each Matching Element

128

129 screening

130 filter:

131 1. $ ("p"). eq (1) gets the nth element. The position of this element is counted from 0.

132 2. if ($ (this). hasClass ("protected") checks whether the current element contains a specific class. if yes, true is returned.

133 3. $ ("p"). filter (". selected") filters the set of elements that match the specified expression.

134 4. is (expr) uses an expression to check the selected element set. If at least one element matches the given expression, true is returned.

135 5. $ ("p"). not ($ ("# selected") [0]) deletes elements that match the specified expression

136 search:

137 1. $ ("div"). children (); obtain an element set that contains all the child elements of each element in the matched element set.

138 2. $ ("p"). find ("span"); search for all elements that match the specified expression. This function is a good way to find the child element of the element being processed.

139 3. $ ("p"). next (); obtain an element set that contains the peer element next to each element in the matched element set.

140 4, $ ("p"). prev (); obtain a set of elements that match the previous peer element next to each element in the element set.

141 5, $ ("div"). parent; gets a set of elements that contain the unique parent element of all matching elements.

142 6. $ ("span"). parents; find all ancestor elements of each span element.

143 7. $ ("div"). siblings (); obtain an element set that contains all unique peer elements of each element in a matched element set

144

145 document handling

146 internal insertion:

147 1, $ ("p"). append ("Hello"); Append content to the internal tail of each Matching Element

148 2, $ ("p"). prepend ("Hello"); Append content to the front of each Matching Element

149 2. $ ("p"). appendTo ("# foo"); append all paragraphs to the element with the ID value of foo.

150 external insertion:

151 1, $ ("p"). after ("Hello"); Insert content after each Matching Element

152 2, $ ("p"). before ("Hello"); Insert content before each Matching Element

153 packages

154 1. $ ("p"). wrap (""); wrap all matching elements with structured tags of other elements.

155 replace:

156 1, $ ("p"). replaceWith ("Paragraph."); Replace all matched elements with the specified HTML or DOM element.

157 delete:

158 1. $ ("p"). empty (); Delete all child nodes in the matched element set.

159 2, $ ("p"). remove (); Delete all matching elements from the DOM

160. CSS operations

161 CSS:

162 1. $ ("p" ).css ("color"); obtain the value of the color Style attribute of the first section.

163 2. $ ("p" ).css ({color: "# ff0011", background: "blue "}); set a "name/value pair" object to the style attribute of all matching elements.

164 3, $ ("p" ).css ("color", "red"); In all matching elements, set the value of a style attribute

165 location:

166 1. var offset = p. offset (); get the relative offset of the matching element in the current view. The returned object contains two integer attributes: top and left. This method is only valid for visible elements.

167 2. var position = p. position (); get the offset of the matching element relative to the parent Element

Size: 168:

169 1, $ ("p"). height (); obtain the current calculated height (px) of the First Matching Element ).

170 2, $ ("p"). height (20); set the CSS height (hidth) attribute value for each Matching Element

171 3, $ ("p"). width (); obtain the current calculated width (px) of the First Matching Element ). $ (Window). width (); get the width of the current window

172 4, $ ("p"). width (20); set the CSS width attribute value for each Matching Element

173 IX. effect www.2cto.com

174 basic:

175 1. $ ("p"). show () shows hidden matching elements

176 2. $ ("p"). hide () hides the displayed Elements

177 3, $ ("p"). show ("slow"); displays all matching elements in an elegant animation, and triggers a callback function after the display is complete.

178 speed (String, Number): A String ("slow", "normal", or "fast") with one of the three predefined speeds, or a millisecond value indicating the animation duration (for example: 1000)

179 callback (Function): (Optional) The Function executed when the animation is completed. Each element is executed once.

180

181 use a quick animation to show hidden paragraphs, lasting 200 ms. And then execute feedback!

182

Hello

183 jQuery code:

184

185 $ ("p"). show ("fast", function (){

186 $ (this). text ("Animation Done! ");

187 });

188 4. $ ("p"). hide ("slow"); hides all matching elements in an elegant animation and triggers a callback function after the display is complete.

189 5. $ ("p"). toggle () switches the visible state of the element

190 6. $ ("p"). toggle ("slow"); switches all matching elements with an elegant animation, and triggers a callback function after the display is complete.

191 fade in and out:

1921, $ ("p"). fadeIn ("slow"); implements the fade-in effect of all matching elements by changing the opacity, and triggers a callback function after the animation is completed.

1932, $ ("p "). fadeOut ("slow"); fades out all matching elements by changing opacity, and an optional callback function is triggered after the animation is completed.

1943, $ ("p "). fadeTo ("slow", 0.66); $ ("p "). fadeTo ("slow", 0.66); Incrementally adjusts the opacity of all matching elements to the specified opacity, and triggers a callback function after the animation is complete.

195 customization:

196 1, $ ("# block"). animate ({

197 width: "90% ",

198 height: "100% ",

199 fontSize: "20em ",

200 borderWidth: 10

201}, 1000); used to create a UDF for Custom Animation.

202

203

204 events

205 event handling:

206 1, $ ("p "). bind ("click", function () {alert ($ (this ). text () ;}); binds an event processor function to a specific event (like click) that matches each element.

207 2, $ ("p "). one ("click", function () {alert ($ {this }. text ();}) When all paragraphs are clicked for the first time, all their texts are displayed.

208 3. trigger (type, [data]) triggers certain events on each Matching Element

209 event Delegate: $ ("p"). live ("click", function () {$ (this). after ("

Another paragraph!

");});. Bind an event handler (such as a click event) to all current and future matching elements ). You can also bind custom events. Unlike bind (), live () can only bind one event at a time.

210

211

212 event switching: a method that imitates a hover event (move the mouse over an object and remove it)

213 $ ("td"). hover (

214 function (){

215 $ (this). addClass ("hover ");

216 },

217 function (){

218 $ (this). removeClass ("hover ");

219}

220); add a specific class to the table with the mouse over

221

2224 call the function after each click.

223 $ ("td"). toggle (

224 function (){

225 $ (this). addClass ("selected ");

226 },

227 function (){

228 $ (this). removeClass ("selected ");

229}

230 );

231

2325 events:

233 1. $ ("p"). blur (); triggers a blur event for each Matching Element

234 2, $ ("p"). blur (function () {alert ("Hello World! ") ;}); Binds a handler to each blur event that matches the element.

235 3. change (); the change event is triggered when the element loses its focus, or when its value changes after it obtains the focus.

236 4. change (fn); bind a handler to the change event of each matching element.

237 5, $ ("p"). click (); trigger the click event of each Matching Element

238 6. $ ("p"). click (function () {}); bind a processing function to the click event of each Matching Element

239 7. dblclick (); The dblclick event is triggered when you double-click the same element.

240 8, $ ("p"). dblclick (function () {alert ("Hello World! ") ;}); Bind a handler to each dblclick event that matches the element.

241 9. $ (document). ready (function () {$ ("# login"). focus () ;}); triggers the focus event for each matching element.

242 10, $ ("input [type = text]"). focus (function () {this. blur () ;}); binds a handler to the focus event of each matching element.

243 11. keydown (); The keydown event is triggered when the keyboard is pressed.

244 12. keydown (fn); bind a handler to the keydown event of each matching element.

245 13. keypress (); trigger a keypress event for each Matching Element

246 14. keypress (fn); bind a handler to each keypress event that matches the element.

247 15. keyup (); trigger the keyup event of each Matching Element

248 16. keyup (fn); bind a handler to each keyup event that matches the element.

249 17. mousedown ();

250 18. mouseup ();

251 19. mousemove ();

252 20. mouseover ();

253 21. mouseout ();

254 22, $ ("form: first"). submit (); submit the first form on this page.

255 23, $ ("form"). submit (function () {return false ;}); stops Page Submission.

256

257

258. ajax

259 ajax request:

260 1. There is a general method: $. ajax (prop); prop is a hash table, which can pass the following key/value:

261 (String) type: Data Transmission Method (get or post ).

262 (String) url: the url of the data request page

263 (String) data: the parameter String used to pass data. It is only applicable to post.

264 (String) dataType: the format of the data to be returned (for example, "xml", "html", "script", or "json ")

265 (Boolean) ifModified: when the last request changes accordingly, it is returned successfully. The default value is false.

266 (Number) timeout: Set the request time delay time. For more information, see $. ajaxTimeout.

267 (Boolean) global: whether to trigger the ajax global event for the current request. The default value is true.

268 (Function) error: the Function triggered when the request fails.

269 (Function) success: triggers a Function when the request is successful

270 (Function) complete: the departure Function after the request is complete

271

272 2. $. get (url, params, callback) uses the get method to pass Parameters to remote pages. After the request completes the post-processing function, all parameters except the url can be selected!

273 eg: $. get ("ajax. asp ",

274 {name: "young", age: "25 "},

275 function (data) {alert ("Data Loaded:" + data );}

276)

277 3. $. getJSON (url, params, callback) transmits parameters to a remote json object in get mode, and the post-processing function callback

278 4. $. post (url, params, callback) transmits parameters to remote pages in post mode, and the post-processing function callback

279

280

281

282 II. Tools

283 operations on arrays and objects:

284 1. $. each (obj, callback); general sample method, which can be used for example object and array. The callback function has two parameters: the first is the object's member or array index, and the second is the corresponding variable or content.

285 $. each ([0, 1, 2], function (I, n) {alert ("Item #" + I + ":" + n );});

286 2. jQuery. grep (array, callback, [invert]); Use the filter function to filter array elements. This function must pass at least two parameters: the array to be filtered and the filter function.

287 3, $. map (array, callback); convert the elements in one array to another

288 4, $. inArray (value, array); determine the position of the first parameter in the array (if not found,-1 is returned), starting from 0.

289 5, $. merge ([, 2], [, 4]); merge two arrays. The returned result modifies the content of the first array. The elements of the first array are followed by the elements of the second array without removing repeated items.

290 6. $. unique (array); Delete repeated elements in the array

291 7, $. trim ("hello, how are you? "); Removes spaces at the beginning and end of the string.

292 8. $. isArray (obj); test whether the object is an array.

293 9. $. isFunction (obj); test whether the object is a function

294

295 URL:

296 1. $. param (obj); serialize an array or object of form elements. Is the core method of. serialize.

297 eg: var params = {width: 1680, height: 1050}; var str = jQuery. param (params );

298

299 2. $ ("form"). serialize (); the content of the sequence form is a string used for Ajax requests.

300

301 thirteen. jquery Operation Ticket

302 if ($ ("input [type = 'Radio ']: checked ")){

303 var tt = $ ("input [name = 'chk']: checked"). val ();

304}

305

306 14. jquery operation check box

307 var chkArr = "";

308 $ (". cc: checked"). each (function (){

309 chkArr + = $ (this). val () + "| ";

310 });

311

312 select all check boxes for jquery implementation

313 var checked = $ ("# allchk"). attr ("checked ");

314 $ (". ww"). each (function (){

315 if ($ (this). attr ("checked ")! = Checked) {$ (this). click ();}

316 });


From greatxj