html 内容！
<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 id="jq" style="color: red">Jquery掉渣天</p></body>
1. Jquery 操作 DOM 节点
- 查找节点
- 创建节点 append()
- 删除节点 remove()
<script type="text/javascript"> ???$(document).ready(function(){ ???????// 1，查找节点 ???????var li2=$("ul li:eq(1)"); // 获取节点 "1"代表第二个元素 ???????var li2_txt=li2.text(); ??// 获取文本 比尔盖茨 ???????alert(li2_txt); ????????????????// 2，创建节点 append() ???????var li1=$("<li title=‘这是马化腾‘>马化腾</li>"); ???????var li2=$("<li title=‘这是李彦宏‘>李彦宏</li>"); ???????var li22=$("ul li:eq(1)"); ???????$("ul").append(li1); ???//自动添加到最末尾 ???????li2.insertAfter(li22); ?//在指定的节点后面添加，添加在"比尔盖茨"之后 ???????????????// 3，删除节点 remove() ???????$("ul li:eq(1)").remove(); ???????????});</script>
2. Jquery 操作 DOM 节点属性
- 查找属性
- 设置属性
- 删除属性
<script type="text/javascript"> ???$(document).ready(function(){ ???????// 获取属性 ???????var li2=$("ul li:eq(1)"); ???????var li2_attr=li2.attr("title"); //attr 查找 title 属性的值 ???????alert(li2_attr); ????????????????// 设置属性 ???????$("ul li:eq(1)").attr("title","哈哈哈"); //attr 修改 title 属性的值 ???????????????// 删除属性 ???????$("ul li:eq(1)").removeAttr("title"); //removeAttr 删除 title 属性</script>
3. Jquery 操作 DOM 节点样式
- 获取样式
- 设置样式
- 追加样式
- 移除样式
<script type="text/javascript"> ???$(document).ready(function(){ ???????// 获取样式 ???????var li2=$("ul li:eq(1)"); ???????var li2_class=li2.attr("class"); //class样式为 lc ???????alert(li2_class); ????????????????// 设置样式 ???????$("ul li:eq(1)").attr("class","lc2"); ???????????????// 追加样式 ???????$("ul li:eq(1)").addClass("lc3"); ???????????????// 移除样式 ???????$("ul li:eq(1)").removeClass("lc");</script>
4. 设置和获取 HTML，文本和值
- 获取 html，设置 html
- 获取文本，设置文本
- 获取值，设置值
<script type="text/javascript"> ???$(document).ready(function(){ ???????// 获取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("呵呵"); ???}); ???????//获取值 ???function getUserName(){ ???????var userName=$("#userName").val(); ???????alert(userName); ???} ???????//设置值 ???function setUserName(){ ???????$("#userName").val("Cocoomg"); ???}</script>
5. 遍历节点操作
- 获取所有子节点 children()
- 获取邻近的下一个兄弟节点 next()
- 获取邻近的上一个兄弟节点 prev()
<script type="text/javascript"> ???$(document).ready(function(){ ???????????????//获取所有子节点children() ???????var b=$("body").children(); ???????alert(b.length); ???????var u=$("ul").children(); ???????alert(u.length); ???????for(var i=0;i<u.length;i++){ ???????????// alert((u[i]).html()); ?//不可以，(u[i])取出的是原生（未由jQuery包装过）的DOM节点，没有这些功能 ???????????// alert($(u[i]).html()); //可以，用$ 包装 ???????????alert(u[i].innerHTML); ???//可以 ???????} ????????????????//获取邻近的下一个兄弟节点next() ???????var l=$("ul li:eq(1)").next(); ???????alert(l.html()); ????????????????//获取邻近的上一个兄弟节点prev() ???????var l=$("ul li:eq(1)").prev(); ???????alert(l.html()); ????});</script>
6. Jquery 操作 DOM 节点 CSS
- 获取 DOM 节点 CSS 样式
- 设置 DOM 节点 CSS 样式
<script type="text/javascript"> ???$(document).ready(function(){ ???????// 获取css样式 ???????var c=$("#jq").css("color"); ???????alert(c); ????????????????// 设置css样式 ???????$("#jq").css("color","blue"); ???});</script>
jQuery 操作DOM节点
原文地址：https://www.cnblogs.com/Cocoomg/p/9901159.html