jquery属性

最新推荐文章于 2023-01-12 14:20:25 发布

birdlun

最新推荐文章于 2023-01-12 14:20:25 发布

阅读量110

点赞数 1

分类专栏： 05 jquery

本文链接：https://blog.csdn.net/Birdmotianlun/article/details/96486180

版权

05 jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了jQuery中用于属性操作的方法，重点讲解了hasClass()和filter()。hasClass()用于检查元素是否包含特定类名，返回布尔值。filter()则可以筛选出包含特定类名的元素，例如检查<p>元素是否包含'intro'类。

摘要由CSDN通过智能技术生成

列：练习jquery属性

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width:200px;
				height: 300px;
				border:1px solid red;
				background: green;
			}
			
		</style>
		<script type="text/javascript" src="js/jquery-2.0.2.min.js" ></script>
		<script type="text/javascript">
			  $(function(){
			    //设置img的属性
			  	 $('img').attr({src:'img/111.jpg',title:"aaaa"})
				//删除img的属性
			  	 $('img').removeAttr('src');
				 
				//获取属性的值
			  	  alert($('#box').attr('title'))
				
				//动态添加样式
			  	$('#box').addClass('box')
				//删除样式
			  	$('#box').removeClass('box')
			  	
				//获取第一个li的值
			  	alert($('li:first').html());
			  	//设置第一个li的值
			  	$('li:first').html('<h2>hhhhh</h2>')
			  	
			  	//纯文本,无法解析html标签 （单引号中的标签也是值）
			  	$('li:first').text('<h2>hhhhh</h2>')
			  });
		</script>
	</head>
	<body>
		<img src=""/>
		<img src="" />
		<div id="box" title="xxxx"></div>
		<ul>
			<li>aaaa</li>
			<li>bbbb</li>
			<li>cccc</li>
		</ul>
	</body>
</html>

筛选

hasclass（）

hasClass() 方法检查被选元素是否包含指定的类名称。

如果被选元素包含指定的类，该方法返回 "true"。

filter（）

筛选

列：检查 <p> 元素是否包含 "intro" 类：

<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("p").hasClass("intro"));//结果：true
  });
});
</script>

</head>
<body>
<h1>这是一个段落标题</h1>
<p class="intro">这是一个段落</p>
<p> 这是另外一个段落</p>
<button>是否有 p 元素使用了 "intro" 类?</button>

</body>
</html>

列：筛选练习

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.mybox{
				width:200px;
				height: 300px;
				border:1px solid red;
				background: green;
			}
			
		</style>
		<script type="text/javascript" src="js/jquery-2.0.2.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				var lis=$('ul>li');//获取所有的li
				lis.first().css('background','red');//设置第一个li为红色
				
				//检测div是否含有mybox类
				alert($('div').hasClass('mybox'))//结果：true
				
			    //筛选：如果li中的title=abc成立，设置背景颜色
				lis.filter('[title=abc]').css("background",'red');
				//筛选：如果li中的title=abc不成立，设置背景颜色
				lis.not('[title=abc]').css("background",'red');
				//如果li含有span元素就设置背景颜色为红色
				lis.has('span').css("background",'red');
				
				//设置ul的子、孙子元素的背景色为红色
				var ul=$('ul');
				ul.children().css("background",'red');
				//设置ul的子元素的第一个span背景色为红色
				ul.children('span:eq(0)').css("background",'red');
			});
		</script>
	</head>
	<body>
		<div class="mybox"></div>
		<ul>
			<span>span1</span>
			<li>aaa</li>
			<li title="abc">aaa</li>
			<li>aaa</li>
			<li><span>span3</span>aaaaa</li>
			<span>span1</span>
		</ul>
	</body>
</html>