jQuery的使用
jQuery库，内含大量的JavaScript函数。
推荐学习网站（工具站）：http://jquery.cuishifeng.cn
1 获取jQuery及‘hello jQuery’
可以从该网址查找需要的jQuery在线链接:https://www.bootcdn.cn/jquery/
也可以自行下载jQuery文档到本机上：https://jquery.com/download/
文档中调用格式：
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
jQuery使用公式：$(选择器).事件
$(selector).action()
'hello jQuery’案例展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<!--
jQuery公式： $(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
//document.getElementById('id');
//选择器就是CSS的选择器
$('#test-jquery').click(function(){
alert('hello,jQuery');
})
</script>
</body>
</html>
运行结果：
2 jQuery选择器
//原生js，选择器少，不太好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery ：CSS中的选择器此处都可使用
//公式：
//$(selector).action;
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click(); //类选择器
3 jQuery事件
鼠标事件，键盘事件，其他事件…
例子：鼠标事件：
案例展示:(建立在鼠标事件的基础上)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.4.1.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求：获取鼠标当前的坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试一试：
</div>
<script>
//当网页元素加载完毕之后响应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY);
})
});
</script>
</body>
</html>
案例结果：
API文档中事件：
4 jQuery操作Dom元素
原始代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.4.1.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="py">Python</li>
</ul>
<script>
</script>
</body>
</html>
原始结果：
现使用jQuery做以下测试：(控制台中输入)
测试一、节点文本操作：获取节点值及更改值。
获取：
$('#test-ul li[name=py]').text(); //获取文本值
$('#test-ul').html();//获取网页值
获取结果：
更改：
$('#test-ul li[name=py]').text('PYTHON'); //设置文本值
$('#test-ul').html('<strong>123</strong>'); //设置网页值
更改结果：
执行第一句后：
执行第二句后：
测试二、css的操作
//语法：$(selector).css(name,value);
$('#test-ul li[name=py]').css("color","red");
运行结果：
测试三、元素的显示和隐藏
本质：display:none;
$('#test-ul li[name=py]').hide() //隐藏
$('#test-ul li[name=py]').show() //显示
测试结果：
测试四、文档处理方法
方法(开头均省略$(selector).) |
功能 |
|---|---|
| 添加方法 | 共包含8个方法，其实是4个方法，读者自行体会 |
| append(content) // A.append(B) |
向目标追加内容 //将B追加给A |
| prepend(content) //A.prepend(B) |
向目标前置内容 //将B前置到A |
| after(content) //A.after(B) |
在匹配元素后插入内容 //将B插入到A后 |
| appendTo(content) //A.appendTo(B) |
向目标追加内容 //将A追加给B |
| prependTo(content) //A.prependTo(B) |
向目标前置内容 //将A前置到B |
| insertAfter(content) //A.insertAfter(B) |
把匹配元素插入到另一个元素的后面 //将A插入到B的后面 |
| insertBefore(content) //A.insertBefore(B) |
把匹配元素插入到另一个元素的前面 //将A插入到B的前面 |
| 删除方法 | |
| remove() | $("p").remove()//从DOM中把素有段落删除$("p").remove(".hello")//从DOM中把所有带有hello类的段落删除 |
| empty() | 删除匹配元素中所有字节点 |
| 更改方法 | |
| replaceWith(content) //A.replaceWith(B) |
将匹配到的元素替换成指定的HTML/DOM元素 //将A用B替换 |
| replaceAll(selector) //A.replaceAll(B) |
用匹配的元素替换掉所有selector匹配到的元素 //将B用A替换 |
| 克隆方法 | |
| clone() | 克隆匹配的DOM元素并选中这些克隆的副本 |
写在最后
四月你好，愿所有的美好都如期而至！
To Demut and Dottie!
