53 JQUREY 选择器 选择器空格的区别

最新推荐文章于 2024-10-06 04:03:15 发布
最新推荐文章于 2024-10-06 04:03:15 发布
阅读量98 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：https://my.oschina.net/900116/blog/482206
版权

1 www.jquery.com

2 利用jQuery获取页面内的对象并赋予属性

$(document).ready(function ()
	{
	       //获得标签为a的对象，得到的是一个数组
		$("a").click(function()
		{
			alert("a");
		})
	
	});
3 DOM对象与JQUERY对象相互转换 
var pElement = document.getElementsByTagName("p")[0];

    //将DOM对象转换为jQuery对象
	
	var pElementjQuery = $(pElement);

    //alert("DOM对象结果：" + pElement.innerHTML);
    //alert("jQuery对象结果：" + pElementjQuery.html());

    var cm = $("#clickMe"); //获得的是jQuery对象 通过ID名

    // jQuery对象转换为DOM对象(第一种方式)

	var t = cm[0]; // t是DOM对象
	alert(t.innerHTML);

    // jQuery对象转换为DOM对象(第二种方式)

    var s = cm.get(0);

	alert(s.innerHTML); //s是DOM对象


4 CSS属性的获取与设置

<a id="a1" href="www.baidu.com">click</a>
	<script type="text/javascript">
		//获得对象的长度
		alert($("#a1").length);
		//获得对象的属性（一个参数）
		alert($("#a1").css("color"))
		//设置对象的属性（两个参数）
		$("#a1").css("color","rgb(255,255,0)")
		alert($("#a1").css("color"))
	</script>

5 选择器

jQuery选择器的分类
–基本选择器 （basic）

（1）#id 根据给定的id匹配一个元素 返回单个元素 ，如果不存在，则返回一个空的jQuery对象。

<a id="a1" href="www.baidu.com">click</a>
<a id="a1" href="www.sohu.com">click</a>
<script type="text/javascript">
//获得对象的长度
alert($("#a1").length);
</script>

（2） .class 根据给定的类名匹配元素 返回集合元素 ，无论该css类是否真的存在，只要定义在元素中就能被jQuery查询到。 


<a class="c1"id="a1" href="www.sohu.com">click</a>
<a class="c1" href="www.baidu.com">click</a>


alert($(".c1").length)


（3）element 根据给定的元素名匹配元素 返回集合元素

（4）* 匹配所有元素

（5）selector1，selector2 将每一个选择器匹配的元素合并并返回  返回合集元素


基本选择器示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="jquery-1.11.1.js"></script>

<script type="text/javascript">
	$(document).ready(function()
	{
		//取id
		$("#button1").click(function()
		{
			$("#one").css("background", "blue");
		});
		//取class
		$("#button2").click(function()
		{
			$(".mini").css("background", "red");
		});
		//取元素
		$("#button3").click(function()
		{
			$("div").css("background", "green");
		});
		//取所有元素
		$("#button4").click(function()
		{
			$("*").css("background", "rgb(255,0,255)");
		});
		//多个标签集合
		$("#button5").click(function()
		{
			$(".mini,#two").css("background", "blue");
		});

	});
</script>

</head>
<body>

	<h3>基本选择器.</h3>

	<input type="button" value="test1" id="button1">
	<input type="button" value="test2" id="button2">
	<input type="button" value="test3" id="button3">
	<input type="button" value="test4" id="button4">
	<input type="button" value="test5" id="button5">




	<div class="one" id="one">
		id为one,class为one的div
		<div class="mini">class为mini</div>
	</div>

	<div class="one" id="two" title="test">
		id为two,class为one,title为test的div.
		<div class="mini" title="other">class为mini,title为other</div>
		<div class="mini" title="test">class为mini,title为test</div>
	</div>

	<div class="one">
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini"></div>
	</div>



	<div class="one">
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini" title="tesst">class为mini,title为tesst</div>
	</div>


	<div style="display:none;" class="none">style的display为"none"的div</div>

	<div class="hide">class为"hide"的div</div>

	<div>
		包含input的type为"hidden"的div<input type="hidden" size="8" />
	</div>

</body>
</html>

–层次选择器 （level）


$(document).ready(function()
  {
	$("#button1").click(function()
	{
		$('body div').css("background", "red");
	});

	$("#button2").click(function()
	{
		$('body > div').css("background", "blue");
	});

	$("#button3").click(function()
	{
		//$('.one + div').css("background", "green");
		$('.one').next('div').css("background", "green");
	});

	$("#button4").click(function()
	{
		//$("#two ~ div").css("background", "orange");
		//$('#two').nextAll('div').css("background", "orange");
		$('#two').siblings('div').css("background", "orange");
	});


  });

–过滤选择器 （filter） 



$("#button1").click(function()
	{
		$("div:first").css("background", "red");
	});

	$("#button2").click(function()
	{
		$("div:last").css("background", "blue");
	});

	$("#button3").click(function()
	{
		$("div:even").css("background", "green");
	});

	$("#button4").click(function()
	{
		$("div:odd").css("background", "orange");
	});
	
	$("#button5").click(function()
	{
		$("div:eq(3)").css('background', "pink");
	});

	$("#button6").click(function()
	{
		$("div:not(.one)").css('background', "yellow");
	});
    
	$("#button7").click(function()
	{
		$("div:gt(3)").css('background', "#abcdef");
	})

	$("#button8").click(function()
	{
		$("div:lt(3)").css('background', "#fedcba");
	})

	$("#button9").click(function()
	{
		$(":header").css('background', "#cdefab");
	})



–基本过滤
–内容过滤


$("#button1").click(function()
	{
		$("div:contains('test')").css("background", "red");
	});

    $("#button2").click(function()
	{
		$("div:empty").css("background", "green");
	});

	$("#button3").click(function()
	{
		$("div:has(.mini)").css("background", "blue");
	});

	$("#button4").click(function()
	{
		$("div:parent").css("background", "#abaaee");
	});




–可见性过滤




$().ready(function()
   {
		$("#button1").click(function()
		{
			//alert($('div:hidden').length);
			//alert($('input:hidden').length);

			$('div:hidden').show(10000).css("background", "blue");
		});

		$("#button2").click(function()
		{
			$('div:visible').css("background", "red");
		});
   });

–属性过滤



$("#button1").click(function()
	{
		$('div[title]').css("background", "green");
	});

    $("#button2").click(function()
	{
		$("div[title=test]").css("background","red");
	});

	$("#button3").click(function()
	{
		$("div[title!=test]").css("background","pink");
	});

	$("#button4").click(function()
	{
		$("div[title^=test]").css("background","pink");
	});

	$("#button5").click(function()
	{
		$("div[title$=st]").css("background","pink");
	});

	$("#button6").click(function()
	{
		$("div[title*=st]").css("background","pink");
	});

	$("#button7").click(function()
	{
		$("div[id][title^=t][title$=t]").css("background","pink");
	});



–子元素过滤

$(function()
{
	$("#button1").click(function()
	{
		//div class为one的div 第二个子元素 nth-child属性从1开始计数
		$('div.one :nth-child(2)').css("background", "red");
	});

	$('#button2').click(function()
	{
		$('div.one :first-child').css('background', 'green');
	});
	
	$('#button3').click(function()
	{
		$('div.one :last-child').css('background', 'pink');
	});

	$('#button4').click(function()
	{
		$('div.one :only-child').css('background', 'orange');
	});

});









–表单对象属性过滤



$("#button1").click(function()
	{
		$("#form1 input:not(.test):enabled").val("hello world");
	});

	$("#button2").click(function()
	{
		$("#form1 input:not(.test):disabled").val("welcome");
	});

	$(":checkbox").click(function()
	{
		$("div").html('<font color="blue"><b>' + $('input:checked').length +'</b></font>');
	});

	$('select').change(function()
	{
		var str = '';

		$('select:selected').each(function()
		{
			str += $(this).text() + ",";
		});

		$('div:last').html('<b>' + str + '</b>');
	});







–表单选择器 （form）


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 <script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">

$(function()
{
	//alert($('#form1 :text').length);
    //alert($('#form1 :password').length);
    //alert($('#form1 :radio').length);
	//alert($('#form1 :checkbox').length);
	//alert($('#form1 :submit').length);
	alert($('#form1 :input').length);//表单选择器 结果为15
	alert($('#form1 input').length);//层次选择器  结果为12 相当于选择所有标签为input的元素
});



</script>


 
</head>
<body>
  <form id="form1" action="#">
    <input type="button" value="Button"/><br/>
    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
    <input type="file" /><br/>
    <input type="hidden" /><div style="display:none">test</div><br/>
    <input type="password" /><br/>
    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
    <input type="reset" /><br/>
    <input type="submit" value="提交"/><br/>
    <input type="text" /><br/>
    <select><option>Option</option></select><br/>
    <textarea rows="5" cols="20"></textarea><br/>
    <button>Button</button><br/>
  </form>
 
  <div></div>
</body>
</html>



示例1:    对表格进行隔行的颜色设置

<!DOCTYPE html>
<html>
<head>
<title>隔行变色</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(function()
	{

		$("#button").click(function()
		{
			//alert($("tr:even").length);
			$("#table tr:even").css('background', 'red');
			$("table tr:even").css('background', 'red');
			//$("tr:even").css('background', 'red');
			//$("tr:odd").css('background', 'green');
		});

	});
</script>
</head>

<body>
	<input type="button" value="click" id="button" />
	<table border="2" id="table" align="center" width="80%">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>








	</table>
</body>
</html>

示例2 ：统计页面中有多少checkbox被选中 


<!DOCTYPE html>
<html>
  <head>
    <title>统计checkbox</title>
	<script type="text/javascript" src="jquery-1.11.1.js"></script>
	<script type="text/javascript">
	$(function(){
	
	$("#button").click(function(){
	
	// 属性过滤与表单对象过滤
	alert($("input[type=checkbox]:checked").length);
	});})</script>
	
  

  </head>
  
  <body>
  <input type="button" value="click" id="button"/>
  <input type="checkbox" value="123">1
  <input type="checkbox" value="123">1
  <input type="checkbox" value="123">1
  <input type="checkbox" value="123">1
      <input type="checkbox" value="123">1
       <input type="checkbox" value="123">1
        <input type="checkbox" value="123">1
        
   <div id="div"></div>
  </body>
</html>

 选择器的空格定义 

$(function()
{
	alert($('.test :hidden').length); //选择class为test的元素当中的隐藏子元素 是子元素
	alert($('.test:visible').length); //选择隐藏的class为test的元素
});


</script>


 </head>

 <body>
  
 <div class="test">
    <div style="display:none">aaaa</div>
    <div style="display:none">bbbb</div>
    <div style="display:none">cccc</div>
    <div class="test" style="display:none">dddd</div>
 </div>

 <div class="test" style="display:none">eeee</div>













转载于:https://my.oschina.net/900116/blog/482206

chunhuo3827
关注
jQuery选择器
m0_57774967的博客
06-16 4713
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
04-jQuery-选择器
记录java学习日常~
05-20 1119
("p:last") // 选择最后一个 元素。
JQurey选择器
qq_38176719的博客
05-31 459
1.基本选择器 标签选择器  类选择器、ID选择器、并集选择器、交集选择器、全局选择器 2.层次选择器 ·后代选择器、子选择器、相邻元素选择器、同辈元素选择器 3.属性选择器 就是通过HTML元素的属性选择元素的选择器 4.基本过滤选择器 定义： 通过元素所处的位置来获取元素的 语法： ：header   选取所有标题元素 ：focus  选取当前获取焦点的元素 5.可见性
jQuery基础----常用的选择器
u011863822的博客
07-20 1379
本篇就是列举了一些常用的jQuery选择器而匹配元素，当然如果学习过css会更好理解的。
jQuery入门基础——选择器
m0_62019369的博客
03-16 2655
jQuery01-入门-选择器 目标：jQuery第一次课 入门 和 选择器 重点：选择器 问： 3W1H： What：jQuery是什么？ Why：为什么要学jQuery？ Where：什么情况下用jQuery？ How：怎么用？ 答： What：jQuery是JavaScript的类库，封装了很多js代码。类似java中的类库一样里面一个类中有很多别人写好的功能。90%以上的公司都在用jQuery。划重点，这句话要考 官网：http://jquery.com/ Why：可以简化J
js与jQuery的区别以及jQuery选择器和方法的使用
全栈
03-16 651
目录 使用jQuery js与jQuery代码对比 jQuery选择器：用来选中元素 基本方法 js与jQuery代码对比 jQuery选择器：用来选中元素 基本方法 使用jQuery jQuery是什么：jQuery是JavaScript的类库，封装了很多js代码。类似java中的类库一样里面一个类中有很多别人写好的功能。90%以上的公司都在用jQuery。 官网：http://jquery.com/ 为什么要学jQuery：可以简化JavaScript开发，jQuery中包
jQuery选择器正则表达式
xfxf996的博客
04-24 1461
I am after documentation on using wildcard or regular expressions (not sure on the exact terminolog
JQuery属性值选择器
肥陈
05-27 1500
$("[attribute|=‘value’]") 选择指定属性值等于给定字符串或改字符串为前缀（该字符串后跟一个连字符“-”）的元素。 attribute: 一个属性名 value: 一个属性值 $(function(){ $(‘a[hreflang|=“en”]’).css(“border”,“2px solid red”); //查找hreflang属性值是英语的所有链接。 }); $("[...
jQuery 选择器
weixin_45045428的博客
01-17 348
一、基本选择器 1. id选择器，如选择id为btn的元素 $("#btn") 2.class选择器，如选择class为light的元素 $(".class") 3.标签选择器，如选择名字为input的所有元素 $("input") 5.选择所有元素 $("*") 6.其他选择器，如选择标签名为span和id为one的所有元素 $("span,#one") 二、层次选择器 ...
jquery层次选择器的介绍
01-21
jquery层次选择器，包括空格、>、next、+、nextAll、~、siblings、prev()、prevAll()等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在之后的同辈元素列表 4、...
jQuery 内容选择器，属性和属性节点，attr()属性
weixin_42270374的博客
09-18 706
冲突问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>冲突问题</title> </head> <body> <script src="../js/jquery.js">&lt...
XHTML 简介
wjs2024的博客
10-04 422
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 951
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 463
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 557
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1211
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
如何使用Redisson的布隆过滤器？
付聪
10-02 407
【代码】如何使用Redisson的布隆过滤器？
VUE2常见问题以及解决方案汇总（不断更新中）
最新发布
tangdou369098655的博客
10-06 299
解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突，点击事件不生效（表格行点击事件和行内元素点击事件冲突）需要阻止事件冒泡，vue子组件传递数据给父组件，vue + elementui 使用dialog弹出框作为子组件，首次点击弹框可以显示，第二次点击弹框后赋值无法打开弹框，动态循环生成el-checkbox后数据更新但是页面不更新，无法取消勾选，点击无效问题
jqurey完整实例
09-06
通过使用`$("div")`选择器，我们将选取所有的div元素，并通过`.each()`方法遍历它们。在遍历过程中，我们为每个div元素添加了鼠标点击事件，当点击时，通过`.css()`方法改变背景颜色为蓝色。 通过这个实例，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值