走进 jQuery

博客zhu虎康

于 2021-08-08 22:25:51 发布

阅读量128

点赞数

分类专栏：前端知识图谱文章标签： jquery

本文链接：https://blog.csdn.net/qq_53810245/article/details/119512930

版权

前端知识图谱专栏收录该内容

22 篇文章 1 订阅

订阅专栏

点击链接走进前端学习：https://blog.csdn.net/qq_53810245/article/details/116831968

jQuery学习笔记

一、初识jQuery及公式
二、jQuery操作Dom元素
三、jQuery常用方法

jQueryAPI 中文文档

一、初识jQuery及公式

1、导入

1.1、cdn导入

<!DOCTYPE html>
<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>

1.2、本地导入

在 https://www.bootcdn.cn/jquery/网址下载jQuery库，然后导入本地：

    <script src="lib/jquery-3.4.1.js"></script>

2、使用，公式为`$(selector).action()`

<body>
<a href="" id="test-jquery">点我</a>
<script>
    $('#test-jquery').click(function () {
        alert('hello,jQuery!');
    })     
</script>
</body>

2.1、jQuery选择器

标签选择器 $('p').click();
id选择器 $('#id1').click();
class选择器 $('.class1').click();
文档工具站：https://jquery.cuishifeng.cn/

2.2、jQuery事件

事件：

鼠标事件

$('.class').mousedown();：鼠标按下
$('.class').mouseleave();：鼠标离开
$('.class').mousemove();：鼠标移动
$('.class').mouseover();：鼠标点击结束

案例展示：获取当前鼠标的坐标尾椎

<!DOCTYPE html>
<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>>
    <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>

键盘事件

文档工具站：https://jquery.cuishifeng.cn/

二、jQuery操作Dom元素

1、节点文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>
<script>
    $('#test-ul li[name=python]').text(); // 获得值
    $('#test-ul li[name=python]').text('新值'); // 设置值
    
</script>
</body>
</html>

    $('#test-ul li[name=python]').text(); // 获得值
    $('#test-ul li[name=python]').text('新值'); // 设置值
    $('#test-ul li[name=python]').html(); // 获得值
    $('#test-ul li[name=python]').html('<strong>123</strong>'); // 设置值

文档工具站：https://jquery.cuishifeng.cn/

2、CSS的操作

$('#test-ul li[name=python]').css({"color","red"})

文档工具站：https://jquery.cuishifeng.cn/
…

3、元素的显示和隐藏，本质 `display:none`

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hidde()

文档工具站：https://jquery.cuishifeng.cn/

三、jQuery常用方法

1、index();获取元素索引
2、text();获取和设置文本节点
3、css();获取和设置样式
4、val();获取和设置value属性
5、attr();获取和设置属性值，例如src
6、addClass();添加class
7、removeClass();删除class
8、toggleClass();切换class
9、siblings();获取同级其他元素
10、find(“选择器”);获取子级
11、parent();获取父级

创作不易，大侠请留步… 动起可爱的双手，来个赞再走呗 (๑◕ܫ￩๑)

博客zhu虎康

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
走进 jQuery

jQuery学习笔记一、初识jQuery及公式1、导入1.1、cdn导入1.2、本地导入2、使用，公式为`$(selector).action()`2.1、jQuery选择器2.2、jQuery事件二、jQuery操作Dom元素1、节点文本操作2、CSS的操作3、元素的显示和隐藏，本质 `display:none`jQueryAPI 中文文档一、初识jQuery及公式1、导入1.1、cdn导入<!DOCTYPE html><html lang="en"><hea
复制链接

扫一扫