三、（2）jQuery操作DOM
jQuery操作DOM
Dom操作分类
DOM是Document Object Model的缩写，中文意思：文档对象模型。
DOM Core核心
javascript里面的getElementById()，getElementsByTagName()，getAttribute()，setAttribute()等方法，都是Document Core的组成部分。
例如：
使用DOM Core来获取表单对象的方法：
document.getElementsByTagName(“form”);
使用DOM Core来获取id为myimg的元素的src属性。
document.getElementById("myimg").getAttribute("src")
HTML-DOM
使用DOM-html获取表单对象：
document.forms
使用DOM-htmlshi获取元素属性：
document.getElementById("myimg").src;
CSS-DOM
document.getElementsByTagName("span").style.color=”red”;
每一个网页都可以用DOM表示出来，每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p title="选择你最喜欢的水果.">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul> </body> </html>
原生Javascript中操作DOM回顾
1.原生js和jq获取元素对象
原生js:
方法:
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
document.querySelector()
document.querySelectorAll()
属性:
parentNode
childeNodes
firstChild
lastChild
jq:
方法: $('选择器') 或jQuery('选择器');
2.原生js和jq对象的区别
- 原生js只能使用原生js对象上的属性和方法
- jq只能使用jq对象上的属性和方法
- 原生js对象不能使用jq对象上的属性和方法
- jq对象不能使用原生js对象上的属性和方法
3.原生js对象和jq对象的互换（重点）
原生js对象==> 转jq对象 ====重点
语法:
$(原生js对象)
jq对象===>转原生js对象
语法:
jq对象[0]===推荐
jq对象.get(0)
注意:
1. 原生js对象和jq对象上的属性和方法,只能是指定的对象才能使用
2. jq对象一般都以jQuery.fn开头,否则是原生对象
4.原生js对象和jq对象中this
原生js: this
jq: $(this)
jQuery中DOM基本操作
jQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习jQuery DOM操作。
【查】查找结点
获取元素节点: $('选择器')
获取属性节点: jq对象.attr() jq对象.prop()
获取文本节点: jq对象.text();
例：
//查找元素节点p返回p内的文本内容。 $("p").text(); //查找元素节点p的属性返回属性名称对应的属性值 $("p").attr("title"); //返回p的属性title的值。 $("p").prop("title");//返回p的属性title的值。
attr与prop区别
attr获取和设置自定义属性。
prop获取和设置w3c定义的属性。
练习：查找p下面的span，返回span的class属性值。
【增】创建节点
1、创建元素节点
代码：
//创建元素节点 var $h = $("<h1>标题1</h1>")[0];
代码返回$li1就是一个由DOM对象包装成的jQuery对象。把新建节点添加到DOM树中JQuery代码如下：
$("ul").append($li1);
添加后页面中只能看到<li>元素默认的"·",由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。
append()方法是添加DOM节点方法。
2、创建文本节点
$li2=$("<li>苹果</li>");
代码返回$li2就是一个由DOM对象包装成jQuery对象，把新建的文本节点添加到DOM树中JQuery代码如下：
$("ul").append($li2);
添加后页面中能看到"·苹果"，右键查看页面源码发现新加的文本节点没有title属性。下面方法创建带属性的节点。
3、创建属性节点
创建属性节点同元素节点、文本节点一样使用JQuery的工厂函数完成。创建属性节点的JQuery代码如下：
$li3=$("<li title='榴莲'>榴莲</li>");
代码返回$li3也是一个由DOM对象包装成jQuery对象，把新建的属性节点添加到DOM树中jQuery代码如下：
$("ul").append($li3);
【插】插入节点
- 父子前后关系：append()、appendTo()、prepend()、prependTo()、
- 兄弟前后关系：after()、insertAfter()、before()、insertBefore()。
1. 在节点末尾插入(两种方式):
append()方法 和 appendTo()方法
append() 表示在指定父级的所有子元素后面加新节点
语法: $(父元素).append($(子节点))
appendTo()表示 把子节点加到指定父元素的所有子元素后面
语法: $(子节点).appendTo($(父节点))
<ul>
<li>标题1</li>
<li id="box">标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
<script>
//获取父节点
var $fu=$("ul");
//创建子节点
// var $zi = $("<li>新节点</li>");
//插入节点
//在末尾添加节点（两种方式）
// $fu.append($zi); // 在父级中插入子节点
// $zi.appendTo($fu);//把子节点放在父节点中
</script>
2. 在节点开始插入(两种方式)：
prepend() 表示在指定父级的所有子元素前面加新节点
语法: $(父元素).prepend($(子节点))
prependTo()表示 把子节点加到指定父元素的所有子元素前面
语法: $(子节点).prependTo($(父节点))
prepend()方法 和 prependTo()方法
prepend()方法将每匹配的元素内部前置要添加的元素。
prependTo()方法将元素添加到每一个匹配的元素内部前置。
<ul>
<li>标题1</li>
<li id="box">标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
<script>
//获取父节点
var $fu=$("ul");
//创建子节点
// var $zi = $("<li>新节点</li>");
//在开始添加节点（两种方式）
// $fu.prepend($zi);
$zi.prependTo($fu);
</script>
3.在兄弟节点之前插入(两种方式):
after()方法 和 insertAfter()方法
after()方法向匹配的元素后面添加元素，新添加的元素做为目标元素后的紧邻的兄弟元素。
insertAfter()方法将新建的元素插入到查找到的目标元素后，做为目标元素的兄弟节点。
<ul>
<li>标题1</li>
<li id="box">标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
<script>
//在兄弟节点后添加元素
// $("#box").after("<li>新节点</li>");//方法一
//方法二
$("<li>新节点</li>").insertAfter("#box");
</script>
4.在兄弟节点之后插入(两种方式):
before()方法 和 insertBefore()方法
before()方法在每一个匹配的元素之前插入，做为匹配元素的前一个兄弟节点。
insertBefore()方法将新建元素添加到目标元素前，做为目标元素的前一个兄弟节点。
<ul>
<li>标题1</li>
<li id="box">标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
<script>
// 在每一个匹配的元素之前插入，做为匹配元素的前一个兄弟节点。
// $("#box").before("<li>新节点前</li>");//方法一
//方法二
$("<li>新节点前</li>").insertBefore("#box");
</script>
【删】删除节点
1、remove()方法 和 empty()方法
remove()方法删除所有匹配的元素，该方法能删除元素中的所有子节点。
empty()方法只是清空节点，它能清空元素中的所有子节点。
<div id="box">
<span id="on">内容1</span>
<span>内容2</span>
</div>
<script>
//删除子集所有标签，保留自己
$("#box span").remove();
//清空所有子集的标签中内容，保留标签
// $("#box span").empty();
</script>
2、detach()方法
移除后，如果重新加入到其他地方，那么原来节点上面绑定的事件还在。
<div id="box">
<span id="on">内容1</span>
<span>内容2</span>
</div>
<script>
//添加事件
$("#on").click(function () {
alert("11");
});
//删除元素，再次添加时会保留事件
var result=$("#on").detach();
//填加
result.appendTo("#box");
</script>
【复】复制节点
复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为。
语法：$(element).clone()；
<div>
<p>段落1</p>
<p id="box">段落2</p>
<p>段落3</p>
</div>
<div id="main"></div>
<script>
//复制节点
var dom = $("#box").clone(true);//复制节点，复制事件
// var dom = $("#box").clone(false);//复制节点，不复制事件
//添加到指定的main中
dom.appendTo("#main");
</script>
该方法复制ul的第一个li元素，true参数决定复制元素时也复制元素行为，当不复制行为时没有参数。
【替】替换节点
replaceWith() 和 replaceAll()
使用replaceWith方法使用后面的元素替换前面的元素。
语法：$(oldelement).replaceWith(newelement);
使用replaceAll方法使用前面的元素替换后面的元素。
语法：$(newelement).repalceAll(oldelement);
<div>
<p>段落1</p>
<p id="box">段落2</p>
<p>段落3</p>
</div>
<script>
//创建节点
var $demo = $("<h6>替换内容</h6>");
//替换单个节点元素
$("#box").replaceWith($demo);
//全部替换
$("p").replaceWith($demo);//方式1
// $demo.replaceAll("p");//方式2
</script>
【包】包裹节点
包裹节点三种实现形式：wrap()、wrapAll()、wrapInner()
语法：
$(element).wrap()//包裹外面
$(element).wrapAll()//包裹全部
$(element).wrapInner()//包裹里面
<body>
<div id="box"></div>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<script>
$("a").wrap("#box");//单独每个标签包裹外面
$("a").wrapAll("#box");//包裹整个标签
$("a").wrapInner("#box");//单独包裹内部内容
</script>
- 1) $(“#li_1”)表示被包裹的对象。
- 2) wrap括号里面的元素表示用什么标签去包裹。
- 3) 选择的对象如果是多个，每个对象都单独用括号里面的标签包裹。
【遍】遍历节点
1. children()、next()、prev()、siblings()方法
children()方法用于取得匹配元素的子元素集合，只匹配子元素不考虑任何后代元素。
语法：$(selector).children();
next()方法用于匹配元素的下一个兄弟节点。
语法：$(selector).next();
prev()方法用于匹配元素的上一个兄弟节点。
语法：$(selector).prev();
siblings方法()用于匹配目标元素的所有兄弟元素。
语法：$(selector).siblings();
<div id="box">
<p>段落1</p>
<p id="test1">段落2</p>
<p>段落3</p>
<span>内容1</span>
<span>内容2</span>
<span id="test2">内容3</span>
<h1>标题1</h1>
<h1>标题1</h1>
</div>
<script>
//获取所有子元素
// $("#box").children().css("background","red");
//获取兄弟元素的下一个元素
// $("#test").next().css("background","red");
//获取兄弟元素的上一个元素
// $("#test").prev().css("background","red");
//获取兄弟元素的所有元素
// $("span").siblings().css("background","red");
//获取box下面所有指定类为test的子元素
// $('#box').children('#test').css('background','red');
//获取子元素后面的所有元素
// $('#test').nextAll().css('background','red');
//获取指定元素到指定元素之间的所有元素
//$('#test1').nextUntil('#test2').css('background','red');
</script>
2. closest() 和 find()方法
closest('选择器') 表示向上查找指定选择器的元素
find('选择器') 表示向下查找指定选择器的元素
区别：
- closest 是从自身(集合)开始一直向上遍历，直到找到一个满足closest指定的选择器的元素，在找到第一个满足条件的元素时停止，然后返回这个元素。
- find 只会在自身(集合)的子集内查找，返回的是满足find指定的选择器的子元素的集合。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.js"></script> <style> table{ width: 500px; border-collapse: collapse; } tr>td{ border: #00A7EA 1px solid; text-align: center; } </style> </head> <body> <table> <tr> <td>苹果手机</td> <td>4999</td> <td><a href="#">添加</a></td> </tr> </table> <script> $("table tr:first td a").click(function () { //复制当前行 var cloneTr = $(this).closest("tr").clone(); //修改文本 cloneTr.find("a").html("删除"); //添加到table cloneTr.appendTo("table"); //删除行 $("table tr:not(:first) td a").click(function () { //删除当前行 $(this).closest("tr").remove(); }); }); </script> </body> </html>
数组、对象、元素遍历each()方法
概念：依次或挨个从指定范围中取出所有的值。
方式一：对象和数组遍历
$.each(数组/元素集合,function(index,dom){ index:索引值 dom: 表示索引值对应的值 });
方式二：元素集合遍历
jq对象集合.each(function(index,value){ index: 表示索引 value: 表示索引代表的值 });
案例：
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
<script>
// 方式一
$.each($("ul li"),function (index,vaule) {
console.log(index,vaule);
});
//方式二
$("ul li").each(function (index,value) {
console.log(index,value);
});
</script>
定位和偏移操作
offset()方法
offset()方法用于获取元素相对当前窗体的偏移量。
返回对象：top和left。
语法：$(selector).offset()
var offset= $("p").offset();//该示例用于获得元素p的偏移量
//offset()只对可见元素有效。
position()方法
position()方法用于获取元素与最近定位父元素节点的相对偏移量。
语法：$(selector).position();
var postion= $("p").positon(); //该示例用于获得元素p的位置。 var left=positon.left;//左边 var top=positon.top;//上边
scrollTop()和scrollLeft()方法
scrollTop()和scrollLeft()方法用于获取元素的滚动条距顶端的距离和距左侧的距离。
运用场景: 主要用于制作固定头部或尾部操作
操作:
获取滚动条的距离：jq对象.scrollTop()
设置滚动条的距离：jq对象.scrollTop(距离值)
语法：$(selector).scrollTop();$(selector).scrollLeft();
var scrollTop=$("p").scrollTop(); var scrollLeft=$("p").scrollLeft();//该示例用于获得元素的滚动条的位置。 //也可以添加参数将元素滚动到指定的位置。 $("textarea").scrollTop(300);$("textarea").scrollLeft(300);
设置和获取html/text/val
html()：主要用于设置和获取HTML代码。
text()：主要用于设置和获取标签中的文本内容。
val()：主要用于表单中获取和设置 input标签中value的值。
html()方法
html()方法获得或设置某个元素的html元素。
语法：$(selector).html();
$("p").html();//该示例获得元素p的html内容。
$("p").html("<strong>添加html内容</strong>");
//该示例设置p的html内容为”<strong>添加html内容</strong>“;
text()方法
text()方法获得或设置某个元素的文本值。
语法：$(selecotr).text();
$("p").text();//该示例获得元素p的text文本内容。
//该示例设置元素p的text文本为"重新设置的文本内容";
$("p").text("重新设置的文本内容");
val()方法
val()方法获得或设置某个元素的值，如果元素值是多选则以数组形式返回。
语法：$(selector).val();
<input type="text" id="userName" value="请输入用户名" />
$("#userName").val();//获得input元素的值。
$("#userName").val('响马');//设置input元素的值为'响马'。
注意：val()方法的不仅能操作input，最重要的一个用途用于select【下拉列表框】、checkbox【多选框】、radio【单选框】。
例：在下拉框下的多选赋值应用
<select id="fruits" multiple="multiple"> <option>苹果</option> <option>香蕉</option> <option>西瓜</option> </select> $("#fruits").val(['苹果','香蕉']); //该示例使select中苹果和香蕉两项被选中。
表单的常见操作方法
使用常规的思路：$(“#keyword”).value 取值是取不到的，因为此时$(‘#keydord’)已经不是个element，而是个jQuery对象，因为jQuery对象中第一个元素即为DOM对象，所以也可以这样取值：
语法：var inputValue = $("#keyword")[0].value;
var textval = $("#text_id").attr("value");
var textval = $("#text_id").val();
/*获取单选按钮的值*/ var valradio = $("input[type=radio]:checked").val(); /*获取一组名为(items)的radio被选中项的值*/ var item = $('input[name=items]:checked').val(); /*获取复选框的值*/ var checkboxval = $("#checkbox_id").attr("value")； /*获取下拉列表的值*/ var selectval = $('#select_id').val(); /*文本框，文本区域*/ $("#text_id").attr("value",");//清空内容 $("#text_id").attr("value",'test');//填充内容 /*多选框checkbox*/ $("#chk_id").attr("checked",");//使其未勾选 $("#chk_id").attr("checked",true);//勾选 if($("#chk_id").attr('checked')==true) //判断是否已经选中 /*单选组radio*/ $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 /*下拉框select*/ $("#select_id").attr("value",'test');//设置value=test的项目为当前选中项 $("testtest2").appendTo("#select_id")//添加下拉框的option $("#select_id").empty()；//清空下拉框 /*获取一组名为(items)的radio被选中项的值*/ var item = $('input[name=items]:checked').val(); //若未被选中 则val() = undefined /*获取select被选中项的文本*/ var item = $("select[name=items] option:selected").text(); /*select下拉框的第二个元素为当前选中值*/ $('#select_id')[0].selectedIndex = 1; /*radio单选组的第二个元素为当前选中值*/ $('input[name=items]').get(1).checked = true; /*重置表单*/ $("form").each(function(){ .reset(); });
课后练习
1. 利用节点复制实现添加商品到购物车的效果。
2. //点击——>把左边选中的选项添加到右边
//点击===>把左边全部的选项添加到右边
//点击<——把右边选中的选项添加到左边
//点击<===把右边全部的选项添加到左边
//双击左边或者右边的选项让它自动移动到另外一端
效果图：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.js"></script> <style> select{width: 200px;height: 200px} </style> </head> <body> <button id="btn1">--></button> <button id="btn2">===></button> <button id="btn3"><--</button> <button id="btn4"><===</button> <br> <br> <select id="leftbox" size="10"> <option>香蕉</option> <option>苹果</option> <option>梨子</option> <option>菠萝</option> <option>橘子</option> </select> <select id="rightbox" size="10"></select> <script> //点击btn1把左边选中的内容添加到右边 $("#btn1").click(function(){ //获取左边选中的值 var $leftopt = $("#leftbox option:selected"); //添加到右边 $leftopt.appendTo("#rightbox"); //去掉右边默认选中的值 $("#rightbox option").prop("selected",false); }); //点击===>把左边全部的选项添加到右边 $("#btn2").click(function () { $("#leftbox option").appendTo("#rightbox"); }); //点击<——把右边选中的选项添加到左边 $("#btn3").click(function () { var $rightopt = $("#rightbox option:selected"); $rightopt.appendTo("#leftbox"); $("#leftbox option").prop("selected",false); }); //点击<===把右边全部的选项添加到左边 $("#btn4").click(function () { $("#rightbox option").appendTo("#leftbox"); }); //双击左边或者右边的选项让它自动移动到另外一端 $("option").dblclick(function () { //获取option当前位置 var p = $(this).closest("select").prop("id"); if (p=="leftbox"){ $(this).appendTo("#rightbox"); $("#rightbox option").prop("selected",false); }else { $(this).appendTo("#leftbox"); $("#leftbox option").prop("selected",false); } }); </script> </body> </html>
3. $(this) 和 this 关键字在 jQuery 中有何不同？
4. Jq对象和原生的概念和区别
5. 一个用户注册表单有： 姓名、性别、籍贯、爱好、个人介绍，使用jquery点击登录按钮把表单元素的值并控制台输出。
效果图：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.js"></script> </head> <body> <form action="#" method="get"> <p>账号：<input type="text" value="123" name="username"></p> <p>密码：<input type="password" value="123456" name="pwd"></p> <p>爱好： <input type="checkbox" value="游戏" name="hob">游戏 <input type="checkbox" value="写作" name="hob">写作 <input type="checkbox" value="数钱" name="hob">数钱 </p> <p><button type="submit" >提交</button></p> </form> <script> $("form").submit(function () { //获取用户名 var user = $("input[type=text]").val(); //获取密码 var pwd = $("input[type=password]").val(); //获取爱好 var hob=[];//用于存储集合 $("input[type=checkbox]").each(function (index,value) { if ($(this).prop("checked")){ hob.push($(this).val()); } }); //字符串拼接 var value="?username="+user+"?wpd="+pwd+"?hob="+hob[0]; console.log(value); }); </script> </body> </html>
面试题
1 请说说javascript原生dom操作与jQuery操作dom的优缺点？
2 说一说html() 和 text() 的不同点。
