jQuery基础（二）——jQuery的常用方法

已于 2022-04-20 08:38:06 修改
阅读量1.9k 收藏 4
点赞数
分类专栏： jQuery基础 文章标签： jquery javascript
于 2022-04-18 23:36:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41523175/article/details/124234038
版权

一、$介绍

1、$就是jQuery的简写。

<body>
    <input type="submit" value="按钮">

    <script src="../script/jquery.js"></script>
    <script>
        jQuery("input").click(function () {
            console.log("hello world");
        })
    </script>
</body>

效果如下： 

分析： 

将$替换为jQuery，效果是一样的。 

2、$获取到的结果是一个jQuery对象。

（1）

<body>
    <input type="submit" value="按钮">

    <script src="../script/jquery.js"></script>
    <script>
        jQuery("input").click(function () {
            // console.log("hello world");
            console.log($("input"));
        })
    </script>
</body>

效果如下：

分析：

通过$("input")获取到的对象，不是DOM对象，而是jQuery对象。

其实，是将DOM对象包装成了jQuery对象，从而可以使用jQuery的方法，简化了代码。

（2）如果输出this呢？

    <script>
        jQuery("input").click(function () {
            // console.log("hello world");
            console.log($("input"));
            console.log(this);
        })
    </script>

 输出如下：

可见，this指的是DOM对象。 

（3）也可以通过【$】，将DOM对象转换为jQuery对象。

    <script>
        jQuery("input").click(function () {
            // console.log("hello world");
            console.log($("input"));
            console.log(this);

            console.log(this.value);
            console.log($(this).val())
        })
    </script>

输出如下：

  

因为，在以前，有些浏览器，无法通过this.value获取到数据。

需要将其转换为jQuery对象，让它帮我们获取，而我们不需要去做兼容。 

3、 什么时候用jQuery？什么时候用JavaScript？

jQuery本质上，其实就是JavaScript。

只是，jQuery封装了许多方法，方便我们调用而已。

从性能或者代码统一上来做选择。

二、jQuery常用方法

1、.index()：索引

<body>
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>

    <script src="../script/jquery.js"></script>
    <script>
        $("button").click(function () {
            console.log($(this).index())
        })
    </script>
</body>

效果如下：

分析：

当我们点击按钮时，输出按钮（jQuery对象）对应的索引。 

2、.text()：文本

    <script>
        $("button").click(function () {
            // console.log($(this).index());
            console.log($(this).text());
            $(this).text("新按钮");
        })
    </script>

效果如下：

分析：

当我们点击按钮时，控制台输出文本，并且更改文本。 

3、.css()：样式

    <script>
        $("button").click(function () {
            // console.log($(this).index());
            // console.log($(this).text());
            // $(this).text("新按钮");
            console.log($(this).css("height"));
            $(this).css("height", "50px");
        })
    </script>

输出如下：

设置多组样式的写法：

$(this).css({
                height: "100px",
                height: "100px"
            })

分析：

通过.css()，可以【获取/更改】对象的css属性。

4、.val()：value值

    <input type="button" value="按钮">

    <script>
        console.log($("input").val());
        $("input").click(function () {
            $(this).val("新按钮");
        })
    </script>

输出如下：

  

分析：

不做介绍。 

5、.attr()：属性值

<!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">
    <title>Demo04</title>
    <style>
        img {
            width: 400px;
            height: 200px;
        }
    </style>
</head>

<body>
    <img src="../picture/java.jpg" alt="">
    <button>改变</button>

    <script src="../script/jquery.js"></script>
    <script>
        $("button").click(function () {
            $("img").attr("src", "../picture/前端.jpg");
        })
    </script>
</body>

</html>

效果如下：

分析：

通过.attr()，实现了：点击按钮，修改了img标签的src属性，切换为了另一张图片。 

6、案例一——点击切换图片

<!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">
    <title>Demo05</title>
    <style>
        img {
            width: 400px;
            height: 200px;
        }
    </style>
</head>

<body>
    <img src="../picture/java.jpg" alt="">
    <div class="btn-list">
        <button>1</button>
        <button>2</button>
        <button>3</button>
    </div>

    <script src="../script/jquery.js"></script>
    <script>
        let imgSrc = [
            "../picture/java.jpg",
            "../picture/前端.jpg",
            "../picture/php.jpg"
        ]
        $("button").click(function () {
            let index = $(this).index();
            $("img").attr("src", imgSrc[index]);
        })
    </script>
</body>

</html>

效果如下：

分析：

当点击不同的按钮时，切换到不同的图片。

1、使用.click()为按钮添加点击事件

2、 使用.index()获取索引

3、通过索引，通过.attr()修改图片的src属性（即图片路径）

7、.addClass()和.removeClass()：添加/删除class

我们在上述代码上稍作修改，将按钮一添加一个黄底的背景色。

并在按钮点击事件中，新增功能。

代码如下： 

<!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">
    <title>Demo05</title>
    <style>
        img {
            width: 400px;
            height: 200px;
        }

        .active {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <img src="../picture/java.jpg" alt="">
    <div class="btn-list">
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
    </div>

    <script src="../script/jquery.js"></script>
    <script>
        let imgSrc = [
            "../picture/java.jpg",
            "../picture/前端.jpg",
            "../picture/php.jpg"
        ]
        $("button").click(function () {
            let index = $(this).index();
            $("img").attr("src", imgSrc[index]);
            if (index === 0) {
                $(this).removeClass("active");
            } else if (index === 1) {
                $(this).addClass("active")
            } else {
                $(this).toggleClass("active");
            }
        })
    </script>
</body>

</html>

效果如下：

分析：

当我们点击按钮1时，移出已有的active样式。【.removeClass()】

当我们点击按钮2时，新增active样式。【.addClass()】

当我们点击按钮3时，可以新增/移除active样式。【.toggleClass()】

 8、.siblings()：获取同级其它元素

我们对前面的代码稍作修改。

<!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">
    <title>Demo05</title>
    <style>
        img {
            width: 400px;
            height: 200px;
        }

        .active {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <img src="../picture/java.jpg" alt="">
    <div class="btn-list">
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
    </div>

    <script src="../script/jquery.js"></script>
    <script>
        let imgSrc = [
            "../picture/java.jpg",
            "../picture/前端.jpg",
            "../picture/php.jpg"
        ]
        $("button").click(function () {
            let index = $(this).index();
            $("img").attr("src", imgSrc[index]);
            // if (index === 0) {
            //     $(this).removeClass("active");
            // } else if (index === 1) {
            //     $(this).addClass("active")
            // } else {
            //     $(this).toggleClass("active");
            // }

            $(this).addClass("active");
            $(this).siblings().removeClass("active");
        })
    </script>
</body>

</html>

效果如下：

分析： 

当我们点击其中一个按钮，这个按钮添加active样式，另外两个按钮就自动移除active样式。

9、find()和parent()

<!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">
    <title>Demo06</title>
    <style>
        .active1 {
            background-color: red;
        }

        .active2 {
            background-color: yellow;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="box">
        <button>按钮</button>
    </div>
    <div class="box">
        <button>按钮</button>
    </div>
    <div class="box">
        <button>按钮</button>
    </div>

    <script src="../script/jquery.js"></script>
    <script>
        $(".box").click(function () {
            $(this).find("button").toggleClass("active1");
        })

        // $("button").click(function () {
        //     $(this).parent().toggleClass("active2");
        // })
    </script>
</body>

</html>

两种情况，分别注释来看。

1、点击外面的box，里面的button【子级】变色。【find.("button)】

2、 点击里面的button，外面的box【父级】变色。【.parent()】

效果如下：

三、DOM操作

1、.append()和.remove()：添加/删除元素节点

<!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">
    <title>Demo07</title>
</head>

<body>
    <input type="text">
    <button>添加</button>
    <ul class="fruit-list">
        <li>香蕉</li>
        <li>苹果</li>
        <li>鸭梨</li>
    </ul>

    <script src="../script/jquery.js"></script>
    <script>
        // 删除水果（利用事件委托）
        $(".fruit-list").on("click", "li", function () {
            $(this).remove();
        })

        // 添加水果
        $("button").click(function () {
            // 获取input的输入值
            let value = $("input").val();
            // 将li标签转换为jQuery对象
            let li = $(`<li>${value}</li>`);
            $(".fruit-list").append(li);
        })
    </script>
</body>

</html>

效果如下：

  

分析： 

on()：实现事件委托。

第一个参数：事件类型【click】。

第二个参数：选择器【li】。

第三个参数：函数。（函数中的this指向的是li）

四、jQuery事件 

1、click()：点击事件

2、on()：事件委托

前面两点都讲过，就不再赘述了。

3、.mouseenter()、.mouseleave()、.mousemove()：鼠标移入、移出、移动事件

（1）

<!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">
    <title>Demo08</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>

    <script src="../script/jquery.js"></script>
    <script>
        $(".box").mouseenter(function () {
            console.log("鼠标移入！");
        })

        $(".box").mouseleave(function () {
            console.log("鼠标移出！");
        })

        $(".box").mousemove(function () {
            console.log("hello world");
        })
    </script>
</body>

</html>

效果如下，不做解释：

（2）我们还可以这样写：（链式操作）

    <script>
        $(".box").mouseenter(function () {
            console.log("鼠标移入！");
        }).mouseleave(function () {
            console.log("鼠标移出！");
        }).mousemove(function () {
            console.log("hello world");
        })
    </script>

效果是一样的！这样的写法叫作：链式操作。

因为，$(".box").mouseenter(......)的返回值就是box的jQuery对象。 

 （3）获取坐标【e.pageX和e.pageY】

    <script>
        $(".box").mouseenter(function () {
            console.log("鼠标移入！");
        }).mouseleave(function () {
            console.log("鼠标移出！");
        }).mousemove(function (e) {
            console.log("X坐标:" + e.pageX + ",Y的坐标:" + e.pageY);
        })
    </script>

效果如下： 

4、案例三——大图显示

前面做过，这次使用jQuery改写。

<!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">
    <title>Demo09</title>
    <style>
        img {
            width: 400px;
            height: 200px;
        }

        .big-img {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="imgList">
        <img src="../picture/java.jpg" alt="">
        <img src="../picture/前端.jpg" alt="">
        <img src="../picture/php.jpg" alt="">
    </div>
    <div class="big-img">

    </div>

    <script src="../script/jquery.js"></script>
    <script>
        let bigImg = ["../picture/java.jpg", "../picture/前端.jpg", "../picture/php.jpg"];
        // 鼠标移动事件
        $(".imgList img").mousemove(function (e) {
            // 获取索引
            let index = $(this).index();
            // 根据索引，设置大图的src
            let img = `<img src="${bigImg[index]}">`;
            // 添加大图的img标签
            $(".big-img").html(img);
            // 设置大图随鼠标的移动而移动
            $(".big-img").css({
                left: (e.pageX + 10) + "px",
                top: (e.pageY + 10) + "px"
            })
        })

        // 鼠标离开之后，关闭显示
        $(".imgList img").mouseleave(function () {
            $(".big-img").html("");
        })
    </script>
</body>

</html>

效果如下：

 五、jQuery动画方法（已淘汰，不做详细介绍）

1、.show()和.hide()

<!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">
    <title>Demo10</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button class="show">显示</button>
    <button class="hide">隐藏</button>
    <div class="box">

    </div>
    <script src="../script/jquery.js"></script>
    <script>
        $(".show").click(function () {
            $(".box").show(500);
        });

        $(".hide").click(function () {
            $(".box").hide(500);
        })
    </script>
</body>

</html>

显示效果如下：

分析： 

点击隐藏按钮，0.5秒后，隐藏了div。

点击显示按钮，0.5秒后，显示了div。 

2、.fadeIn()和.fadeOut()

 跟前面那个差不多，我们直接看代码和演示就行。

    <script>
        $(".show").click(function () {
            $(".box").fadeIn(500);
        });

        $(".hide").click(function () {
            $(".box").fadeOut(500);
        })
    </script>

效果如下：

六、jQuery插件

 jQuery插件也是别人写好的，我们直接用的。

基于jQuery开发，插件包含：css文件+js文件。 

大量的jQuery插件没有良好的文档，而且存在大量bug，所以，能不用就不用。 

pro1822
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
常用的jquery模板插件——jQuery Boilerplate介绍
01-19
在初次进行jquery插件开发时，我们往往无从下手，当然我们可以按照jquery官方提供的格式进行简单的插件开发，但是很...在这里主要介绍下一个在实际开发中最常用的jquery模板插件——jQuery Boilerplate jQuery Boilerpl
jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件
cheng1a的博客
09-05 8485
jQuery绑定点击事件和及监听改变事件的几种方式以及多个元素绑定多个事件
JQuery 动态生成元素添加点击事件
sayyy的专栏
11-26 7904
页面代码 <html> ... <body> <div id="divBox"></div> <script> $(function(){ $("#divBox").append("<img class='preview_image' src='/img/preview1.jpg' />"); $("#divBox").append("<img class='preview_image' src='/img/pre
jQuery动态绑定事件的方法（超详细）
zy1992As的博客
03-08 4346
以上只是一些常用的jQuery动态绑定事件的方法，jQuery还提供了许多其他方法来处理事件，如.keydown()、.keyup()、.submit()等等。1..on()：这是一个通用的事件绑定方法，可以用于任何事件类型，包括自定义事件。4..delegate()：这是一种早期的事件委托方法，已被.on()取代。5..live()：这是一种早期的事件委托方法，已被.on()取代。3..bind()：这是一个早期的绑定方法，它允许绑定多个事件处理程序，但已被.on()取代。
03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制
记录java学习日常~
05-20 5933
on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。click() 方法是一种简洁的事件绑定方法，只能绑定 click 事件，并且只允许绑定一个处理程序，无法为同一个元素绑定多个处理程序。off() 方法用于移除之前绑定的事件处理程序，它需要传递一个或多个事件类型参数，并为这些事件类型制定要移除的处理程序。jQuery 事件绑定中，on() 方法用于为元素添加事件处理程序，off() 方法则用于移除绑定的事件处理程序。
jquery 常用操作整理 基础入门篇
10-29
jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
jQuery常用知识点总结以及平时封装常用函数
11-23
本文为大家介绍了jQuery中常用知识点及函数，包含许多细节方面的知识，下面我们一起学习一下。 jQuery中为我们提供了很多有用的属性，自己总结的一些常用的函数。个人认为在在线排盘开发中会比较常用的，...jquery常用
jQuery
qq_50748038的博客
08-26 6010
jQuery事件的基本使用绑定和解绑，事件委托和jQuery中插入内容、克隆节点的方法，了解jQuery静态方法在数组和对象上的操作以及字符串操作
JQuery方法查询
xiang_fu的博客
02-18 167
一、核心:$是jquery类的一个别名,$()构造一个jquery对象,jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。 1、 ${表达式}：根据这个表达式来查找所有匹配的元素。 eg:$("div&gt;p"); 查找所有p元素，且这些p元素都是div的子元素. $("input:radio",doc...
《jQuery基础教程》-- AJAX篇
热门推荐
技术之道，其路之久远，需淡然与仔细
01-09 2万+
jQuery的Ajax带来了无需刷新的web页面革命。这里就详细介绍一下jQuery所涉及到的Ajax操作。（无需特殊说明，均需要有服务器配置，这里本人用的是Tomcat 7） 1.基于请求加载文件数据 这里的请求通常都是网页的某些操作，如点击等。 而其加载数据的类型归类为以下四种：a.加载HTML文件；b.加载JSON文件；c.加载Javascript文件；d.加载XML文件。 其对应的
jQuery的click点击方法合集
me_Jackyoyo的博客
04-20 3089
$("#tb2").on('click', 'i', function () { }); // 二次点击取消选中 function badReactionClick() { $('body').on('click', '.badReactionDescription input[id^="bad"]', function () { var name = $(this).attr("name"); $(":radio[name=" + name + "]:not(
jq点击事件(jq点击事件)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-10 2290
用的HTML5里video标签，用jq怎么点击全屏之后自动横屏播? 可以自己设置的 js如何获取class的元素不能用jq<br/1br/>2 2.var classElements = [],allElements = document.getElementsByTagName('*'); jqu...
jquery添加click事件，jq动态添加click事件多种方式分享
请告诉他
11-12 5287
目录： 添加方式 实例演示 其中方式有一下几种 $("#ImId1").click(function(){}); $("#ImId2").bind("click",function(){}) $("#ImId3").on("click",function(){}) $("body").delegate("#xxx","click",function(){}) 实例演示： 导入jq <script type="text/javascrip...
xiyueta.js库的 $().text() 属性方法
mydd3的博客
10-06 843
xiyueta().text()方法描述：获取匹配元素集合中每个元素的组合文本内容，包括其后代，或设置匹配元素的文本内容。 xiyueta.text()方法 共有二种调用方法： 1、xiyueta("div").text(); //获取匹配元素集合中每个元素的组合文本内容（包括它们的后代） 2、xiyueta("div").text("设置内容"); //设置每个匹配元素的HTML内容 总结：.text()用法与jQuery中.text()用法保持一致，.text(function(i){})可以..
jQuery事件
weixin_64037609的博客
09-20 1074
jQuery事件
jQuery为元素绑定事件
chenqiuqian的博客
07-27 2647
这是bind链式方法，方法.bind(“事件名字”，事件处理函数).bind(“事件名字”，事件处理函数).bind(“事件名字”，事件处理函数)这个方法跟前面的几个方法有些不一样，这个是给父元素绑定事件，方法父元素.delegate(“事件名字”，“子元素”，事件处理函数)。这是键值对方法，方法.bind({“事件函数”事件处理函数，“事件函数”事件处理函数，“事件函数”事件处理函数})这是bind方法，方法bind(“事件名字”，事件处理函数)；为元素绑定事件的几个方法。...
jQuery实现点击事件的四种方法
juejiangjianchi的博客
07-31 1655
1、 <button id="but" onclick="but()"></button> function but() { alert("but") } 2、 <button id="but"></button> $("#but").click(function(){ alert("but") }); 3、 <button ...
怎么设置jQuery中的事件和动画
全栈
03-12 1746
1. 事件 3 1.1. 加载Dom两种方式 1.1.1. window.onload方式 1.1.2. jQuery方式 1.1.3. 案例1：测试两种方式的区别【个数+顺序】 1.2. 绑定事件两种方式 1.2.1. 元素.on(“事件名”,function(){}) 1.2.2. 元...
jQuery学习笔记——事件
最新发布
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pro1822

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值