20分钟学会jQuery，只有一个万能公式：$(selector).action()

你说的白是什么白_

已于 2023-02-09 11:41:37 修改

阅读量541

点赞数 1

分类专栏： # jquery / Ajax 文章标签： jquery

于 2022-01-22 11:56:44 首次发布

本文链接：https://blog.csdn.net/weixin_42214698/article/details/122633740

版权

jquery / Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

~~~~~~~~~~~~~~~~ 以下的代码是下面公共部分 ~~~~~~~~~~~~~~~~

javaScript和jQuery的关系？

jQuery库，里面存在大量的JavaScript函数

用jQuery的目的：

用更少的代码做更多的事

只需记住一个公式：$(selector).action()

例如：
在这里插入图片描述

jQuery和用getElementById()等的区别

getElementById():
jQuery

由此可见jQuery代码更少

jQuery的文档工具站

http://jquery.cuishifeng.cn/
点进去就有相应的例子

例子：jQuery代码写——获取鼠标坐标

$(fuction(){}) 等价于 $(document).ready(function(){})
意思是当网页元素加载完毕之后，再响应ready后面的事件

鼠标相关事件：

mousedown()(jQuery)----按下（常用）
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动（常用）
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <script src="lib/jquery-3.4.1.js"></script>

        <!-- 或者百度一下，在线引入jquery
        <script src="https://code.jquery.com/jquery-3.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>
        	//当网页元素加载完毕之后，响应事件
            //$(document).ready(function(){})
            $(function(){
                $('#divMove').mousemove(function(e){
                    $('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)
                })
            });
        </script>
    </body>
</html>

请添加图片描述

以下的代码是下面公共部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Document</title>
</head>

<body>

    <ul id="test-ul">
        <li class="js">Javascript</li>
        <li name="python">Python</li>
    </ul>   
</body>
</html>

.text() 无参数是获取值，有参数是设置值（修改innerHTML值）

<script>
        $('#test-ul li[name=python]').text();//获取值
        $('#test-ul li[name=python]').text(123123123333333333333333333333333);//设置值
</script>

在这里插入图片描述

.html()无参数是获取值，有参数是设置值

<script>
	$('#test-ul').html();//获得值
	$('#test-ul').html('<strong>123</strong>');//设置值
</script>

.css（）修改css代码

<script>
	   $('#test-ul li[name=python]').css({"color":"red"});
</script>

在这里插入图片描述

.show（）元素的显示 + .hide（）隐藏——本质display:none

<script>
	   $('#test-ul li[name=python]').show();
       $('#test-ul li[name=python]').hide();
</script>

你说的白是什么白_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
20分钟学会jQuery，只有一个万能公式：$(selector).action()

文章目录只需记住一个公式：$(selector).action()jQuery和用getElementById()等的区别jQuery的文档工具站例子：jQuery代码写——获取鼠标坐标~~~~~~~~~~~~~~~~ 以下的代码是下面公共部分 ~~~~~~~~~~~~~~~~.text() 无参数是获取值，有参数是设置值（修改innerHTML值）.html()无参数是获取值，有参数是设置值.css（）修改css代码.show（）元素的显示 + .hide（）隐藏——本质display:nonejava
复制链接

扫一扫