JavaScript07：jQuery
jQuery 是一个 JavaScript 库，它极大地简化了 JavaScript 编程
优点：消除浏览器差异、简洁的操作DOM的方法、轻松实现动画、修改CSS
jQuery把所有功能封装在一个全局变量jQuery中，用简洁的变量名$指代，同时用简洁的CSS选择器命令取代DOM复杂的命令
公式：$(selector).action()
jQuery选择器
CSS选择器
查找：find()、parent()、next()、prev()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<a href="" id="test">点击弹窗</a>
<ul class="lang">
<li class="js dy">JavaScript</li>
<li class="dy">Python</li>
<li id="swift">Swift</li>
<li class="dy">Scheme</li>
<li name="haskell">Haskell</li>
</ul>
</body>
</html>
<!--引入jQuery文件-->
<script src="./jquery-3.6.0.js"></script>
<script>
'use strict';
console.log($ === jQuery);
/**
* CSS选择器取代document.getElementById()命令
* 也可以将DOM对象转换为jQuery对象
*/
let test = $('#test').click(function (){
alert('jQuery');
});
let test1 = $(document.getElementById("test"));
/**
* jQuery选择器返回一个jQuery对象，jQuery对象类似数组，它的每个元素都是一个引用了DOM节点的对象
* 如果找到了返回数组，找不到返回[]，不会返回undefined或者null，这样的好处是不必判断if (a === undefined)
*/
console.log(test);
console.log(test1);
console.log($('#a'));
/**
* 查找
* find()查找子节点
* parent()查找父节点
* next()和prev()查找同级节点
*/
let a = $('ul.lang');
console.log(a.find('.dy'));
let b = $('#swift');
console.log(b.parent('.lang'));
console.log(b.next('.dy'));
</script>
jQuery事件
鼠标事件
click()、dblclick()、mouseenter、mouseleave、mousemove、off()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
#div{
width: 400px;
height: 400px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>
<a href="" id="click">单击</a>
</p>
<p>
<a href="" id="dblclick">双击</a>
</p>
<ul id="test-css">
<li class="lang dy"><span>JavaScript</span></li>
<li class="lang"><span>Java</span></li>
<li class="lang dy"><span>Python</span></li>
<li class="lang"><span>Swift</span></li>
<li class="lang dy"><span>Scheme</span></li>
</ul>
<p>mouse：
<span id="mouseMove"></span>
</p>
<div id="div">
在这里移动鼠标
</div>
</body>
</html>
<script src="./jquery-3.6.0.js"></script>
<script>
'use strict';
let a = $('#click');
let b = $('#dblclick');
let c = $('#test-css');
/**
* click()：鼠标单击时触发
*/
a.click(function (){
alert("单击");
});
/**
* dblclick()：鼠标双击时触发
*/
b.dblclick(function (){
alert("双击");
});
/**
* mouseenter()：鼠标进入时触发
*/
a.mouseenter(function (){
console.log("进入");
});
/**
* mouseleave()：鼠标离开时触发
*/
a.mouseleave(function (){
console.log("离开");
})
/**
* mousemove()：鼠标在DOM内部移动时触发
*/
c.mousemove(function (){
console.log("DOM内部");
});
$(function (){
$('#div').mousemove(function (e){
$('#mouseMove').text('PageX=' + e.pageX + '，PageY=' + e.pageY)
});
});
/**
* off()：取消绑定事件
* 默认取消所有绑定事件，可以传入函数名，指定要取消绑定的单个事件
*/
// a.off('click');
</script>
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是input和textarea标签
keydown、keyup、keypress
其他事件
focus、blur、ready、change、submit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<input type="text" name="text" id="input" value="name" placeholder="input...">
</body>
</html>
<script src="./jquery-3.6.0.js"></script>
<script>
'use strict';
/**
* ready：当页面被载入并且DOM树完成初始化后触发，且只触发一次，仅作用于document对象，非常适合用来写其他的初始化代码
* 因此，初始化代码必须放到document对象的ready事件中，保证DOM已完成初始化
* document对象的ready事件处理函数，$(document).ready(function () {})，可以简写为$(function () {...})的形式
*/
$(function (){
alert("ready初始化");
});
/**
* change()：当元素的值发生改变时触发
* 该事件仅适用于文本域（text field），以及 textarea 和 select 元素
*/
let a = $('#input');
a.text('修改过文本');
a.change(function (){
alert('值被改变了');
});
</script>
jQuery操作DOM
修改Text和HTML：text()、html()
修改CSS：css()、hasCalss()、addClass()、removeClass()
显示和隐藏DOM：hide()、show()
获取、修改DOM对象的属性：height()、width()、attr()、removeAttr()、val()
添加、插入、删除节点：append()、prepend()、afte()、befor()、remove()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
.highlight {
color: #dd1144;
background-color: #ffd351;
}
</style>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="book">Java & JavaScript</li>
</ul>
<ul id="test-css">
<li class="lang dy"><span>JavaScript</span></li>
<li class="lang"><span>Java</span></li>
<li class="lang dy"><span>Python</span></li>
<li class="lang"><span>Swift</span></li>
<li class="lang dy"><span>Scheme</span></li>
</ul>
<div id="test-highlight-css">
<ul>
<li class="py"><span>Python</span></li>
<li class="js"><span>JavaScript</span></li>
<li class="sw"><span>Swift</span></li>
<li class="hk"><span>Haskell</span></li>
</ul>
</div>
</body>
</html>
<script src="./jquery-3.6.0.js"></script>
<script>
'use strict';
/**
* text()方法获取节点的文本
* html()方法获取原始HTML文本
* 无参数调用时是获取文本，传入参数就变成设置文本
* 如果获得的jQuery对象有多个孩子，会同时赋值，并且无论存不存在都不会报错，不存在的话也不会新增，减少了if判断
*/
let a = $('#test-ul li[name=book]');
console.log(a.text());
console.log(a.html());
/**
* css()方法获取、修改CSS
* css()方法作用于DOM节点的style属性，具有最高优先级
* addClass()、hasClass()、removeClass()
*/
let b = $('#test-css li.dy span');
console.log(b.css('color'));
b.css('background-color', 'red').css('color', 'yellow');
b.addClass('css-text');
console.log(b.hasClass('css-text'));
let c = $('#test-highlight-css');
c.find('.js').addClass('highlight');
/**
* hide()方法隐藏DOM对象
* show()方法显示DOM对象
*/
c.hide();
c.show();
/**
* 获取、修改DOM的高宽
* attr()获取、修改属性（没找到就返回undefined）
* removeAttr()删除属性
*/
c.height();
c.width();
c.attr('name', 'new');
console.log(c.attr('name'));
/**
* val()获取和设置value属性
*/
c.val("value");
console.log(c.val());
/**
* append()方法在最后添加节点，不仅可以传入原始HTML文本，还可以传入原始的DOM对象，jQuery对象和函数对象
* prepend()方法在最前面添加
* after()方法在某节点后面插入
* before()方法在某节点前面插入
*/
c.find('ul').append('<li class="c++"><span>C++</span></li>');
c.find('ul li:nth-of-type(1)').after('<li class="Java"><span>Java</span></li>')
</script>
版权声明：本文为@振袖秋枫问红叶原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。