JS——jQuery

最新推荐文章于 2024-08-27 21:01:56 发布

小吴在敲Bug

最新推荐文章于 2024-08-27 21:01:56 发布

阅读量322

点赞数

分类专栏： JavaScript 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/qq_45042462/article/details/125158093

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

1、初始jQuery和公式
2、jQuery选择器
3、jQuery事件
4、jQuery操作DOM
5、帮助文档及cdn

1、初始jQuery和公式

jQuery库： 里面存在大量的JavaScript函数
获取jQuery： 在线jQuery cdn加速

公式： $(selector).action()

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
        <a href="" id="text-jquery">点我</a>
    </body>
    <script>
        $('#text-jquery').click(
            function (){
                alert('HelloWord');
            }
        )
    </script>
</html>

2、jQuery选择器

css选择器在jQuery中均可使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>


        <script>
            //标签选择器
            $("p").click();
            //id
            $('#div1').click();
            //类
            $('.p1').click();
        </script>
    </body>
</html>

文档工具站： jQuery中文API

3、jQuery事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://code.jquery.com/jquery-2.1.1.min.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>

在这里插入图片描述

4、jQuery操作DOM

节点文本操作：
1. 获得值： $('#test-ul li[name=python]').text();
2. 设置值： $('#test-ul li[name=python]').text('设置值');
3. 获得值： $('#test-ul li[name=python]').html();
4. 设置值： $('#test-ul li[name=python]').html('设置值');
CSS的操作： $('#test-ul li[name=python]').css("color","red");

5、帮助文档及cdn

文档工具站： jQuery中文API
获取jQuery： 在线jQuery cdn加速

小吴在敲Bug

关注

0
点赞
踩
1

收藏

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

jQuery库：里面存在大量的JavaScript函数获取jQuery：在线jQuery cdn加速公式： $(selector).action()2、jQuery选择器css选择器在jQuery中均可使用文档工具站： jQuery中文API
复制链接

扫一扫