jQuery基础

一、jQuery 选择器的基本基本  

1.#id 根据给定的 ID 匹配一个元素，下面的意思是选择给定ID为的P1匹配一个元素。

var sId = $("#P1");

2.(.class)根据给定的类匹配元素，下面的意思是选择给定类为的pT1匹配一个元素。 

var sClass = $(".pT1");

3.element 根据给定的元素名匹配所有元素，下面的意思是选择给定input匹配所有元素。

var sEl = $("input");本

4. (*)选取所有元素,下面的意思是选择所有元素。

var sAll = $("*");

二、jQuery 选择器的层级

1.selector1,…… ,selectorN 将每一个选择器匹配到的元素合并后一起返回，下面的意思是凡是有pT1或pT2的都能选择到。

var s1 = $(".pT1,.pT2");

2.ancestor descendant 在给定的元素 ancestor 下匹配所有的后代元素，下面的意思是给定的元素 div1 下匹配所有pT2的后代元素。

var s2 = $(".div1 .pT2");

3.parent >child 在给定的元素 parent 下匹配所有的子元素，下面的意思给定的元素 div1 下匹配所有pT2的子元素。

var s3 = $(".div1>.pT2");

4.prev + next 匹配所有紧接在 prev 元素后的相邻元素，下面的意思匹配所有紧接在 pT1 元素后的相邻元素pT2。

var s4 = $(".pT1+.pT2");

5.prev ~ siblings 匹配 prev 元素之后的所有兄弟元素，下面的意思匹配 pT1 元素之后的所有兄弟元素。

var s5 = $(".pT1~.pT2");

三、jQuery 选择器的筛选。

1.{ :first}获取第一个元素,下面的意思ul li中获取第一个元素

 var sFirst = $("ul li:first");

2.prev ~ siblings 匹配 prev 元素之后的所有兄弟元素,下面的意思ul li中获取最后一个元素

var sLast = $("ul li:last");           

注释：索引

（1）.您可以在表中创建索引，以便更加快速高效地查询数据。

（2）.用户无法看到索引，它们只能被用来加速搜索/查询。

（3）.注释：更新一个包含索引的表需要比更新一个没有索引的表更多的时间，这是由 于索引本身也需要更新。因此，理想的做法是仅仅在常常被搜索的列（以 及表）上面创建索引。

3.{ :eq()} 匹配一个给定索引值的元素，下面的意思匹配一个给定索引值的元素

var sEq = $("ul li:eq(2)");

4.{ :lt()}匹配所有小于给定索引值的元素，下面的意思匹配所有小于给定索引值的元素

var sLt = $("ul li:lt(2)");

5.{ :gt()}匹配所有大于给定索引值的元素，下面的意思匹配所有大于给定索引值的元素

var sGt = $("ul li:gt(2)");

6.{ :not()}去除所有与给定选择器匹配的元素。下面的意思是选取除了.pt2 元素以外的所有 li 元素

var sNot = $("ul li:not(.pt2)");

7.{ :even} 匹配所有索引值为偶数的元素，从 0 开始计数，下面的意思是匹配所有索引值为p偶数的元素，从开始计数      

var sEven = $(".div1>p:even");

8.{ :odd}匹配所有索引值为奇数的元素，从 0 开始计数，下面的意思是匹配所有索引值为p奇数的元素，从 0 开始计数

var sOdd = $(".div1>p:odd");

9.{ :header} 匹配如 h1, h2, h3 之类的标题元素

var sHeader = $(":header");

10.{ :animated} 匹配所有正在执行动画效果的元素

var sAnimated = $(":animated");

11.{ :focus}匹配当前获取焦点的元素。

var sFocus = $(":focus");

12.{ :root} 选择该文档的根元素 永远是 元素

var sRoot = $(":root");

13.{ :target }选择由文档 URI 的格式化识别码表示的目标元素

var sTarget = $(":target");

四、jQuery 选择器的内容。

1.{ :contains()} 匹配包含给定文本的元素

var sCon = $("div p:contains(文本)");

2.{ :empty} 匹配所有不包含子元素或者文本的空元素

var sEmpty = $(":empty");

3.{ :has()}匹配含有选择器所匹配的元素的元素，匹配含有input选择器所匹配的元素的元素

var sHas = $("div:has(input)");

4.{ :parent} 匹配含有子元素或者文本的元素                             

var sParent = $(".pT1:parent");

五、jQuery 选择器的可见性。

1.{ :hidden}匹配所有不可见元素，或者 type 为 hidden的元素

 var sHidden = $("li:hidden");

2.{:visible}匹配所有的可见元素

 var sVisidle = $("li:visible");

六、jQuery 选择器的属性。

1.[attribute] 匹配包含给定属性的元素，下面的意思是p标签带有class[类]的所有标签。

var sS1 = $("p[class]")

2.[attribute=value]匹配给定的属性是某个特定值的元素，下面的意思是匹配给定的class属性是某个特定pT1值的元素。

var sS2 = $("[class=pT1]");

3.[attribute!=value]匹配所有不含有指定的属性，或者属性不等于特定值的元素。

var sS3 = $("[class!=pT1]");

4.[attribute^=value]匹配给定的属性是以某些值开始的元素，下面的意思是匹配给定的属性是以p的值开头的元素。

var sS4 = $("[class^=p]");

5.[attribute$=value]匹配给定的属性是以某些值结尾的元素，下面的意思是匹配给定的属性是以2的值结尾的元素。

var sS5 = $("[class$=2]");

6.[attribute*=value]匹配给定的属性是以包含某些值的元素，下面的意思是匹配给定的属性是以包含1的值的元素。

var sS6 = $("[class*=1]");

7.[attrSel1][attrSel2][attrSelN]复合属性选择器，需要同时满足多个条件时使用。下面的意思是要满足有id和以pT开头条件时使用。

var sS7 = $("[id][class^=pT]");

七、jQuery 选择器的可见性。

1.{ :first-child} 匹配第一个子元素

var sZ1 = $(".div1 :first-child");

2.{ :last-child}匹配最后一个子元素

var sZ2 = $(".div1 :last-child");

3.{ :first-of-type } 选择所有相同的元素名称的第一个兄弟元素。

var sZ3 = $(".div1 :first-of-type");

4.{ :last-of-type}选择的所有元素之间具有相同元素名称的最后一个兄弟元素。

var sZ4 = $(".div1 :last-of-type");

5.{ :only-child}如果某个元素是父元素中唯一的子元素，那将会被匹配,序号从 1 开始;

var sZ5 = $(".div input:only-child") 

6.{ :only-of-type}选择所有没有兄弟元素和自己相同类型的元素,如没有亲兄弟的男孩。

var sZ6 = $(".div :only-of-type");

7.{ :nth-child()}匹配某个元素，该元素必须是某个父元素下的第 n 个子元素。序号从 1 开始，下面的意思是指某个父元素下的p标签第 2 个子元素；

var sZ7 = $("p:nth-child(2)");

8.{ :nth-last-child()}选中某个元素，该元素必须是某个父元素下的倒数第 n 个子元素。序号从 1 开始，下面的意思是指某个父元素下p标的签倒数第 3 个子元素；

var sZ8 = $("p:nth-last-child(3)");

9.{ :nth-of-type()}选中某个元素，该元素必须是某个父元素下 的指定类型第 n 个子元素。序号从 1 开始，下面的意思是某个父元素下的指定p标签类型第 2 个子元素；

var sZ9 = $("p:nth-of-type(2)");

8.{:nth-last-of-type()}选中某个元素，该元素必须是某个父元素下的指定类型倒数第 n 个子元素。序号从 1 开始，某个父元素下的指定p标签类型倒数第 2 个子元素；

var sZ10 = $("p:nth-last-of-type(2)");

八、jQuery 选择器的表单。

1.{ :input}匹配所有 input, textarea, select 和button 元素

var sInput = $(":input");

2.{:text}匹配所有的单行文本框

var sText = $(":text");

3.{ :password}匹配所有密码框

var sPassword = $(":password");

4.{ :radio}匹配所有单选按钮

var sRadio = $(":radio");

5.{ :checkbox}匹配所有复选框

var sCheckbox = $(":checkbox");

6.{ :submit}匹配所有提交按钮

var sSubmit = $(":submit");

7.{ :image}匹配所有图像域

var sImage = $(":image");

8.{ :reset}匹配所有重置按钮

var sRest = $(":reset");

9.{ :button}匹配所有按钮

var sButton = $(":button")

10.{ :file}匹配所有文件域

var sFile = $(":file");

九、jQuery 选择器的表单。

1.{ :enabled}匹配所有可用元素 

var sEnabled = $(":enabled");

2.{ :disabled}匹配所有禁用元素

var sDisabled = $(":disabled");

3.{ :checked}匹配具有 checked 属 性 的 radio 和checkbox，和有 selected 属性的 option标签

var sChecked = $(":checked");

4.{ :selected}只匹配有 selected 属性的 option 标签

var sSelected = $(":selected");

这是我所学到的一些jQuery基础，分享给你们，希望可以帮助到你们。新手上道，请多多指教，大神勿喷。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔，谢谢！