jquery 9种选择器

最新推荐文章于 2021-03-10 11:50:40 发布

诗小雨

最新推荐文章于 2021-03-10 11:50:40 发布

阅读量223

点赞数

文章标签： jquery ViewUI

笔记整理，以供工作查阅。
[size=large][color=darkred]1.基本选择器[/color][/size]


<script type="text/javascript">
	/*
	通过each() 在每个div元素内容前 加入 “each”
	通过size() / length 打印页面中 class属性为 xxx 的元素数量
	通过index()  打印 id属性为foo 的div标签 是页面内的第几个div标签*/

	$(function(){
		//获取标签，追加html
		$('div').each(function(){
			$(this).html("each_"+$(this).html());
		});

		var size1 = $('.xxx').size();//3
		var size2 = $('div.xxx').size();//2
		alert(size1+","+size2);

		var which = $('div').index($('#foo'));
		alert(which);//1,从0开始
	});
</script>

<body>
	<div class="xxx">AAAA</div>
	<div id="foo">BBBB</div>
	<div class="xxx">CCCC</div>
	<div>DDDD</div>
	<div>EEEE</div>
	<p class="xxx">FFFF</p>
</body>

[size=large][color=darkred]2.层次选择器[/color][/size]

<script type="text/javascript">
	/*
		将class属性值为xxx的元素下所有a元素字体变为红色
		将class属性值为xxx的元素下直接a元素字体变为蓝色
		将div元素后所有兄弟a元素，字体变为黄色，大小变为30px			*/

	$(function(){
		$('.xxx a').css('color','red');
		$('.xxx>a').css('color','blue');
		$("div~a").css({"color":"yellow","font-size":"30px"});

	});
</script>

<body>
	<div class="xxx">
		<a>div link</a>
		<p>info
			<a>p link</a>
		</p>
	</div>
	<a>link</a>
	<p class="xxx">
		<a>p link</a>
	</p>
	<a>link</a>
</body>

---------过滤器-----------------------------------------------------------------
[size=large][color=darkred]3.基本过滤选择器[/color][/size]

<script type="text/javascript">
	/*
		设置表格第一行，显示为红色
			设置表格除第一行以外 显示为蓝色
			设置表格奇数行背景色 黄色
			设置表格偶数行背景色 绿色
			设置页面中所有标题 显示为灰色
			设置页面中正在执行动画效果div背景黄色，不执行动画div背景绿色		*/

	$(function(){
		$('table tr:first').css("color","red");

		$('table tr:not(:first)').css("color","blue");

		$("table tr:even").css("background-color","yellow");
		$("table tr:odd").css("background-color","green");

		$(":header").css("color","gray");

		$("div:not(:animated)").css("background-color","green");
		$("div").click(function(){
			$(this).slideUp("slow");
			$("div:animated").css("background-color","yellow");
		});

	});
</script>

<body>
		<h1>表格信息</h1>
		<h2>这是一张商品表</h2>
		<table border="1" width="600">
			<tr>
				<th>商品编号</th>
				<th>商品名称</th>
				<th>售价</th>
				<th>数量</th>
			</tr>
			<tr>
				<td>001</td>
				<td>冰箱</td>
				<td>3000</td>
				<td>100</td>
			</tr>
			<tr>
				<td>002</td>
				<td>洗衣机</td>
				<td>2000</td>
				<td>50</td>
			</tr>
			<tr>
				<td>003</td>
				<td>热水器</td>
				<td>1500</td>
				<td>20</td>
			</tr>
			<tr>
				<td>004</td>
				<td>手机</td>
				<td>2188</td>
				<td>200</td>
			</tr>
		</table>

		<div>
			slideDown(speed, [callback]) 
			概述
			通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
			这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
			参数
			speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
			callback (可选)FunctionFunction在动画完成时执行的函数
		</div>
		<div>
			fadeOut(speed, [callback]) 
			概述
			通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
			这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
			参数
			speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
			callback (可选)Function在动画完成时执行的函数
		</div>
</body>

[size=large][color=darkred]4.内容过滤选择器[/color][/size]

<script type="text/javascript">
	/*
		设置含有文本内容 ”xxx” 的 div 的字体颜色为红色
			设置没有子元素的div元素 文本内容 ”这是一个空DIV“
			设置包含p元素 的 div 背景色为黄色
			设置所有含有子元素的span字体为蓝色	*/

	$(function(){
		$("div:contains('xxx')").css("color","red");

		$("div:empty").html("这是一个空DIV");

		$("div:has(p)").css("background-color","yellow");

		$("span:parent").css("color","blue");
	});
</script>

<body>
		<div>今天是个晴天</div>
		<div>明天要去xxx学 java</div>
		<div><span>JavaScript</span> 是网页开发中脚本技术</div>
		<span>JavaScriptxxx</span>
		<div>Ajax 是异步的 JavaScript和 XML</div>
		<div> <p>jQuery</p> 是 JavaScript一个 轻量级框架</div>
		<div></div>
</body>

[size=large][color=darkred]5.属性过滤选择器[/color][/size]

<script type="text/javascript">
	/*
	设置所有含有id属性的div，字体颜色红色
	设置所有class属性值 含有xxx元素背景色为黄色
	对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容
	*/


   	$(function(){
		$("div[id]").css("color","red");

		$("[class*='xxx']").css("background-color","yellow");

		$("div[id][class]").click(function(){
			alert($(this).html());
		});

		alert($("input[name='username']").val());
	});
</script>

<div>AAAA</div>
	<div id="mydiv" class="xxx1">BBBB</div>
	<div class="xxx2">CCCC</div>
	<div id="mydiv2">DDDD</div>
	<div class="divclass">EEEE</div>
	<div id="xxx" class="xxx3">FFFF</div>
	<p class="p-xxx">PPPPPP</p>

	<input type="text" name="username" value="张三" />
</body>

[size=large][color=darkred]6.可见度过滤选择器[/color][/size]

<script type="text/javascript">
	/*
		为表单中所有隐藏域  添加 class属性，值为xxx 
		设置table所有 可见 tr 背景色 黄色
		设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值	

		三种设置不可见的方法：input、display、visibility
		   Display 不占用页面空间
	       Visibility 占用页面空间
	       */


	$(function(){
		$("input:hidden").addClass("class_value");

		$("table tr:visible").css("background-color","yellow");

		// 设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值
		//$("table tr:hidden").css("color","red");
		//$("table tr:hidden").show();
		$("table tr:hidden").each(function(){
			$(this).css("color","red");
			$(this).show();
			alert($(this).text()); // html打印代码， text去掉标签输出文本内容
		});
	});
</script>

<body>
<%--	<a href="#" style="visibility: hidden;">xxx</a> <a href="#">百度</a>--%>

		<form>
			订单号 xxx-xxxx 金额 100元
			<!-- 隐藏令牌号 -->
			<input type="hidden" name="token" value="12312-0xccx-zx-asd-21-asd-gdfgd" />
			<input type="submit" value="确认支付" />
		</form>

		<table>
			<tr style="display:none;">
				<td>冰箱</td>
			</tr>
			<tr style="visibility:hidden;">
				<td>洗衣机</td>
			</tr>
			<tr>
				<td>热水器</td>
			</tr>
		</table>
</body>

[size=large][color=darkred]7.子元素过滤选择器[/color][/size]

<script type="text/javascript">
	/*
	选择id属性mytable 下3的倍数行，字体颜色为红色
			表格 奇数行 背景色 黄色
			表格 偶数行 背景色 灰色
			只有一个td的 tr元素 字体为 蓝色
	*/
   	$(function(){

		$("#mytable tr:nth-child(3n)").css("color","red");

		$("#mytable tr:nth-child(odd)").css("background-color","yellow");
		//$("#mytable tr:even").css("background-color","yellow");

		$("#mytable tr:nth-child(even)").css("background-color","gray");
		// $("#mytable tr:odd").css("background-color","yellow");

		$("#mytable tr td:only-child").css("color","blue");
	});
</script>

<body>
	<table border="1" width="400" id="mytable">
			<tr><td>1</td><td>冰箱</td></tr>
			<tr><td>2</td><td>洗衣机</td></tr>
			<tr><td>3</td><td>热水器</td></tr>
			<tr><td>4</td><td>电饭锅</td></tr>
			<tr><td>5</td><td>电磁炉</td></tr>
			<tr><td>6</td><td>豆浆机</td></tr>
			<tr><td>7</td><td>微波炉</td></tr>
			<tr><td>8</td><td>电视</td></tr>
			<tr><td>9</td><td>空调</td></tr>
			<tr><td>10</td><td>收音机</td></tr>
			<tr><td>11</td><td>排油烟机</td></tr>
			<tr><td>12</td><td>加湿器</td></tr>
			<tr><td>13 电暖气</td>加湿器</tr>
		</table>
</body>

---------表单过滤器-----------------------------------------------------------------
[size=large][color=darkred]8.表单过滤选择器[/color][/size]

<script type="text/javascript">
	/*
	对所有text框和password框，添加离焦事件，校验输入内容不能为空
			对button 添加 点击事件，提交form表单
	*/
   	$(function(){

   		$(":text,:password").blur(function(){
			var value = $(this).val();
			if(value.trim()==""){
				alert($(this).attr("name")+"不能为空！");
			}
		});

		// 对button 添加 点击事件，提交form表单
		$(":button").click(function(){
			$("form").submit(); 
		});
	});
</script>

<body>
	<form action="login">
		用户名 <input type="text" name="username" /> <br/>
		密码  <input type="password" name="password" /> <br/>
		<input type="button" value="提交" />
	</form>
</body>

[size=large][color=darkred]9.表单对象属性过滤选择器[/color][/size]

<script type="text/javascript">

	$(function(){
		// 点击button 打印radio checkbox select 中选中项的值
		$("#mybutton").click(function(){
			alert("性别：" + $("input[name='gender']:checked").val());
			// 多选框，val() 只能取到第一个值 
			//alert("爱好：" + $("input[name='hobby']:checked").val());
			$('input[name="hobby"]:checked').each(function(){
				alert($(this).val());
			});
			alert("城市：" + $("select[name='city'] option:selected").val());

			// 将注册按钮设置不可用 
			$("input[value='注册']").attr("disabled","disabled");
		});
	});
</script>

<body>
	<form action="regist">
		性别 ：<input type="radio" name="gender" value="男" /> 男 <input type="radio" name="gender" value="女"/> 女 <br/>
		爱好: <input type="checkbox" name="hobby" value="体育" />体育 
		<input type="checkbox" name="hobby" value="读书" />读书 
		<input type="checkbox" name="hobby" value="音乐" />音乐 
		<input type="checkbox" name="hobby" value="旅游" />旅游  <br/>
		城市 ：<select name="city">
			<option value="北京">北京</option>
			<option value="上海">上海</option>
			<option value="广州">广州</option>
		</select><br/>
		<input type="button" value="获取选中的值 " id="mybutton" />
		<input type="submit" value="注册" />
	</form>
</body>

诗小雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 9种选择器

笔记整理，以供工作查阅。[size=large][color=darkred]1.基本选择器[/color][/size][code="java"] /* 通过each() 在每个div元素内容前加入 “each” 通过size() / length 打印页面中 class属性为 xxx 的元素数量通过index() 打印 id属性为foo 的div标签是页面内...
复制链接

扫一扫