jquery类选择器后拼接 jquery组合选择器

1/基本选择器（*重点*）

•  #ID选择器：根据 id 查找标签对象

• .class选择器：根据 class 查找标签对象

• element选择器：根据标签名查找标签对象

• * 选择器：表示任意的，所有的元素

• selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回

2/层级选择器（*重点*）

 

• ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素

 

• parent > child 子元素选择器：在给定的父元素下匹配所有的子元素

• prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素

• prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

 

3/层级选择器

1⃣️基本过滤器

• :first 获取第一个元素
• :last 获取最后个元素
• :not(selector) 去除所有与给定选择器匹配的元素
• :even 匹配所有索引值为偶数的元素，从 0 开始计数
• :odd 匹配所有索引值为奇数的元素，从 0 开始计数
• :eq(index) 匹配一个给定索引值的元素
• :gt(index) 匹配所有大于给定索引值的元素
• :lt(index) 匹配所有小于给定索引值的元素
• :header 匹配如 h1, h2, h3 之类的标题元素
• :animated 匹配所有正在执行动画效果的元素 

 

2⃣️内容过滤器

 

• :contains(text) ：匹配包含给定文本的元素

• :empty： 匹配所有不包含子元素或者文本的空元素

• :parent： 匹配含有子元素或者文本的元素

• :has(selector) ：匹配含有选择器所匹配的元素的元素

 

3⃣️属性过滤器

• [attribute] 匹配包含给定属性的元素

 

• [attribute=value] 匹配给定的属性是某个特定值的元素

 

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

 

• [attribute^=value] 匹配给定的属性是以某些值开始的元素

 

• [attribute$=value] 匹配给定的属性是以某些值结尾的元素

 

 

• [attribute*=value] 匹配给定的属性是以包含某些值的元素

 

• [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用

 

 

4⃣️表单过滤器

• :input 匹配所有 input, textarea, select 和 button 元素
• :text 匹配所有 文本输入框
• :password 匹配所有的密码输入框
• :radio 匹配所有的单选框
• :checkbox 匹配所有的复选框
• :submit 匹配所有提交按钮
• :image 匹配所有 img 标签
• :reset 匹配所有重置按钮
• :button 匹配所有 input type=button <button>按钮
• :file 匹配所有 input type=file 文件上传
• :hidden 匹配所有不可见元素 display:none 或 input type=hidden

 

 

 

 

 

划重点1⃣️：

each方法是jQuery对象提供用来遍历元素的方法。在遍历的function函数中，可以直接用this对象。👇👇

var $checkboies = $(":checkbox:checked");

$checkboies.each(function () {

alert( this.value );

});

 

划重点2⃣️：

表单中有这样一些属性，记住。👇👇

5⃣️jQuery元素筛选

• eq() 获取给定索引的元素 功能跟 :eq() 一样
• first() 获取第一个元素 功能跟 :first 一样
• last() 获取最后一个元素 功能跟 :last 一样
• filter(exp) 留下匹配的元素
• is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true
• has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样
• not(exp) 删除匹配选择器的元素 功能跟 :not 一样
• children(exp) 返回匹配给定选择器的子元素 功能跟 parent>child 一样
• find(exp) 返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样
• next() 返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样
• nextAll() 返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样
• nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
• parent() 返回父元素
• prev(exp) 返回当前元素的上一个兄弟元素
• prevAll() 返回当前元素前面所有的兄弟元素
• prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
• siblings(exp) 返回所有兄弟元素
• add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中

————————————————————————🔚————————————————————————————

第一篇整理的笔记，如果有幸被你翻阅，希望能够帮到你喔∠( ᐛ 」∠)。