Day10 jQuery属性

01.选择器

02.样式和属性

03.相互转化

04.文档处理

05.过滤

06.查找

07.添加事件

08.事件其他

09.获取下标

10.动画

---

01.选择器

1、选择器

    基本
        :first  :last  :even  :odd  :not  :eq()
    内容
        contains  内容包含某某某的节点
        has 写一个选择器，
        $('li:has(a)')  li里面有a的li
    属性
        input[name]       有属性name的input
        input[name=user]  name属性等于user的input
        input[name!=user] name属性不等于user的input
        // 有属性name的input
        // $('input[name]').css('backgroundColor', 'cyan')
        // 属性name值为user的input
        // $('input[name=user]').css('backgroundColor', 'cyan')
        // 属性name值不为user的input
        // $('input[name!=user]').css('backgroundColor', 'cyan')
        // 属性name值以user开头的input
        // $('input[name^=user]').css('backgroundColor', 'cyan')
        // 属性name值以user结束的input
        // $('input[name$=user]').css('backgroundColor', 'cyan')
    子元素
        :first-child
        :last-child
        :nth-child
        // 找到li标签，li是第一个儿子节点的li标签
        // $('li:first-child').css('backgroundColor', 'cyan')
        // 找到li标签，li是最后一个儿子节点的li标签
        // $('li:last-child').css('backgroundColor', 'cyan')
        // 找li标签，找指定下标的li标签，这个下标是儿子节点里面的第几个
        // $('li:nth-child(1)').css('backgroundColor', 'cyan')

    

        
黄晓明
        
关晓彤
        
李小龙
        
李小璐
        
高晓松
        
陈妍希
    
    

        
        
苍老师
        
小泽玛利亚
        
波多野结衣
        
大桥未久
        
泷泽萝拉
    
    
那些年我们一起追过的女孩
    
    
    
    

02.样式和属性

css({})
        // 可以连写-链式操作
        // $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')
        // 可以传递一个js对象，直接全部修改
        // $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})
    attr()
        // 获取指定节点的class属性
        // console.log($('#lala').attr('class'))
        // 只能获取第一个符合要求的id属性
        // console.log($('.libai').attr('id'))
        // 通过eq选择第二个符合要求的id属性
        // console.log($('.libai:eq(1)').attr('id'))
        // 给指定节点添加属性
        // $('#lala').attr('class', 'bai').attr('name', '狗蛋')
    removeAttr()
        // 将指定节点的属性删除
        // $('#lala').removeAttr('class')
    prop()
        经常用来设置checked、selected等属性，设置的值就是true、false
        // 所有下标大于1的多选框选中
        // $('input:gt(1)').prop('checked', true)
        // 将第二个下拉框设置为默认选中
        // $('#se > option:eq(2)').prop('selected', true)
    addClass     
        // $('#lala').addClass('hei')
    removeClass  
        // 给指定的节点添加类名
        // $('#lala').addClass('hei')
        // 给指定的节点移除指定的节点class名  bai
        // $('#lala').removeClass('bai')
    toggleClass 
        // 有bai这个class，那就是删除这个class，没有bai这个class，那就是添加class
        // $('#lala').toggleClass('bai')
    html()
        // 读取或者设置节点内容，和innerHTML功能相同
        // console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回'))
    text()
        读取或者设置节点内容，和innerText功能相同
    val()
        // 读取input框里面的内容
        // console.log($('#ip').val())
        // 设置input框里面的内容
        // console.log($('#ip').val('今天中午吃什么呢？'))
    width() 
    height()  
        // 读取指定对象宽度  不带px
        // console.log($('#dudu').width())
        // 设置宽度  不带px
        // console.log($('#dudu').width(300))
        // 读取高度
        // console.log($('#dudu').height())
        // 设置高度
        // console.log($('#dudu').height(400))
    offset() 
        // 获取div的top值和left值
        // console.log($('#dudu').offset().top, $('#dudu').offset().left)

    

        
        朝辞白帝彩云间
        千里江陵一日还
        两岸猿声啼不住
        轻舟已过万重山
        
    
    

        李白乘舟将欲行
        忽闻岸上踏歌声
        桃花潭水深千尺
        不及汪伦送我情
    
    
抽烟
    
喝酒
    
烫头
    
足疗

    
        请选择
        四川
        河南
        云南
    

    

    

03.相互转化

js对象和jquery对象的函数不能通用
    js对象和jquery对象相互转化
    // var odiv = document.getElementById('dudu')
    // js对象转化jquery对象
    // console.log($(odiv).width())

    // jquery对象转化为js对象
    // console.log($('#dudu')[0].style.width)
    // console.log($('.lala')[1].style.width)

04.文档处理

append
appendTo
prepend
prependTo



    

        
长安奔奔
        
五菱宏光
        
吉利熊猫
        
大众捷达
        
丰田卡罗拉
        
奇瑞qq
    





    

    
    点我看动画