web前端之锋利的jQuery三：jQuery中的DOM操作
web前端之锋利的jQuery三：jQuery中的DOM操作
一般来说，DOM分为三个方面：DOM Core(核心) 、HTML-DOM和CSS-DOM
DOM Core：
JavaScript中的getElementById()、getElementsByTagName()、getAttribute()、setAttribute()都是DOM Core的组成部分。详情查看
HTML-DOM：
在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。HTML-DOM提供了一些更为简明的记号来描述各种HTML元素的属性。
例如：
document.forms //HTML-DOM提供了一个form对象
element.src //使用HTML-DOM老获取某元素的src属性的方法
CSS-DOM：
作用于获取和设置style对象的各种属性。
element.style.color=”red”
jQuery中的DOM操作：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery选择器title>
<script type="text/javascript" src="../js/jquery-3.1.1.js">script>
<script type="text/javascript">
$(document).ready(function(){
//查找元素节点
var $li=$("ul li:eq(1)");//获取ul第二个li节点
var li_txt=$li.text();//获取第二个li元素节点的文本内容
//alert(li_txt);
//查找属性节点
var $para=$("p");//获取p节点
var p_txt=$para.attr("title");//获取p节点属性title
//alert(p_txt);
// 创建节点
// 创建元素节点：
/*
var $li_1=$(""); //创建第一个li元素
var $li_2=$(""); //创建第二个li元素
$("ul").append($li_1);
$("ul").append($li_2);
*/
//创建文本节点
/*
var $li_1=$("香蕉 ");
var $li_2=$("雪梨 ");
$("ul").append($li_1);
$("ul").append($li_2);
*/
//创建属性节点
var $li_1=$("">香蕉 ");
var $li_2=$("">雪梨 ");
$("ul").append($li_1);
$("ul").append($li_2);
});
script>
head>
<body>
<p title="选择你喜欢的水果">你最喜欢的水果是？p>
<ul>
<li title="苹果">苹果li>
<li title="橘子">橘子li>
<li title="菠萝">菠萝li>
ul>
body>
html>插入节点：
append() 向每个匹配的元素内容内追加内容
html代码：
<p>I am p>
jQuery代码：
$("p").append("<b>fzwb>");
结果：<p>I am <b>fzwb>p>appendTo() 将所有匹配的元素加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).appendTo(B)的操作，既不是将B追加到A中，而是将A追加到B中。
html代码：
<p>I am p>
jQuery代码：
$("<b>fzwb>").appendTo("p");
结果：<p>I am <b>fzwb>p>prepend() 向每个内容的元素内部前置内容
html代码：
<p>I am p>
jQuery代码：
$("p").prepend("<b>fzwb>")
结果：<p><b>fzwb>I am p>prependTo() 将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的，$(A).prependTo(B)的操作，既不是将B前置到A中，而是将A前置到B中
html代码：
<p>I am p>
jQuery代码：
$("<b>fzwb>").prependTo("p")
结果：<p><b>fzwb>I am p>after() 在每个匹配到的元素之后插入内容
html代码：
<p>I am p>
jQuery代码：
$("p").after("<b>fzwb>");
结果：<p>I am p><b>fzwb>insertAfter() 将所有匹配的元素插入到指定元素的后面，实力上，使用该方法是颠倒了常规的$(A).after(B)的操作，既不是将B插入到A后面，而是将A插入到B后面
html代码：
<p>I am p>
jQuery代码：
$("<b>fzwb>").insertAfter("p");
结果：<p>I am p><b>fzwb>before() 在每个匹配的元素之前插入内容
html代码：
<p>I am p>
jQuery代码：
$("p").before("<b>fzwb>");
结果：<b>fzwb><p>I am p>insertBefore() 将所有匹配的元素插入到指定元素的前面，实力上，使用该方法是颠倒了常规的$(A).before(B)的操作，既不是将B插入到A前面，而是将A插入到B前面
html代码：
<p>I am p>
jQuery代码：
$("<b>fzwb>").insertBefore("p");
结果：<b>fzwb><p>I am p>删除节点：
1、remove()方法：
$(“ul li:eq(1)”).remove(); //获取第二个li元素节点，将它从网页中删除
当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
var $li=$(“ul li:eq(1)”).remove();
$li.appendTo(“ul”);
2.detach()方法：
detach()方法和remove()方法一样，将它从网页中删除后，该节点所包含的所有后代节点并没有同时被删除。
3.empty()方法：
empty()方法不是删除节点，而是清空节点，他能清空元素中的所有的后代节点
复制节点：
clone()来复制节点
$(ul li).click(function(){
$(this).clone.appendTo(“ul”);
});
替换节点：
replaceWith()替换节点
$(‘p’).replaceWith(“你最不喜欢的水果是？“);
("你最不喜欢的水果是？").relaceAll("p");包裹节点：
$("strong").wrap("");//用b标签吧strong元素包裹起来
$("strong").wrapAll("");//用b标签把所有的strong元素包裹起来
$("strong").wrapInner("");//所有的strong元素里面用b标签包裹起来属性操作：
使用attr()获取和设置属性，removeAttr()方法来删除属性
$(“p”).attr(“title”,”you title”);
$(“p”).attr({“title”:”you title”,”name”:”test”});
$(“p”).removeAttr(“title”);
样式操作：
1.获取和设置样式
var p_class=$(“p”).attr(“class”);//获取样式
$(“p”).attr(“class”,”high”);//设置样式
2.追加样式：
$(“p”).addClass(“another”);
3.移除样式：
$(“p”).removeClass(“another”);
4.切换样式：
$(“p”).toggleClass(“another”);
5.判断是否有某个样式：
$(“p”).hasClass(“another”);
设置和获取HTML、文本和值：
1.html()方法
var p_html=$("p").html();//获取p元素内的HTML代码
$("p").html("你最喜欢的水果是？");//设置p元素内的html代码2.text()方法
var p_text=$("p").text();//获取p元素内的文本内容
$("p").text("你最喜欢的水果是？");//设置p元素内的文本内容3.val()方法
类似于JavaScript中的value属性
var p_val=$("p").val();//获取p元素内的值
$("p").val("");//设置p元素内的值遍历节点：
1.children()方法
该方法用于取得匹配元素的子元素集合
2.next()方法
该方法用于获取匹配元素后面邻近的同辈元素
3.prev()方法
该方法用于获取匹配元素前面邻近的同辈元素
4.siblings()方法
该方法用于获取匹配元素前后所有的同辈元素
5.closest()
该方法用于取得最近的匹配元素，不匹配时，按层级往上查
6.parent(),parents(),closest()的区别
parent()获得一个父节点
parents()获得一堆祖先节点
closest()和parents()类似，但是只返回第一个匹配到的父节点
CSS-DOM操作：
$(“p”).css(“color”);//获取颜色
$(“p”).css(“color”,”red”);//设置颜色
$(“p”).width();//获取宽度
$(“p”).width(“400px”);//设置宽度
offset()方法：
获取元素在当前视窗的相对偏移，返回的对象包含两个属性，即top和left
var offset=$(“p”).offset();
var left=offset.left;
var right=offset.right;
position()方法：
获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回的对象和offset()方法一样。
scrollTop()和scrollLeft()
这两个方法分别获取元素的滚动条距顶端的距离和距左侧的距离。
部分实用的方法（后续动画也会有说到）：
focus()方法处理获得焦点时的事件。
blur()方法处理失去焦点时的事件。
表单元素中的defaultValue属性包含该表单的初始值
this.defaultValue表示当前文本框的默认值
mouseover,鼠标移入发生的动作
mouseout,鼠标移出发生的动作