jQuery入门

130 阅读1分钟

DOM选择器

id选择器 #app

类选择器 .app

属性选择器 [name='app']

后代 ul li

子代 ul>li

交集选择器 ul.active

伪类选择器 input[type="checkbox"]:checked

DOM操作-html-text

    console.log($('#app').html());
    console.log($('#app').text());
    $('.app').html('<h1>SSSSSSS</h1>')//SSSSSSS
     $('.app').text('<h1>SSSSSSS</h1>')//<h1>SSSSSSS</h1>

有参数则取值,无参数则赋值

jq对象和js对象的转换

    js=>jq
    jsdom=>$(jsdom)
    jq=>js
    $('#app')[0].offsetTop
    $('#app').get(0).offsetTop

jq操作css

    $('.app').css('color', 'red').css('font-size', '30px').css('background', 'orange')
    $('.app').css({
        color: 'red',
        fontSize: 30,
        background: 'orange'
    })
    console.log($('.app').css('color'));

事件-
DomContentLoaded和onload

   // window.onload = function () {
    }
   //DomContentLoaded读标签读到就可以会走
    $(function () { 
     })

$(this): 链式调用a().b().c()