jQuery第二天， jQuery操作DOM小结（初级）

来源：互联网发布：手机检测软件编辑：程序博客网时间：2024/06/06 03:03

jQuery中的DOM操作
基础操作

1.html():类似于原生DOM的innerTHML属性,读取或修改节点的HTML内容。

//获取<p>元素的html代码$("p").html()//设置<p>元素的html代码$("p").html("<strong>你喜欢的水果是?</strong>");

2.val():类似于原生dom的value属性,读取或修改节点的value属性值。

//获取按钮的value值$("input:eq(5)").val();//设置按钮的value值$("input:eq(6)").val("我被点击了");

3.text():类似于原生DOM的textContent属性,读取或修改节点的文本内容。

//获取<p>元素的文本$("p").text();//设置<p>元素的文本$("p").text("你最喜欢换的水果是？");

4.attr():读取或者修改节点的属性
removeAttr():删除节点的属性

//获取id="bj"的标签var $bj=$("#bj");//获取北京节点的name属性值，attr(attrName) - 类似于getAttribute()$bj.attr("name");//删除北京节点的name属性值，类似于removeAttribute()$bj.removeAttr("name");//设置背景节点的name属性值，attr(attrName,attrValue) - 类似于setAttribute()$bj.attr("name","beijing");

样式操作 - css
1.attr("class",classValue)
2.addClass() - 追加样式
3.removeClass() - 删除样式
4.toggleClass() - 切换样式
5.hasClass() - 判断样式
6.css() - 操作样式
设置
css(name,value)
css(options)
options - 选项
{
name : value,
name : value,
...
}
获取 - css(name)

例子：

<!DOCTYPE html><html> <head>  <title>jQuery中的DOM操作-样式操作</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script>  <style>div {width : 100px;height : 100px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}.one {width : 50px;height : 50px;border : solid 1px black;background : yellow;float : left;margin-right : 10px;}.two {width : 150px;height : 150px;border : solid 1px black;background : green;float : left;margin-right : 10px;}  </style> </head> <body>  <button id="btn1">attr()</button>  <button id="btn2">addClass()</button>  <button id="btn3">removeClass()</button>  <button id="btn4">toggleClass()</button>  <button id="btn5">hasClass()</button>  <button id="btn6">css()</button>  <br></br>  <div id="d1"></div>  <div id="d2"></div>  <script>// attr("class",className) - 设置$("#btn1").click(function(){$("#d1").attr("class","one");});// addClass(className) - 追加|叠加$("#btn2").click(function(){$("#d1").addClass("two");});/* * removeClass() * * 不传参 - 删除所有样式 * * 传参 - 删除指定样式 */$("#btn3").click(function(){$("#d1").removeClass();});/* * toggleClass(className) * * 是在没有样式与指定样式之间切换 * * addClass()+removeClass() */$("#btn4").click(function(){$("#d1").toggleClass("one");});/* * hasClass(className) * * 判断指定元素是否含有指定样式 */$("#btn5").click(function(){console.log($("#d1").hasClass("one"));});// css()方法的设置功能$("#btn6").click(function(){// 链式操作//$("#d2").css("background","red").css("width","50").css("height","50");$("#d2").css({"background" : "red","width" : 50,"height" : 50});});  </script> </body></html>

遍历节点
parent() - 获取指定节点的父节点
children() - 获取指定节点的所有子节点
next() - 获取指定节点的下一个兄弟节点
prev() - 获取指定节点的上一个兄弟节点
siblings() - 获取指定节点的所有兄弟节点
find(expr) - 在指定节点中查找指定内容
注意 - 查找指定节点的后代节点
例子：

<!DOCTYPE html><html> <head>  <title>jQuery中的DOM-遍历节点</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script> </head> <body>  <ul id="city"><li id="bj" name="beijing">北京<ul><li>海淀区</li><li>朝阳区</li><li>大兴区</li></ul></li><li id="tj" name="tianjin">天津</li><li id="nj" name="nanjing">南京</li><li id="sh" name="shanghai">上海</li><li id="cq" name="chongqing">重庆</li>  </ul>  <script>// 1. 获取北京节点的父节点//console.log($("#bj").parent().attr("id"));// 2. 获取id为city节点的所有子节点的个数console.log($("#city").children().length);// 3. 获取南京节点的上一个兄弟节点和下一个兄弟节点//console.log($("#nj").prev().attr("name"));//console.log($("#nj").next().attr("name"));// 4. 获取南京节点的所有兄弟节点的个数//console.log($("#nj").siblings().length);//console.log($("#nj~li").length);// 5. 获取id为city节点下所有li元素的个数(后代节点)console.log($("#city").find("li").length);  </script> </body></html>

创建节点
元素节点 - $(HTML代码)
文本节点 - text()
属性节点 - attr()
jQuery - $(HTML代码)
例子：

<!DOCTYPE html><html> <head>  <title>jQuery中的DOM-创建节点</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script> </head> <body>  <ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="nj" name="nanjing">南京</li><li id="sh" name="shanghai">上海</li>  </ul>  <script>// 为id为city节点增加<li id="cq" name="chongqing">重庆</li>// 1. 创建<li id="cq" name="chongqing">重庆</li>// a. 创建<li></li>//var $li = $("<li></li>");// b. 设置属性//$li.attr("id","cq").attr("name","chongqing");// c. 创建文本节点// d. 添加文本节点//$li.text("重庆");//var $li = $("<li id='cq' name='chongqing'>重庆</li>");// 2. 获取id为city节点//var $city = $("#city");// 3. 添加append - appendChild//$city.append($li);$("#city").append($("<li id='cq' name='chongqing'>重庆</li>"));  </script> </body></html>

删除节点
* remove() - 删除自身及后代节点
* empty() - (清空)删除后代节点,但保留自身节点

例子：

<!DOCTYPE html><html> <head>  <title>jQuery中的DOM-删除节点</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script> </head> <body>  <ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津<ul><li>塘沽</li></ul></li><li id="nj" name="nanjing">南京</li><li id="sh" name="shanghai">上海</li>  </ul>  <script>// 1. 删除北京节点$("#bj").remove();// 2. 删除天津节点$("#tj").empty();  </script> </body></html>

* 插入节点
* 内部插入
* append
* prepend
* appendTo
* prependTo
* 外部插入
* before
* after
* insertBefore
* insertAfter
列子1：

<!DOCTYPE html><html> <head>  <title>jQuery中的DOM-外部插入</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script> </head> <body>  <ul id="city"><li>北京</li><li id="tj">天津</li><li>南京</li>  </ul>  <ul id="game"><li>反恐</li><li id="ms">魔兽</li><li>星际</li>  </ul>  <script>// 操作天津节点和魔兽节点// before - before后面的节点被添加到before前面的节点的前面//$("#tj").before($("#ms"));// after - after后面的节点被添加到after前面的节点的后面//$("#tj").after($("#ms"));// insertBefore//$("#tj").insertBefore($("#ms"));// insertAfter//$("#tj").insertAfter($("#ms"));  </script> </body></html>

例子2：

<!DOCTYPE html><html> <head>  <title>jQuery中的DOM-内部插入</title>  <meta charset="utf-8" />  <script src="jquery-1.11.3.js"></script> </head> <body>  <ul id="city"><li>北京</li><li id="tj">天津</li><li>南京</li>  </ul>  <ul id="game"><li>反恐</li><li id="ms">魔兽</li><li>星际</li>  </ul>  <script>// 操作天津节点和魔兽节点// append - append后面的节点被添加到append前面的节点的后面//$("#tj").append($("#ms"));// prepend - prepend后面的节点被添加到prepend前面的节点的前面$("#tj").prepend($("#ms"));// appendTo - appendTo前面的节点被添加到appendTo后面的节点的后面//$("#tj").appendTo($("#ms"));// prependTo - prependTo前面的节点被添加到prependTo后面的节点的前面//$("#tj").prependTo($("#ms"));  </script> </body></html>

例子3：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="jquery-1.11.3.js"></script><style type="text/css"><!--BODY{font-family:"Courier";font-size: 12px;margin:0px 0px 0px 0px;overflow-x:no;overflow-y:no;background-color: #B8D3F4;}td{font-size:12px;}.default_input{border:1px solid #666666;height:18px;font-size:12px;}.default_input2{border:1px solid #666666;height:18px;font-size:12px;}.nowrite_input{border:1px solid #849EB5;height:18px;font-size:12px;background-color:#EBEAE7;color: #9E9A9E;}.default_list{font-size:12px;  border:1px solid #849EB5;}.default_textarea{font-size:12px;border:1px solid #849EB5;}.nowrite_textarea{border:1px solid #849EB5;font-size:12px;background-color:#EBEAE7;color: #9E9A9E;}.wordtd5 {font-size: 12px;text-align: center;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #b8c4f4;}.wordtd {font-size: 12px;text-align: left;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #b8c4f4;}.wordtd_1 {font-size: 12px;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #516CD6;color:#fff;}.wordtd_2{font-size: 12px;text-align: right;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #64BDF9;}.wordtd_3{font-size: 12px;text-align: right;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #F1DD34;}.inputtd{font-size:12px;vertical-align:top;padding-top: 3px;padding-right: 3px;padding-bottom: 3px;padding-left: 3px;}.inputtd2{text-align: center;font-size:12px;vertical-align:top;padding-top: 3px;padding-right: 3px;padding-bottom: 3px;padding-left: 3px;}.tablebg{font-size:12px;}.tb{border-collapse: collapse;border: 1px outset #999999;background-color: #FFFFFF;}.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}.td4{background-color:#F6F6F6;line-height:20px;}.td5{border:#000000 solid;       border-right-width:0px;   border-left-width:0px;   border-top-width:0px;   border-bottom-width:1px;}.tb td{font-size: 12px;border: 2px groove #ffffff;}.noborder {border: none;}.button {border: 1px ridge #ffffff;line-height:18px;height: 20px;width: 45px;padding-top: 0px;background:#CBDAF7;color:#000000;font-size: 9pt;    font-family:"Courier";} .textarea {font-family: Arial, Helvetica, sans-serif, "??";font-size: 9pt;color: #000000;border-bottom-width: 1px;border-top-style: none;border-right-style: none;border-bottom-style: solid;border-left-style: none;border-bottom-color: #000000;background-color:transparent;text-align: left}--></style></head><body><div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;"><table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">  <tr>    <td width="126">    <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度--><select name="first" multiple="multiple" size=10 class="td3" id="first">  <option value="选项1">选项1</option>  <option value="选项2">选项2</option>  <option value="选项3">选项3</option>  <option value="选项4">选项4</option>  <option value="选项5">选项5</option>  <option value="选项6">选项6</option>  <option value="选项7">选项7</option>  <option value="选项8">选项8</option></select>    </td>    <td width="69" valign="middle">       <input name="add"  id="add" type="button" class="button" value="-->" />        <input name="add_all" id="add_all"  type="button" class="button" value="==>" />        <input name="remove"  id="remove" type="button" class="button" value="<--" />   <input name="remove_all"  id="remove_all" type="button" class="button" value="<==" />        </td>    <td width="127" align="left">  <select name="second" size="10" multiple="multiple" class="td3" id="second">         <option value="选项9">选项9</option>      </select></td>  </tr></table></div></body><script type="text/javascript">// 1. 选中左边选项,移到右边去$("#add").click(function(){$("#first>option:selected").appendTo($("#second"));});// 2. 将左边所有选项,移到右边去$("#add_all").click(function(){$("#first>option").appendTo($("#second"));});$("#remove").click(function(){$("#second>option:selected").appendTo($("#first"));});$("#remove_all").click(function(){$("#second>option").appendTo($("#first"));});// 双击事件 - 所有事件全部绑定在select标签$("#first").dblclick(function(){$("#first>option:selected").appendTo($("#second"));});</script></html>

0 0