jQuery选择器

目录

jQuery

jQuery的选择器 

基本选择器:

基本过滤选择器

内容过滤选择器

 属性过滤选择器

表单选择器 

表单对象属性过滤选择器


jQuery

jQuery:是JavaScript的一个库(对JavaScript的相关操作进行了封装:遍历HTML文档、操作DOM、事件处理、Ajax)

引入jQuery库:  <script src="jquery.js"></script>

jQuery的入口函数: $(document).ready(function(){         
                                       js代码            
                                 })

简写为:$(function(){            
                    js代码            
              })

jQuery的选择器 

选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器,下面是一些常用的部分选择器。

基本选择器:

基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和标记名来查找DOM元素。

选择器描述返回
#id根据给定的id匹配一个元素单个元素组成的集合
.class根据给定的类名匹配元素集合元素
element根据给定的元素名匹配元素(标签名选择器)集合元素
*匹配所有元素集合元素

实例:

<script src="../js/jquery-3.4.1.js"></script>   <!-- 在head中引入jQuery库 -->
<body>
    <p id="xy">西安邮电大学</p>
    <div class="dv">西安交通大学</div>
    <div>西北工业大学</div>
    <div>陕西师范大学</div>
</body>
<script>
     var flag = {
         'color':'blue',
         'fontSize':'35px',
         'backgroundColor':'pink'
     }
     $(function(){
         $('#xy').css('color','red')    //以传参的方式(id选择器)
 
         //类选择器传参时是用*,此处是以键值对的方式传递
         $('.dv').css({'color':'red','fontSize':'35px','backgroundColor':'pink'})   //传递的是对象
         $('.dv').css(flag)

         var arr = $('div')  //选择同一个标签(标签名选择器)
         console.log(arr)   //返回的是一个集合
     })
 </script>

实现结果:

基本过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头。按照不同的过滤规则, 过滤选择器又可分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

  • Element:first  :选取第一个元素,返回单个元素组成的集合。
  • Element:last   : 选取最后一个元素
  • Element:not(selector):去除所有与给定选择器匹配的元素
  • Element:even :选取所有索引为偶数的元素,索引从0开始
  • Element:odd :选取所有索引为奇数的元素,索引从0开始
  • Element:eq(index):选取索引等于index的元素,索引从0开始
  • Element:gt(index):选取索引大于index的元素,索引从0开始
  • Element:lt(index) :选取索引小于index的元素,索引从0开始
  • Element:header :选取所有的标题标签

内容过滤选择器

  • Element:contains(text) :选取含有文本内容为text的元素,返回的是集合元素
  • Element:empty :选取不包含子元素或者文本的空元素,返回的是集合元素
  • Element:has(selector) :选取含有选择器所匹配的元素的元素,返回的是集合元素
  • Element:contains(text) :选取含有子元素或者文本t的元素,返回的是集合元素

 属性过滤选择器

  • Element[attribute]:选取拥有此属性的选择器
  • Element[attribute=value]:选取指定属性值为value的元素
  • Element[attribute!=value]:选取指定属性值不等于value的元素                      
  • Element[attribute^=value]:选取指定属性值以value开始的元素
  • Element[attribute$=value]:选取指定属性值以value结束的元素       
  • Element[attribute*=value]:选取指定属性值中含有value的元素

表单选择器 

  • :input:选择由input生成的表单控件
  • :text:选择单行文本框
  • :password: 选择密码框
  • :radio: 单选按钮
  • :checkbox:复选按钮

表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

  • :enabled:选取所有可用元素,返回集合元素
  • :disabled:选取所有不可用元素,返回集合元素
  • :checked:选取所有被选中的元素(单选框,复选框),返回的是集合元素
  • :selected:选取所有被选中选项元素(下拉列表),返回的是集合元素
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别Null.了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值