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元素并选中这些克隆的副本 |