操作元素屬性

操作元素的屬性即操作元素的自定義屬性和固有屬性

具體操作有：

（1）獲取元素的屬性值

$(selector).attr(屬性名)

var txt=$('#d1').attr('name')    //獲取元素的name屬性
console.log(txt)

（2）設定元素的屬性值

• 以物件的方式設定屬性值

$(selector).attr({'屬性名':'屬性值'})

• 以key-value的方式設定屬性值

$(selector).attr('屬性名','屬性值')

• 以回呼函式的方式設定屬性值

$(selector).attr('屬性名',function()){
	return '值'
})

例如：

<img />

$('img').attr({'src':'../images/8.png.jpeg'});

$('img').attr('src',function(){
    return '../images/8.png.jpeg'    //回呼函式設定屬性
})

（3）洗掉元素屬性：removeAttr

$(selector).removeAttr('屬性名')

例如：

$('#d1').removeAttr('name')   //洗掉name屬性

操作樣式

具體操作如下：

（1）獲取樣式屬性的值

$(selector).css('樣式屬性名')

例如：

div{
      width: 200px;
       height: 200px;
       background-color: red;
   }

<div>樣式</div>
var c=$('div').css('backgroundColor')   //注意樣式屬性的寫法
console.log(c)     //輸出：rgb(255, 0, 0)

（2）設定樣式屬性的值

• 以傳入物件的方式設定樣式

$(selector).css({'樣式屬性'：'值'})

• 以給函式傳值的方式設定樣式

$(selector).css('樣式屬性名'，'屬性值')

例如：

$('div').css({  
   'width':'200px',
   'height':'200px',
})

$('div').css('color','white')  

操作樣式類

具體操作如下：

（1）添加樣式類

$(selector).addClass(樣式類名)

（2）洗掉樣式類

$(selector).removeClass(樣式類名)

（3）判斷元素是否含有給定的樣式類

$(selector).hasClass(樣式類名)

（4）交替添加（洗掉） 樣式類

$(selector).toggleClass(樣式類名)

練習:判斷用戶名是否可用

.ok{
	color:green
}
.err{
	color:red
}

<label>
	用戶名：
	<input type="text" id="username">
	<span id="msg"></span>
</label>
<p>西安</p>

$(function(){
	$('#username').blur(function(){
		var name=$('#username').val()    //獲取用戶名
		if(name==='abc'){
			S('#span').html('用戶名可用')
			if($('#msg').hasClass('err')){
				$('#msg').removeClass('err')
			}
			$('msg').addClass('ok')
		}else{
			S('#span').html('用戶名不可用')
			if($('msg').hasClass('ok')){
				$('msg').removeClass('ok')
			}
			$('msg').addClass('err')
		}
	})

	$('p').click(function(){
		$('p').toggleClass('ok')  //交替添加屬性
	})
})

操作HTML代碼

操作HTML代碼：作用類似于innerHTML

具體操作如下：

（1）獲取html代碼：

$(selsetor).html()

（2）設定html代碼：（設定/寫入內容）

$(selector).html('html代碼')

例如：

$('div').html('<h2>杭州</h2>')    //向標簽中添加內容

其他操作

操作文本

作用類似于innerText

具體操作如下：

（1）獲取標簽的文本

$(selector).text()

（2）設定標簽的文本：

$(selector).text('文本')

獲取或設定元素的高度和寬度

（1）寬度

$(selector).width()   //獲取寬度

$(selector).width(value)    //設定寬度

（2）高度

$(selector).height()  //獲取高度

$(selector).height(value)   //設定高度

操作值

（1）獲取元素的value屬性

$(selector).val()

（2）設定元素的value屬性

$(selector).val(值)

操作元素的固有屬性

（1）獲取元素的固有屬性

$(selector).prop('屬性名')

（2）設定元素的固有屬性

$(selector).prop('屬性名','屬性值')

例如：

<p id="xh" abc="xhh">星河夢</p>
console.log("固有屬性"+$('p').prop('id'))
console.log('prop讀自定義屬性'+$('p').prop('abc'))
console.log('attr讀自定義屬性'+$('p').attr('abc'))
console.log('attr讀固有屬性'+$('p').attr('id'))

注意：prop 只能讀固有屬性，attr可以讀固有屬性也可以讀自定義屬性

查找和篩選元素

(1)eq(index)：獲取索引為index的元素

(2)filter(expr)：篩選出與指定運算式expr相同的元素

(3)not(expr):篩選出與指定運算式expr不相同的元素

(4)find(expr)：查找與指定運算式相同的子元素

(5)next([expr]):回傳與指定運算式相同的同輩元素

(6)parent([expr])：回傳與運算式相匹配的的唯一的父元素

(7)sibings([expr])：回傳與運算式匹配的所有同輩元素

<div class="d1">西安</div>
<div class="d1">杭州</div>
<div>北京</div>
<div>上海</div>
<div class="d1">廣州
    <p>AAA</p>
    <p>BBB</p>
</div>

var t=$('div').eq(3).html()  //獲取索引值為3的div，并且獲取它的文本
console.log(t)

var srr=$('div').filter('.d1')   //篩選出class=d1的元素
console.log(srr)

var arr1=$('div').not('.d1')   //篩選出于于class=d1不同的元素
console.log(arr1)

var arr2=$('div').find('p')    //查找子元素
console.log(arr2)

var t=$('p').parent('.d1')
            console.log(t)

var s=$('p').siblings()   //查找所有匹配的同輩元素
console.log(s)