Jquery(6)-常规选择器(4)

最新推荐文章于 2021-06-04 03:17:24 发布

msirene

最新推荐文章于 2021-06-04 03:17:24 发布

阅读量106

点赞数

本文链接：https://blog.csdn.net/msirene/article/details/24627131

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>jquey006.html</title>  
      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="this is my page">  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
      
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>  
    <!-- <script type="text/javascript" src="js/jquery-2.1.0.js"></script> -->      
    <script type="text/javascript" src="js006/demo.js"></script>  
    <link rel="stylesheet" href="js006/style.css" type="text/css" />  
  
  </head>  
    
  <body>  
    <a title="num">num1</a>
	<a>num2</a>
	<a>num3</a>
	<a title="no4">num4</a>
	<a bbb="aaa" title="num">num5</a>
  </body>  
</html>

/*
属性选择器
CSS模式 		jQuery 模式 		描述
a[title] 		$('a[title]') 		获取具有这个属性的 DOM 对象
a[title=num1] 		$('a[title=num1]')	获取具有这个属性=这个属性值的DOM对象
a[title^=num] 		$('a[title^=num]')	获取具有这个属性且开头属性值匹配的DOM 对象
a[title|=num] 		$('a[title|=num]')	获取具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号的 DOM 对象
a[title$=num] 		$('a[title$=num]')	获取具有这个属性且结尾属性值匹配的DOM 对象
a[title!=num] 		$('a[title!=num]')	获取具有这个属性且不等于属性值的DOM 对象
a[title~=num] 		$('a[title~=num]')	获取具有这个属性且属性值是以一个空格分割的列表，其中包含属性值的 DOM 对象
a[title*=num] 		$('a[title*=num]')	获取具有这个属性且属性值含有一个指定字串的 DOM 对象
a[bbb][title=num1] 	$('a[bbb][title=num1]')	获取具有这个属性且属性值匹配的 DOM对象
属性选择器也不支持 IE6， 所以在 CSS 界如果要兼容低版本， 那么也是非主流。 但 jQuery
却不必考虑这个问题。
//选定这个属性的
a[title] { //IE6 不支持
color:red;
}
$('a[title]').css('color', 'red'); //兼容 IE6 了
//选定具有这个属性=这个属性值的
a[title=num1] { //IE6 不支持
color:red;
}
$('a[title=num1]').css('color', 'red'); //兼容 IE6 了
//选定具有这个属性且开头属性值匹配的
a[title^=num] { //IE6 不支持
color:red;
}
$('a[title=^num]').css('color', 'red'); //兼容 IE6 了
//选定具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号
a[title|=num] { //IE6 不支持
color:red;
}
$('a[title|="num"]').css('color', 'red'); //兼容 IE6 了
//选定具有这个属性且结尾属性值匹配的
a[title$=num] { //IE6 不支持
color:red;
}
$('a[title$=num]').css('color','red'); //兼容 IE6 了
//选定具有这个属性且属性值不想等的
a[title!=num1] { //不支持此 CSS 选择器
color:red;
}
$('a[title!=num1]').css('color','red'); //jQuery 支持这种写法
//选定具有这个属性且属性值是以一个空格分割的列表，其中包含属性值的
a[title~=num] { //IE6 不支持
color:red;
}
$('a[title~=num1]').css('color','red'); //兼容 IE6
//选定具有这个属性且属性值含有一个指定字串的
a[title*=num] { //IE6 不支持
color:red;
}
$('a[title*=num]').css('color','red'); //兼容 IE6
//选定具有多个属性且属性值匹配成功的
a[bbb][title=num1] { //IE6 不支持
color:red;
}
$('a[bbb][title=num1]').css('color','red'); //兼容 IE6



$(function () {
	
	//$('#box p').css('color', 'red');
	
	//$('p', '#box').css('color', 'blue');
	
	//$('p', $('#box')).css('color', 'orange');
	
	//$('a[title]').css('color', 'red');
	
	//$('a[title=num1]').css('color', 'red');
	
	//$('a[title^=num]').css('color', 'red');
	
	//$('a[title$=num]').css('color', 'red');
	
	//$('a[title|=num]').css('color', 'red');
	
	//$('a[title~=aaa]').css('color', 'red');
	
	//$('a[title*=num]').css('color', 'red');
	
	$('a[bbb][title=num]').css('color', 'red');
	
	
});
*/