jQuery库
注明：本文参考自：jQuery - 白月黑羽 (byhy.net)
jQuery安装
Download jQuery | jQuery下载到本地
ps: script标签中的src属性：表示包含要执行的代码的外部文件位置
<!DOCTYPE html>
<html lang="en"><head><script src="/jslib/jQuery/jquery-3.7.1.js"></script></head><body><button id='b1'>测试按钮1</button><button id='b2'>测试按钮2</button><script>jQuery('button').on('click', function () { alert('按钮被点击') })</script><body>
</html>选择元素、事件处理
对比不使用jQuery:
<!DOCTYPE html>
<html lang="en"><head></head><body><button id='b1'>测试按钮1</button><button id='b2'>测试按钮2</button><script>let [b1,b2] = document.querySelectorAll('button')b1.addEventListener('click',()=>{alert('按钮被点击')})b2.addEventListener('click',()=>{alert('按钮被点击')})</script><body>
</html>jQuery本身是一个构造函数，里面的参数是css选择器；jQuery('button')返回的是一个jQuery对象
，这个对象类似js的数组，里面包含了所有 参数css选择器 选中的DOM对象
jQuery对象的on方法，用来定义事件的处理
jQuery('button').on('click', function () { alert('按钮被点击') })其中参1为事件名称，参2为回调函数
当然还可以写成
jQuery('button').click（function () { alert('按钮被点击') })jQuery的简化别名$
$('button').on('click', function () { alert('按钮被点击') })处理键盘事件：
<head><script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head><body><textarea>按ctrl+回车 试试</textarea><script>$('textarea').on('keydown', function (e) { if (e.ctrlKey && e.key==='Enter') alert('按下了ctrl+回车') })</script><body>
元素操作
添加元素
<head><script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head><body><div id='content1'><p id='target1'>原来的元素1</p></div><div id='content2'><p id='target2'>原来的元素2</p></div>
</body>添加子元素示例：
1.添加到#content1 ，作为最后一个子元素
var ele1 = $("<p>新元素1</p>");
ele1.appendTo("#content1");还可以写成
$("<p>新元素1</p>").appendTo("#content1");2.添加到#content1 ，作为第一个子元素
$("<p>新元素2</p>").prependTo("#content1");3.插入到#target2前面，作为哥哥节点
$("<p>新元素3</p>").insertBefore("#target2");4.插入到#target2后面，作为弟弟节点
$("<p>新元素4</p>").insertAfter("#target2");注意区别：一个是div里的content；一个是p里的target
还可以：先选中要插入的元素 （jQuery就等价于document.querySelector(''))
$("#content1").append("<p>新元素1</p>");
$("#content1").prepend("<p>新元素2</p>");
$("#target2").before("<p>新元素3</p>");
$("#target2").after("<p>新元素4</p>");删除元素
先选中，然后调用remove
$("#content1").remove()替换元素内容
先选中，然后调用html方法，更新元素内部的html
$("#content2").html(`<p id='target3'>新元素222</p>`)也可调用text方法，直接更新元素内部的文本内容
$("#target2").text(`新元素222`)jQuery对元素属性的操作
获取元素属性
(jQuery对象的) attr() : 获取元素的属性 ；返回值为字符串形式
<a id="hey" style='color:green;font-size: 2rem;' href="/" class='nav nav-item'attr1='自定义属性'>一个链接
</a><script>
let a = $('a') //先选 ；构造函数创建对象console.log(a.attr('id'))
console.log(a.attr('style'))
console.log(a.attr('href'))
console.log(a.attr('class'))
console.log(a.attr('attr1'))
</script>设置元素属性
attr() 的第二个参数就是用来设置元素的属性的
<a id="hey" style='color:green' href="/" attr1='自定义属性'>一个链接</a><script>
let a = $('a')a.attr('id', 'new-hey')
a.attr('style' , 'color:blue')
a.attr('href', 'https://www.byhy.net')
a.attr('attr1', '自定义属性2')
</script>删除元素属性
removeAttr() :用于删除元素的属性
<a id="hey" style='color:green' href="/" attr1='自定义属性'>一个链接</a><script>
let a = $('a')a.removeAttr('id')
a.removeAttr('style')
a.removeAttr('href')
a.removeAttr('attr1')
</script>style设置
style属性较为特殊：style的属性值本身又是一个键值对
为了方便style里面的设置，只想设置元素style里的某一个样式的属性，可以使用css()
<a id="hey" style='color:green ; font-size: 2rem;' href="/" attr1='自定义属性'>一个链接</a><script>
let a = $('a')a.css('color','red')
</script>点击某个元素，就设置这个被点击元素的style属性：
<a id="hey" style='color:green;font-size: 2rem;' href="#">一个链接 </a><script>$('a').click(function () {$(this).css('color', 'red');}); </script>ps:为什么不能写成 $('a').css('color', 'red'); ------- 返回的是符合条件的所有类型的对象,而要的是一批里对应的一个；$(this)代表当前正在点击事件的对象