1 Overview 1. What is JQuery? JQuery is a JavaScript library that simplifies JS operations and extends JS functions. 2. Separation principle JQuery follows the principle of separation of import and use, that is, use one to import and create another < ;script> tag is used. </span></p> <h2><span style="font-size: 18px"> 3. Basic syntax </span></h2> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(selector).action();</pre><div class="contentsignin">Copy after login</div></div></div> <p><span style="font-size: 18px"> Get the HTML element and perform the specified operation on the element. </span></p> <h1><span style="font-size: 14pt">Second selector</span></h1> <h2><span style="font-size: 18px"> 1. Basic selector</span></h2> <p><span style="font-size: 18px"> is the same as CSS selector. JQuery basic selector selects HTML elements based on tag, category, and id. </span></p> <h2><span style="font-size: 18px"> 2. Combined selector</span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">$(selector01,selector02,selectorN): Get the items that meet any condition A collection of elements. </span></p></li> <li><p><span style="font-size: 18px">$(selector01selector02): Get elements that meet multiple conditions at the same time. </span></p></li> <li><p><span style="font-size: 18px">$(selector01 selector02): Get the elements that satisfy the second condition among the child elements of the element that satisfies the first condition. </span></p></li> </ul> <h2><span style="font-size: 18px"> 3. Attribute selector </span></h2> <p><span style="font-size: 18px"> Select elements based on attributes. </span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> $("[attr]"): Get all elements with attr attribute. </span></p></li> <li><p><span style="font-size: 18px"> $("[attr='value']"): Get all elements with the specified attribute value. </span></p></li> <li><p><span style="font-size: 18px"> $("[attr!='value']"): Get all elements with the specified attribute and whose value is not equal to the specified value. </span></p></li> <li><p><span style="font-size: 18px"> $("[attr$='value']"): Get all elements with the specified attribute and whose value ends with the specified value. </span></p></li> <li><p><span style="font-size: 18px"> $("[attr^='value']"): Get all elements with the specified attribute and whose value starts with the specified value. </span></p></li> </ul> <h2><span style="font-size: 18px"> 4.$(this) </span></h2> <p><span style="font-size: 18px"> is usually used inside a method to obtain the current object, that is, the method call By. </span></p> <h1><span style="font-size: 14pt">Three element operations</span></h1> <h2><span style="font-size: 18px"> 1. Element creation</span></h2> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$("<tag>")</pre><div class="contentsignin">Copy after login</div></div></div> <p><span style="font-size: 18px"> The HTML tag used by JQuery when creating an object can be just the beginning <tag> of the tag, or it can include both the beginning and end <tag></tag>, or it can also </span><span style="font-size: 18px"> include details, such as</span></p> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><tag style="xxxxx">content</tag></pre><div class="contentsignin">Copy after login</div></div></div> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> 不能够直接使用标签名创建对象,即$("tagName")不能创建对象,这一点不同于JavaScript。</span></p></li> <li><p><span style="font-size: 18px"> 不能够单独使用标签结束标识创建对象,即$("</tag>")不能创建对象。</span></p></li> </ul> <h2><span style="font-size: 18px"> 2.获取内容 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">text():设置或者返回所选元素的文本内容。</span></p></li> <li><p><span style="font-size: 18px">html():设置或者返回所选元素的内容(包含HTML标签)。</span></p></li> <li><p><span style="font-size: 18px">val():设置或者返回所选字段的值。</span></p></li> </ul> <h2><span style="font-size: 18px"> 3.内部插入 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> append():在结尾(后端)添加子元素。</span></p></li> <li><p><span style="font-size: 18px"> prepend():在开头(前端)添加子元素。</span></p></li> <li><p><span style="font-size: 18px"> appendTo():将操作对象作为子对象添加到参数对象结尾。</span></p></li> </ul> <h2><span style="font-size: 18px"> 4.外部插入 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> before():在前面添加兄弟元素。</span></p></li> <li><p><span style="font-size: 18px"> after():在后面添加兄弟素。</span></p></li> <li><p><span style="font-size: 18px"> insertBefore():在前面插入兄弟元素。</span></p></li> <li><p><span style="font-size: 18px"> insertAfter():在后面插入兄弟元素。</span></p></li> </ul> <h2><span style="font-size: 18px"> 5.删除元素 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">remove():删除自身及子元素。</span></p></li> <li><p><span style="font-size: 18px">empty():删除子元素。</span></p></li> <li><p><span style="font-size: 18px">remove("根据基本选择器选择指定元素"):删除基本选择器中指定元素。</span></p></li> </ul> <h2><span style="font-size: 18px"> 6.获取子元素 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">children():获取全部子元素。</span></p></li> <li><p><span style="font-size: 18px">children("基本组合选择器"):获取具有自定标签与指定属性的子元素。</span></p></li> </ul> <h2><span style="font-size: 18px"> 7.筛选 </span></h2> <p><span style="font-size: 18px"> 如果一个选择器返回的结果不是一个对象,而是多个对象构成的集合,可以使用以下方法获取集合中的指定对象:</span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> eq(index):获取集合中指定索引位置的对象,索引从0开始。</span></p></li> <li><p><span style="font-size: 18px"> filter(":even"):获取集合中所有索引为奇数的对象。</span></p></li> <li><p><span style="font-size: 18px"> filter(":odd"):获取集合中所有索引为偶数的对象。</span></p></li> <li><p><span style="font-size: 18px"> slice(index):获取索引大于指定值的对象。</span></p></li> <li><p><span style="font-size: 18px"> slice(0,index):获取索引小于指定值的对象。</span></p></li> <li><p><span style="font-size: 18px"> not(selector):选择指定对象以外的全部对象。</span></p></li> </ul> <h1><span style="font-size: 14pt">四 属性操作</span></h1> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">attr("attrName"):获取属性值。</span></p></li> <li><p><span style="font-size: 18px">attr("attrName","attrValue"):修改属性值。</span></p></li> <li><p><span style="font-size: 18px">removeAttr("atrrName"):删除属性。</span></p></li> </ul> <h1><span style="font-size: 14pt">五 常用操作</span></h1> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">遍历对象:$.each(obj,function(i,n)),i是索引,n是当前遍历子对象。</span></p></li> <li><p><span style="font-size: 18px">获取单选按钮与复选框的选择状态:$(this).is(":checked")。</span></p></li> </ul> <h1><span style="font-size: 14pt">六 常用标签及其操作</span></h1> <h2><span style="font-size: 18px"> 1.select </span></h2> <h3><span style="font-size: 18px">⑴增加选项 </span></h3> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(selector).options[index]=new Option(name,value);//按照索引增加$(selector).add(option,before);//按照指定位置增加</pre><div class="contentsignin">Copy after login</div></div></div> <h3><span style="font-size: 18px">⑵删除选项</span></h3> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(selector).length=0;//全部删除$(selector).remove(index);//按索引删除</pre><div class="contentsignin">Copy after login</div></div></div> <h3><span style="font-size: 18px">⑶option</span></h3> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">option.index: Set and return the index attribute value. </span></p></li> <li><p><span style="font-size: 18px">option.text: Set and return text. </span></p></li> <li><p><span style="font-size: 18px">option.value: Set and return value. </span></p></li> <li><p><span style="font-size: 18px">option.selected: Set and return the selection status, true/false. </span></p></li> </ul> <p> </p>