尚硅谷：jQuery选择器的练习

最新推荐文章于 2022-06-29 16:26:03 发布
最新推荐文章于 2022-06-29 16:26:03 发布
阅读量243 收藏 1
点赞数
分类专栏： jquery 文章标签： 尚硅谷：jQuery选择器的练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/piao317110771/article/details/84752856
版权

1、代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery选择器的练习</title>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//1.给网页中所有的p元素添加onclick事件
				$("p").click(function() {
					//alert(this.firstChild.nodeValue);
					alert($(this).text());
				});
				//2.使一个特定的表格隔行变色
				$("table:first tr:even").css("background","red");
				//3.对多选框进行操作, 输出选中的多选框的个数
				$(":button").click(function() {
					alert("选中的个数为："+$(":checkbox[name='items']:checked").length);
				});
			})
		</script>
		
	</head>
	<body>
		<h2>1.给网页中所有的p元素添加onclick事件</h2>
		<p>段落1</p>
		<p>段落2</p>
		<h2>2.使一个特定的表格隔行变色</h2>
		<table border="1">
			<tr>
				<td>第一行</td>
				<td>第一行</td>
			</tr>
			<tr>
				<td>第二行</td>
				<td>第二行</td>
			</tr>
			<tr>
				<td>第三行</td>
				<td>第三行</td>
			</tr>
			<tr>
				<td>第四行</td>
				<td>第四行</td>
			</tr>
			<tr>
				<td>第五行</td>
				<td>第五行</td>
			</tr>
			<tr>
				<td>第六行</td>
				<td>第六行</td>
			</tr>
		</table>
		<table></table>
		<h2>3.对多选框进行操作, 输出选中的多选框的个数</h2>
		<input type="checkbox" name="items" checked/>test1
		<input type="checkbox" name="items"/>test2
		<input type="checkbox" name="items" checked/>test3
		<input type="checkbox" name="items"/>test4
		<input type="button" value="你选中的个数"/>
	</body>
</html>

 

2、练习1

 

3、练习2

 

4、练习3

 

 

 

piao317110771
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery :first选择器使用介绍
10-27
:first：获取第一个元素，在一些特殊情况下还是蛮实用的，下面为大家详细介绍下:first的具体使用，感兴趣的朋友可以参考下
jQuery中:focus选择器用法实例
10-24
主要介绍了jQuery中:focus选择器用法,以实例形式分析了:focus选择器的功能、定义及匹配获取焦点元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
jquery的选择器练习
weixin_46048542的博客
06-29 272
下拉菜单和淘宝精品
jQuery与jQuery选择器及练习
星河梦~的博客
07-25 704
目录jQuery概念使用方式jQuery选择器优点基本选择器基本过滤选择器属性过滤选择器 jQuery 概念 jQuery：是JavaScript的一个库。 它对JavaScript的相关操作进行了封装： 遍历HTML文档、操作DOM、事件处理、Ajax等 书写代码也比JavaScript原来的写法简便许多。 使用方式 （1）引入jQuery库： <script src="jquery.js"></script> 这里的jQuery文件可以在jQuery官网上自行下载文件。 （2）
【jQuery】练习--选择器
天亮就睡
06-13 228
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> </head> <body> <p id="p1">端午节</p> <p>国
前端学习（121）：css圆角
歌谣的博客
12-16 304
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JavaWeb学习总结：JQuery
怪咖的博客
09-02 312
JQuery基础 一，概念 一个JavaScript框架。简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScrip...
jQuery中:input选择器用法实例
12-10
本文实例讲述了jQuery中:input选择器用法。分享给大家供大家参考。具体分析如下： 此选择器匹配所有的input元素。例如：<input type=”text” />等等 语法结构: 代码如下:$(“:input”) 实例代码: 代码如下:...
jQuery中:button选择器用法实例
12-03
本文实例讲述了jQuery中:button选择器用法。分享给大家供大家参考。具体分析如下： 此选择器能够选取所有按钮。 语法结构: 代码如下:$(“:button”) 实例代码: 代码如下: <!DOCTYPE html> <html> <...
jQuery中:text选择器用法实例
10-24
主要介绍了jQuery中:text选择器用法,以实例形式较为详细的分析了text选择器的功能、定义及匹配单行文本框的使用技巧,需要的朋友可以参考下
jQuery基础选择器练习题
07-11
JQ 选择器大全包含：基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
尚硅谷JQuery视频教程
02-28
尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程
JQury的一些练习题
04-28
JQury的一些练习题 大家可以用来练手
jQuery选择器上机练习题及答案.rar
12-02
(答案见下载资源) 上机任务1 用chrome打开dom.sample2.html页面， 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （1）查找id号为tigerLily的元素 （2）查找拥有类myList的元素 （3）查找所有的input元素 （4）查找所有img元素和tr元素 （5）查找id号为coffeePot和id号为someDiv的元素 （6）选择具有id属性的所有元素 （7）选择具有id属性的input元素 （8）选择其value属性等于A的元素 （9）选择其value属性等于A或等于C的元素 （10）选择其title属性值中含有dog的img元素 （11）选择其href属性值以http开头的a元素 （12）选择div元素内嵌套的span元素 上机任务2 用chrome打开dom.sample2.html页面， 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （13）选择元素li，该元素作为拥有myList类的ul元素的直接子元素 （14）选择id号为radioA的input元素后面的第一个input兄弟元素 （15）选择id号为radioA的input元素后面的所有input兄弟元素 （16）选择dom sample页面中第3个tr元素 （17）选择其type属性值checkbox且索引为偶数的input元素 （18）选择非最后一行的tr元素 （19）选择所有的checkbox元素 （20）选择所有被选中的表单元素 （21）选择含有1972的td元素 （22）选择包含有sapn元素的div元素 （23）选择表格中每行的第一个单元格和最后一个单元格 （24）选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面，该页面中内嵌有几个CSS类：.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （1）将拥有alt属性的倒数第二个图片元素应用yellow类 （2）将第一个checkbox表单元素应用.green样式 （3）求id值为checkbox3的元素在所有表单元素里的顺序号 （4）用一条链式语句完成：先对所有img元素应用seeThrough样式，再为所有img元素和tr元素应用yellow样式 （5）用filter方法实现：选择单元格内容为Java或Smalltalk的单元格 （6）取图片集中的第2,3,4张图片 （7）用has方法实现:选择那些包含有ul元素的li元素 （8）将tbody每个单元格里的文字设为：我爱jQuery （9）查找form元素的后代元素中标签为label的元素 （10）查找表单元素中是否有id值为checkbox5的元素 提示： 为某dom元素应用某css样式可以使用jQuery中的addClass方法，例如:将id为tt的div元素应用.bt样式，可用些语句：$("#tt").addClass("color","red");
jqurey选择器练习
07-12
选择器是jqurey最强大的一个方面，压缩包中有详细的练习的例子。
jQuery练习题及答案
热门推荐
weixin_40693633的博客
07-03 8万+
一．选择题1. 下面哪种不是jquery的选择器?(  )  C。A、基本选择器                          B、层次选择器C、css选择器                                   D、表单选择器2. 当DOM加载完成后要执行的函数，下面哪个是正确的?(  )  CA、jQuery(expression, [context])  B、jQuery...
jquery选择器练习例子
刘海闯的专栏
03-20 1036
基本选择器学习 div{ width:150px; height:150px; border:1px dashed #00F; background-color:#CCC; margin:5px; float:left;} .one-1{ width:80px; margin:30px; heig
尚硅谷jQuery学习笔记
qq_43813373的博客
07-16 834
文章目录初识jQueryjQuery对象和dom对象的区别基础选择器 初识jQuery jQuery其实就是javascript的一个库，通过引入使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="./jquery
尚硅谷：jQuery的基本选择器
piao317110771的博客
11-26 202
1、jQuery的基本选择器  2、代码 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content=&
jquery选择器:nth-child()
最新发布
07-16
jQuery选择器中的`:nth-child()`伪类可以用来选择某个父元素下的特定子元素。它基于子元素在父元素中的位置进行选择。以下是几个示例： 选择第n个子元素： ```javascript $(document).ready(function(){ // 选择第3个子元素 $('ul li:nth-child(3)').css('color', 'red'); }); ``` 在上述示例中，`ul li:nth-child(3)`选择器将选择`ul`元素下的第3个`li`子元素，并将其文字颜色设置为红色。 选择特定位置的子元素： ```javascript $(document).ready(function(){ // 选择偶数位置的子元素 $('ul li:nth-child(even)').css('background-color', 'yellow'); // 选择奇数位置的子元素 $('ul li:nth-child(odd)').css('background-color', 'green'); }); ``` 在上述示例中，`:nth-child(even)`选择器将选择偶数位置的子元素，而`:nth-child(odd)`选择器将选择奇数位置的子元素，并分别将它们的背景颜色设置为黄色和绿色。 你还可以使用`:nth-child()`伪类与其他选择器组合使用，以更精确地选择子元素。注意，`:nth-child()`伪类中的索引是从1开始计数的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值