一 概述
1.JQuery是什么？
JQuery是一个JavaScript库，简化了JS操作，扩展了JS功能。
2.分离原则
JQuery遵循导入与使用分离的原则，即使用一个<script>导入，另建一个<script>标签使用。
3.基本语法
$(selector).action();
获取HTML元素，对该元素执行指定的操作。
二 选择器
1.基本选择器
同CSS选择器相同，JQuery基本选择器根据标签、类别、id选择HTML元素。
2.组合选择器
- $(selector01,selector02,selectorN)：获取满足任何一个条件的元素的集合。
- $(selector01selecctor02)：获取同时满足多个条件的元素。
- $(selector01 selector02)：获取满足第一个条件的元素的子元素中满足第二个条件的元素。
3.属性选择器
根据属性选择元素。
- $("[attr]")：获取带attr属性的全部元素。
- $("[attr='value']")：获取具有指定属性值的全部元素。
- $("[attr！='value']")：获取具有指定属性并且其值不等于指定值的全部元素。
- $("[attr$='value']")：获取具有指定属性并且其值以指定值结尾的全部元素。
- $("[attr^='value']")：获取具有指定属性并且其值以指定值开头的全部元素。
4.$(this)
通常用在方法内部，获取当前对象，即方法的调用者。
三 元素操作
1.元素创建
$("<tag>")
JQuery创建对象时使用的HTML标签，可以仅仅是标签的开头<tag>，也可以同时包含开头与结尾<tag></tag>，还可以包含详情，如
<tag style="xxxxx">content</tag>
- 不能够直接使用标签名创建对象，即$("tagName")不能创建对象，这一点不同于JavaScript。
- 不能够单独使用标签结束标识创建对象，即$("</tag>")不能创建对象。
2.获取内容
- text()：设置或者返回所选元素的文本内容。
- html()：设置或者返回所选元素的内容（包含HTML标签）。
- val()：设置或者返回所选字段的值。
3.内部插入
- append()：在结尾（后端）添加子元素。
- prepend()：在开头（前端）添加子元素。
- appendTo()：将操作对象作为子对象添加到参数对象结尾。
4.外部插入
- before()：在前面添加兄弟元素。
- after()：在后面添加兄弟素。
- insertBefore()：在前面插入兄弟元素。
- insertAfter()：在后面插入兄弟元素。
5.删除元素
- remove()：删除自身及子元素。
- empty()：删除子元素。
- remove("根据基本选择器选择指定元素")：删除基本选择器中指定元素。
6.获取子元素
- children()：获取全部子元素。
- children("基本组合选择器")：获取具有自定标签与指定属性的子元素。
7.筛选
如果一个选择器返回的结果不是一个对象，而是多个对象构成的集合，可以使用以下方法获取集合中的指定对象：
- eq(index)：获取集合中指定索引位置的对象，索引从0开始。
- filter(":even")：获取集合中所有索引为奇数的对象。
- filter(":odd")：获取集合中所有索引为偶数的对象。
- slice(index)：获取索引大于指定值的对象。
- slice(0,index)：获取索引小于指定值的对象。
- not(selector)：选择指定对象以外的全部对象。
四 属性操作
- attr("attrName")：获取属性值。
- attr("attrName","attrValue")：修改属性值。
- removeAttr("atrrName")：删除属性。
五 常用操作
- 遍历对象：$.each(obj,function(i,n))，i是索引，n是当前遍历子对象。
- 获取单选按钮与复选框的选择状态：$(this).is(":checked")。
六 常用标签及其操作
1.select
⑴增加选项
$(selector).options[index]=new Option(name,value);//按照索引增加 $(selector).add(option,before);//按照指定位置增加
⑵删除选项
$(selector).length=0;//全部删除 $(selector).remove(index);//按索引删除
⑶option
- option.index：设置与返回index属性值。
- option.text：设置与返回文本。
- option.value：设置与返回value。
- option.selected：设置与返回选择状态，true/false。