标签：jQuery DOM 元素 示例 selector content html 操作 节点
DOM操作分为哪些类型
1.jQuery中的DOM操作
jQuery对JavaScript中的DOM操作进行了封装
2. 样式操作 ①使用css()为指定的元素设置样式值或获取样式值 语法：
css(name,value) ; //设置单个属性
css({name:value, name:value,name:value…}) ; //同时设置多个属性
示例：
$(this).css("border","5px solid #f5f5f5");
或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"}); //opacity：设置透明度
②追加样式
语法：
$(selector).addClass(class);
$(selector).addClass(class1 class2 … classN);
示例：
$("h2").mouseover(function() {
$("p").addClass("content border");
});
③移除样式
语法：
$(selector).removeClass("class") ;
$(selector).removeClass("class1 class2 … classN ") ;
示例：
$("h2").mouseout(function() {
$("p").removeClass("text content"); });
④切换样式
toggleClass()：模拟了addClass()与removeClass()实现样式切换的过程
语法：
$(selector).toggleClass(class) ;
示例：
$("h2").click(function() {
$("p").toggleClass("content border");
});
⑤判断是否含指定的样式
hasClass( )方法来判断是否包含指定的样式
语法：
$(selector). hasClass(class);
示例：
$("h2").mouseover(function() {
if(!$("p").hasClass("content ")){
$("p").addClass("content "); }
});
//鼠标移入，判断p元素是否含有content，不含有就添加content
$("h2").mouseout(function() {
if($("p").hasClass("content ")) {
$("p").removeClass("content "); }
});
//鼠标移出，判断p元素是否含有content，含有就移除content
3.HTML代码操作
html()可以对HTML代码进行操作，类似于JS中的innerHTML
语法：$("div.left").html(); //获取元素中的html代码
$("div.left").html("<div class='content'>…</div>"); //设置元素中的html代码
示例：
$("div.left").html("");//清空需要添加引号，如果html方法括号中不添加任何内容，是获取html代码
4标签内容操作
text()可以获取或设置元素的文本内容 语法：$("div.left").text(); //获取元素中的文本内容
$("div.left").text("<div class='content'>…</div>"); //设置元素中的文本内容
示例：
$("div.left"). text ("");
//清空需要添加引号，如果text方法括号中不添加任何内容，是获取文本内容
html( ) 和text( )方法的区别：
|
语法格式 |
参数说明 |
功能描述 |
|
html( ) |
无参数 |
用于获取第一个匹配元素的HTML内容或文本内容 |
|
html(content) |
content为元素的HTML内容 |
用于设置所有匹配元素的HTML内容或文本内容 |
|
text( ) |
无参数 |
用于获取所有匹配元素的文本内容 |
|
text (content) |
content为元素的文本内容 |
用于设置所有匹配元素的文本内容 |
1.查找节点 使用选择器来查找节点 2创建节点元素 工厂函数$()用于获取或创建节点： $(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点
例如：
var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");
3.删除节点
remove()：删除整个节点
$(selector).remove([expr]);
empty()：清空节点内容
$(selector).empty();detach()：删除整个节点，保留元素的绑定事件、附加的数据节点属性操作
$(selector).detach();
4.替换节点
replaceWith()和replaceAll()用于替换某个节点
示例：
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");
replaceWith( )和replaceAll( )两者的关系类似于append( )和appendTo( )
补充：append( )和appendTo( )的区别
1. append(content)方法
方法作用：向每个匹配的元素内部追加内容。
参数介绍：content (<Content>): 要追加到目标中的内容。
用法示例：
HTML代码为<p>I come from </p><p>I love </p>
向所有p标签中追加一个单词china，则写法为 $("p").append("china");
结果为：<p>I come from china</p><p>I love china </p>
2. appendTo(expr)方法
方法作用：把所有匹配的元素追加到指定的元素元素集合中。
参数介绍：expr (String): 用于匹配元素的jQuery表达式。
用法示例：
HTML代码为<b>I love china </b><p></p>
把标签b追加到p元素中，写法为$("b").appendTo("p");
结果为：><p><b>I love china </b></p>
使用appendTo这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
prepend和prependTo的区别
1.$(目标元素).prepend(content) 在。。。。首端的内部插入内容
html: <p>这是目标元素</p>
jquery: $("p").prepend("这是prepend插入的内容，")
那么执行后的结果就是：
html： <p>这是prepend插入的内容，这是目标元素</p>
2.$(content).prependTo(目标元素) 把内容插入到。。。内部的首端
jquery: $("这是prependTo插入的内容，").appendTo("p")
那么执行后的结果就是：
html： <p>这是prependTo插入的内容，这是目标元素</p>
5.复制节点
clone()用于复制某个节点
语法：
$(selector).clone([includeEvents]) ;
includeEvents：参数ture或flase, true复制事件处理，flase时只能复制节点不能复制事件处理
示例：
$(".gameList li:eq(1)").click(function(){
$(this).clone(true).appendTo(".gameList");
})
$(".gameList li:eq(2)").click(function(){
$(this).clone(false).appendTo(".gameList");
})
7.属性操作
获取与设置元素属性 attr()用来获取与设置元素属性 语法：$(selector).attr([name]) ;
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;
示例：
$(".contain img").attr({width:"200",height:"80"});
删除元素属性
removeAttr()用来删除元素的属性 语法：$(selector).removeAttr(name) ;
示例：
$(".contain img").removeAttr("alt");
标签：jQuery,DOM,元素,示例,selector,content,html,操作,节点 来源： https://www.cnblogs.com/duan-YF/p/13220512.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。