文章目录
jQuery
一、jQuery简介
1.jQuery封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化了HTML文档操作、事件处理、动画设计和Ajax交互。
2.jQuery的核心特性为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
3.在jQuery库中,里面存在大量的JavaScript函数。
二、获取jQuery
2.1、下载获取
获取jQuery,我们可以通过网站 https://jquery.com/ 来下载获取。
2.2、代码获取
其源代码为:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<body>
</body>
</html>
同样也可以这样:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入-->
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
</body>
</html>
2.3、jQuery重要公式
jQuery的重要公式为: $(selector).action()
代码演示:
<a href="" id="text-jquery">点击</a>
<script>
//选择器就是css的选择器
$('#text-jquery').click(function(){
alert('hello');
})
</script>
2.4、原来的JavaScript与jQuery的区别
1.原来的JavaScript,选择器少且不怎么好记
标签:
document.getElementsByTagName();
id:
document.getElementsById();
类:
document.getElementsByClassName();
2.jQuery比较好记且css中的选择器它全部都能用
标签选择器:
(
′
p
′
)
.
c
l
i
c
k
(
)
;
∗
∗
i
d
选择器:
∗
∗
('p').click();** id选择器: **
(′p′).click();∗∗id选择器:∗∗(‘#id1’).click();
class选择器:
$(‘.class1’).click();
注:文档工具站:https://jquery.cuishifeng.cn/
三、jQuery事件
事件包含鼠标事件,键盘事件以及其他事件。
3.1、鼠标事件
鼠标事件的主要代码有:
mousedown() //按下
mouseleave() //离开
mousemove() //移动
mouseover() //结束
代码演示:
<head>
<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>
四、操作DOM
4.1、节点文本操作
1.$('#text-ul li[name=python]').text(); //获取值
2.$('#text-ul li[name=python]').text(设置值); //设置值
3.$('#text-ul ').html(); //获取值
4.$('#text-ul ').html('<strong>123</strong>'); //设置值
4.2、css的操作
$(‘#text-ul li[name=python]’).css({“color”,“red”});
4.3、元素的显示和隐藏
元素的显示和隐藏本质为: display:none
$(‘#text-ul li[name=python]’).show(); //显示
$(‘#text-ul li[name=python]’).hide(); //隐藏
4.4、其他测试
$(window).width();
$(window).height();
$(‘#text-ul li[name=python]’).toggle();
4.5、Ajax
$(‘#from’).ajax()
$.ajax({url:“text.html”,context:document.body, success: function(){
$(this).addClass(“done”);
}});