jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等

简介: jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
  1. jquery基本选择器
选择器名字 语法 含义
id选择器 $(“#id”) 选择了id名为id的元素(单个)
类选择器 $(“.class”) 选择了所有class名为class的所有元素(集合)
标签选择器 $(“p”) 选择了所有标签名为p的所有元素(集合)
并列选择器 $(“#id1,#id2”) 选择了id名为id1和id2的2个元素 (集合)
过滤选择器 $(“p.class”) 选择了类名为class的所有p元素(集合)
  1. 关系选择器
选择器名字 语法 含义
后代选择器 $(“div p”) 选择所有的后代元素(集合)
子代选择器 $(“div>p”) 选择所有的子代元素(集合)
相邻元素选择器 $(“div+p”) 选择紧挨着的下一个元素
兄弟选择器 $(“div~p”) 选择后面的所有的兄弟元素
  1. 过滤选择器
语法 含义
:eq(index) 比如 $(“div”).eq(0) 选择第一个匹配的div元素,也可这样写:$(“div:eq(0)”)。
:gt(index) 比如 $(“div”).gt(2) 选择序号大于2的元素,也可这样写:$(“div:gt(2)”)
:lt(index) 比如 $(“div”).lt(2) 选择序号小于2的元素,也可这样写:$(“div:lt(2)”)
:not(selector) 比如 $(“div:not(class)”) 选择不为class的div元素
:odd 比如 $(“tr:odd”) 所有奇数 元素
:even 比如 $(“tr:even”) 所有偶数 元素
:first 比如 $(“p:first”) 第一个 元素
:last 比如 $(“p:last”) 最后一个元素
  1. 属性选择器-跟CSS通用
语法 含义
[attribute] 比如 $(“[href]”) 所有带有 href 属性的元素
[attribute=value] 比如 $(“[href=‘#’]”) 所有 href 属性的值等于"#"的元素
[attribute!=value] 比如 $(“[href!=‘#’]”) 所有 href 属性的值不等于"#"的元素
[attribute$=value] 比如 ( " [ h r e f ("[href("[href=‘.jpg’]") 所有 href 属性的值包含以".jpg"结尾的元素
[attribute^=value] 比如 $(“[class^=‘li’]”) 所有 class 属性的值包含以"li"开头的元素
[attribute*=value] 比如 $(“[class*=‘li’]”) 所有 class 属性的值包含"li"的元素
  1. 表单选择器(JQ特有)
语法 举例 含义
:input $(“:input”) 选取所有的input、textarea、button、select元素
:text $(“:text”) 选取所有的单行文本框
:password $(“:password”) 选取所有的密码框
:radio $(“:radio”) 选取所有的单选框
:checkbox $(“:checkbox”) 选取所有的多选框
:submit $(“:submit”) 选取所有的提交按钮
:image $(“:image”) 选取所有的图像按钮
:reset $(“:reset”) 选取所有的重置按钮
:button $(“:button”) 选取所有的按钮
:file $(“:file”) 选取所有的上传域
:hidden $(“:hidden”) 选取所有的不可见元素
:focus $(“:focus”) 选取当前获取焦点的元素
:header $(“:header”) 選取h1~h6标题标签
  1. jQuery特有选择器
语法 含义
$(“div”).filter(“.box”) 选取含有指定选择器的div元素,也就是选择的是div,在div范围内包含了指定的选择器的该div都能被选择(过滤自己)
$(“div”).find(“.box”) 选取在div元素内,所有包含了指定的选择器(“.box”)的元素都能被选择(通过父级找子元素时使用,等价于后代选择器)
$(“div:contains(‘text’)”) 选取包含指定文本的元素
$(“div”).has(选择器) 选取含有指定选择器的div元素,选的也是div,而不是“选择器”
//比如:
$("ul").has(".box");//返回ul中为.box的ul元素

案例笔记作业下载链接:https://www.imqd.cn/jquery-selector.html

相关文章
|
3月前
|
前端开发
CSS实现充电效果案例
CSS实现充电效果案例
78 1
|
15天前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
18 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
20天前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
21天前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
22 1
|
18天前
|
JavaScript 前端开发
jQuery和CSS3带变形特效的固定导航菜单
这是一款jQuery和CSS3带变形特效的固定导航菜单。该导航菜单开始时固定在页面左上角,当用户向下滚动时,导航菜单以水滴变形的方式转换为圆形菜单,然后固定在页面的左上角位置。
|
3月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
3月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
17 2
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
3月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
21 3
|
3月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
18 1