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')

<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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,884评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,347评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,435评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,509评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,611评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,837评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,987评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,730评论 0赞 267
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,194评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,525评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,664评论 1赞 340
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,334评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,944评论 3赞 313
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,764评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,997评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,389评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,554评论 2赞 349

Day10 jQuery属性

01.选择器

02.样式和属性

03.相互转化

04.文档处理

05.过滤

06.查找

07.添加事件

08.事件其他

09.获取下标

10.动画

01.选择器

02.样式和属性

03.相互转化

04.文档处理

05.过滤

06.查找

07.添加事件

08.事件其他

09.获取下标

10.动画

推荐阅读更多精彩内容