jQuery屬性操作
1.添加或者修改屬性 attr();
第一種寫法：普通寫法
如果原來有這個(gè)屬性，就在原本屬性上面修改绪穆，如果沒有辨泳，則添加這個(gè)屬性
box.attr('class','tc');
box.attr('init','big')
第二種寫法：連綴寫法
box.attr('class','tc').attr('init','big').attr('index','100');
第三種寫法：對(duì)象寫法
box.attr({ //大括號(hào)一定不能漏掉
'class':'ttl',
'init':'small',
'ps':'ps'//最后一條不要給逗號(hào)了
});
移除屬性 removeAttr;
box.removeAttr('class');
box.removeAttr('class').attr('init','ps'); //移除屬性和添加屬性可以同時(shí)使用
2.class操作
添加class addClass
box.addClass('tc'); //在你已經(jīng)有了的class里面添加，會(huì)幫你用空格隔開
移除class removeClass();
box.removeClass('ct').addClass('opp') //添加刪除同樣可以一起用
3.內(nèi)容獲取與操作
var txt=box.html()//獲取元素內(nèi)容
console.log(txt)
4.設(shè)置內(nèi)容
box.click(function(){
box.html('我變成一頭牛了')
});
//如果設(shè)置的內(nèi)容帶有標(biāo)簽的話玖院，就會(huì)對(duì)標(biāo)簽進(jìn)行解析
box.click(function(){
box.html('<ul><li>現(xiàn)在我是一個(gè)標(biāo)簽</li></ul>')
});
//text()和html()十分相似菠红，看不出什么區(qū)別
//那么，他們唯一的區(qū)別难菌，就是text（）不會(huì)解析標(biāo)簽
//html()會(huì)解析標(biāo)簽试溯，text()不管里面是什么，都給你輸出純文本郊酒；
box.click(function(){
box.text('<ul><li>現(xiàn)在我是一個(gè)標(biāo)簽</li></ul>')
});
5.獲取 input:text 的值
box.click(function(){
console.log($(':text').val())//獲取input的內(nèi)容值
});
6.CSS的樣式操作
box.click(function(){
box.css({
'height':'500px',
'width':'500px',
'background':'red'
});
});
7.獲取內(nèi)容寬高
/*//獲取內(nèi)容寬高
alert(box.width());
//獲取可視區(qū)域的寬高
alert(box.innerWidth());//width+padding
//獲取width+padding+border
alert(box.outerWidth())*/
//設(shè)置寬高
box.width(400);
box.height('400px')
8.獲取與設(shè)置位置
//獲取與設(shè)置位置
//offset 位置是相對(duì)于頁面來定位的
//哪怕元素基于父元素定位遇绞，offset穿回來的值還是基于網(wǎng)頁的
var box=$('#box');
alert('left:'+box.offset().left+",top:"+box.offset().top);*/
$('.mian').click(function(){
//$('#box').offset().left='100px'; 錯(cuò)誤的寫法
$('#box').offset({ //正確寫法
left:100,
top:50
});
});
/*var box=$('#box');
//offset只能獲取距離網(wǎng)頁的位置
//那么當(dāng)我們根據(jù)父級(jí)定位的時(shí)候，獲取距離父級(jí)的位置燎窘，則用：position摹闽；
//注意，position是只讀褐健，不可修改付鹿；
alert('left:'+box.offset().left+",top:"+box.offset().top);
alert('left:'+box.position().left+",top:"+box.position().top);*/
//獲取頁面卷入高度：
window.onscroll=function(){
console.log($(document).scrollTop())
}
篩選
1.過濾
eq(); 查找JQ對(duì)象中的指定索引對(duì)象；
eq(i) 通過索引值找到對(duì)象蚜迅，和 arr[i] 意思一樣舵匾，只不過是jq的方法而已
var lis = $('.uls li');
lis.eq(2).css('color','red')
console.log(lis.eq(2))
2.first() 查找第一個(gè)
lis.first().css('color','red')
3.last()查找最后一個(gè)
lis.last().css('color','aqua')
4.hasClass
判斷一個(gè)JQ對(duì)象中是否具有指定的class,只要集合中有一個(gè)對(duì)象包含指定class，就返回true
要注意慢叨，它返回的查找的對(duì)象纽匙，而是true布爾值
console.log(lis.hasClass('lis-3'))
5.is() 判斷當(dāng)前jq對(duì)象是否是指定的類型务蝠、選擇器
console.log(lis.eq(2).is('li')) //判斷當(dāng)前jq對(duì)象是不是li
console.log(lis.eq(2).is(lis)) //判斷是否是lis里面的
console.log(lis.eq(2).is(':nth-of-type(3)')); //判斷是否是當(dāng)前集合的第三個(gè)元素*
6.map()給jq中的每一個(gè)對(duì)象一個(gè)函數(shù)拍谐，參數(shù)只能是函數(shù)
btn.click(function(){
lis.map(function(){
console.log($(this).index())
})
});
7.has() 選擇子元素有指定的選擇器或者標(biāo)簽的元素
$('li').has('[class]').css('color','red');
$('li').has('p').css('color','red');
8.not() 除了括號(hào)里面的其他元素
var lisn = lis.not('[class]').css('color','red')
console.log(lisn);
9.slice() 根據(jù)范圍選擇
lis.slice(2).css('color','red'); //從2開始截取，2后面的都被選中
lis.slice(2,5).css('color','red'); // 截取2-5之間的元素
lis.slice(-5,-2).css('color','red') // 倒過來截取
demo 五星好評(píng)
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
font-size: 40px;
text-align: center;
line-height: 40px;
margin: 100px;
}
ul li {
float: left;
cursor: pointer;
width: 40px;
color: red;
}
</style>
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
var ul = $("ul>li");
var wjx1 = "☆",wjx2 = "★";
ul.mouseenter(function(){
$(this).html(wjx2).prevAll().html(wjx2).end().nextAll().html(wjx1);
}).click(function(){
$(this).addClass("checked").siblings().removeClass("checked");
})
ul.mouseout(function(){
ul.text(wjx1);
$('.checked').text(wjx2).prevAll().text(wjx2).end().nextAll().text(wjx1);
})
});
</script>
