一、jQuery选择器

1. helloworld

  • 导入jQuery<script type="text/javascript" src=""></script>
   $(function () {
        $("button").click(function () {
            alert("hello world")
        });
    }); 
  • $(function(){})相当于window.onload()
  • $("button")表示选取button对象,返回的是一个jQuery对象,并且是个数组

2. jQuery对象和Dom对象的相互转化

  • 约定变量前加$,表示是jQuery对象
  • jQuery对象转为DOM对象,因为是数组对象,所以用可以get(),或者[]
  • 隐式迭代,$("button").click()
  • DOM对象转为jQuery对象
    1. 选取一个DOM对象,document.getElementById("")
    2. 使用$()进行包装即可
  • DOM对象不能用jQuery对象的方法,相反jQuery对象也不能使用DOM对象的方法
  • 在函数内,this代表DOM对象,用$(this)就变成了jQuery对象
  • jQuery对象是一个DOM数组对象。

3. jQuery选择器

3.1 基本选择器

选择器描述返回在CSS中
#id根据给定的id匹配一个元素单个元素组成的集合
.class根据给定的类名匹配元素集合元素
element根据给定的元素名匹配元素集合元素
*匹配所有元素集合元素
select1,select2...selectN将每一个选择器匹配到的元素一起返回集合元素

3.2 属性选择器

  • [],例如$("a[href^='https://']"")选取a标签的href属性为https://开头的元素;$("form[method]")选取form标签含有method属性的元素;[[href^='https://']]默认使用*是一种隐式假定,选取所有href属性是https://开头的元素。
选择器描述返回在CSS中
E[A]匹配所有标签名为E,具有属性A的元素集合元素
E[A='V']匹配所有标签名为E,具有属性A,且A的值为V的所有元素集合元素
E[A^='V']匹配所有标签名为E,具有属性A,且A的值以V开头的元素集合元素
E[A|='V']匹配所有标签名为E,具有属性A,且A的值等于V或者以V-开头的所有元素集合元素
E[A$='V']匹配所有标签名为E,具有属性A,且A的值以V结束的所有元素集合元素
E[A!='V']匹配所有标签名为E,具有属性A,且A的值不等于V的所有元素,或者完全不具备属性A集合元素×
E[A~='V']匹配所有标签名为E,具有属性A,且A的值等于V或者包含V的所有元素集合元素
E[C1][C2]匹配所有标签名为E,具有属性A,且A的值满足条件的C1C2的所有元素集合元素

3.3 层次选择器

选择器描述返回在CSS中
${"ancestor descendant"}选取ancestor的所有descendant(后代)元素集合元素
${"parent > child"}选取parent元素下的child(子)元素集合元素
${"prev + next"}选取紧接在prev元素后的下一个next元素集合元素
${"prev ~ siblings"}选取prev元素后的所有siblings元素(只能是后面的同辈元素)集合元素
  • 方法siblings()能选择前后同辈的元素,${"#but1"}.siblings("div")选取id是but1的同辈的div元素

3.4 过滤选择器

3.4.1 位置过滤选择器
选择器描述返回在CSS中
:first选取第一个元素。li a:first 返回列表元素中的第一个a标签单个元素组成的集合×
:last选取最后一个元素。li a:last 返回列表元素中的最后一个a标签集合元素×
:not(selector)去除所有与给定选择器匹配的元素集合元素
:even选取索引是偶数的所有元素,索引从0开始。li:even 返回偶数索引元素集合元素×
:odd选取索引是奇数的所有元素,索引从0开始。li:odd 返回奇数索引元素集合元素×
:eq(index)选取索引等于index的元素,索引从0开始集合元素×
:gt(index)选取索引大于index的元素,索引从0开始集合元素×
:lt(index)选取索引小于index的元素,索引从0开始集合元素×
:header选取所有得标题元素,如:h1h2集合元素×
:animated选取当前正在执行动画的所有元素集合元素×
3.4.2 内容过滤选择器
选择器描述返回在CSS中
:contains(text)选取含有文本内容为text的元素集合元素×
:empty选取不包含子元素或者文本的空元素集合元素
:has(selector)选取含有选择器所匹配的元素的元素集合元素×
:parent选取含有子元素或者文本的元素集合元素×
3.4.3 可见性过滤选择器
选择器描述返回在CSS中
:hidden选取所有不可见的元素集合元素×
:visible选取所有可见的元素集合元素×
  • :hidden不仅包含样式属性displaynone的元素,也包含文本隐藏域(<input type="hidden" name="">)visible:hidden之类的元素
3.4.4 子元素过滤选择器
选择器描述返回在CSS中
:first-child匹配上下文中第一个子元素集合元素
:last-child匹配上下文中最后一个子元素集合元素
:first-of-type匹配给定类型的第一个子元素集合元素
:last-of-type匹配给定类型的最后一个子元素集合元素
:nth-child(n)匹配第n个子元素集合元素
:nth-child(even&#124;odd)匹配偶数或奇数集合元素
:nth-child(Xn+Y)匹配给定公式计算的第n个子元素,索引从1开始集合元素
:nth-last-child(n)匹配倒数第n个子元素集合元素
:nth-last-child(even&#124;odd)匹配偶数或奇数集合元素
:nth-last-child(Xn+Y)匹配给定公式计算的倒数第n个子元素集合元素
:only-child只匹配没有兄弟元素的子元素集合元素
:only-of-type只匹配没有相同类型的兄弟元素的子元素集合元素

选取子元素需要添加空格

3.4.5 表单过滤器
选择器描述返回在CSS中
:checkbox只选择复选框元素(input[type=checkbox])集合元素×
:checked只选择状态处于被选中的元素,复选框、单选框或者下拉框元素集合元素
:disabled只选择禁用状态的元素集合元素
:enabled只选择启动状态的元素集合元素
:file只选择文件input元素(input[type=file])集合元素×
:focus只选择处于聚焦状态的元素集合元素
:image只选择图片input元素(input[type=image])集合元素×
:input只选择表单元素(input、select、textarea、button)集合元素×
:password只选择密码元素(input[type=password])集合元素×
:radio只选择单选元素(input[type=radio])集合元素×
:reset只选择重置按钮(input[type=reset])或button[type=reset])集合元素×
:selected只选择处于选中状态的列表元素集合元素×
:submit只选择提交按钮(button[type=submit])或者(input[type=submit])集合元素×
:text只选择文本元素(input[type=text])或者没有指定类型的元素(因为默认是type=text)集合元素×
3.4.6 其他过滤器
选择器描述在CSS中
:animated只选择动画模式的元素×
:header只选择头元属:<h1><h5>×
:lang(language)只选择采用特定语言的元素
:root选择文档的根元素
:target通过文档的URL框架标识来选择目标元素

4. 总结

本节主要讲述了如何用jQuery选择器来创建和筛选自定义结果集(jQuery集合或者匹配元素的集合),接下来学习如何操作jQuery集合。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值