Day02（jQ属性操作，筛选，demo五星好评）

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>