jQuery

最新推荐文章于 2024-10-07 09:24:46 发布
最新推荐文章于 2024-10-07 09:24:46 发布
阅读量84 收藏
点赞数 3
分类专栏： 网页 文章标签： jquery javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61211769/article/details/119983376
版权

1、jQuery 的使用

1.1、使用步骤

  • 引入 jQuery 文件

  • 获取 jQuery 对象 ----> $(选择器)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box"></div>
        
        <script>
            console.log($("#box"));
        </script>
    </body>
</html>

1.2、jQuery 对象与 js 对象的转换

1.2.1、js 对象转为 jQuery 对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box"></div>
        
        <script>
            console.log($(document.querySelector("#box")));
        </script>
    </body>
</html>

1.2.2、jQuery 对象转为 js 对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box"></div>
        
        <script>
            console.log($("#box")[0]);      // 推荐
            console.log($("#box").get(0));  // 了解
        </script>
    </body>
</html>

2、jQuery 选择器

2.1、基础选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">box</div>
        <div class="haha">div_haha</div>
        
        <script>
            console.log($("#box"));
            console.log($(".haha"));
            console.log($("div"));
            console.log($("*"));
        </script>
    </body>
</html>

2.2、群组 | 组合选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">box</div>
        <div class="haha">div_haha</div>
        
        <script>
            console.log($("#box, .haha"));
        </script>
    </body>
</html>

2.3、层次选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">box
            <ul>
                <li>li1</li>
                <li>li2
                    <ul>
                        <li>内部li1</li>
                        <li>内部li2</li>
                    </ul>
                </li>
                <li>li3</li>
            </ul>
        </div>
        <div class="haha">div_haha</div>
        <div class="haha">div</div>
        <p class="haha">p_haha</p>
        
        <script>
            console.log($("#box ul"));
            console.log($("#box > ul"));
            console.log($("#box + div"));
            console.log($("#box ~ div"));
        </script>
    </body>
</html>

2.4、属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <form id="myform" name="myform" method="post">
            <input type="hidden" name="uno" value="9999" disabled="disabled" />
            姓名：<input type="text" id="uname" name="uname" /><br />
            密码：<input type="password" id="upwd" name="upwd" value="123456" /><br />
            年龄：<input type="radio" name="uage" value="0" checked="checked" />小屁孩
            <input type="radio" name="uage" value="1" />你懂得 <br />
            爱好：
            <input type="checkbox" name="ufav" value="篮球" />篮球
            <input type="checkbox" name="ufav" value="爬床" />爬床
            <input type="checkbox" name="ufav" value="代码" checked />代码<br />
            来自：
            <select id="ufrom" name="ufrom">
                <option value="-1" selected="selected">请选择</option>
                <option value="0">北京</option>
                <option value="1" selected>上海</option>
            </select><br />
            简介：<textarea rows="10" cols="30" name="uintro"></textarea><br />
            头像：<input type="file" /><br />
            <input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20" />
            <button type="submit" onclick="return checkForm();">提交</button>
            <button type="reset">重置</button>
        </form>
        
        <script>
            console.log($("[type]"));           // 具有这个属性的元素
            console.log($("[type = radio]"));   // 具有这个属性，并且等于指定属性值
        </script>
    </body>
</html>

2.5、表单选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <form id="myform" name="myform" method="post">
            ……………………
        </form>
        
        <script>
            console.log($(":input"));
            console.log($(":radio"));
            console.log($(":checkbox"));
            console.log($(":password"));
        </script>
    </body>
</html>

2.6、过滤选择器（配合其他选择器一起使用）

  • :checked 被选中的

  • :selected 被选中的 option

  • :eq(index) 获取指定索引位置的元素

  • :gt(index) 获取大于指定索引的元素

  • :lt(index) 获取小于指定索引的元素

  • :even 偶数索引

  • :odd 奇数索引

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <form id="myform" name="myform" method="post">
            ……………………
        </form>
        
        <script>
            console.log($(":checkbox:checked"));
            console.log($(":selected"));
            console.log($(":input:eq(1)"));
            console.log($(":input:gt(3)"));
            console.log($(":input:lt(3)"));
            console.log($(":input:even"));
            console.log($(":input:odd"));
        </script>
    </body>
</html>

 注意：

  • JS DOM 中获取 DOM 对象如果没有获取到，返回 null

  • jQuery 获取 jQuery 对象，如果没有获取到，返回一个空 jQuery 对象

3、jQuery 操作

3.1、操作属性

3.1.1、属性

分类：

  • 固有属性：src，href，id，class...

  • 自定义属性：程序猿为元素添加的自定义属性

  • boolean属性：checked，selected，disabled

3.1.2、获取属性值

  • $().attr("属性名")：可以获取固有属性的值，可以获取自定义属性，boolean 属性结果为对应的值

  • $().prop("属性名")：可以获取固有属性的值，不可以获取自定义属性，boolean 属性结果为 true | false

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box1" abc="123">div1</div>
        <input type="radio" name="gender" id="man" checked />
        
        <script>
            // 固有属性
            console.log($("#box1").attr("id"));     // box1
            console.log($("#box1").prop("id"));     // box1
            // 自定义属性
            console.log($("#box1").attr("abc"));    // 123
            console.log($("#box1").prop("abc"));    // undefined
            // boolean 属性
            console.log($("#man").attr("checked")); // checked
            console.log($("#man").prop("checked")); // true
        </script>
    </body>
</html>

3.1.3、设置属性值

  • $().attr("属性名", "属性值")：可以操作固有属性，自定义属性，boolean 属性对应属性值为确定的值

  • $().prop("属性名", "属性值")：只能操作固有属性，boolean 属性值为 true | false

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
        <style>
            .red {
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box1" abc="123">div1</div>
        <div id="box2" abc="123">div2</div>
        <input type="radio" name="gender" id="man" checked />
        <input type="radio" name="gender" id="woman" />
        
        <script>
            // 固有属性
            console.log($("#box1").attr("class", "red"));
            console.log($("#box2").prop("class", "red"));
            // 自定义属性
            console.log($("#box1").attr("haha", "hh"));
            console.log($("#box2").prop("haha", "hh"));     // 不能设置
            // boolean 属性
            console.log($("#man").attr("checked", "checked"));  // checked | null
            // console.log($("#man").prop("checked", true));
        </script>
    </body>
</html>

3.1.4、删除属性

  • $().removeAttr("属性名")

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
        <style>
            .red {
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box1" abc="123">div1</div>
        <div id="box2" abc="123">div2</div>
        <input type="radio" name="gender" id="man" checked />
        <input type="radio" name="gender" id="woman" />
        
        <script>
            $("#box1").removeAttr("abc");
        </script>
    </body>
</html>

3.1.5、attr 和 prop 之间的区别

  • attr 可以操作所有属性

  • prop 只能操作固有属性

  • attr 操作 boolean 属性，value 为定值，prop 操作 boolean，value 为 true | false

  • boolean 属性建议使用 prop，其他属性建议使用 attr

3.2、操作元素的样式

3.2.1、获取样式名称

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box2" class="haha hehe">div2</div>
        
        <script>
            console.log($("#box2").attr("class"));      // haha hehe
        </script>
    </body>
</html>

3.2.2、修改样式（属性值的覆盖）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
        <style>
            .red {
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box2" class="haha hehe">div2</div>
        
        <script>
            $("#box2").attr("class", "red");
        </script>
    </body>
</html>

3.2.3、添加样式名称（属性值的追加）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
        <style>
            .size {
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div id="box1">div1</div>
        
        <script>
            $("#box1").addClass("size");
        </script>
    </body>
</html>

3.2.4、添加具体的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box1">div1</div>
        <div id="box2">div2</div>
    
        <script>
            $("#box1").css("width", "500px");
            $("#box2").css({"width" : "500px", "height" : "200px"});
        </script>
    </body>
</html>

3.2.5、移除样式名称

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box2" class="haha hehe">div2</div>
    
        <script>
            $("#box2").removeClass("haha");
        </script>
    </body>
</html>

3.3、操作元素的值

3.3.1、非表单元素标签对的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box1">div1
            <p>我是div1中的p标签</p>
        </div>
        <div id="box2">div2
            <p>我是div2中的p标签</p>
        </div>
​
        <script>
            console.log($("#box1").html());
            console.log($("#box2").text());
​
            console.log($("#box1").html("<span style='color: cyan'>我是div1中的span</span>"));
            console.log($("#box2").text("<span style='color: cyan'>我是div2中的span</span>"));
        </script>
    </body>
</html>

3.3.2、表单元素的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <input type="text" name="words" value="张三">
​
        <script>
            console.log($("[type = text]").val());
            console.log($("[type = text]").val("李四"));
        </script>
    </body>
</html>

3.4、创建元素

  • $("元素内容");

$('<p>this is a paragraph!!!</p>');

3.5、添加元素

  • prepend(content)：在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记

  • $(content).prependTo(selector)：把 content 元素或内容加入 selector 元素开头

  • append(content)：在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记

  • $(content).appendTo(selector)：把 content 元素或内容插入 selector 元素内，默认是在尾部

  • before()：在元素前插入指定的元素或内容 $(selector).before(content)

  • after()：在元素后插入指定的元素或内容 $(selector).after(content)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <ul id="box">
            <li>ul的li1</li>
            <li class="li">ul的li2</li>
        </ul>
​
        <script>
            var li = $('<li style="color:greenyellow;"></li>');
            
            // 使用 prepend 前加内容
            $("#box").prepend("<li>ul的li3</li>");
            
            // 使用 prependTo 前加内容
            $("<li>ul的li4</li>").prependTo("body");
            
            // 使用 append 后加内容
            $("#box").append("<li>ul的li5</li>");
            $("#box").append($(".li"));     // 当把已存在的元素添加到另一处的时候相当于移动
        
            // 使用 appendTo 后加内容
            $("<li>ul的li6</li>").appendTo("#box");
            
            // 使用 before 前加内容
            $(".li").before("<li>ul的li7</li>");
            
            // 使用 after 后加内容
            $(".li").after("<li>ul的li8</li>");
        </script>
    </body>
</html>

3.6、删除元素

  • remove()：删除所选元素或指定的子元素，包括整个标签和内容一起删除

  • empty()：清空所选元素的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <ul id="box">
            <li>ul的li1</li>
            <li>ul的li2</li>
            <li>ul的li3</li>
        </ul>
​
        <script>
            $("#box").remove();
            $("#box").empty();
        </script>
    </body>
</html>

3.7、遍历元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <ul id="box">
            <li>ul的li1</li>
            <li>ul的li2</li>
            <li>ul的li3</li>
        </ul>
​
        <script>
            $("li").each(function(index, element) {
                console.log(index, element);
                console.log($(element));
            });
        </script>
    </body>
</html>
YANG**
关注
专栏目录
jQuery经典小案例
娃娃的博客
03-29 1万+
目录 下拉菜单案例 突出展示案例 淘宝精品案例 京东呼吸灯案例 tab栏切换案例 手风琴案例 城市选择案例 微博发布案例 弹幕效果案例 固定导航栏案例 小火箭返回顶部案例 音乐导航栏案例 下拉菜单案例 效果图： 源代码： 鼠标进入事件mouseenter 鼠标离开事件mouseleave 下拉动画slideDown /slid...
jQuery的引用和选择器
fagdg的博客
05-16 2375
一、jQuery 1、jQuery的简介 jQuery是一个优秀的JavaScript库。使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。 jQuery 最大的优势，就是特别的方便，最重要的是 jQuery 的代码兼容性非常好。 2、jQuery的引用 本地调用：<script src="./js/jquery-3.6.0.min.js">&l...
JQuery的引用
zwjl1017的博客
04-01 4087
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3480
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery 遍历对象
m0_67458498的博客
03-28 4284
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3747
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jQuery选择器
m0_57774967的博客
06-16 4717
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery在线引用
jiufu_的博客
07-15 5107
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 5385
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
解释器、预处理、main函数
最新发布
编程语言技巧经验分享
10-07 1230
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 273
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
Vue根实例、实例总结
m0_54007573的博客
10-04 660
Vue根实例、实例总结
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1455
vue-live2d看板娘集成方案设计使用教程
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值