走进 jQuery

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

@

目录

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事件

事件：

  1. 鼠标事件
  • $('.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>
  1. 键盘事件

文档工具站：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();获取父级

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

posted @ 2023-09-08 20:15  博客zhu虎康  阅读(4)  评论(0)  编辑  收藏  举报