取賦值相關方法：
.html() .text() .size()
.addClass() .removeClass() .hasClass()
.css()
.attr() .prop()
注意：
1、盡量避免直接添加行間樣式，因為其權重過高，這樣不利於響應式設計，破壞了c3 + h5 優雅的解決方案
2、attr和prop的區別：jQuery認為attribute的checked selecked disabled 就是表示該屬性初始狀態的值，property的checked、selecked、disabled表示該屬性實時狀態的值
（true或false)
1、.html( ) （即可取值又可賦值）
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src = "./jquery.js"></script>
<script>
$('ul').html(); //取值 (ul里的li全部取)
控制台中 console.log($('ul').html())；
顯示為
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
$('ul li').html(); //只取第一個li 結果為1
//innerHTML
$('ul').html(''); //賦值(可傳普通字母，也可帶標簽)
//還可傳函數
var arrName = ['周','王','張','白','劉']
$('ul li').html(function(index,ele){
return '<p style="color:orange">'+ arrName[index] + '</p>'
})
//賦值時附一個值會把所有的li都賦成9 (取值時取一個，賦值時賦所有)
$('ul li').html('9');
</script>
2、text( )
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src = "./jquery.js"></script>
<script>
// text innerText
$('ul').text(); //取值
console.log($('ul').text());
顯示
1
2
3
4
5
$('ul li').text(); //取值（都取，與html不同）
console.log($('ul li').text());
顯示 12345
//賦值 $('ul li').text('9') //都變9 $('ul').text('9') //覆蓋掉 變成一個9 $('ul').text('<p>3</P>') //文本形式的標簽 顯示結果： <p>3</p> //也可傳函數 $('ul li').text(function(index,ele){ return arrName[index]; }) </script>
3、size( )
$('ul li').size(); //相當於$('ul li').length
4、.addClass( ) 可傳字符串
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<script>
$('.demo').eq(0).addClass('active')
</script>
也可填兩個屬性 $('.demo').eq(0).addClass('active duyi')
所有div都加active屬性
$('.demo').addClass('active')
也可傳函數
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<script src= "./jquery.js"></script>
<script>
$('.demo').addClass(function(index,ele){
if(index % 2 == 0){
return 'duyi'
}
return 'active'
});
</script>
.removeClass() 用法同理.addClass( )
.hasClass() 判斷標簽中存不存在類名
<div class="demo active"></div>
<div class="demo"></div>
<div class="demo"></div>
<script src= "./jquery.js"></script>
<script>
console.log($('.demo').hasClass('active'));
//有active類名 返回true
小案例 （點擊更改顏色）
<style> .demo{ width:100px; height:100px; background:red; margin-bottom:10px; } .demo.active { background:orange; }; </style> </head> <body> <div class="demo active"></div> <div class="demo"></div> <div class="demo"></div> <script src= "./jquery.js"></script> <script> $('.demo').click(function(e){ $('.demo').removeClass('active') $(this).addClass('active') }); </script>
換膚
.wrapper .style1{ background:orange; } .wrapper .style1 li{ background:blue; } .wrapper .style2{ background:purple; } .wrapper .style2 li{ background:sienna; } .wrapper.active .style1{ background:red; } .wrapper.active .style1 li{ background:blueviolet; } .wrapper.active .style2{ background:paleturquoise; } .wrapper.active .style2 li{ background:greenyellow; } </style> </head> <body> <div class="wrapper"> <ul class = "style1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul class = "style2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script src="./jquery.js"></script> <script> $('.wrapper').click(function (index,ele) { if($(this).hasClass('active')){ $(this).removeClass('active') }else{ $(this).addClass('active') } });
.css( )
//.css賦值形式 $('.demo').css('width','100px') $('.demo').css('width',100) //多個樣式 $('.demo').css({width:'100px',height:'100px',backgroundColor:'red'}) .css({width:'+=100px'}) //這種形式也可以 //也可取值 console.log( $('.demo').css('backgroundColor')) //結果返回RGB
.attr( ) 基於 setAttribute getAttribute
.prop( )
<div class="demo" cst = 'aa'></div>
<input type="checkbox" checked = ''>
<script src="./jquery.js"></script>
<script>
//取值
console.log( $('.demo').attr('class')) // 結果 demo
console.log( $('.demo').attr('cst')) // 結果 aa
//checked中有沒有賦值都返回checked
console.log( $('input').attr('checked'))//取值是selected checked disabled 不用attr方法
//prop 在標簽上取值只能取特性的值
console.log( $('.demo').prop('class')) //cst不可以取
console.log( $('input').prop('checked')) //返回 true 如果把checked = ''去掉則返回false (關注狀態是否被選中)
//賦值
$('.demo').attr('id','demo1'); //自定義的屬性使用attr
$('.demo').prop('id','demo1'); //特性使用prop