美文网首页
Day10 jQuery属性

Day10 jQuery属性

作者: zhazhaK丶 | 来源:发表于2018-08-28 19:49 被阅读0次

    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')
    
    <body>
        <ul>
            <li>黄晓明</li>
            <li>关晓彤</li>
            <li>李小龙</li>
            <li>李小璐</li>
            <li>高晓松</li>
            <li><a href="#">陈妍希</a></li>
        </ul>
        <ol>
            <!-- <b>桃谷绘里香</b> -->
            <li>苍老师</li>
            <li>小泽玛利亚</li>
            <li>波多野结衣</li>
            <li>大桥未久</li>
            <li>泷泽萝拉</li>
        </ol>
        <div>那些年我们一起追过的女孩</div>
        <input type="text" name="user">
        <input type="password" name="userpwd">
        <!-- <input type="checkbox" name="like">
        <input type="radio" name="sex"> -->
        <input type="text">
    </body>
    </html>
    <script>
    $(function () {
        // $('li:contains("晓")').css('backgroundColor', 'cyan')
    
        // 找li标签,li标签里面有a的节点
        // $('li:has(a)').css('backgroundColor', 'cyan')
        // 找ul标签,里面有a的节点,不论层级
        // $('ul:has(a)').css('backgroundColor', 'cyan')
    
        // 有属性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')
    
        // 找到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')
    })
    </script>
    

    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)
    
    <style>
        #dudu {
            width: 400px;
            height: 500px;
            background-color: pink;
            position: absolute;
            top: 100px;
            left: 300px;
        }
        </style>
    </head>
    <body>
        <div id="lala" class="">
            <b>
            朝辞白帝彩云间
            千里江陵一日还
            两岸猿声啼不住
            轻舟已过万重山
            </b>
        </div>
        <div class="libai" id="laowang">
            李白乘舟将欲行
            忽闻岸上踏歌声
            桃花潭水深千尺
            不及汪伦送我情
        </div>
        <li><input type="checkbox">抽烟</li>
        <li><input type="checkbox">喝酒</li>
        <li><input type="checkbox">烫头</li>
        <li><input type="checkbox">足疗</li>
    
        <select name="" id="se">
            <option value="">请选择</option>
            <option value="">四川</option>
            <option value="">河南</option>
            <option value="">云南</option>
        </select>
    
        <input id="ip" type="text" value="请输入用户名哈哈">
    
        <div id="dudu"></div>
    </body>
    </html>
    <script>
    $(function () {
        // 可以连写-链式操作
        // $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')
        // 可以传递一个js对象,直接全部修改
        // $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})
    
        // 获取指定节点的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', '狗蛋')
    
        // 将指定节点的属性删除
        // $('#lala').removeAttr('class')
    
        // 所有下标大于1的多选框选中
        // $('input:gt(1)').prop('checked', true)
        // 将第二个下拉框设置为默认选中
        // $('#se > option:eq(2)').prop('selected', true)
    
        // 给指定的节点添加类名
        // $('#lala').addClass('hei')
        // 给指定的节点移除指定的节点class名  bai
        // $('#lala').removeClass('bai')
    
        // 有bai这个class,那就是删除这个class,没有bai这个class,那就是添加class
        // $('#lala').toggleClass('bai')
    
        // 读取或者设置节点内容,和innerHTML功能相同
        // console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回'))
    
        // console.log($('#lala').text())
        // console.log($('#lala').html())
    
        // 读取input框里面的内容
        // console.log($('#ip').val())
        // 设置input框里面的内容
        // console.log($('#ip').val('今天中午吃什么呢?'))
    
        // 读取指定对象宽度  不带px
        // console.log($('#dudu').width())
        // 设置宽度  不带px
        // console.log($('#dudu').width(300))
        // 读取高度
        // console.log($('#dudu').height())
        // 设置高度
        // console.log($('#dudu').height(400))
    
        // 获取div的top值和left值
        // console.log($('#dudu').offset().top, $('#dudu').offset().left)
    })
    </script>
    

    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
    <script src="jquery/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <ul id="car">
            <li>长安奔奔</li>
            <li>五菱宏光</li>
            <li id="mao">吉利熊猫</li>
            <li>大众捷达</li>
            <li>丰田卡罗拉</li>
            <li>奇瑞qq</li>
        </ul>
    </body>
    </html>
    <script>
            // 向父节点添加子节点
             $('#car').append('<li>本田飞度</li>')
            // 通过子节点调用,添加到父节点
             $('<li>本田飞度</li>').appendTo($('#car'))
            // 通过父节点调用,添加到父节点的最前面
             $('#car').prepend('<li>本田飞度</li>')
            // 通过子节点调用,添加到父节点的最前面
            $('<li>通用别克</li>').prependTo($('#car'))
        after
        before
            // 是兄弟节点关系,在mao节点后面添加一个指定节点
             $('#mao').after('<li>铃木雨燕</li>')
            // 是兄弟节点关系,在mao节点前面添加一个指定节点
             $('#mao').before('<li>铃木雨燕</li>')
        empty
        remove
            // 清空指定节点里面的内容,节点还在
            $('#mao').empty()
            // 原生js中:父节点.removeChild(子节点)
            // 通过子节点直接调用,删除当前节点
             $('#mao').remove()
    

    05.过滤

    eq
            // $('li').eq(n).css('backgroundColor', 'red')
            // $('li:eq(0)').css('backgroundColor', 'red')
            // $('li:eq(' + 0 + ')').css('backgroundColor', 'red')
        first
        last
            // 第一个li   和:first 一模一样
            // $('li').first().css('backgroundColor', 'red')
            // 最后一个li   和:last 一模一样
            // $('li').last().css('backgroundColor', 'red')
        hasClass
            // 判断有没有这个class,有就返回true,没有返回false
            // console.log($('li').eq(0).hasClass('wang'))
        filter
            // 找到所有li,过滤出来 .jing 的这些li
            // $('li').filter('.jing').css('backgroundColor', 'cyan')
        slice
            // 取出符合要求li里面的第0个和第1个   [start, end)
            // $('li').slice(0, 2).css('backgroundColor', 'cyan')
    

    06.查找

    children
            // 所有的儿子节点
            // $('#nan').children().css('backgroundColor', 'red')
            // 儿子节点中 有 .feng 的节点
            // $('#nan').children('.feng').css('backgroundColor', 'red')
        find
            // 去子孙节点中查找所有的 .feng 的节点
            // $('#nan').find('.feng').css('backgroundColor', 'cyan')
        next
        nextAll
            // 指定对象的下一个兄弟节点
            // $('#wu').next().css('backgroundColor', 'cyan')
            // 指定对象的后面所有的节点
            // $('#wu').nextAll().css('backgroundColor', 'cyan')
        prev       指定对象的上一个兄弟节点
        prevAll    指定对象的上面所有的兄弟节点
        parent     
        parents
            // 找到当前节点的父节点
            // $('.lin').parent().css('backgroundColor', 'cyan')
            // 查找得到所有的上层节点
            // $('#qing').parents().css('backgroundColor', 'cyan')
            // 查找得到指定的上层节点
            // $('#qing').parents('div').css('backgroundColor', 'cyan')
        siblings
            // 查找qing节点所有的兄弟节点
            // $('#qing').siblings().css('backgroundColor', 'orange')
            // 查找qing节点所有的兄弟节点,而且是.lin的兄弟节点
            // $('#qing').siblings('.lin').css('backgroundColor', 'orange')
    

    07.添加事件

    添加事件
            $('div).click(function () {})
        事件绑定
            on  off  one
            绑定事件
            $('div').on('click', test1)
            $('div').on('click', test2)
            取消事件绑定
            $('div').off('click', test2)
    
            // 事件只能触发一次
            $('div').one('click', test2)
        取消冒泡
            ev.stopPropagation()
        阻止默认行为
            ev.preventDefault()
        获取鼠标坐标
            ev.pageX, ev.pageY
        index
            // 得到指定jquery对象在前面数组中的下标
            // console.log($('div').index($('#heng')))
    

    08.事件其他

    <body>
        <div class="wai" style="width:400px; height:400px; background-color:red;">
            <div class="nei" style="width:200px; height:200px; background-color:yellow;">
            </div>
        </div>
        <a id="oa" href="http://www.baidu.com/">百度一下</a>
    </body>
    </html>
    <script>
    $(function () {
        
        $('.wai').click(function (ev) {
            // alert('这是外面的衣服')
            console.log(ev.pageX, ev.pageY)
        })
        /*
        // 取消事件冒泡
        $('.nei').click(function (ev) {
            alert('这里里面的衣服')
            ev.stopPropagation()
        })*/
    
        // 阻止默认行为
        // $('#oa').click(function (ev) {
        //     alert('悄悄问圣僧,女儿美不美')
        //     ev.preventDefault()
        // })
    })
    

    09.获取下标

    <body>
        <div>黄山</div>
        <div>泰山</div>
        <div>华山</div>
        <div id="heng">衡山</div>
        <div>峨眉山</div>
        <div>嵩山</div>
    </body>
    </html>
    <script>
    // 得到指定jquery对象在前面数组中的下标
    console.log($('div').index($('#heng')))
    

    10.动画

    <script src="jquery/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <div id="dudu" style="width:300px; height: 200px; background-color:red; display: block; position: absolute; top: 10px; left: 0px;"></div>
        <!-- <div style="clear: both;"></div> -->
        <button id="btn" style="position: absolute; top:250px;">点我看动画</button>
    </body>
    </html>
    <script>
    $(function () {
        $('#dudu').click(function () {
            // 参数1:动画的事件
            // 参数2:动画完毕之后执行的函数
            // $('#dudu').show(5000, function () {
            //     alert('菊花残,满地伤')
            // })
    
            // $('#dudu').hide(5000)
            
            // $('#dudu').slideDown(5000)
    
            // $('#dudu').slideToggle(5000)
    
            // 慢慢的显示出来
            // $('#dudu').fadeIn(5000)
    
            // 慢慢的消失
            // $('#dudu').fadeOut(5000)
    
            // 5秒之内,透明度变为0.01
            // $('#dudu').fadeTo(5000, 0.01)
    
            // 自定义动画
            // $('#dudu').animate({width: 1000, height: 500, opacity: 0.1}, 5000)
    
            $('#dudu').animate({left: 600}, 5000, function () {
                $('#dudu').animate({top: 600}, 5000)
            })
            // $('#dudu').animate({top: 600}, 5000)
        })
    
        $('#btn').click(function () {
            $('#dudu').stop()
        })
        
    })
    </script>
    

    相关文章

      网友评论

          本文标题:Day10 jQuery属性

          本文链接:https://www.haomeiwen.com/subject/dknqwftx.html