jQuery学习：属性

 

 

.attr(属性) 读取属性值

    // 读取第一个div的title属性
    console.log($('div:first').attr('title'));

.attr(属性 ，属性值) 设置属性

            // 给所有div设置name属性 value = xxx
			$('div').attr('name','xxx');

移除属性removeAttr(属性)

	        // 给所有div移除title属性
			$('div').removeAttr('title')

 .attr(属性 ，属性值)会进行覆盖 所以使用

    // 给所有div添加class == 'xxx'
  	$('div').attr('class', 'xxx');

 addClass再次添加class 就可以多次添加

 

        // 给所有div添加class == 'yyy'
			$('div').addClass('yyy');

 removeClass移除类

        // 移除所有div的xxx的class
			$('div').removeClass('xxx');

html() 获取标签体文本

		// 得到最后一个li标签体文本
			console.log($('ul>li:last').html())

 html()社设置标签体文本

        // 设置第一个li的标签体为 "<h1>dddd</h1>"
			$('ul>li:first').html("<h1>dddd</h1>")

val()得到value的值

	console.log($(':text').val())

	        // 得到输入框中的value值
			console.log($('input[type=text]').val())

设置value的值 

	// 将输入框的值设置为'你好'
			$(':text').val('你好')

 attr专门操作属性值为非布尔值的属性

prop:专门操作属性值为布尔值的属性

	// 点击全选实现全选
			var $checkbox=$(':checkbox');//表单选择器
			$('button:first').click(function(){
				//$checkbox.attr("checked",true);
				$checkbox.prop("checked",true)
			}	
			)
			$('button:last').click(function(){
				//$checkbox.attr("checked",false)
				$checkbox.prop("checked",false)
			}	
			)

		<div id="div1" class="box" title="one">class为box的div1</div>
		<div id="div2" class="box" title="two">class为box的div2</div>
		<div id="div3">div3</div>
		<span class="box">class为box的span</span>
		<ul>
			<li>AAAAA</li>
			<li title="hello" class="box2">BBBBB</li>
			<li class="box2">CCCCC</li>
			<li title="hello">DDDDD</li>
			<li title="two"><span>BBBBB</span></li>
		</ul>
		<input type="text" name="username" value="xx">
		<br>
		<input type="checkbox">
		<input type="checkbox">
		<br>
		<button>选中</button>
		<button>不选中</button>

			// 读取第一个div的title属性
			console.log($('div:first').attr('title'));
			// 给所有div设置name属性 value = xxx
			$('div').attr('name', 'xxx');
			// 给所有div移除title属性
			$('div').removeAttr('title')
			// 给所有div添加class == 'xxx'
			$('div').attr('class', 'xxx');
			// 给所有div添加class == 'yyy'
			$('div').addClass('yyy');
			// 移除所有div的xxx的class
			$('div').removeClass('xxx');
			// 得到最后一个li标签体文本
			console.log($('ul>li:last').html())
			// 设置第一个li的标签体为 "<h1>dddd</h1>"
			$('ul>li:first').html("<h1>dddd</h1>")
			// 得到输入框中的value值
			console.log($(':text').val())
			// 将输入框的值设置为'你好'
			$(':text').val('你好')
			// 点击全选实现全选
			var $checkbox=$(':checkbox');//表单选择器
			$('button:first').click(function(){
				//$checkbox.attr("checked",true);
				$checkbox.prop("checked",true)
			}	
			)
			$('button:last').click(function(){
				//$checkbox.attr("checked",false)
				$checkbox.prop("checked",false)
			}	
			)