当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery50个选择器,让你得心应手

jQuery50个选择器,让你得心应手

2020年07月26日  | 移动技术网IT编程  | 我要评论

jQuery

一:概念

一个简单的js组件(是一个别人写好的js文件不是jar包)

引入jQuery文件

<script type="text/JavaScript" src="jquery-1.6.4.min.js"></script>

RIA :富互联网技术

一些用于提高客户端体验,增加客户端交互性,增强客户端功能的技术,如:ajax

js的封装

jquery的功能:可以实现js的所有功能

  1. 取得页面元素
  2. 修改页面外观
  3. 改变页面内容
  4. 响应用户的页面操作
  5. 微页面添加动态效果
  6. 无刷新获取服务器信息
  7. 简化JavaScript任务

优点:

  1. 轻量级
  2. 强大的选择器
  3. 出色的DOM操作的封装
  4. 可靠的事件处理机制
  5. 出色的浏览器兼容性

(宗旨:写得少,做得多)

二.选择器

1.基本选择器

和css的选择器一样

  1. id选择器 #id
  2. 类选择器 .class
  3. 标签选择器 标签名
  4. *通配符选择器
  5. 组合选择器 selector1,selector2
$("#div1")
$(".class")
$("div")
$("*")
$("div,span")

2.层次选择器

  1. parentSelector chidSelector 选中 parentSelector下所有的chidSelector后代元素
  2. parentSelector > chidSelector 选中 parentSelector下所有的chidSelector直接子元素
  3. nodeSelector1+nodeSelector2 选中 nodeSelector1后面紧挨着的nodeSelector2弟元素
  4. nodeSelector1~nodeSelector2 选中nodeSelector1后面所有的nodeSelector2弟元素

3.基本过滤选择器

  1. :first 选中第一个
  2. :last 选中最后一个
  3. :not(selector) 不被参数选择器选中的
  4. :even 索引为偶数的
  5. :odd 索引为奇数的
  6. :gt(n) 索引大于n的
  7. :It(n) 索引小于n的
  8. :eq(n) 索引等于n的
  9. :header 所有的标题标签
  10. :animated 所有正在执行动画的标签

4.内容过滤选择器

  1. :contains(text) 选中文本内容包含指定文本的
  2. :has(selector) 包含指定子元素的父亲标签
  3. :empty 选中没有文本内容和子元素的
  4. :parent 选中有文本内容或子元素的

5.可见性过滤选择器

  1. :hidden 选中 input type=“hidden” 或者 display="none"的元素 包括所有有没有区域的标签:br style head meta script
  2. :visible 选中不被选中的元素

6.属性过滤选择器

  1. [attrName] 选中拥有attrName属性的标签
  2. [attrName=attrName] 选中拥有attrName属性并且值为attrValue的标签
  3. [attrName!=attrName] 选中拥有attrName属性并且值不为attrValue的标签 或者没有attrName属性的标签
  4. [attrName^=attrName] 选中拥有attrName属性但值以attrValue开头的标签
  5. [attrName$=attrName] 选中拥有attrName属性但值以attrValue结尾的标签
  6. [attrName*=attrName] 选中拥有attrName属性但值包含attrValue的标签
  7. [][][][][selector1] [selector2] [selector3] 多次过滤

7.子元素过滤选择器

  1. :first-child 第一个子标签
  2. :last-child 最后一个子标签
  3. :only-child 如果只有一个子标签 就选中次子标签
  4. :nth-child(n) 顺序为n的子标签

8.表单过滤选择器

  1. :input 所有的input标签
  2. :text 所有的input type="text "标签
  3. :submit 所有的input type="submit"标签
  4. :reset 所有的input type="reset"标签
  5. :button 所有的input type="button "标签
  6. :hidden 所有的input type="hidden"标签
  7. :radio 所有的input type="radio"标签
  8. :checkbox 所有的input type="checkbox "标签
  9. :file 所有的input type="flie "标签
  10. :image 所有的input type="image"标签
  11. :password 所有的input type="password "标签

9.表示属性过滤选择器

  1. :enabled 选中所有可用的表单组件 没有添加属性 disabled=“disabled”
  2. :disabled 选中所有不可用的表单组件 添加了属性 disabled=“disabled”
  3. :checked 选中所有被选中的单选框/复选框 radio/checkbox被选中
  4. :selected 选中所有被选中的select的option

本文地址：https://blog.csdn.net/qq_41456369/article/details/107584866

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网