jQuery属性操作
1.添加或者修改属性 attr();
第一种写法：普通写法
如果原来有这个属性，就在原本属性上面修改，如果没有，则添加这个属性
box.attr('class','tc');
box.attr('init','big')
第二种写法：连缀写法
box.attr('class','tc').attr('init','big').attr('index','100');
第三种写法：对象写法
box.attr({ //大括号一定不能漏掉
'class':'ttl',
'init':'small',
'ps':'ps'//最后一条不要给逗号了
});
移除属性 removeAttr;
box.removeAttr('class');
box.removeAttr('class').attr('init','ps'); //移除属性和添加属性可以同时使用
2.class操作
添加class addClass
box.addClass('tc'); //在你已经有了的class里面添加，会帮你用空格隔开
移除class removeClass();
box.removeClass('ct').addClass('opp') //添加删除同样可以一起用
3.内容获取与操作
var txt=box.html()//获取元素内容
console.log(txt)
4.设置内容
box.click(function(){
box.html('我变成一头牛了')
});
//如果设置的内容带有标签的话，就会对标签进行解析
box.click(function(){
box.html('<ul><li>现在我是一个标签</li></ul>')
});
//text()和html()十分相似，看不出什么区别
//那么，他们唯一的区别，就是text（）不会解析标签
//html()会解析标签，text()不管里面是什么，都给你输出纯文本；
box.click(function(){
box.text('<ul><li>现在我是一个标签</li></ul>')
});
5.获取 input:text 的值
box.click(function(){
console.log($(':text').val())//获取input的内容值
});
6.CSS的样式操作
box.click(function(){
box.css({
'height':'500px',
'width':'500px',
'background':'red'
});
});
7.获取内容宽高
/*//获取内容宽高
alert(box.width());
//获取可视区域的宽高
alert(box.innerWidth());//width+padding
//获取width+padding+border
alert(box.outerWidth())*/
//设置宽高
box.width(400);
box.height('400px')
8.获取与设置位置
//获取与设置位置
//offset 位置是相对于页面来定位的
//哪怕元素基于父元素定位，offset穿回来的值还是基于网页的
var box=$('#box');
alert('left:'+box.offset().left+",top:"+box.offset().top);*/
$('.mian').click(function(){
//$('#box').offset().left='100px'; 错误的写法
$('#box').offset({ //正确写法
left:100,
top:50
});
});
/*var box=$('#box');
//offset只能获取距离网页的位置
//那么当我们根据父级定位的时候，获取距离父级的位置，则用：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对象中的指定索引对象；
eq(i) 通过索引值找到对象，和 arr[i] 意思一样，只不过是jq的方法而已
var lis = $('.uls li');
lis.eq(2).css('color','red')
console.log(lis.eq(2))
2.first() 查找第一个
lis.first().css('color','red')
3.last()查找最后一个
lis.last().css('color','aqua')
4.hasClass
判断一个JQ对象中是否具有指定的class,只要集合中有一个对象包含指定class，就返回true
要注意，它返回的查找的对象，而是true布尔值
console.log(lis.hasClass('lis-3'))
5.is() 判断当前jq对象是否是指定的类型、选择器
console.log(lis.eq(2).is('li')) //判断当前jq对象是不是li
console.log(lis.eq(2).is(lis)) //判断是否是lis里面的
console.log(lis.eq(2).is(':nth-of-type(3)')); //判断是否是当前集合的第三个元素*
6.map()给jq中的每一个对象一个函数，参数只能是函数
btn.click(function(){
lis.map(function(){
console.log($(this).index())
})
});
7.has() 选择子元素有指定的选择器或者标签的元素
$('li').has('[class]').css('color','red');
$('li').has('p').css('color','red');
8.not() 除了括号里面的其他元素
var lisn = lis.not('[class]').css('color','red')
console.log(lisn);
9.slice() 根据范围选择
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 五星好评
<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>
网友评论