jQuery笔记之过滤选择器
来源:互联网 发布:java 获取当前时间 编辑:程序博客网 时间:2024/04/29 14:57
过滤选择器
过滤选择器通过特定的过滤规则来筛选元素语法特点是使用“:” , 如使用$(“li:first”)来选取第一个li元素
主要分类如下:
基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
内容过滤选择器、 子元素过滤选择器……
验证以上理论的演示
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>过滤选择器</title><script type="text/javascript" src="js/jquery-3.1.1.min.js"></script><script>/** * 过滤选择器通过特定的过滤规则来筛选元素;<br> *语法特点是使用“:” , 如使用$(“li:first”)来选取第一个li元素 * 主要分类如下: * 基本过滤选择器<br> * 可见性过滤选择器<br> * 表单对象过滤选择器<br> *内容过滤选择器、 子元素过滤选择器……<br> **/$(function() {/* * 语法: :first<br> * 描述:选取第一个元素<br> * 实例:$(" li:first" )选取所有<li>元素中的第一个<li>元素<br> * *///取出第一个元素$("li:first").css("background-color", "red");/** * 语法: :last<br> * 描述:选取最后一个元素<br> * 实例:$(" li:last" )选取所有<li>元素中的最后一个<li>元素<br> * *///取出最后一个元素$("li:last").css("background-color", "#09F");/** * 语法: :even<br> * 描述:选取索引是偶数的所有元素(index从0开始)<br> * 实例:$(" li:even" )选取索引是偶数的所有<li>元素<br> *///取出偶数$("li:even").css("background-color", "chartreuse");/** * 语法: :odd<br> * 描述:选取索引是偶数的所有元素(index从0开始)<br> * 实例:$(" li:even" )选取索引是偶数的所有<li>元素<br> * *///取出奇数$("li:odd").css("background-color", "coral");/** * 语法: :eq(index)<br> * 描述:选取索引等于index的元素(index从0开始)<br> * 实例:$("li:eq(1 )" )选取索引等于1的<li>元素 *//** * 语法: :eq(index)<br> * 描述:选取索引等于index的元素(index从0开始)<br> * 实例:$("li:eq(1 )" )选取索引等于1的<li>元素<br> * *///选取索引值等于1的元素$("li:eq(1)").css("background-color", "red");/** * 语法: :gt(index)<br> * 描述:选取索引大于index的元素(index从0开始)<br> * 案例:$(" li:gt(1 )" )选取索引大于1的<li>元素(注: 大于1, 不包括1)<br> * *///选取索引值大于1的元素$("li:gt(1)").css("background-color", "royalblue");/** * 语法: :lt(index);<br> * 描述:选取索引小于index的元素(index从0开始) * 案例:$(“li:lt(1 )” )选取索引小于1的<li>元素(注: 小于1, 不包括1) *///选取索引值小于1的元素$("li:lt(1)").css("background-color", "brown");/** * 语法: :not(selector)<br> * 描述:选取去除所有与给定选择器匹配的元素<br> * 案例:$(" li:not(.three)" )选取class不是three的元素<br> *///根据选择器反向选择元素$("li:not(.three)").css("background-color", "brown");/** * 语法: :header * 描述:选取所有标题元素,如h1 ~h6 * 案例:$(":header" )选取网页中所有标题元素 *///选取所有标题元素$(":header").css("background-color", "coral");/** * 语法: :focus * 描述:选取当前获取焦点的元素<br> * 案例:$(":focus" )选取当前获取焦点的元素 *///选取获得焦点的元素$(":focus").css("background-color", "red");//特殊符号的转义//选择器中的特殊符号需要转义, 在如下html代码中//获取这两个元素的选择器/** * $("#id#a");$("#id[2]");这两种写法是错误的 */$("#id\\#a").css("background-color", "red");$("#id\\[2\\]").css("background-color","yellow");//选择器中的空格//选择器的注意事项//选择器的书写规范很严格, 多一个空格或少一个空格,都会影响选择器的效果//显示$("p:visible").css("background-color","red");//隐藏$("p:hidden").css("background-color","yellow");})</script></head><body><h2>网络小说</h2><ul><li>王妃不好当</li><li>致命交易</li><li class="three">迦兰寺</li><li>逆天之宠</li><li>交错时光的爱恋</li><li>张震鬼故事</li><li>第一次亲密接触</li></ul><div id="id#a">aa</div><div id="id[2]">cc</div><p>我是内容。。</p></body></html>
0 0
- jQuery笔记之过滤选择器
- jQuery学习笔记之四----过滤选择器
- JQuery学习笔记之过滤性选择器
- jQuery之过滤选择器学习笔记
- jQuery选择器之过滤选择器
- jQuery之过滤选择器
- Jquery之过滤选择器
- Jquery过滤选择器之基本过滤选择器
- jQuery选择器之过滤选择器之基础过滤选择器
- jQuery选择器之过滤选择器之内容过滤选择器
- jQuery选择器之过滤选择器之可见度过滤选择器
- jQuery选择器之过滤选择器之属性过滤选择器
- jQuery选择器之过滤选择器之子元素过滤选择器
- jQuery之内容过滤选择器
- jQuery之属性过滤选择器
- jQuery之属性过滤选择器
- jQuery学习之过滤选择器
- jquery学习之 过滤选择器
- 浅谈JS继承(三)
- vue init webpack <project name> 下载缓慢问题,脚手架构成所遇问题。
- 51. N-Queens/52. N-Queens II
- STM32F103程序设计-5-控制引脚高低电平的实现
- 抽象工厂
- jQuery笔记之过滤选择器
- express 下的handlebars应用
- Ubuntu安装MongoDB
- IO流_自定义类模拟BufferedReader的readLine()功能案例
- UVa 1339
- 使用Filter过滤器实现权限访问
- 尽快处理完一切
- 中山大学计算机组成原理多周期CPU实验
- 【tensorflow1.0学习笔记003】构造神经网络与结果可视化代码