jQuery学习（三）

最新推荐文章于 2023-12-12 21:22:21 发布
最新推荐文章于 2023-12-12 21:22:21 发布
阅读量250 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AmyZheng_/article/details/82923028
版权

jQuery文档操作方法

1、内部追加内容

  •  选择器追加到内容

　　append(content)在当前jQuery对象内部所包含的DOM对象的内部的最后追加content对应的内容，其中content可以是jQuery对象、DOM对象、HTML
　　　　jQuery对象：$("body").append($("#hello"))
　　　　DOM对象：$("body"),append(document.createElement（"div"）)
　　　　HTML字符串:$("body"),append("<h1>hello world</h1>")

　　prepend(content)在当前jQuery对象内部所包含的DOM对象的内部的最前追加content对应的内容，其中content可以是jQuery对象、DOM对象、HTML
　　　　jQuery对象：$("body").prepend($("#hello"))
　　　　DOM对象：$("body"),prepend(document.createElement（"div"）)
　　　　HTML字符串:$("body"),prepend("<h1>hello world</h1>")

  • 内容追加到选择器

　　　　appendTo(selector)将当前的jQuery对象内部所包含的DOM对象添加到对应的选择器选择的元素的内部最后方
　　　　prepend(selector)将当前的jQuery对象内部所包含的DOM对象添加到对应的选择器选择的元素的内部最前方

  • 测试案例： 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery DOM</title>
    <style>
        .even{width:80%;margin: 20px auto; border:1px solid #ff6f13;}
        .odd{width:80%;margin: 20px auto; border:1px solid #3e88ff;}
        .new{border:1px solid red;margin: 10px 10px;}
        .inner{background-color: #7FFFD4;margin: 10px 10px;}
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var fn = function () {
                //选中class列表中包含的所有元素返回一个jQuery对象
                var jo=$(".odd");
                //在jo所包含的dom上添加content对应的内容
                jo.append("<div class='new'>append context</div>");
            }
            $("#append").click(fn);
            $("#prepend").click(function () {
                var div = document.createElement("div");
                div.classList.add("new");
                div.innerHTML="prepend context";
                $(".odd").prepend(div);
            });
            $("#append-to").click(function () {
                //先确定需要添加的内容(必须是jQuery对象，否则不能使用appendTo方法)
                var content = $("<div class='new'>context appendTo</div>");
                content.appendTo($(".even>.inner"));
            });
            $("#prepend-to").click(function () {
                var content = $("<div class='new'>context prependTo</div>");
                content.prependTo($(".even>.inner"));
            });

        });
    </script>
</head>
<body>
    <div>
        <a id="append">append</a>
        <a id="prepend">prepend</a>
        <a id="append-to">appendTo</a>
        <a id="prepend-to">prependTo</a>
    </div>

    <div class="even">
        <div class="inner">1</div>
    </div>
    <div class="odd">
        <div class="inner">2</div>
    </div>
    <div class="even">
        <div class="inner">3</div>
    </div>
    <div class="odd">
        <div class="inner">4</div>
    </div>
</body>
</html>

2、外部追加内容

  •  选择器追加到内容

　　after(content)在当前jQuery对象内部所包含的DOM对象的外部的最后追加content对应的内容，其中content可以是jQuery对象、DOM对象、HTML
　　　　jQuery对象：$(".inner").append($("#hello"))
　　　　DOM对象：$(".inner"),append(document.createElement（"div"）)
　　　　HTML字符串:$(".inner"),append("<h1>hello world</h1>")

　　before(content)在当前jQuery对象内部所包含的DOM对象的外部的最前追加content对应的内容，其中content可以是jQuery对象、DOM对象、HTML
　　　　jQuery对象：$(".inner").prepend($("#hello"))
　　　　DOM对象：$(".inner"),prepend(document.createElement（"div"）)
　　　　HTML字符串:$(".inner"),prepend("<h1>hello world</h1>")

  • 内容追加到选择器

　　　　insertAfter(selector)将当前的jQuery对象内部所包含的DOM对象添加到对应的选择器选择的元素的外部最后方
　　　　insertBefore(selector)将当前的jQuery对象内部所包含的DOM对象添加到对应的选择器选择的元素的外部最前方

  • 测试案例： 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery DOM</title>
    <style>
        .even{width:80%;margin: 20px auto; border:1px solid #ff6f13;}
        .odd{width:80%;margin: 20px auto; border:1px solid #3e88ff;}
        .new{border:1px solid red;margin: 10px 10px;}
        .inner{background-color: #7FFFD4;margin: 10px 10px;}
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var fn = function () {
                //选中class列表中包含的所有元素返回一个jQuery对象
                var jo=$(".inner");
                //在jo所包含的dom上添加content对应的内容
                jo.after("<div class='new'>after context</div>");
            }
            $("#after").click(fn);
            $("#before").click(function () {
                var div = document.createElement("div");
                div.classList.add("new");
                div.innerHTML="before context";
                $(".inner").before(div);
            });
            $("#insert-after").click(function () {
                //先确定需要添加的内容(必须是jQuery对象，否则不能使用appendTo方法)
                var content = $("<div class='new'>context insertAfter</div>");
                content.insertAfter($(".even>.inner"));
            });
            $("#insert-before").click(function () {
                var content = $("<div class='new'>context insertBefore</div>");
                content.insertBefore($(".even>.inner"));
            });
        });
    </script>
</head>
<body>
    <div>
        <a id="after">after</a>
        <a id="before">before</a>
        <a id="insert-after">insertAfter</a>
        <a id="insert-before">insertBefore</a>
    </div>

    <div class="even">
        <div class="inner">1</div>
    </div>
    <div class="odd">
        <div class="inner">2</div>
    </div>
    <div class="even">
        <div class="inner">3</div>
    </div>
    <div class="odd">
        <div class="inner">4</div>
    </div>
</body>
</html>

3、包裹元素

  • wrap(node)用node对应的内容来包裹当前jQuery对象所包含的DOM节点

　　　　jQuery对象内部所包含的每个DOM对象都被单独包裹(打小包)

  • wrapAll(node)用用node对应的内容来包裹当前jQuery对象所包含的DOM节点

　　　　jQuery对象内部所包含的所有的DOM对象都包裹在同一个node内部(打大包)

  • 测试案例 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery DOM</title>
    <style>
        .even{width:80%;margin: 20px auto; border:1px solid #ffb7d9;}
        .odd{width:80%;margin: 20px auto; border:1px solid #3e88ff;}
        .new{border:1px solid red;margin: 10px 10px;padding: 10px 10px;}
        .inner{background-color: #7FFFD4;margin: 10px 10px;}
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#wrap").click(function () {
                var node = document.createElement("div");
                node.classList.add("new");
                //为jo所包含的DOM对象穿衣服
                var jo =$(".inner")
                jo.wrap(node);

            });

            $("#wrap-all").click(function () {
                var node = document.createElement("div");
                node.classList.add("new");
                //将jo对应的jQuery对象所包含的DOM对象全部到同一个node内部
                var jo =$(".inner")
                jo.wrapAll(node);

            });

            $("#wrap-inner").click(function () {
                var node = document.createElement("div");
                node.classList.add("new");
                //将jo对应的jQuery对象所包含的DOM对象全部到同一个node内部
                var jo =$(".inner")
                jo.wrapInner(node);

            });
        });
    </script>
</head>
<body>
    <div>
        <a id="wrap">wrap</a>
        <a id="wrap-all">wrapAll</a>
        <a id="wrap-inner">wrapInner</a>
    </div>

    <div class="even">
        <div class="inner">1</div>
    </div>
    <div class="odd">
        <div class="inner">2</div>
    </div>
    <div class="even">
        <div class="inner">3</div>
    </div>
    <div class="odd">
        <div class="inner">4</div>
    </div>
</body>
</html>

4、内容的相关操作

 

  •  测试案例： 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery DOM</title>
    <style>
        .even{width:80%;margin: 20px auto; border:1px solid #ffb7d9;min-height: 20px;}
        .odd{width:80%;margin: 20px auto; border:1px solid #3e88ff;min-height: 20px;}
        .new{border:1px solid red;margin: 10px 10px;padding: 10px 10px;}
        .inner{background-color: #7FFFD4;margin: 10px 10px;min-height: 10px;}
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#replace-with").click(function () {
                var node = document.createElement("div");
                node.classList.add("new");
                //被替换的jQuery对象
                var jo =$(".inner")
                //确定替换后显示的内容
                var replacae="<div class='new'>new content</div>";
                //用replace对应的内容替换jo对象所包含的DOM对象(逐个替换)
                jo.replaceWith(replacae);

            });

            $("#replace-all").click(function () {
                var node = document.createElement("div");
                node.classList.add("new");
                //被替换的jQuery对象
                var jo =$(".inner")
                //确定替换后显示的内容（必须是jQuery对象，否则无法调用replaceAll方法）
                var replacae=$("<div class='new'>new content</div>");
                //用replace对应的内容替换jo对象所包含的DOM对象(逐个替换)
                replacae.replaceAll(jo);

            });

            $("#empty").click(function () {
                var node = document.createElement("div");
                node.classList.add("new");
                //将jo对应的jQuery对象所包含的DOM对象全部到同一个node内部
                var jo =$(".inner")
                jo.wrapInner(node);

            });

            $("#remove").click(function () {
                var node = document.createElement("div");
                node.classList.add("new");
                //将jo对应的jQuery对象所包含的DOM对象全部到同一个node内部
                var jo =$(".inner")
                jo.wrapInner(node);

            });

            $("#empty").click(function () {
                $(".inner").empty();//元素还在内容置为空innerHtml=""
            });

            $("#remove").click(function () {
                $(".inner").remove();//删除元素
            });

            $("#remove-expression").click(function () {
                $(".inner").remove(":contains('3')");//删除元素带条件
            });

            $("#clone-true").click(function () {
               var targe = $(".even:last");
               //只有采用这种方式绑定的事件才会有效果
                targe.bind("click",function () {
                    alert("哈哈哈");
                })
                //克隆的元素会有绑定方法
               var cloned =targe.clone(true);
               $(".odd:last").after(cloned);
            });

            $("#clone-false").click(function () {
                var targe = $(".even:last");
                targe.bind("click",function () {
                    alert("哈哈哈");
                })
                //克隆的元素不会有绑定方法
                var cloned =targe.clone(false);
                $(".odd:last").after(cloned);
            });
        });
    </script>
</head>
<body>
    <div>
        <a id="replace-with">replaceWith</a>
        <a id="replace-all">replaceALL</a>
        <a id="empty">empty</a>
        <a id="remove">remove</a>
        <a id="remove-expression">remove(expression)</a>
        <a id="clone-true">clone(true)</a>
        <a id="clone-false">clone(false)</a>
    </div>

    <div class="even">
        <div class="inner">1</div>
    </div>
    <div class="odd">
        <div class="inner">2</div>
    </div>
    <div class="even">
        <div class="inner">3</div>
    </div>
    <div class="odd">
        <div class="inner">4</div>
    </div>
</body>
</html>

jQuery CSS方法

1、addClass(className)添加对应类名的样式

     removeClass(className)移除样式
2、css(properties)其中properties是一个键值对集合

     css(name,value)设置属性值

　  css(name) 获取值

3、height()等价于css("height")

     height(newHeight) 等价于 css("height",newHeight)

    width()等价于css("width")

    width(newWidth) 等价于 css("width",newWidth)

4、position()返回第一个匹配元素的位置（相对于它的父元素）。

测试案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery position</title>
    <style>
       .container{height:300px;width: 80%;margin: 20px auto;box-shadow: 0 0 10px 8px #eee;position: relative}
       .child{line-height:50px ;height:50px;width: 100px;text-align: center;position: absolute;left: 50px;top: 30px;border: 1px solid blue;}
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".child").click(function () {
                var pos =$(this).position();
                console.log(pos);
                console.log(pos.top);
                console.log(pos.left);
            })
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="child">
        天天向上
        </div>
    </div>
</body>
</html>

jQuery 遍历方法

1、length获得当前的jQuery对象内部所包含的DOM对象的个数

     get() 获得当前的jQuery对象内部所包含的DOM对象组成的数组

    get(index)DOM 获取当前的jQuery对象内部的下标是index的DOM对象

    eq(position)jQuery 获取当前的jQuery对象内部的下标是position的DOM对象对应的jQuery对象

    index(subject) 获取Query对象内部下标

测试案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery DOM</title>
    <style>
        .even{width:80%;margin: 20px auto; border:1px solid #ff6f13;}
        .odd{width:80%;margin: 20px auto; border:1px solid #3e88ff;}
        .inner{background-color: #7FFFD4;margin: 10px 10px;}
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#length").click(function () {
                var jo=$(".even");
                console.log(jo.length)
            });

            $("#get").click(function () {
                var jo=$(".even");
                console.log(jo.get())
            });

            $("#get-num").click(function () {
                var jo=$(".even");
                console.log(jo.get(1))
            });

            $("#eq-num").click(function () {
                var jo=$(".even");
                console.log(jo.eq(1))
            });

            $("#index").click(function () {
                var jo=$(".even");
                var subject=$(".even:last");
                console.log(jo.index(subject))
            });
        });
    </script>
</head>
<body>
    <div>
        <a id="length">length</a>
        <a id="get">get()</a>
        <a id="get-num">get(num)</a>
        <a id="eq-num">eq(num)</a>
        <a id="index">index</a>
    </div>

    <div class="even">
        <div class="inner">1</div>
    </div>
    <div class="odd">
        <div class="inner">2</div>
    </div>
    <div class="even">
        <div class="inner">3</div>
    </div>
    <div class="odd">
        <div class="inner">4</div>
    </div>
</body>
</html>

2、$.each()、jo.each()遍历元素

测试案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery DOM</title>
    <style>
        .even{width:80%;margin: 20px auto; border:1px solid #ff6f13;}
        .odd{width:80%;margin: 20px auto; border:1px solid #3e88ff;}
        .inner{background-color: #7FFFD4;margin: 10px 10px;}
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#jQuery-each").click(function () {
                /*遍历jQuery对象*/
                var jo=$(".even");
                $.each(jo,function (index,DOMObject) {
                    console.log(index);
                    console.log(DOMObject);
                });
                /*遍历数组*/
                var arr=["番茄炒蛋","辣椒炒肉"];
                $.each(arr,function (index, element) {
                    console.log(index);
                    console.log(element);
                });
                /*遍历键值对*/
                var map = {"name":"Amy","age":"21"};
                $.each(map,function (key,value) {
                    console.log(key);
                    console.log(value);
                });
            });

            $("#object-each").click(function () {
                var jo=$(".even");
                console.log(jo.get())
            });

        });
    </script>
</head>
<body>
    <div>
        <a id="jQuery-each">$.each()/jQuery.each()</a>
        <a id="object-each">jo.each()</a>
    </div>

    <div class="even">
        <div class="inner">1</div>
    </div>
    <div class="odd">
        <div class="inner">2</div>
    </div>
    <div class="even">
        <div class="inner">3</div>
    </div>
    <div class="odd">
        <div class="inner">4</div>
    </div>
</body>
</html>

转载请于明显处标明出处

https://www.cnblogs.com/AmyZheng/p/9720633.html

AmyZheng_
关注
jQuery 中$()
宇宙奇怪理论的博客
07-19 203
1、调用时执行 <script> function t(){ $("#bd").attr("href","http://www.baidu.com"); } </script> 2、页面加载时执行 <script> $(document).ready(function() { $("#a"), attr("href", "http://www.baidu.com"); }); </script> 3、简写2 .
jQuery中$（）的功能
小黑黑的博客
09-05 1185
1、${}具有获取元素的功能，当只有标签名时直接在（）里输入标签名。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1....
jquery()-$()用法总结
王龙楷
07-21 563
jQuery()方法在大方向上有三种作用： 1.接受一个字符串（选择器），用于选取文档元素。 2.创建DOM元素。 3.绑定一个在DOM文档载入完成后执行的函数。   下面详细介绍各自的用法。 一、选取文档元素 1.1  $(selector,[context]) 默认情况下，选择器从整个文档中对DOM进行搜索，不过当传入context参数时，就只会在context范围中选取元素。 例： ...
jquery之$()函数
空谷残声
01-04 562
jquery之$()函数 在jQuery中,jQuery等价于$,所以alert(jQuery== $);返回布尔值true。注意Q要大写。 一、    jQuery(selector,[context]) 这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。 比如selector传递一个id值为box的元素。 如：$(“#box”); 没有传第二个参数，默认
JQuery 方法查询大全
墨鱼菜鸡
07-11 1120
From：https://www.cnblogs.com/zengjie123/p/4893546.html jQuery 参考手册 - 选择器：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 选择器：https://www.runoob.com/jquery/jquery-re...
jquery学习资料
03-22
**jQuery学习资料** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得DOM操作、事件处理、动画效果以及Ajax交互变得更加容易。本文将深入探讨jQuery的核心概念和使用方法，帮助你...
Jquery学习文档.doc
05-10
**三、jQuery 学习路径** 学习 jQuery，首先需要熟悉 JavaScript 的基础知识，包括变量、数据类型、函数和对象。然后，可以通过官方文档和在线教程了解 jQuery 的核心概念，如选择器、遍历和事件。实践是学习的最佳...
jquery 插件学习（三）
12-09
要实现类似的连写行为，就应该在每个插件方法中，返回一个jquery对象，除非方法需要明确返回值。返回的jquery对象通常就是this所引用的对象。如果使用each()方法迭代this，则可以直接返回迭代的结果。针对上一节的...
jQuery（一）--概述、$()函数（选择器、伪类等）
小白小白从不日别的博客
05-01 2471
一、概述 1.本质：快速简洁的JavaScript框架是继Prototype之后的又一个优秀的JavaScript库（或JavaScript框架） jQuery有非常便利的选择元素的能力，用一个$()函数就能搜寻页面上的元素；$是jQuery的别称（另外的名字），在代码中可以使用jQuery代替$，但一般为了方便，通常都是直接用$ $是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery的方法 jQuery的操作...
jQuery使用方法
qq_73842669的博客
02-03 3122
jQuery使用方法
jquery 取值 赋值
热门推荐
quxiuer
08-20 4万+
$("")是一个jquery对象，而不是一个dom element value是dom element的属性 jquery与之对应的是val val() :获得第一个匹配元素的当前值。  val(val):设置每一个匹配元素的值。  取值：val = $("#id")[0].value; 赋值：可以   $
const 定义变量时使用{}
qq_36698341的博客
05-18 2228
1 ES6解构赋值 含义：ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这种操作称为解构（destructuring） const {a}=b; //等价于 a=b.a; 2 有这样几个解构的例子 const a ={a:1}; console.log(a);//1 const e={a:1,b:2}; const a=e.a; console.log(a);//1 3 所以可以这样理解，当使用{ }来括住变量时，这个变量是右侧对象的某一属性或数组中的某一元素。 ...
关于js对象赋值
最新发布
Sanqianll的博客
12-12 463
关于js赋值相关方法
jQuery中$()函数的7种用法汇总
weixin_33981932的博客
11-16 5519
前言 jQuery对象是一个类数组的对象，含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中，形成了统一(也是惟一)的操作入口。其中我们用的非常频繁的一个函数是$()或者说是jQuery()，当我们调用他的时候会根据传入的参数的不同而达到不同的效果。 接下来会一一说一下这7中用法，欢迎大家指正...
${ }的用法
qq_60646414的博客
02-24 2382
${ }的用法 假设我们定义了一个变量为： file=/dir1/dir2/dir3/my.file.txt 我们可以用 ${ } 分別替换获得不同的值： ${file#/}：拿掉第一条 / 及其左边的字串：dir1/dir2/dir3/my.file.txt ${file##/}：拿掉最后一条 / 及其左边的字串：my.file.txt ${file#.}：拿掉第一个 . 及其左边的字串：file.txt ${file##.}：拿掉最后一个 . 及其左边的字串：txt ${file%/}：拿掉最后一条 /
赋值方法
qq_20426717的博客
03-22 820
1、$("#id").val(数据); 2、$("#id").html(数据); 3、$("#id").combobox(“setValue”,数据); 4、ids = datas[1].split(','); texts = datas[0].split(','); $('#id').combotree('setValue', { id: ids, text: ...
解决${xxx}赋值给js变量时取不到值的问题
wunianisme的博客
09-18 2348
问题 最近开发时，在用JSP页面中有如下代码： <% request.setAttribute("contextPath",request.getContextPath()); %> <script> var Global={}; Global.contextPath='${contextPath}'; </script> 按照正常的执行结果，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值