jq 对节点操作

最新推荐文章于 2022-07-12 19:28:52 发布
最新推荐文章于 2022-07-12 19:28:52 发布
阅读量9.3k 收藏 2
点赞数
文章标签： html class function firebug 扩展 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaoxin125/article/details/5998381
版权

<body>
  <p title="水果" id="pp">你喜欢的水果是？</p>
  <ul>
   <li>苹果</li>
   <li>香蕉</li>
   <li>荔枝</li>
  </ul>
 </body>

 

一、查找节点

1、查找元素节点

//弹出“香蕉”

<script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript">
   $(function(){
    var $li = $("ul li:eq(1)");
    var li_txt = $li.text();
    alert(li_txt);
   })
  </script>

 

2、查找属性节点

    var $p =$("p");
    var p_txt = $p.attr("title");
    var p_id =$p.attr("id");
    alert(p_id);

    alert(p_txt);

 

二、创建节点

1、创建元素节点

    var li1=$("<li>龙眼</li>");
    var li2=$("<li>香水</li>");

 

2、插入节点

    $("ul").append(li1);
    $("ul").append(li2);

 

效果如下：

JQ <wbr>节点操作 

用Firebug看到的效果：

JQ <wbr>节点操作

 

插入节点方法

 

 方法 描述 示例
 append() 向每个匹配元素内部追回内容

 html代码：<p>我想说：</p>

 JQ代码：$("p").append("<b>你好</b>");

结果：

<p>我想说：<b>你好</b></p>

 appendTo()

 将所有匹配元素追加到指定的元素中

 颠倒append()做法

 html代码：<p>我想说：</p>

 JQ代码：$("<b>你好</b>").appendTo("p");

结果：

<p>我想说：<b>你好</b></p>

 prepend()

 向每个匹配元素内部前置内容

 html代码：<p>我想说：</p>

 JQ代码：$("p").prepend("<b>你好</b>");

结果：

<p><b>你好</b>我想说：</p>

 prependTo()

 将所有匹配元素追加到指定的元素中

 颠倒prepend()方法

 html代码：<p>我想说：</p>

 JQ代码：$("<b>你好</b>").prependTo("p");

结果：

<p><b>你好</b>我想说：</p>

 after() 在每个匹配元素之后插入内容 html代码：<p>我想说：</p>

 JQ代码：$("p").after("<b>你好</b>");

结果：

<p>我想说：</p><b>你好</b>

 insertAfter()

 将所有匹配元素追加到指定的元素的后面

 颠倒after()方法

 html代码：<p>我想说：</p>

 JQ代码：$("<b>你好</b>").insertAfter("p");

结果：

<p>我想说：</p><b>你好</b>

 before() 在每个匹配元素之前插入内容 html代码：<p>我想说：</p>

 JQ代码：$("p").before("<b>你好</b>");

结果：

<b>你好</b><p>我想说：</p>

 insertBefore() 将所有匹配元素追加到指定的元素的前面  html代码：<p>我想说：</p>

 JQ代码：$("<b>你好</b>").insertBefore("p");

结果：

<b>你好</b><p>我想说：</p>

 

 3、删除节点

remove() 和 empty()

 

$("ul li:eq(1)").remove();

效果如下：

JQ <wbr>节点操作


扩展：$("ul li").remove("li[title!=苹果]");

 

$("ul li:eq(1)").empty();

效果如下：

JQ <wbr>节点操作

JQ <wbr>节点操作

remove() 和 empty()对比： remove()是删除匹配元素 , empty()只是清空内容，并没有删除节点。

 

4、复制节点

    $("ul li").click(function(){
     $(this).clone().appendTo("ul");
    });

效果：

JQ <wbr>节点操作

 

5、替换节点

$("p").replaceWith("<strong>你最讨厌的水果是？</strong>");

效果：

JQ <wbr>节点操作

 

6、包裹节点

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

把p元素包裹在div元素中。

效果：

JQ <wbr>节点操作

 

同样是：$("p").wrap("<div></div>");

效果如下：

JQ <wbr>节点操作

JQ <wbr>节点操作

 

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

效果如下：

JQ <wbr>节点操作

 

wrapInner()

原html:<p title="水果" id="pp">你喜欢的水果是？</p>

添加方法：$("p").wrapInner("<b>dddddddd</b>");

结果：

JQ <wbr>节点操作

JQ <wbr>节点操作

7、属性操作

1、获取属性和设置属性

<p title="这是p标签">p</p>

var $p = $("p");

var p_txt = $p.attr("title");

 

设置属性:

$("p").attr("title","my Title");

$("p").attr({"title":"my Titl","name":"my Test"});

 

删除属性：

removeAttr();

$("p").removeAttr("title");

 

 

9、样式操作

原Html：<p class="myClass" title="选择你最爱的水果">你最爱的水果是?</p>

 

通过attr()来添加class

var p_class = $("p").attr("class");

设置class

$("p").attr("class","height")

结果：<p class="height">test</p>

 

追加样式：addClass()

$("p").addClass("autoColor");

结果：<p class="height autoColor">test</p>

 

attr()只是设置样式，只有一种样式；而addClass()则是追加样式，可有多种样式交集。

 

移除样式：

$("p").removeClass("autoColor");

切换样式:

$toggleBtn.toggle(function(){

//显示元素

},function(){

//隐藏元素

});

判断是否含有某个样式：hasClass()

$("p").hasClass("autoColor");

另一方式：$("p").is(".autoColor");

牧羊人之月
关注
JQuery 选择器、DOM节点操作练习实例
10-19
下面小编就为大家带来一篇JQuery 选择器、DOM节点操作练习实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JQ 删除节点
08-13
然而，删除节点操作应当谨慎进行，因为这会直接影响到DOM结构，可能引发未预期的副作用，如影响其他元素的位置或者导致事件监听失效。 总结来说，JQ删除节点涉及的关键知识点包括： - jQuery库的DOM操作功能 - `...
JQ 节点操作
boonyaxnn的博客
04-23 251
一、内部插入：给当前节点添加孩子 A.append(B) 向【A节点内部现有内容之后】追加【B节点】 B.appendTo(A) 将【B节点】追加到【A节点内部现有内容之后】 A.prepend(B) 向【A节点内部现有内容之前】追加【B节点】 B.prependTo(A) 将【B节点】追加到【A节点内部的现有内容...
JQuery对节点的操作
SanPhantom的博客
08-22 756
JQuery对节点的操作 1、创建和添加节点 首先，我们需要创建一个节点，而在jquery中创建一节点是非常迅速的，直接通过$符号。 let $a = $("&lt;a href='http://www.baidu.com/' target='_blank;'&gt;百度一下&lt;/a&gt;"); 就像这样，我们已经创建了一个a标签，但是，我们单单只是创建一个a标签，并没什么用...
jq 节点操作
哈哈绝的博客
11-20 269
jq 节点操作、获取节点、添加节点
jQuery DOM节点操作
weixin_30484247的博客
07-06 161
一、创建节点 var box = $('<div id =box>节点</div>'); //创建一个节点 $('body').appended(box);　　　　　　//将节点插入<body>元素内部 二、插入节点 内部插入节点方法 append(content)　　　　　　　 　向指定元素后面插入节点content append(f...
JQ 创建节点
08-13
在JavaScript的世界里，jQuery（简称JQ）是一个广泛使用的库，极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本篇文章将深入探讨“JQ创建节点”的知识点，这在构建动态网页时非常关键。 首先，理解DOM...
JQ 包裹节点
08-13
例如，当需要对一组元素统一管理，如实现统一的点击事件或动画效果时，可以先用`wrap()`将它们包裹在同一元素下，然后对该容器进行操作。 通过阅读博客文章《JQ 包裹节点》（链接：...
JQ 插入节点和移动节点
08-13
在给定的博客文章中，作者可能详细讲解了这些方法的用法、示例和最佳实践，帮助读者更好地理解和运用JQ的节点操作功能。通过阅读和实践，开发者能够更加熟练地对网页内容进行动态更新和布局调整，提高网站的交互性和...
JQ 查找节点
08-13
"JQ查找节点"这个主题涵盖了如何在jQuery中找到并操作HTML文档中的元素，这对于网页开发至关重要。下面将详细阐述jQuery中用于查找节点的相关知识点。 1. **选择器（Selectors）**： jQuery的选择器是基于CSS选择...
jq操作节点
li3196672779的博客
06-28 472
Document #box{ width: 300px; height: 100px; border: 1px solid red; } $(document).ready(function(){ $('ul li').click(function(){ alert($(this).text()); }) $('#bt
[jQuery基础] jQuery节点操作
DeathDomain的博客
06-18 332
复制节点 如果传入false就是浅复制, 如果传入true就是深复制 浅复制只会复制元素, 不会复制元素的事件 深复制会复制元素, 而且还会复制元素的事件 浅复制 $("button").eq(0).click(function () { // 1.浅复制一个元素 var $li = $("li:first").clone(false) // 2.将复制的元素添加到ul中 $("ul").append($li) }) 深复制 $("button").eq(1).cl
jQuery节点操作
weixin_67642008的博客
07-12 1539
jQuery插入节点&删除节点&复制节点&替换节点&节点遍历
jq节点操作
weixin_30709929的博客
11-03 79
//1.创建节点 var aDiv = $('<div></div>'); aDiv.html('你爸'); aDiv.css('background','red'); //2.插入节点 //2.1 把aDiv拼接到.footer //$('.footer').append(aDiv); //aDiv.appendTo($('.foote...
JQ节点操作
weixin_43453916的博客
12-07 685
Title 这是我们mainDiv 内部插入节点 这个是P标签 这个是P标签 添加节点 移动节点节点 插入到儿子节点第一个 插入到儿子节点第一个 插入到节点后面 插入到节点后面2 插入到节点前面 插入到节点前面2 包裹节点 移出包裹节点 复制节点 删除节点 删除节点BABA 替换节点 ...
jQuery学习笔记--jQuery的DOM操作
weixin_33829657的博客
12-03 109
一.节点的操作 1.查找节点： var $var_1=$("htmltype"); //这句话就是获取所有htmltype节点 如：var $ul_1=$("ul"); 2.创建并追加节点： var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1); //这句话是把节点插入所有ht...
jq -- 节点操作
bylifan的博客
09-15 191
创建节点: // 创建节点1: $("标签") :类比于js中的document.createElement("li"); console.log($("<li class='aaa'>我是li标签</li>")); // 创建节点2: $("ul").html(""); :类比inner...
jQuery jQuery元素节点操作
guoqingru0311的博客
09-07 442
jQuery元素节点操作1、 创建节点：2、append与appendTo（父元素内的后面放入子元素）3、prepend()和prependTo()：在现存元素的内部，从前面插入元素4、after()和insertAfter()：在现存元素的外部，从后面插入元素5、before()和insertBefore()：在现存元素的外部，从前面插入元素6、对已有的节点进行操作7、实现Todolist功能 1、 创建节点： 代码如下所示： <!DOCTYPE html> <html lang="
jq实现节点拖拽进九宫格
最新发布
09-23
在前端开发中，可以使用JavaScript库jQuery（简称jq）配合一些交互插件来实现节点的拖拽功能，并将其放置到预设的九宫格布局中。以下是基本步骤： 1. **引入jQuery** 和适合拖拽的插件，如`jquery-ui draggable` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值