jQuery属性使用

梦里梦外; 2022-12-02 04:24 161阅读 0赞

attr()用于读取或设置属性  
removeAttr()用于移除属性  
addClass()用于添加属性  
html()用于设置或读取文本  
val()用于读取或设置value值  
prop()专门用于操作属性值为boolean类型的。  
完整代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>属性</title>
    		<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
    		<script type="text/javascript">
    			$(function(){
    				//读取第一个div的title属性
    				$("div:first").attr("title");
    				//给所有div设置name属性
    				$("div").attr('name','my');
    				//移除所有div的title属性
    				$("div").removeAttr("title");
    				//给所有的div设置class="my";
    				$("div").attr('class','my');
    				//给所有的div添加class='abc'
    				$("div").addClass('abc');
    				//移除所有div的my的class
    				$("div").removeClass('my');
    				//得到最后一个li的标签文本
    				$("li:last").html();
    				//设置第一个li的标签体为"<h1>mmmm</h1>"
    				$("li:first").html("<h1>mmmm</h1>");
    				//得到输入框中的value值
    				$(":text").val();
    				//将输入框的值设为my
    				$(":text").val("my");
    				//点击“全选”按钮实现全选
    				//prop专门操作属性值为布尔值，attr();操作属性值为非布尔值的属性
    				$("button:first").click(function{
    					$(":checked").prop('checked',true);
    				});
    				//点击“全不选”按钮实现全不选
    				$("button:last").click(function{
    					$(":checked").prop('checked',true);
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<div id="div1" class="box" title="one">div1(class='box')</div>
    		<div id="div2" class="box" title="two">div2(class='box')</div>
    		<div id="div3">div3</div>
    		<span class="box">span(class="box")</span>
    		<br />
    		
    		<ul>
    			<li>AAAAA</li>
    			<li title="hello">BBBBB</li>
    			<li class="box">CCCCC</li>
    			<li title="hello">DDDDD</li>
    			<li title="two">BBBBB</li>
    			<li style="display: none;">我本来是隐藏的</li>
    		</ul>
    		<input type="text" name="username" value="my" />
    		<br />
    		<input type="checkbox" />
    		<input type="checkbox" />
    		<br />
    		<button>选中</button>
    		<button>不选中</button>
    	</body>
    </html>