Jquery<3>操作DOM

来源：互联网发布：淘宝宝贝怎么算新品编辑：程序博客网时间：2024/06/05 19:08

Jquery 操作 DOM 节点

1，查找节点
2，创建节点 append()
3，删除节点 remove()

Jquery 操作 DOM 节点属性

1，查找属性
2，设置属性
3，删除属性

Jquery 操作 DOM 节点样式

1，获取样式
2，设置样式
3，追加样式
4，移除样式

设置和获取 HTML ，文本和值

1，获取 html，设置 html
2，获取文本，设置文本text
3，获取值，设置值val

遍历节点操作

1，获取所有子节点 children()
2，获取邻近的下一个兄弟节点 next()
3，获取邻近的上一个兄弟节点 prev()

Jquery 操作 DOM 节点 CSS

1，获取 DOM 节点 CSS 样式
2，设置 DOM 节点 CSS 样式

demo01.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="../js/jquery-1.11.0.js"></script><script type="text/javascript">$(document).ready(function() {//操作DOM节点//查找节点/* var li2=$("ul li:eq(1)");var li2_txt=li2.text();alert(li2_txt); *///创建节点/* var li1=$("<li title='这是马化腾'>马化腾</li>");var li2=$("<li title='这是李彦宏'>李彦宏</li>");var li22=$("ul li:eq(1)");$("ul").append(li1);li2.insertAfter(li22) *///删除节点//$("ul li:eq(1)").remove();//操作DOM属性//获取属性/* var li2=$("ul li:eq(1)");var li2_attr=li2.attr("title");alert(li2_attr); *///设置属性//$("ul li:eq(1)").attr("title","你懂得");//删除属性//$("ul li:eq(1)").removeAttr("title");//操作DOM节点样式//获取样式/*  var li2=$("ul li:eq(1)");var li2_class=li2.attr("class");alert(li2_class); *///设置样式//$("ul li:eq(1)").attr("class","lc2");//追加样式//$("ul li:eq(1)").addClass("lc3");//移除样式//$("ul li:eq(1)").removeClass("lc");//设置和获取HTML,文本和值//获取HTML/* var l1_html=$("ul li:eq(0)").html();alert(l1_html); *///设置HTML//$("ul li:eq(0)").html("<font color=red>变了吧</font>");//获取文本/* var l1_text=$("ul li:eq(0)").text();alert(l1_text); *///设置文本//$("ul li:eq(0)").text("嘿嘿");//遍历节点//children()/* var b=$("body").children();alert(b.length);var u=$("ul").children();alert(u.length);for(i=0;i<u.length;i++){//alert(u[i].innerHTML);不使用Jquery是原生的DOM节点没有封装所以不能使用u[i].html();alert($(u[i]).html());} *///获取下一个next()/* var l=$("ul li:eq(1)").next();alert(l.text()); *///获取上一个prev()/* var l=$("ul li:eq(1)").prev();alert(l.text()); *///CSS DOM操作//获取css样式/* var c=$("#jq").css("color");alert(c); *///设置css样式$("#jq").css("color", "blue");});function getUserName() {var userName = $("#userName").val();alert(userName);}function setUserName() {$("#userName").val("被我设置成CCC");}</script><style type="text/css">.lc {background-color: red;}.lc2 {background-color: blue;}.lc3 {font-weight: bold;}</style></head><body><p>你最喜欢的名人是？</p><ul><li title="这是乔布斯"><font color="green">乔布斯</font></li><li title="这是比尔盖茨" class="lc">比尔盖茨</li><li title="这是詹姆斯高斯林">詹姆斯高斯林</li></ul><input type="text" id="userName" /><input type="button" value="获取数据" onclick="getUserName()" /><input type="button" value="设置数据" onclick="setUserName()" /><p style="color: red" id="jq">Jquery很厉害</p></body></html>

0 0