a毛 jquery 学习记 3 常规选择器(4)

最新推荐文章于 2017-08-17 17:40:47 发布

一平米

最新推荐文章于 2017-08-17 17:40:47 发布

阅读量389

点赞数

分类专栏： jquery学习

本文链接：https://blog.csdn.net/pymxb1991/article/details/51077780

版权

jquery学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jquery 学习三(4)

参考资料：李炎恢老师的视频、w3cschool 、锋利的jquery、

今天看完视频后总体学到的有以下几点

1、当在jQuery中使用高级选择器跟jQuery特有的方法改变对应属性的效果时，最好是用jQuery特有方法来实现因为这样效率高，速度快：如下面代码

     $('#box p').css('color','red'); 
  $('#box').find('p').css('color','red')

	$('#box > p').css('color','blue')
	$('#box').children('p').css('color','red');

	$('#box + p').css('color','red')
	$('#box').next('p').css('color','blue')

	$('#box ~ p').css('color','red')
	$('#box').nextAll(' p').css('color','blue')

还有几个就不多做试验，只要记住就好，用函数的效率比用高级选择的效率高，速度更快；所以建议用jQuery的方法；

属性选择器，先看如下表

做以下试验测试

index.html修改如下

<body> 
     <a tile='num1'> num1</a>
         <a > num2</a>
         <a > num3</a>
         <a > num4</a>
     <a tile='num5'> num5</a>        
</body>

dom.js

$(function(){
		$('a[tile]').css('color','red'); //只改变a下面有tile属性的样式   IE6不支持

	});

$(function(){
		$('a[tile=num1]').css('color','red'); //只改变a下面有tile属性且为'num1'的样式  注意写法：'a[tile=num1]'
	});

$(function(){
		$('a[tile^=num]').css('color','red');  //改变a下面有tile属性且开头为'num'的样式  
	});

	$(function(){
		$('a[tile$=num]').css('color','red');//改变a下面有tile属性且结尾为'num'的样式
	});

$(function(){
		$('a[tile|=num]').css('color','blue');// 改变a下面有title属性且属性值'num'跟一个'-'号的样式 ('-'连接符)
'
	});

	$(function(){
		$('a[tile!=num1]').css('color','blue');//改变a下面有title属性且属性值不为'num1'的样式
	});

$(function(){
		$('a[tile~=num1]').css('color','blue');//改变a下面有title属性且属性值空格的样式 (如:tile='num1  aaa   bbb')
	});

	$(function(){
		$('a[tile*=num1]').css('color','blue');//改变a下面有title属性且属性值包含有'num1'的样式 (如:title='fdafnum1fdaf')
	});

	$(function(){
		$('a[bbb][tile=num]').css('color','blue');改变a下面有bbb属性、title属性且属性值为'num'的样式
	});

现在jQuery的常规选择器就都学完了

一平米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录