一、jQuery介绍
1.什么是jQuery
jQuery本质就是js，它是为了能够更方便的使用js而封装的一个库
如果想要使用jQuery必须先导入jQuery的js文件
js可以将任何内容转换js对象，例如:document、节点、事件对象
jQuery提供的方法只支持jQuery对象
在jQuery中() -> 创建jQuery对象的语法
document -> js对象； $(document) -> jQuery对象
2.ready方法 - 等待网页中内容加载完成（ 和onload功能一样）
页面加载完成后才会执行的代码
})
简写:
$(function(){
页面加载完成后才会执行的代码
})
3.DOM操作
1)获取节点
语法: $(选择器)
说明: 选择器 - 和CSS中的选择器一样
( a).普通选择器: 和css一样的
b.其他特殊情况
选择器1>选择器2 - 选中选择器中的选择器2对应的直系子标签
选择器1+选择器2 - 选中紧跟着选择器1的选择器2(选择器1和选择器2对应的标签必须是兄弟关系)
选择器~选择器2 - 选中离选择器1最近的选择器2(选择器1和选择器2对应的标签必须是兄弟关系)
选择器:first - 第一个选择器
选择器:last - 最后一个选择器
选择器 *:first-child - 选中选择器中第一个子标签
二、相关操作
1、创建节点（标签）
(1)语法：
$(HTML代码)
例如：$('<p id="p1"><我是一个段落/p>')
//例如：
aNode = $('<a href="https://www.baidu.com">百度一下</a>')
2、添加节点
(1）节点1.append（jq节点2） -- 在节点1中的最后添加节点2
（2）节点1.prepend（节点2） -- 在节点1的最前面插入节点2
（3)节点1.before -- 在节点1前面添加节点2
(4)节点1.after ---在节点1后面添加节点2
例如：
//1)jq节点1.append（jq节点2） -- 在节点1中的最后添加节点2
$('#box1').append(aNode)
$('#box1').append($('<img src="day6-原生js操作/day6-原生js操作/img/luffy.jpg" />'))
//2)节点1.prepend（节点2） -- 在节点1的最前面插入节点2
$('#box1').prepend($('<h1>我是标题一</h1>'))
//3)节点1.before -- 在节点1前面添加节点2
$('p').before($('<p>我是段落0</p>'))
//4)节点1.after ---在节点1后面添加节点2
$('#p1').after($('<p>我是段落2</p>'))
3、删除标签
//1)jq对象.remove() --全部一起删除
$('#box1 p').remove()
//只删除一个，通过选择器只选择一个
//2)jq对象.empty() 清空指定节点
$('#box1').empty()
$('#box1 *').remove() // '#box1'选中id是box1中的所有后代
4、属性操作
1）特殊属性（标签内容属性）：innrtext，innrhtml，value
//a.html方法（相当于inneHTML）
节点.html（） -- 获取节点内容
节点.html（值） -- 给节点的内容赋值
//b.text（）方法（相当于innrText）
a = $('#box2>div').html()
console.log(a)
//c.val()方法（相当于value）
$('#box2 input').val('小米')
2）普通属性
节点.atter(属性名) -- 获取指定属性的值
节点.atter(属性名，值) -- 修改指定节点指定属性的值
$('#box2 input').attr('type')
3）class属性操作
节点.addClass(值) -- 添加class属性值
$('#h1').addClass('c1')
节点.removeClass(值) -- 移除指定的class值
$('#h1').removeClass('c2')
5、样式属性
//1）获取样式属性的值
//节点.css(样式属性名)
$('#h1').css('color')
//2）修改样式属性的值
//节点.css(样式属性名，值)
$('#h1').css('color','lawngreen')
//节点.css(对象) -- 同时修改多个样式的值/同时添加多个样式
$('#h1').css({
'width':'200px',
'background-color':'red'
})
6、事件绑定
方法一：直接绑定
节点.on(事件名，事件驱动程序) -- 和js中的addEventLinsenner功能一样
注意：this是js对象，evt是jQuery对象
console.log(this)
console.log(evt)
方法二：节点.on(事件名，选择器，函数) -- 给指定的节点添加事件，并且将事件自动传递给选择器对应的子标签
$('#box3').on('click','input',function(){
console.log(this)
alert(this.value+'被点击')
})
