Day 8 jQuery属性操作和事件绑定

一、jQuery基本操作

jQuery实质就是对js的封装，封装的目的是为了更方便的使用js

js的代码写在哪里，jQuery代码就可以写在哪里，但是使用之前必须导入jQuery

两种导入方法：

     <!-- 导入本地的jQuery -->
     <!-- <script src="jquery.min.js"></script> -->
     <!-- 导入CDN服务器上的远程的jQuery -->
     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js?tdsourcetag=s_pcqq_aiomsg"></script>
     <!-- 导入成功后，就可以使用jQuery语法了 -->

$ 代表jQuery对象

1.onload (js)和 ready(jQuery)

onload - 网页加载成功对应的事件(包括标签加载完成和网络请求完成)

window.onload = function(){
pNode = document.getElementById('p1')
pNode.innerText = 'hello'
}
// ready:$(document).ready(函数)    网页中标签加载完成后会自动调用对应的函数

$(document).ready(function(){
pNode2 = document.getElementById('p1')
pNode2.innerText = '你好 jQuery'
})

// $(匿名函数)  - 网页中标签加载完成后会自动调用对应的匿名函数
// 相当于上面的写法
$(function(){
pNode3 = document.getElementById('p1')
pNode3.innerText = '你好 jQuery!!!!!!!!!!!'
})

2.节点操作

1)获取节点(DOM)
语法:$('选择器') - 返回的是jQuery的节点对象
选择器 - 这儿的选择器和CSS选择器一样的

    // $('#p1')
    // $('.p2')
    console.log($('p'))
    console.log($('#p1'))
    console.log($('.p2'))
    console.log($('div p'))
    console.log($('#box>p'))

    // 选择器1+选择器2 - 选中紧跟着选择器1的选择器2对应的标签
    console.log($('p+a'))
    console.log($('#box :first-child'))

2)创建节点
$('html标签语法')

    // 创建一个p标签
    pNode = $('<p>我是jQuery创建的节点</p>') 

3)添加节点

    // 在body最后面添加子标签
    $('body').append(pNode)

    // 在body最前面添加子标签
    $('body').prepend($('<input type="text">'))
    $('p').before("<b>Hello</b>")

4. 删除节点

    $('b').remove() //标签.remove()  -  删除指定标签
    $('div').empty()//标签.empty() - 清除指定标签中的内容

二、jQuery属性操作

1.获取普通属性

标签.attr(属性名) - 这儿的属性名不包含innerHTML,innerText,value

2.修改/增加普通属性

标签.attr(属性名, 值)

    // 1.获取普通属性
    console.log($('a').attr('href'))

    // 2.修改/增加普通属性
    $('#a1').attr('href', 'https://www.baidu.com')

    // 3.innerHTML(标签内容属性)
    console.log($('#box').html())
    // $('#box').html('我是添加的')

    // 4.innerText(标签文本内容)
    console.log($('#box').text())
    $('#box').text('我是添加的！！！！！！！！！')


    // 5.value(单标签内容)  该方法大多用于 input 元素。
    console.log($('#user').val())
    $('#user').val('修改')

    // 6.class
    // 标签.addClass(类名)  -   给标签添加class值
    $('p').addClass('active')
    // 标签.remove(类名)    - 移除指定的class的值
    $('p').removeClass('active')


    // 7.样式属性
    // 标签.css(样式属性名) -  获取样式属性的值
    // 标签.css(演示属性名, 值) - 设置样式
    // 标签.css({属性名:属性值, 属性名:属性值...})  - 同时设置多个属性样式
    $('p').css('color', 'yellow')
    $('p').css('font-size', '30px')

3.绑定事件

    // 标签.on(事件名, 函数)    -  和js中的addEventListener一样
    $("#btn").on('click', function(event){
        console.log(this, event)
    })