. 1 <! DOCTYPE HTML> 2 <HTML> . 3 <head> . 4 <Meta charset = "UTF-. 8"> . 5 <title> </ title> . 6 <Script type = "text / JavaScript" the src = "jQuery-3.3. 1.min.js "> </ Script> . 7 </ head> . 8 <body> . 9 <Script type =" text / JavaScript "> 10 // detect whether the successful introduction jQuery file . 11 the console.log ($); 12 is 13 is // foundation selector 14 // acquires the element ID by document.getElementById (); 15 // $('#logo').css('border','solid 2px red'); 16 // acquired by the element tag name . 17 @ $ ( 'div') CSS ( 'background-Color', 'Red');. 18 is // acquired by the class name of the class elements . 19 // . $ ( 'Logo ') .css (' background-Color ',' Red '); 20 is // comma parallel acquisition 21 is // $ (' # Item ',' # ITEM1 '.) CSS (' background-Color ',' Red ') ; 22 // space level get 23 // $ ( '# # ITEM1 ITEM1') CSS ( 'background-Color', 'Red').; 24- 25 // filtration to obtain 26 // get the first element 27 // $ ( 'Li: First') CSS ( 'background-Color', '# 369');. 28 // Get the last element 29 // $ ( 'Li: Last') CSS ( 'background-Color',. '369'); 30 // Get the specified index element, indexed from zero 31 is // $. ( 'Li: EQ (. 7)') CSS ( 'background-Color', '# 369'); 32 // $ ( 'Li') EQ (. 7) .css ( 'background-Color', '# 369');. 33 is // Get element containing the specified text 34 is // $ ( 'Li: the contains (country)'). CSS ( 'background-Color', '# 369'); 35 // acquired by the elements comprising the specified property,Is acquired by the attribute 36 // $ ( 'Li [name = Y]') CSS ( 'background-Color', '# 369');. 37 [ 38 // paternity obtaining 39 // get all of the subelements 40 // $ ( '# Images') Children () CSS ( 'background-Color', '# 369');.. 41 is // get the first sub-element 42 is // $ ( 'UL Li: First-child') CSS ( 'background-Color', '# 369');. 43 is // Get the last child element 44 is // $ ( 'UL Li: last - child '.) CSS (' background-Color ',' # 369 '); 45 // Get the specified index from the beginning child element index 46 is // $ (' UL Li: child-Nth (. 3). ') CSS ( 'background-Color', '# 369'); 47 // the element acquires a sibling element 48 // $ ( '#f').prev().css('background-color','#369'); 49 // Get the next element a sibling element 50 // $ ( '# F') Next () CSS ( 'background-Color', '# 369');.. 51 is // get all siblings (siblings are not contains its own) 52 is // $ ( '# F') SIBLINGS () CSS ( 'background-Color', '# 369');.. 53 is 54 is // Get parent element 55 // $ ( '# F') . .parent () css ({background -color: '# 369', width: '20px', border: '1px solid red'}); // simultaneously acquire a variety of styles and modifications 56 // Get ancestor level elements 57 // $ ( '# F') Find ( '# All') CSS ( 'background-Color', '# 369')..; 58 // Find the specified child element in the parent element 59 // $ ( '# F') Find ( 'W.') CSS ( 'background-Color', '# 369')..; 60 61 is 62 is // add class attributes to any element by the jQuery 63 is // $ ( 'div'). AddClass ( 'ITEM1 .item2.') CSS ( 'background-Color', '# 369');.. 64 @ by jQuery delete the class attribute Note: If you do not want to delete the name of the class name to delete all the properties of the class 65 // $ ( 'div') removeClass ( 'div');. 66 // remove multiple styles 67 // . $ ( 'div') removeClass ( 'div div2'); 68 // repeat the pattern switching anotherClass 69 70 71 is // Text Action 72 // html () is provided to remove or html content 73 // remove html content 74 // HTM $ $ = var ( '# DIV1') html ();. 75 // set html content 76 // $ ( '# div') html ( '<span> Add Text </ span>');. 77 78 // attr () remove or set a property value of 79 @ extracted image address 80 // var the Src = $ ( '# IMG1') attr ( 'the src');. 81 // set the image address and alt properties 82 // . $ ( '# IMG1') attr ({the src: 'test.jpg', Alt: 'the Test Image'}); 83 // user class attribute set 84 // $ ( '# IMG1'). attr ( 'class', 'all '); 85 // may be custom attributes 86 // $ ( '# ABC') attr ( 'Love', 'ILOVEYOU').; 87 88 // removeattr()删除属性 89 // $('#abc').removeAttr('class'); 90 // ... 91 92 </script> 93 </body> 94 </html>