1.什么是jQuery
- jQuery本质就是js，它是为了能够更方便的使用js而封装的一个库
- js可以将任何内容转换js对象，例如:document、节点、事件对象；jQuery提供的方法只支持jQuery对象
- 在jQuery中 $ 代表jQuery
-
$ ( )：创建jQuery对象的语法，例如：document（ js对象）； $(document)（ jQuery对象）
-
注意：如果想要使用jQuery必须先在head中导入jQuery的js文件
// 导入方法1：导入本地jQuery文件
<script type="text/javascript" src="js/jquery.min.js"></script>
// 导入方法2：导入文件地址（企业开发时常用）
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1
/jquery.min.js"></script>
2.ready方法
- 等待网页中内容加载完成，和onload功能一样
- 语法：
$(document).ready(function(){
页面加载完成后才会执行的代码
})
简写: //常用
$(function(){
页面加载完成后才会执行的代码
})
$(document).ready(function(){
pNode = document.getElementById('p1')
console.log(pNode)
})
简写：
$(function(){
pNode = document.getElementById('p1')
console.log(pNode)
})
3.节点操作
1）获取节点
- 语法: $(选择器)
- 说明: 选择器 - 和CSS中的选择器一样
- 注意加引号的问题
1.1）普通选择器:
- 和css一样的
-
注意：遍历jQ数组取出来的是js对象（JQuery对象可以理解为由1个或多个Js对象组成的数组）
var pNode = $('#p1')
console.log(pNode)
pNode.text('新的段落1')
pNodes = $('.cp1')
console.log(pNodes)
pNodes.text('新的段落2')
for(x=0;x<pNodes.length;x++){
const p = pNodes[x] // 遍历取出来的是js对象
$(p).text(x)
}
pNode = $('div p')
console.log('===:',pNode)
1.2）其他特殊情况：
-
选择器1>选择器2：选中选择器1中的选择器2对应的直系子标签
-
选择器1+选择器2：选中紧跟着选择器1的选择器2（选择器1和选择器2对应的标签必须是兄弟关系）
-
选择器1~选择器2：选中离选择器1最近的选择器2（选择器1和选择器2对应的标签必须是兄弟关系）
-
选择器:first：第一个选择器
-
选择器:last：最后一个选择器
-
选择器 *:first-child：选中选择器中第一个子标签
pNode = $('div>p')
console.log('===:',pNode)
pNode = $('#p1 + div')
console.log('===:',pNode)
pNode = $('#p1~p')
console.log('===:',pNode)
pNode = $('p:first')
console.log('===:',pNode)
pNode = $('#div2>p:first')
console.log('===:',pNode)
pNode = $('#div2>p:last')
console.log('===:',pNode)
var xNode = $('#div2>*:first-child')
console.log('===:',xNode)
2）创建节点(标签)
-
$(HTML代码)：返回标签对应的jQuery对象
$("<p id='p1'>我是一个段落</p>")
aNode = $("<a href='https://www.baidu.com'>百度一下</a>")
3）添加节点
-
jq节点1.append(jq节点2)：在节点1中的最后添加节点2
-
节点1.prepend(节点2)：在节点1的最前面插入节点2
-
节点1.before(节点2)：在节点1的前面插入节点2
-
节点1.after(节点2)：在节点1的后面插入节点2
//1)jq节点1.append(jq节点2) - 在节点1中的最后添加节点2
$('#box1').append(aNode)
$('#box1').append($('<img src="img/luffy.jpg"/>'))
//2)节点1.prepend(节点2) - 在节点1的最前面插入节点2
$('#box1').prepend($('<h1>我是标题1</h1>'))
//3)节点1.before(节点2) - 在节点1的前面插入节点2
$('#p1').before($('<p>我是段落0</p>'))
//4)节点1.after(节点2) - 在节点1的后面插入节点2
$('#p1').after($('<p>我是段落2</p>'))
4）删除节点
-
jq对象.remove()：删除指定节点
-
jq对象.empty()：清空指定节点
//1)jq对象.remove() - 删除指定节点
$('#box1 p').remove()
//2)jq对象.empty() - 清空指定节点
$('#box1').empty()
//$('#box1 *').remove() # '#box1 *' 选中id是box1中所有的后代
4.属性操作
1）标签内容属性
- innerHTML、innerText、value
-
双标签.html() - (相当于innerHTML)：节点.html() - 获取节点内容； 节点.html(值) - 给节点内容赋值
-
双标签.text() - (相当于innerText)
-
单标签.val() - (相当于value)
-
注意：上面的函数不传参就是获取值，传参就是修改值
console.log($('#box2 #div1').html()) // 获取
$('#box2 #div1').html('<a href="https://www.baidu.com">我是超链接
</a>') // 添加
$('#box2 input').val('小明') // 添加
2）普通属性
-
节点.attr（属性名）：获取指定节点指定属性的值
-
节点.attr（属性名，值）：修改指定节点指定属性的值
console.log($('#box2 input').attr('type'))
$('#box2 input').attr('type', 'password')
3）class属性
-
节点.addClass（值）：添加class属性值
-
节点.removeClass（值）：移除指定的class值
$('#h1').addClass('c2')
$('#h1').removeClass('c1')
4）样式属性
- 获取样式属性的值：节点.css（样式属性名）
- 修改样式属性的值：
修改单个：节点.css（样式属性名，值）
修改多个：节点.css（对象）= 节点.css（{属性名1:值1, 属性名2:值2，...}）
//1)获取样式属性的值
//节点.css(样式属性名)
console.log($('#h1').css('color'))
//2)修改样式属性的值
//节点.css(样式属性名,值)
$('#h1').css('color', 'deeppink')
$('#h1').css('font-size', '30px')
//节点.css(对象) - 同时设置多种样式
$('#h1').css({
'width':'300px',
'color':'blue',
'text-decoration': 'underline'
})
console.log($('#h1'))
5.事件绑定
1）直接绑定
-
节点.on（事件名，函数）：给节点绑定指定的事件，事件名不需要on，和js中的addEventLinsenner功能一样
-
注意：函数中this是js对象，evt是jQuery对象
$('button').on('click', function(evt){
console.log(this)
console.log(evt)
//1）this是js对象
//====js代码
if(this.innerText == '暂停'){
this.innerText = '播放'
}else{
this.innerText = '暂停'
}
//====jQuery代码
if($(this).text() == '暂停'){
$(this).text('播放')
}else{
$(this).text('暂停')
}
// 2) evt是事件对象不是节点对象，所以获取属性的时候以对象获取属性的方式来获取
console.log(evt.clientX, evt.clientY)
})
2）间接传递
-
父节点.on（事件名，选择器，函数）：给指定节点绑定指定事件，并且让节点中选择器对应的子标签对事件做出反应（即把事件绑定在父标签上，但是是由子标签做出反应）
- 在父标签上添加事件，传递给选择器对应的子标签；选择器：前面标签（父节点）的后代标签
- 函数中this是js对象，指向的是选择器对应的子标签
//错误示范:如果使用直接绑定的方式，新添加的标签就不能绑定上对应的事件
/*
$('#box3 input').on('click', function(){
console.log(this)
alert(this.value+'被点击')
})
$('#box3').append($('<input type="button" value="按钮3"/>'))
*/
//选择器input是#box3下的子标签
$('#box3').on('click','input', function(){
console.log(this)
alert(this.value+'被点击')
})
$('#box3').append($('<input type="button" value="按钮3"/>'))
