jQuery基本操作

已于 2023-04-12 20:30:46 修改
阅读量959 收藏 2
点赞数 1
分类专栏： Java JavaScript 文章标签： jquery javascript 前端 java
于 2023-03-18 11:14:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56245143/article/details/129633971
版权

jQuery基本操作

简介

jQuery是一个快速，简洁的JavaScript框架，是继承Prototype之后又一个优秀的JavaScript代码库(框架)。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作，事件处理，动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的 插件。jQuery兼容各种主浏览器.

jQuery的使用方式

在使用之前需要先下载库文件

https://jquery.com/

将下载好的js文件放到项目中，并引入到需要的HTML文件中

在这里插入图片描述

使用：

注意：jQery库文件的导入必须在自己写的代码之前。就绪函数在页面上可以写n个。

<script src="js/jquery-3.6.3.js"></script>

就绪函数：

<!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>Document</title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        //就绪函数：当前页面加载完成后，自动执行的函数
        //一个页面上可以创建多个就绪函数
        $(function(){
            var demo=document.getElementById("test");
            console.log(demo.innerText);
        });
    </script>
</head>
<body>
    <div id="test">
        这是DIV
    </div>
</body>
</html>

DOM对象与jQuery对象

DOM对象：就是通过原生JavaScript方法获取到的对象就是DOM对象。

jQuery对象：就是通过jQuery方法获取到的对象

jQuery对象和DOM对象可以进行相互转换，但是两种对象的属性和函数不能彼此混搭使用

DOM对象转换jQuery对象，语法：jQuery(DOM对象)；或者$(DOM对象)；

jQuery对象DOM对象，语法：jQuery对象[index];或者jQuery对象.get(index);

<!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>Document</title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            var demo=document.getElementById("test");
            demo.innerText;
            console.log(demo.innerText);

             //使用jQuery来获取id为test的标签的内容
        //使用js方式获取的对象叫做js对象，使用jQuery来获取的对象叫做jQuery对象
        var demo2 = $("#test");//用jQuery获取的id为test的标签对象
        console.log(demo2.text());//使用jQuery获取对象获取其中的对象的text

        //将js对象转换为jQuery对象
        console.log($(demo).text());//将js对象转换为jQuery对象并获取其中的文本

        //将jQuery对象转换为js对象
        console.log(demo2[0].innerText);
        //默认的index=0的是test标签的内容
        });
    </script>
</head>
<body>
    <div id="test">
        这是DIV
    </div>
</body>
</html>

jQuery选择器

基本选择器

层次选择器

1、基本选择器

使用最多的选择器

分别是：标签选择器，ID选择器，类选择器，全局选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            //获取id为test的标签，将其文本颜色改为红色
            //$("#test").css("color","red");

            //获取class为test的标签，将其文本颜色改为红色
            //$(".test").css("color","red");

            //获取所有的div标签，将其文本颜色改为红色
            //$("div").css("color","red");

            //获取所有的标签，将其文本颜色改为红色
            $("*").css("color","red");
        });
    </script>
</head>
<body>
    <div>第一个DIV</div>
    <div id="test">第二个DIV</div>
    <div>第三个DIV</div>
    <div class="test">第四个DIV</div>
    <p class="test">第一个P</p>
</body>
</html>

2、层次选择器

根据元素与元素之间的关系来查找元素

分别是：后代选择器 ，子元素选择器>，同辈元素选择器~，同辈相邻元素选择器+

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            //获取id为out的标签里面的span标签，将其背景颜色改为红色
            //$("#out span").css("background-color","red");

            //获取id为out的标签里面的span子标签，将其背景颜色改为红色
            //$("#out>span").css("background-color","red");

            //获取id为out的标签的后面的同级span标签，将其背景颜色改为红色
            //$("#out~span").css("background-color","red");

            //获取id为out的标签的后面的同级且相邻span标签，将其背景颜色改为红色
            $("#out+span").css("background-color","red");
        });
    </script>
</head>
<body>
    <span>这是out前面的span</span>
    <div id="out">
        <span>这是out里面的span</span>
        <p>
            <span>这是out里面的p里面的span</span>
        </p>
    </div>
    <span>这是out后面的span</span>
    <span>这是out后面的span再后面的span</span>
    <p>这是out后面的后面的的P</p>
</body>
</html>

3、this的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        // function test(a){
        //     console.log(a.value);
        // }

        $(function(){
            $("#btn").click(function(){
                console.log($(this).val());
            });
        });
    </script>
</head>
<body>
    <input type="button" value="测试1" id="btn">
    <!-- <input type="button" value="测试2" οnclick="test(this)">
    <input type="button" value="测试3" οnclick="test(this)"> -->
</body>
</html>

jQuery属性操作

prop()

prop(“属性名”);获取指定属性的值。

prop(“属性名”,”属性值”);设置指定属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            $("#all").click(function(){
                var checkedValue = $(this).prop("checked");
                $("[name=hobby]").prop("checked",checkedValue);
            });
        });
    </script>
</head>
<body>
    <input type="checkbox" id="all">全选<br>
    <input type="checkbox" name="hobby">篮球<br>
    <input type="checkbox" name="hobby">足球<br>
    <input type="checkbox" name="hobby">排球<br>
    <input type="checkbox" name="hobby">乒乓球<br>
</body>
</html>

jQuery样式操作

1、css(“样式名”,”样式值”);或css({“样式名1”:”样式值1”,“样式名2”:”样式值2”});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #test{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            $("#css").click(function(){
                $("#test").css({"width":"200px","height":"200px","background-color":"yellow"});
            });
        });
    </script>
</head>
<body>
    <div id="test"></div>
    <input type="button" value="css" id="css">
</body>
</html>

jQuery内容操作

html();设置或返回所选元素的内容（包括 HTML 标记），相当于JS的innerHTML

text();设置或返回所选元素的文本内容，相当于JS的innerText

val();设置或返回表单域的值，相当于JS的value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            $("#html").click(function(){
                console.log($("#test").html());
                $("#test").html("<a href='http://www.taobao.com'>淘宝</a>");
            });

            $("#text").click(function(){
                console.log($("#test").text());
                $("#test").text("<a href='http://www.taobao.com'>淘宝</a>");
            });

            $("#val").click(function(){
                console.log($("#username").val());
                console.log($("#username").val("mary"));
            });
        });
    </script>
</head>
<body>
    <div id="test">
        <h1>这是DIV</h1>
    </div>
    <input type="text" id="username" value="陈微"><br>
    <input type="button" value="html" id="html">
    <input type="button" value="text" id="text">
    <input type="button" value="val" id="val">
</body>
</html>

jQuery文档操作

$();创建标签

append();在指定的标签中后置添加

prepend();在指定的标签中前置添加

after();在指定标签的后面添加

before();在指定标签的前面添加

remove();移除指定标签

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <script src="js/jquery-3.6.3.js"></script>
   <script>
       $(function(){
           $("#btn").click(function(){
               //创建一个能够跳转到B站的超链接
               var newEle = $("<a href='http://www.bilibili.com'>B站</a>");
               //将新建的标签放到id为test的标签中的最后
               //$("#test").append(newEle);

               //将新建的标签放到id为test的标签中的最前面
               //$("#test").prepend(newEle);

               //将新建的标签放到id为test的标签的后面
               //$("#test").after(newEle);

               //将新建的标签放到id为test的标签的前面
               //$("#test").before(newEle);

               //将id为test的标签删除掉
               $("#test").remove();
           });
       });
   </script>
</head>
<body>
   <div id="test" style="background-color: red;">
       <h1>这是DIV</h1>
   </div>
   <input type="button" value="测试" id="btn">
</body>
</html>

案例：省市联动

分析：

1、使用一维数组来存放省份信息，使用二维数组存放城市信息

2、页面加载完成，将省份信息读取出来形成放到省份的下拉列表中

3、省份发生改变的时候，读取该省份的城市信息形成放到城市下拉列表中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            var pros = ["四川","云南","贵州","重庆"];
            var cities = [
                ["成都","达州","宜宾"],
                ["昆明","丽江","大理"],
                ["贵阳","遵义","六盘水"],
                ["渝中","江北","万州"]
            ];

            //页面加载完成，读取省份信息，每一个省对应一个option标签，放到省份下拉列表中
            for (var i = 0;i < pros.length;i++) {
                var option = $("<option>"+pros[i]+"</option>");
                $("#pro").append(option);
            }

            //用户选择了某省，读取该省份的城市信息，每一个城市对应一个option标签，放到城市下拉列表中
            $("#pro").change(function(){
                //将之前加载的城市信息清除了
                $("#city option").remove();
                //获取用户选择的省份
                var proValue = $("#pro").val();
                //获取用户选择的省份在数组中的索引
                var index = -1;
                for (var i = 0;i < pros.length;i ++) {
                    if (pros[i] == proValue) {
                        index = i;
                        break;
                    }
                }
                //获取省份对应的城市
                var city = cities[index];
                for (var i = 0;i < city.length;i ++) {
                    var option = $("<option>"+city[i]+"</option>");
                    $("#city").append(option);
                }
            });
        });
    </script>
</head>
<body>
    <select id="pro">
        <option>...请选择...</option>
    </select>省
    <select id="city">
        <option>...请选择...</option>
    </select>市
</body>
</html>

jQuery循环遍历

each();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            var pros = ["四川","云南","贵州","重庆"];
            for (var i = 0;i < pros.length;i ++){
                console.log(pros[i]);
            }

            console.log("---------------------------");
            //方式一：
            $.each(pros,function(index,content){
                console.log(content);
            });

            console.log("---------------------------");
            $(pros).each(function(index,content){
                console.log(content);
            });
        });
    </script>
</head>
<body>

</body>
</html>

jQuery动画

显示与隐藏

show(time,function);显示

hide(time,function);隐藏

toggle(time,function);在显示与隐藏之间相互切换

time：显示与隐藏的时间，单位是毫秒

function：回调函数。显示与隐藏完毕之后自动调用的函数。

两个参数都是可选参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            $("#show").click(function(){
                $("#img").show(1000,function(){
                    alert("显示出来了");
                });
            });

            $("#hide").click(function(){
                $("#img").hide(1000,function(){
                    alert("隐藏起来了");
                });
            });

            $("#toggle").click(function(){
                $("#img").toggle(1000,function(){
                    alert("切换了");
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" value="show" id="show">
    <input type="button" value="hide" id="hide">
    <input type="button" value="toggle" id="toggle"><br>
    <img src="img/gouza.png" width="300" id="img">
</body>
</html>
@湖
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery-3.6.3相关及js文件
01-30
一共包括1、jquery-3.6.3.js文件。 2、jquery-3.6.3.min.js文件。3、jquery-migrate-3.4.0.js文件（主要用于解决jquery版本升级中的问题，是jquery版本升级所必须引用的文件）。4、jquery-migrate-3.4.0.min.js（主要用于解决jquery版本升级中的问题，是jquery版本升级所必须引用的文件）。
根据设置的时间点判断当前时间
https://oldmoon.top
10-11 554
if(JQPZ.isForPointTime == "true"){//是否根据时间点判断挂号午别 var roleTime = JQPZ.PointTime;//获取设置的时间点 if(roleTime != "null"){//如果设置的时间点不为空，进行时间比较 v...
取出对象里的数组值，并发送到其他页面
qq_40112624的博客
11-28 903
取出对象里的数组值，并发送到其他页面 [{“devtype”:“笔记本”,“devxh”:“1”,“gmrq”:{“date”:31,“day”:3,“hours”:0,“minutes”:0,“month”:9,“nanos”:0,“seconds”:0,“time”:1540915200000,“timezoneOffset”:-480,“year”:118},“jqpz”:“1”,“pp”:...
关于jQuery
weixin_48306060的博客
06-14 48
目录1.什么是jquery？2.代码风格3.加载模式 3.1 window.onload 3.2 $(document).ready(function(){});4.选择器jQuery是一个javascript类库，通过封装原生的JavaScript函数从而得到一套完整的方法。 1.1$(function(){}) 匿名函数的执行 1.2 $("#div1") 选取元素 1.3 $("#div1").css('color','red') $==jQuery
jQuery入门
weixin_43473236的博客
02-13 528
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器。jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。jQuery是一个快速、简洁的JavaScript框架（半成品），是继Prototype（多例）之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。我们平时真正能用到的只是少数的最常用的选择器。写更少的代码，做更多的事情。
jquery基本操作
06-28
该资源包含了一个jquery的基本的操作学习，适合初学者，喜欢的下载，可以参考博客：http://blog.csdn.net/mockingbirds/article/details/46673447
新手学习JQuery基本操作和使用案例解析
10-15
主要介绍了新手学习JQuery基本操作和使用案例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
jQuery选择器及jQuery基本操作
01-08
属性操作3. Class操作4. 样式操作5. 内容操作6. 尺寸操作 1. jq选择器 jq的选择器，就是在执行jq函数时传参 是用来获取DOM元素的方法，通过下标可以获取其中某一个DOM元素 $ 函数不管使用选择器选中了几个元素，$...
jQuery基础：jQuery事件操作
01-20
jQuery常用事件 参数function表示触发事件时执行的处理程序（函数）。 参数data用于为事件处理函数传递数据。（可在事件处理函数中使用“事件对象.data”获取） 页面加载事件 jQuery中的页面加载事件方法有3种...
详解JQuery基础动画操作
10-17
主要介绍了JQuery基础动画操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jQuery 在图片和文字中插入内容（多种情况考虑）
joe0235的博客
04-25 838
昨天接到一个新的需要，在后台文章编辑器中，每一个文章的正文前面，可以单独添加一个电头字段，但是如果在富文本编辑器中最上面就添加图片的话，图片就会把电头和正文中的文字给隔开。需要做的是获取到电头字段，然后在正文中的文字部分的最前面插入电头字段。
jQuery笔记
m0_75033389的博客
12-26 80
关于jQuery的引入、语法、常用选择器、常用事件简述
jQuery学习-01jQuery下载安装
伊甸园的博客
01-18 718
jQuery就是js函数库，里面有大量的js函数库，使用这些函数操作dom对象，做事件，动画，ajax处理；
JQuery入门学习教程
Kint的博客
02-15 1249
JQuery入门学习，包含基于JQuery的AJAX教程，适合新手小白，附带源码参考学习。
jQuery基础
luckyboy!的博客
11-16 3265
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery的学习笔记
qi_bai_jin的博客
11-06 996
jQuery是一个快速，小型且功能丰富的JavaScript库。它使HTML文档遍历和操作，事件处理，动画和Ajax之类的事情变得更加简单，并且易于使用的API可以在多种浏览器上运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
js禁用所有的input
Rockandrollman的博客
04-11 307
要在JavaScript中禁用所有的input元素，您可以使用document.querySelectorAll方法来选择所有的input元素，然后使用一个循环来为它们设置disabled属性。这段代码将会禁用页面上所有的input元素。
使用 Fetch API 执行 GraphQL 查询和变体
最新发布
ikxin的博客
04-15 744
GraphQL 是从远程服务器查询数据的强大工具，也是我构建 API 的首选方式。对一些人来说，学习它可能有一定难度，因为教程通常使用 Apollo 或 Relay 等工具进行编写。这些工具很不错，但通常更适用于复杂项目。在某些情况下，最好选择更轻量级的方法，并且不要通过添加额外的库增加包大小。在这种情况下，你可以直接使用浏览器中提供的工具，在本快速教程中，我们将使用在你的浏览器中通常可用的fetch。让我们首先简单地回顾一下fetch。
jquery操作DOM
07-28
jQuery是一个流行的JavaScript库，它简化了对DOM元素的操作。...这些只是jQuery操作DOM的一些基本示例，jQuery还提供了许多其他强大的功能，如事件处理、动画效果等。你可以查阅jQuery的文档以了解更多信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

@湖

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

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

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

打赏作者

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

抵扣说明：

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

余额充值