jQuery

Sayers-denb

于 2022-08-14 11:16:14 发布

阅读量119

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_70990872/article/details/126328972

版权

文章目录

jQuery

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 选择器： * *$ (‘#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>'); //设置值