jQuery DOM操作
对节点的操作
查找节点
查找节点可以直接利用jQuery选择器来完成,非常便利。
插入节点
jQuery提供了8种插入节点的方法。
序号 | 方法 | 描述 | 实例 |
1 | append() | 向每个匹配的元素内部追加内容。 | HTML Code: <p>我想说:</p> jQuery Code: $("p").append("<b>你好</b>"); result: <p>我想说:"<b>你好</b></p> |
2 | appendTo() | 将所有匹配的元素追加到指定的元素中。 | HTML Code: <p>我想说:</p> jQuery Code: $("<b>你好</b>").appendTo("p"); result: <p>我想说:"<b>你好</b></p> |
3 | prepend() | 向每个匹配的元素内部前置内容。 | HTML Code: <p>我想说:</p> jQuery Code: $("p").prepend("<b>你好</b>"); result: <p><b>你好</b>我想说:</p> |
4 | prependTo() | 将所有匹配的元素前置到指定的元素中。 | HTML Code: <p>我想说:</p> jQuery Code: $("<b>你好</b>").prependTo("p"); result: <p><b>你好</b>我想说:</p> |
5 | after() | 在每个匹配的元素之后插入内容。 | HTML Code: <p>我想说:</p> jQuery Code: $("p").after("<b>你好</b>"); result: <p>我想说:</p><b>你好</b> |
6 | insertAfter() | 将所有匹配的元素插入到指定元素前面。 | HTML Code: <p>我想说:</p> jQuery Code: $("<b>你好</b>").insertAfter("p"); result: <p>我想说:</p><b>你好</b> |
7 | before() | 在每个匹配的元素之前插入内容。 | HTML Code: <p>我想说:</p> jQuery Code: $("p").before("<b>你好</b>"); result: <b>你好</b><p>我想说:</p> |
8 | insertBefore() | 将所有匹配的元素插入到指定元素前面。 | HTML Code: <p>我想说:</p> jQuery Code: $("<b>你好</b>").insertBefore("p"); result: <b>你好</b><p>我想说:</p> |
删除节点
jQuery提供了三种删除节点的方法,即remove()、detach()、empty()。
(1)remove()
删除DOM中所有匹配的元素,可以传入参数来筛选要删除的元素。
var $li = $("ul li:eq(1)").remove(); // 获取第2个<li>元素节点后,将它删除 $li.appendTo("ul"); // 将刚才删除的节点重新添加到<ul>元素中 $("ul li").remove("li[title!=菠萝]"); //将<li>元素中title属性不等于“菠萝”的<li>元素删除
(2)detach()
detach()也是从DOM中去掉所有匹配的元素。
需要注意的是,这个方法不会将匹配的元素从jQuery对象中删除,其所有绑定的事件和附加数据可以保留下来。
如果将来再使用这个元素,相关事件和数据依然存在。
var $li = $("ul li:eq(1)").detach(); // 获取第2个<li>元素节点后,将它删除 $li.appendTo("ul"); // 重新追加此元素,发现它之前绑定的事件还在。 // 如果使用remove()方法删除元素,那么之前绑定的事件将会失效。
(3)empty()
清空元素中的所有后代节点。
$("ul").empty();
复制节点
可以使用clone()方法来复制节点。如果在clone方法中传人参数true,表示复制元素的同时也复制元素中绑定的事件。
$(this).clone(true).appendTo("body");
替换节点
jQuery提供了replaceWith()和replaceAll()两种方法来替换节点。
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或DOM元素。
而replaceAll()和replaceWith()作用相同,只是颠倒了操作。
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); ("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
包裹节点
有时候需要把某个节点用其他标签包裹起来,jQuery有三种方法:wrap()、wrapAll()、wrapInner()。
HTML Code:
<strong title="你好">你好</strong> <strong title="你好">你好</strong>
jQuery Code:
$("strong").wrap("<b></b>"); //用<b>标签把<strong>元素包裹起来 /* 结果是: <b><strong title="你好">你好</strong></b> <b><strong title="你好">你好</strong></b> */ // wrapAll $("strong").wrapAll("<b></b>"); //用<b>标签把<strong>元素包裹起来 /* 结果是: <b> <strong title="你好">你好</strong> <strong title="你好">你好</strong> </b> */ // wrapInner $("strong").wrapInner("<b></b>"); //用<b>标签把<strong>元素包裹起来 /* 结果是: <strong title="你好"><b>你好</b></strong> */
以上操作的范例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <!-- 引入jQuery --> <script src="../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("#findNode").click(function(){ var content = $("#content").val(); if ("" === $("#content").val()) { alert("请输入内容"); return; } var $ul = $("ul").children(); for (var i = 0; i < $ul.length; i++) { var value = $ul[i].innerHTML; if (value === content) { alert("是ul中第" + (i+1) + "个元素"); return; } } alert("不存在"); $("#content").val(""); }); $("#insertNode").click(function(){ var content = $("#content").val(); if ("" === content) { alert("请输入内容"); return; } var $li = $("<li>" + content + "</li>"); var $parent = $("ul"); $parent.append($li); // $parent.prepend($li); $("#content").val(""); }); $("#removeNode").click(function(){ var content = $("#content").val(); if ("" === content) { alert("请输入内容"); return; } var $ul = $("ul").children(); for (var i = 0; i < $ul.length; i++) { var value = $ul[i].innerHTML; if (value === content) { //三种删除方式 $("ul li:eq(" + i + ")").remove(); //$("ul li:eq(" + i + ")").detach(); //$("ul li:eq(" + i + ")").empty(); $("#content").val(""); return; } } alert("不存在"); $("#content").val(""); }); $("#copyNode").click(function(){ var content = $("#content").val(); if ("" === content) { alert("请输入内容"); return; } var $ul = $("ul").children(); for (var i = 0; i < $ul.length; i++) { var value = $ul[i].innerHTML; if (value === content) { //三种删除方式 $("ul li:eq(" + i + ")").clone(true).appendTo("ul"); $("#content").val(""); return; } } alert("不存在"); $("#content").val(""); }); $("#replaceNode").click(function(){ var content = $("#content").val(); if ("" === content) { alert("请输入内容"); return; } var $new_li = $("<li>" + content + "</li>"); $new_li.replaceAll("li"); //$("li").replaceWith($new_li); $("#content").val(""); }); }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> <div> <label for="content" style="font: bold;">请先输入内容,再点击想操作的按钮</label> <input type='text' id='content' /> <p></p> <input type="button" value="查找节点" id="findNode"/> <input type="button" value="插入节点" id="insertNode"/> <input type="button" value="删除节点" id="removeNode"/> <input type="button" value="复制节点" id="copyNode"/> <input type="button" value="替换节点" id="replaceNode"/> </div> </body> </html>
属性操作
在jQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性。
$("p").removeAttr("title"); //删除p节点的title属性值
$("p").attr("title", "New Content"); //设置p节点的title属性值为New Content
$("p").attr({"title" : "New Content", "name" : "New Name",}); // 一次性设置p节点的多个属性值
样式操作
方法 | 描述 | 实例 |
attr | 获取样式和设置样式 | $("p").attr("class"); // 获取p元素的class $("p").attr("class","high"); // 设置p元素的class为high |
addClass | 追加样式 | $("p").addClass("another"); //给p元素追加“another”类 |
removeClass | 移除样式 | $("p").removeClass(); //移除p元素的所有class |
toggleClass | 切换样式 | $("p").toggleClass("another"); //重置切换类名"another" |
hasClass | 判断是否有某个样式 | $("p").hasClass("another"); //判断p元素是否有"another"类 |
范例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-9-1</title> <style type="text/css"> .high{ font-weight:bold; /* 粗体字 */ color : red; /* 字体颜色设置红色*/ } .another{ font-style:italic; color:blue; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //获取样式 $("input:eq(0)").click(function(){ alert( $("p").attr("class") ); }); //设置样式 $("input:eq(1)").click(function(){ $("p").attr("class","high"); }); //追加样式 $("input:eq(2)").click(function(){ $("p").addClass("another"); }); //删除全部样式 $("input:eq(3)").click(function(){ $("p").removeClass(); }); //删除指定样式 $("input:eq(4)").click(function(){ $("p").removeClass("high"); }); //重复切换样式 $("input:eq(5)").click(function(){ $("p").toggleClass("another"); }); //判断元素是否含有某样式 $("input:eq(6)").click(function(){ alert( $("p").hasClass("another") ) alert( $("p").is(".another") ) }); }); //]]> </script> </head> <body> <input type="button" value="输出class类"/> <input type="button" value="设置class类"/> <input type="button" value="追加class类"/> <input type="button" value="删除全部class类"/> <input type="button" value="删除指定class类"/> <input type="button" value="重复切换class类"/> <input type="button" value="判断元素是否含有某个class类"/> <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html>
设置和获取HTML、文本和值
方法 | 描述 | 实例 |
html() | 获取和设置某个元素中的HTML内容 | var p_html = $("p").html(); //获取p元素的HTML代码 $("p").html("<strong>Hello</strong>"); //设置p元素的HTML代码 |
text() | 获取和设置某个元素中的文本内容 | var p_txt = $("p").text(); //获取p元素的文本内容 $("p").text("Hello"); //设置p元素的文本内容 |
val() | 获取和设置某个元素中的值 | var txt_value = $(this).val(); //获取this元素的值 $(this).text("Hello"); //设置this元素的值为Hello |
jQuery DOM操作的更多相关文章
- jQuery DOM操作之结点转移复制
jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...
- JQuery DOM操作(属性操作/样式操作/文档过滤)
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- Jquery DOM 操作列表
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
- 事件冒泡及事件委托的理解(JQuery Dom操作)
jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
- jquery DOM操作(一)
上一篇文章是记录了jquery中选择器的作用,这里只要记录下jquery中的DOM操作,还是按照上篇的格式来. 下面是测试用的html代码,接下来DOM的操作会在下面的代码下进行. <body& ...
- JQuery -- Dom操作, 示例代码
1.内部插入节点 * append(content) :向每个匹配的元素的内部的结尾处追加内容 * appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 * ...
- JQuery dom 操作总结
DOM 操作之获取值 获得内容 - text():设置或返回所选元素的文本内容 $("#btn1").click(function(){ alert("Text: &qu ...
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
随机推荐
- HTTP笔记整理(1)
今天开始学习http协议,把自己从网上整理,自己理解的部分先发出来,共勉! (PS笔者小白一枚,如有理解性的错误,请指正告知,为感!!!) 一. HTTP协议概念 所谓的“协议”是指,计算机在通信网 ...
- 解决PHP move_uploaded_file函数移动图片失败
出现的问题描述:今天在实现一个在用户注册时上传头像图片文件的PHP脚本时,出现了问题:PHP脚本在前面已经确定 浏览器端上传文件没有错误.上传的文件是合法的.上传的文件是图像文件.已经在服务器端生成了 ...
- 微软Connect教程系列—VS2015集成新潮工具(四)
本课程来源与微软connect视频教程,Modern Web Tooling in Visual Studio 2015 本课程主要讲下当下流行的前端工具 bower和grunt 首先简单介绍下这俩货 ...
- IM系统中聊天记录模块的设计与实现
看到很多开发IM系统的朋友都想实现聊天记录存储和查询这一不可或缺的功能,这里我就把自己前段时间为傲瑞通(OrayTalk)开发聊天记录模块的经验分享出来,供需要的朋友参考下. 一.总体设计 1.存储位 ...
- 可在广域网部署运行的QQ高仿版 -- GG叽叽V2.4,增加远程协助、桌面共享功能(源码)
QQ的远程协助.或者说桌面共享是一个非常实用的功能,所以,2.4版本的GG复制了它,而且,GG增强了桌面共享的功能,它可以允许指定要共享桌面的区域,这样,对方就只能看到指定区域的桌面,这对节省流量会非 ...
- ThoughtWorks持续集成平台GO开源了
ThoughtWorks 持续集成平台Go最近宣布开源了.其基于Apache 2.0 开源协议. Go下载地址为http://www.go.cd/download/. 下面是几张来自官方的视图: GO ...
- Java实现敏感词过滤
敏感词.文字过滤是一个网站必不可少的功能,如何设计一个好的.高效的过滤算法是非常有必要的.前段时间我一个朋友(马上毕业,接触编程不久)要我帮他看一个文字过滤的东西,它说检索效率非常慢.我把它程序拿过来 ...
- 使用Location对象查询字符串参数
location是BOM中最有用的对象之一: 1.它提供了与当前窗口中加载的文档有关的信息: 2.他还提供了一些导航功能. location对象的属性有: hash, host, hostname, ...
- 诡异的 未处理的IOErrorEvent 2035
今天游戏发布上线之后,总是随机的出现卡死. 换了个safari之后,看到抛了 IOErrorEvent. 问题是,我所有的Loader都加入了contentLoaderInfo监听.而抛出来的又没有堆 ...
- 在 Win10 命令行使用 Consolas + 微软雅黑
这个过程挺神奇的,步骤参考了下面两篇文章,但是过程很曲折: 1. 使用Monaco和微软雅黑字体美化cmd和PowerShell 2. [zz]Windows的cmd.exe使用consolas加中文 ...