二、jQuery选择器(一)
jQuery选择器
- jQuery选择器
- 基本选择器
- 1.元素选择器
- 2.ID选择器
- 3.类选择器
- 4.并列选择器
- 层次选择器
- 1.祖先后代选择器
- 2.父子选择器
- 3.前后选择器
- 4.兄弟选择器
jQuery选择器
在CSS中,选择器的作业是选择页面中的某些HTML元素或者某一个HTML元素。jQuery中的选择器使用“$",其方式更全面,而且不存在浏览器的兼容问题。
jQuery选择器允许通过标签名,属性名或内容对HTML元素进行选择或者修改HTML元素的样式属性。jQuery的选择器很多,可以分为基本选择器、层次选择器、过滤选择器和属性选择器。
基本选择器
基本选择器主要包括元素选择器、ID选择器、类选择器以及并列选择器等,选择方法与CSS选择器的方法相同。
1.元素选择器
元素选择器可以选中HTML文档中所有的某个元素。如
$(“p”)
可以表示选中本网页中所有的p元素,又如$("input")
表示选中本网页中所有的input元素。
2.ID选择器
ID选择器可以根据指定ID值返回一个唯一的元素。例1中定义一个ID为“myId”的
<p id="myld">Hello</p>
,单击该ID标记内的文字时,把其中的文字内容由“Hello”改为“World”,使用ID选择器选中该<p>
元素的方法是$(“#my”)
。
【例1】
<!doctype html>
<html><head><meta charset="utf-8"><title>jQuery</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document). ready(function(e){$("#myId"). click(function(){$("#myId"). html("World");});});</script></head>
<body><p id="myId">Hello</p>
</body>
</html>
3.类选择器
类选择器可以根据元素的CSS类选择一组元素。例如,
$(". left")
指选择页面中所有class属性为left的元素;$("p. left")
指选择页面中所有class属性为left的p元素。
例2是在HTML中定义myClass类的<li>
元素,在jQuery中使用类选择器选中这些元素,然后遍历<li>
元素,并修改其HTML的显示内容,在浏览器中的显示结果如图1所示,单击相应按钮后在浏览器中的显示结果如图2所示。
【例2】
<!doctype html>
<html><head><meta charset="utf-8"><title>jQuery类选择器</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document). ready(function(){$("button"). click(function(){$(".myClass"). each(function(index, element){ $(this). html(index+"-"+$(this). text())//修改其元素的文字内容});});});</script></head>
<body><button>增加每个列表项的索引值</button><ul><li class="myClass">足球</li><li class="myClass">羽毛球</li><li class="my Class">篮球</li><ul>
</body>
</html>
图1 jQuery类选择器
图2 jQuery类选择器元素遍历
4.并列选择器
并列选择器指使用逗号隔开的选择符,彼此之间是并列关系。例如,
$("p,div")
指选择页面中所有的p元素和div元素;$(#my,p,. lef")
指选择页面中id为my的第一个元素、所有的p元素以及所有的class属性为left的元素。
层次选择器
层次选择器可以根据页面中HTML元素之间的嵌套关系选择元素,主要包括祖先后代选择器、父子选择器、前后选择器、兄弟选择器。
1.祖先后代选择器
祖先后代选择器中祖先选择符和后代选择符之间使用空格隔开,不限制嵌套的层次数。例如:
$(". left p")或$("form input")
前面一个选择符表示选择所有class属性为left的元素中的所有p元素;后面一个选择符表示选择所有form元素中的input元素。
例3是在HTML中定义祖先元素<div>,其id属性为box,后代元素<li>,在jQuery中使用祖先后代选择器选中这些<li>
元素,选择方法是 $("#box li")
,然后通过增加CSS类的方法改变其显示风格,在浏览器中的显示结果如图3所示,单击相应按钮后,在浏览器中的显示结果如图4所示。
【例3】
<!doctype html>
<html><head><meta charset="utf-8"><title>jQuery祖先后代选择器</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document). ready(function(){$("button"). click(function(){$("#box li").addClass("myClass")});});</script><style>.myClass{ist-style:none; background :#C9C;width:200px;text-align:center;margin:5px;}</style></head>
<body><button>改变列表显示样式</button><div id="box"><ul><li>足球</li><li>羽毛球</li><li>篮球</li></ul></div></body>
</html>
图3 祖先后代选择器
图4 改变列表显示样式
2.父子选择器
在HTML中,元素之间存在包含关系。在例3中
<div>
元素的子元素是<ul>
元素,<ul>
元素的子元素是<li>
元素,而<div>
元素的父元素是<body>
元素。父子选择器的父元素和子元素之间使用符号“>”隔开,前后元素的嵌套关系只能是一层。例如,$("div>ul")
指选择div元素内直接嵌套的ul元素。
例4中利用父子选择器以及jQuery中的CSS()方法,完成与上例相同的程序代码的功能。
【例4】
<!doctype html>
<html><head><meta charset="utf-8"><title>jQuery父子选择器</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document). ready(function(){$("button"). click(function(){$("#myU1>li"). css({"list-style":"none"," background ":"#C9C","width":"200px","text=align":"center","margin":"5px"})});});</script></head>
<body><button>改变列表显示样式</button>
<div><ul id="myUl"><li>足球</li><li>羽毛球</li><li>篮球</li></ul>
</div>
</body>
</html>
3.前后选择器
前后选择器可以选择某元素的下一个同级兄弟元素,前后选择器对两个同级别的元素起作用,前后元素中间使用“+”分隔,选择在某元素后面的next元素,相当于next()方法。例如,
$("#my+img")
是选择id为my的元素后的第一个同级别img元素,相当于$("#my"). next("img")
。
例5是一个验证用户输入数据是否为空的页面,如果为空,则给出相应的错误提示,在浏览器中的运行结果如图所示。
【例5】
<!doctype html>
<html><head><meta charset="utf-8"><title>jQuery前后选择器</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script><script>$(document). ready(function(){$("button").click(function(){if($("#username"). val()==""){$("#username+span"). html("用户名不能为空!")$("#username+span"). css("display","inline")}else{$("#username+span"). css("display","none")}});});</script><style>div span{display:none; background:red;color:white;}</style></head><body><div><label>用户名</label><input type="text" id="username"><span></span></div><button>测试</button></body>
</html>
4.兄弟选择器
兄弟选择器用于选择某元素的所有兄弟元素,相当于
nextAll()
方法,可以选择出现在某元素之后和其为同一级别的所有元素。例如,$("#my~img")
是选择id为my的元素后的所有同级别img元素,相当于$("#my").nextAll("img")
。
往期回顾:一、jQuery概述
二、jQuery选择器(一)相关推荐
- JQuery专题(二)-JQuery选择器
文章目录 1.概述 2.基本选择器:第1大类 3.层次选择器:第2大类 4.过滤选择器:第3大类 4.1.基本过滤选择器 4.2.内容过滤选择器 4.3.可见性过滤选择器 4.4.属性过滤选择器 1. ...
- 二、jQuery 选择器(超细)
文章目录 前言 一.jQuery 选择器是什么 二.基本选择器 2.1 `ID Selector ("#id")` 选择一个具有给定 id 属性的单个元素 2.2 `Class S ...
- jQuery选择器(二)
目录 一.简述jQuery语法结构 二.jQuery选择器 1.简述 2.基本选择器 1.1标签选择器 1.2类选择器 1.3ID选择器 1.4并集选择器 1.5全局选择器 3.层次选择器 1.1后代 ...
- jQuery(二):jQuery选择器
jQuery选择器类似于CSS选择器,用来选取网页中的元素.例如: $("h3").css("background-color","red" ...
- Java程序员从笨鸟到菜鸟之(八十六)跟我学jquery(二)大话jquery选择器
本篇博客我将带大家来学习一下jQuery的第一个比较重要的知识点,这个知识点对学习jquery的同学来说是必须掌握的,因为他是所有操作的基础,这个知识点就是jquery的对象选择器,我们利用jquer ...
- jQuery再学习之二、jQuery选择器
前言 jQuery选择器非常非常强大而且灵活,要完全掌握它是需要狠下一番功夫的.当然,掌握了主要的部分后,其它的了解就好,因为一些比较偏的毕竟用得少,而且可以有其它方法来实现. 选择器 1 ...
- Jquery从入门到精通:二、选择器 1、准备篇 1)基础的基础:DOM模型
二.选择器 1.准备篇 (1)基础的基础:DOM模型 什么是DOM 文件对象模型(Document Object Model,DOM)是给 HTML 与 XML 文件 ...
- [翻译]帮助文档-jQuery 选择器
jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言.如果你了解CSS(绝大部分WEB开发者都用到的),那 ...
- Jquery 选择器大全 【转载】
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...
最新文章
- 成功解决TypeError: unhashable type: 'numpy.ndarray'
- mysql5.7环境搭建_mysql5.7.13环境搭建教程(解压缩版)
- c++可视化_数据可视化——如何让你的信息图被记住
- 金属,塑料,傻傻分不清楚
- php排序条件两个,php – 在两个条件下排序数组
- [下载]活学活用DataGrid控件与ADO.NET
- 【手把手】制作一个简单的HTML网页
- z世代消费力白皮书_谁在影响2.6亿年轻人的消费?Z世代消费力白皮书2019|企鹅智库...
- SpringCloud项目 CICD 部署
- java线程 stop()_Java中的线程Thread方法之---stop()
- 【二分答案】SDUT-4072 小绿的脱单梦
- 李嘉诚14句经典成功格言
- JAVA计算机毕业设计政府会议管理系统Mybatis+系统+数据库+调试部署
- Sprite Kit教程
- ftp服务器在线编辑,ftp服务器上怎么直接修改office文档.
- java文件打包jar文件_如何把JAVA文件打包成jar文件
- PHP给title=赋值变量 PHP title弹出字符串拼接变量
- 【服务端知识点】MAC OSX 安装MongoDB
- Pro ASP.NET MVC –第四章 语言特性精华
- zabbix Trapper 监控项配置