jQuery基础

jQuery实质就是js的封装，封装的目的是为了更方便的使用js
js代码写在哪，jq代码就可以写在哪，但是使用jQuery之前必须导入它

1.导入jQuery
导入本地jQuery
<script type="text/javascript" src="jquery.min (1).js"></script>

导入CSDN服务器上的远程的jQuery
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js "></script>

导入jQuery之后才可以使用jQuery语法

$() -> 代表jQuery对象

1.onload和ready（jQuery）
onload - 网页加载完成对应的事件（包括标签加载完成和网络请求完成）
ready：$(document.ready(函数)) - 网页中标签加载完成后自动调用对应的函数
$(匿名函数) - 网页中标签加载完成后会自动调用对应的匿名函数

==============================2.节点操作================
1）获取节点
语法：$('选择器') - 返回的是jQuery的节点对象
选择器 - 这的选择器和css选择器一模一样
    console.log($('#img1').src)
    $('#p1')
    $('.p2')
    $('p')
    $('div p')

选择器1+选择器2  - 选中紧跟着选择器1的选择器2对应的标签
    console.log($('#p1+a')) //选中所有的紧跟这p1的a标签
    console.log($('#p1~*')) //选中和id值是p1的标签后面同级的所有的标签
    console.log($('#p1~a')) //选中和id值是p1的标签后面同级的所有的a标签
    console.log($('p:first')) // 选中当前页面中的第一个p标签
    console.log($('div p:first')) //选中所有div标签中的第一个p标签
    console.log($('p:last'))  //选中当前页面中的最后一个p标签
    console.log($('div *:first-child')) //选中div标签中的第一个子标签
    
2）创建节点
$('html标签语法')
imageNode = $("<img src='img/u=1241915477,1722842591&fm=11&gp=0.jpg' / title='图标'>")    //创建一个img标签

3）添加节点
    $('body').append(imageNode)      //在body的最后添加一个子标签
    $('body').prepend($('<input placeholder="请输入账号" />')) //在body的最前面添加一个子标签
    $('#img1').before($('<button>before</button>'))  //在id是img1的标签的前面添加一个按钮标签
    $('#img1').after($('<button>after</button>'))  //在id是img1的标签的后面添加一个按钮标签

4）删除节点
    $('#img1').remove()  //标签.remove() - 删除指定标签
    $('div').empty()     //标签.empty() - 清空指定标签中的内容
    
5）克隆和替换（自己查询）

==============================3.属性操作=============================
1.获取属性
标签.attr(属性名) - 这的属性名不包括innerHTML，innerText，value
console.log($('#img2')).attr('title')
console.log($('#img2')).attr('src')

2.修改/增加普通属性
标签.attr（属性名，值）
$('#img2').attr('src','img/thumb-2.jpg')

3.特殊属性
1）innerHTML（标签内容属性） - html（）
    console.log($('#div').html())
    $('#div').html('我是新的div')

2）inneText（标签文本内容） -  text（）
        console.log($('#div').text())
        $('#div').text('我是新的div21') 

3）value（单标签内容）- val（）
        console.log($('#user').val())
        $('#user').val('李四')

4）class
标签.addClass(类名) - 给标签添加class
$('p').addClass('color')
标签.removeClass(类名) - 移除指定的class值
$('p').addClass('color')

4.样式属性
标签.css(样式属性名)  - 获取样式属性值

标签.css(样式属性名，值) - 设置样式

标签.css({属性名：属性值，属性名：属性值.....}) - 同时设置多种样式属性
（硬敲）
$('p').css({
            'color':'red',
            'font-size':'30px'
        })  

===============================4.事件绑定=======================
标签.on(事件名，函数) - 和js中的addEventListener是一样的

$('#btn1').on('click', function(evt){
            alert('点击按钮')
            console.log(this, evt.offsetX, evt.offsetY)
        })