什么是jQuery

实质：对js的封装
目的：为了更方便的使用js
位置：js的代码写在哪儿，jq代码就可以写在哪儿前提：使用之前必须导入jQuery

导入JQuery

方式一：导入本地JQuery

前提：放置JQuery文件到js文件夹中

<script type="text/javascript" src="js/jquery.min.js"></script>

方式二：导入CDN服务器上的jQuery

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

$ -> 代表jQuery对象

onload -> js中
定义：网页加载完成对应的事件
前提：标签加载完成和网络请求完成

window.onload = function(){
    pNode = document.getElementById('p1')
    pNode.innerText = 'hello jQuery！'
}

$(document).ready(函数)
前提：网页中标签加载完成
$(匿名函数)
前提：网页中标签加载完成

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

//相当于上面的写法
$(function(){
    pNode2 = document.getElementById('p2')
    pNode2.innerText = '你好 jQuery'
})

节点操作

1.获取节点

语法: $('选择器')
返回值：jQuery的节点对象
说明：
选择器：与CSS的选择器相同

console.log($('#img1'))
console.log($('.c1'))
console.log($('p'))
console.log($('div p'))
console.log($('#p1,a'))

+

console.log($('p+a'))  //选中所有紧跟着p标签的a标签

~*

console.log($('#p3~*'))   //选中和id值是p3的标签后面同级的所有标签

~a

console.log($('#p3~a'))   //选中和id值是p3的标签后面同级的所有的a标签

:first

console.log($('p:first'))  //选中当前页面中的第一个p标签
console.log($('div p:first'))   //选中所有div标签中的第一个p标签

:last

console.log($('p:last'))   //选中当前页面中的最后一个p标签

*:first-child

console.log($('div *:first-child'))   //选中div标签中的第一个子标签

2.创建节点

$('html标签语法')

imageNode = $("<img src='img/thumb-1.jpg'/ title='图标'>")   //创建一个img标签

3.添加节点

标签.append(子标签)

$('body').append(imageNode)   //在body的最后添加一个子标签

标签.prepend(子标签)

$('body').prepend($('<input placeholder="请输入账号"/>'))    //在body的最前面插入一个子标签

标签.before(子标签)

$('#img1').before($('<button>before</button>'))   //在id是img1的标签的前面添加一个按钮标签      

标签.after(子标签)

$('#img1').after($('<button>after</button>'))   //在id是img1的标签的后面添加一个按钮标签  

4.删除节点

标签.remove()

$('#img1').remove()     //标签.remove()  - 删除指定标签

标签.empty()

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

属性操作

1.获取普通属性
标签.attr(属性名)
说明：这儿的属性名不包括innerHTML,innerText，value

console.log($('#img2').attr('title'))
console.log($('#img2').attr('src'))

2.修改/增加普通属性
标签.attr(属性名,值)

$('#img2').attr('src', 'img/thumb-3.jpg')

3.特殊属性
a.innerHTML（标签内容属性)
语法：标签.html()

console.log($('#div').html())
$('#div').html('我是新的div')

b.innerText (标签文本内容)
语法：标签.text()

console.log($('#div').text())
$('#div').text('我是新的div2')  

c.value (单标签内容)
语法：标签.val()

console.log($('#user').val())
$('#user').val('李四')  

d.class
语法：标签.addClass(类名)
作用：给标签添加class值

$('p').addClass('color')

语法：标签.removeClass(类名)
作用：移除指定的class值

$('p').removeClass('color')  

4.样式属性
标签.css(样式属性名)
作用：获取样式属性值
标签.css(样式属性名, 值)
作用：设置样式
标签.css({属性名:属性值, 属性名:属性值 ...})
作用：同时设置多种样式属性

$('p').css('color', 'slateblue')
$('p').css('font-size', '20px')
$('p').css({
    'color':'red',
    'font-size':'30px'
})  

jQuery同时选中多个标签

作用：操作选中的jQuery对象，就是同时操作被选中jQuery对象的所有对象标签

$('p').css('color', 'seagreen')   // 同时设置所有p标签的文字颜色
console.log($('p'))
//同时给所有p标签添加点击事件
$('p').on('click', function(evt){
    //注意:函数中是this都是js对象
    console.log(this)
    //通过js的方式获取内容
    console.log(this.innerText)
    //通过jq的方式获取内容
    //js转jq： $(js对象)  -  将js对象转换成jq对象
    console.log($(this).text())
})

如何将js对象转换成jq对象

语法：$(js对象)
作用：将js对象转换成jq对象
注意：当一个标签不止一个时，转换成jq对象后,会返回容器型的jq对象，但是里面的元素标签还是js标签

//注意: 单独取出来的标签都是js对象
pNodes = $('p')
//取指定的标签
console.log(pNodes[0])
console.log(pNodes[1])
//遍历所有标签
for(i=0;i<pNodes.length;i++){
    pNode = pNodes[i]
    //使用js的方式操作标签
    pNode.style.color = 'red'
    //使用jq的方式操作标签
    $(pNode).css('font-size', '20px')
}

事件绑定

语法：标签.on(事件名, 回调函数)
功能：指定标签发生指定事件后，调用回调函数
作用：功能等同于js的addEventListener
说明：函数中的this指向的是js对象

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

//(推荐使用！！)
//b.标签.on(事件名, 选择器, 回调函数)  - 给父标签添加事件，将事件传递给选择器选中的子标签,函数中的this是子标签
//标签 - 父标签
//选择器 - 在父标签中去选中子标签
$('#box').on('click', 'div', function(evt){
    console.log(this)
    alert(this.innerText)
})