jQuery操作元素和DOM

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量692 收藏
点赞数 1
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43375983/article/details/121940417
版权

一、操作元素

Ⅰ、操作文本内容

①语法text()

②替换文本内容

③以纯文本方式实现， 不能是标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery操作文本内容</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<div>

    <p> hello </p>

</div>

<div>

    <p> world </p>

</div>

<script>

    $(function(){

        // text()

        console.log($("div").text());

        alert($("div").text());

        // 替换内容

        $("div").text("name");

        

        // 以纯文本实现，不能识别标签

        $("div").text("<span> name </span>");

    })

</script>

</body>

</html>

Ⅱ、操作HTML内容

①只匹配第一个文本内容

②可以识别标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery操作文本内容</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<div>

    <p> hello </p>

</div>

<div>

    <p> world </p>

</div>

<script>

    // html()  匹配第一个

    $(function(){

        console.log($("div").html());

        $("div").html("<span> name </span>")

    })

</script>

</body>

</html>

Ⅲ、操作元素值

①val()

②获取第一个匹配的元素，也可修改值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery操作元素值</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<input type="text" value="123">

<input type="text" value="456">

<script>

    $(function(){

        // val() 获取第一个匹配的元素

        alert($("input").val());

        $("input").val("value");

    })

</script>

</body>

</html>

Ⅳ、操作CSS

1、修改类

①addClass() 添加

②removeClass() 删除

③toggleClass() 如果指定的类存在，就删掉， 不存在就添加

2、修改CSS属性

①css(key, value)

修改多个属性时，用字典方式

②获取属性值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery操作CSS</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

    <style>

        .box{

        }

        .c1{

            width:100px;

            height: 100px;

            background-color: red;

        }

        .c2{

            width: 100px;

            height: 100px;

            background-color: blue;

        }

        

        div{

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

<div class="box"></div>

<script>

    // 修改类

    // addClass()

    $(function(){

        $("div").addClass("c1");

    })

    // removeClass()

    $(function(){

        $("div").removeClass("c1");

    })

    // toggleClass()

    // 如果指定的类存在，就删掉，如果不存在就添加

    $(function(){

        $("div").toggleClass("c2");

        $("div").toggleClass("c1");

    })

  

    // 修改CSS属性

    // css(key, value)

    // css(value)

    $(function(){

       // $("div").css("background-color", "blue");

        $("div").css({"background-color": "red" , "border": "1px solid black"});

        // 获取属性值

        alert($("div").css("width"));

    })

</script>

</body>

</html>

Ⅴ、操作DOM

1、增 ：在元素内部-- 创建、插入， 在元素外部--添加

2、删 ： remove()

3、复制 ： clone()

4、替换 ： replaceAll()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery操作DOM</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<div></div>

<p></p>

<div id="div1"></div>

<div id="div2"></div>

<script>

   $(function(){

       // 创建节点

       var $jqObj1 = $("<p>111</p>");

       $("div").append($jqObj1);

       var $jqObj2 = $("<p> hello </p>");

       $("div").append($jqObj2);

       var $jqObj3 = $("<p name='abc'> world </p>");

       $("div").append($jqObj3);

       // 插入 append(xx)  appendTo() 调用对象不同

       var $p_1 = $("<p> hello </p>");

       var $p_2 = $("<p> world </p>");

       var $div = $("div");

       $div.append($p_1);

       $p_2.appendTo($div);

   })

   $(function(){

       // 在元素外添加

       var $p = $("p");

       var $p_1 = $("<p> 1 </p>");

       var $p_2 = $("<p> 2 </p>");

       $p.after($p_1);

       $p_2.insertAfter($p);

   })

    $(function(){

        // 删除 remove()

        var $p = $("p");

        $p.remove();

    })

    $(function(){

        // 复制 clone()

        var $p = $("p");

        $p.clone();

    })

    $(function(){

        // 替换 replaceAll()

        $("<div> name </div>").replaceAll("#div2");

        $("#div1").replaceWith("<div> hello </div>");

    })

</script>

</body>

</html>

5、遍历

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery操作DOM</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<img src="img/1477550681.jpg">

<img src="img/1477550681%20-%20副本%20(2).jpg">

<img src="img/1477550681%20-%20副本%20(3).jpg">

<img src="img/1477550681%20-%20副本%20(4).jpg">

<img src="img/1477550681%20-%20副本%20(5).jpg">

<script>

    $(function(){

        // 遍历图片张数

        $("img").each(function (index) {

            $(this).attr("title", "第" + index + "张");

        })

    })

</script>

</body>

</html>

6、包裹

①包裹节点 wrap()

②去除包裹 unwrap()

③整体包裹 wrapAll()

④包裹内部 wrapInner()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery操作DOM</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<span> this is a good day </span> <br/>

<span> this is a bad day </span> <br/>

<span> this is a nice day </span> <br/>

<span> this is a wind day </span> <br/>

<button> 包裹节点 </button>

<button> 去除包裹 </button>

<button> 整体节点 </button>

<button> 包裹内部 </button>

<script>

    $(function(){

        // 包裹节点 wrap()

        $("button:eq(0)").click(function(){

            $("span").wrap("<p></p>");

        })

        // 去除包裹

        $("button:eq(1)").click(function(){

            $("span").unwrap();

        })

        // 整体包裹

        $("button:eq(2)").click(function(){

            $("span").wrapAll("<p></p>");

        })

        // 包裹内部

        $("button:eq(3)").click(function(){

            $("span").wrapInner("<p></p>");

        })

    })

</script>

</body>

</html>

霡霂小雨
关注
通过jquery操作dom查找元素
ernesto的博客
09-03 897
1、通过 jQuery，向上遍历 DOM 树，以查找元素。 parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。 parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 2、通过 jQuery，向下遍历 DOM 树，以查找元素。 children() 方...
jquery--DOM操作
m0_74194490的博客
07-05 1085
在javaScript的基础上创建的属于js的框架，是继Prototype之后又一个优秀的javaScript代码库（javaScript框架）有一些人嫌弃js用着不好，把 很多具有特殊功能的代码的集合，写在一个js文件中，名为jquery.js。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
Jquery操作DOM对象
zhoutong2323的博客
02-28 536
HTML代码操作 演示案例 总结
Jquery（二）Dom元素的操作
weixin_51760209的博客
07-29 3177
1.表单类型过滤器1.2text单行文本框3.password密码框4radio单选框5checkbox复选框6.submit提交按钮7.image图像域2.表单状态过滤器1.enabled可用的2disabled禁用的3.checked被选中的4.selected下拉框被选择的3.内部插入4.外部插入5.Jquery操作dom元素httpshttpshttps。...
jquery操作DOM对象
2202_75900709的博客
04-10 934
中节点操作主要分为： 查找节点，创建节点 ，插入节点 ，删除节点 ，替换节点 ，复制节点。外，还有获取和设置元素高度、宽度、相对位置等的样式操作方法。可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素。：删除整个节点，保留元素的绑定事件、附加的数据。：获取元素的祖先元素，可以加选择器进行筛选。方法可以用来获取元素的所有子元素，注意不是。操作进行了封装，使用起来也更简便。等节点操作方法，可以参阅开发文档。可以获取或设置元素的文本内容。的编程语言都可以使用它，如。：获取元素的父级元素。
jQuery基础——操作DOM
weixin_57575133的博客
11-10 713
DOM操作可分为3个方面：DOM Core(核心）、HTML DOM和CSS DOM。jQuery作为一种JavaScript库，继承优化了JavaScript访问DOM对象的特性，使开发人员更加方便地操作DOM对象。
jQuery操作Dom元素、jQuery遍历、JavaScript遍历
六六的小帅的博客
11-29 455
关于jQuery的常用获取元素和元素赋值操作；jQuery遍历对象；JavaScript遍历对象；知识点合集
Jquery事件和DOM操作
qq_45895931的博客
06-23 414
$(“选择器”).click(function(){ })；常用$(“选择器”).on("事件类型1 事件类型2。。。 "，“子元素” , function(){});常用动态绑定 如果想给某个父元素中的子元素绑定事件，但是 这个子元素 不存在不是我们自己写 的，而是通过js代码动态添加的时候，此时绑定事件用。 2.DOM操作 模板法。 增：创建，美化，添加 document.createElement(“标签名”)； 删: 自已.remove() 父.removeChild(“子节点”); 改：父.rep
七、 jQuery 操作 DOM
m0_72166275的博客
08-03 886
当网页被加载时，浏览器会创建当前网页的 DOM 对象。JavaScript 通过提供的方法对 DOM 节点进行操作，实现页面的交互；jQuery 提供了一系列操作 DOM 的方法；一方面简化了 JavaScript 操作 DOM的写法；另一方面解决了浏览器的兼容性问题。JavaScript 操作 DOM 分为三类，即 DOM Core(核心)、HTML-DOM 和 CSS-DOM，jQuery 操作 DOM 同样分为这三类。
jQuery利用sort对DOM元素进行排序操作
10-21
比如用户在页面上操作产生的排序请求，例如翻页、内容展开收起等场景，这些情况下，我们可以直接通过客户端的JavaScript或jQuery进行DOM元素的排序。 ### 实现升序和降序切换 在某些场景下，用户可能需要对列表进行...
jQuery Dom元素操作技巧
12-29
DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 jquery 获取父节点，兄弟节点，在节点内插入内容。 ①$(#test1).parent() // 父节点 ②$(#test1).next() //下一个节点 ③$(#test1).append('...
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
jQuery中DOM树操作之复制元素的方法
01-21
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下： 复制元素 前面提到的操作包括：插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置，以及通过新元素来包装已有...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2809
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 851
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 431
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 866
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1289
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
JQuery操作DOM属性与元素样式详解
JQuery操作样式则更为直接，它提供了`.css()`方法来获取或设置元素的样式属性。例如，要改变图片的宽度，可以使用如下代码： ```javascript $('img').css('width', '200px'); ``` 这将把所有匹配的图片元素的宽度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值