JQ笔记03.Jquery中的DOM操作

• 使用Jquery可以很方便的查找到文档中的某个特定的元素节点，然后可以使用attr()方法来获取元素的各种属性的值。attr()方法的参数可以是一个，也可以是两个。参数是一个的时候，则是要查询的属性的名字。
• $(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个JQuery对象后返回。
• 使用Jquery中的append()方法可以将新元素插入到文档中。

插入节点的方法：

insertBefore可以用来移动节点：

3.2.4【删除节点】：remove()和empty()

[code]$("ul li:eq(1)").remove(); //获取<ul>节点中第二个<li>元素节点，并将它删除
$("ul li").remove("li[title=aaa]"); //将<li>元素中属性title等于aaa的元素删除（若要不等于，使用!=符号）
empty()是清空元素中的所有后代节点。
$("ul li:eq(0)").empty(); //获取<ul>节点中第一个<li>元素节点，并将这个元素中的内容清空(节点符号还在)

3.2.5【复制节点】：使用clone()方法

3.2.6【替换节点】replaceWith()和replaceAll()

[code]replaceWith():将所有匹配的元素都替换成指定的HTML或DOM元素。
replaceAll()和上面的相同，只是写法上颠倒。

3.2.7【包裹节点】wrap()方法

[code]wrap() 将所有元素单独包裹
wrapAll() 将所有元素一起包裹
wrapInner() 将匹配的元素的子内容（包括文本节点）用指定的标记包裹起来

3.2.8【属性操作】使用attr()方法获取和设置元素属性，removeAttr()方法删除元素属性。

3.2.9【样式操作】

[code]alert( $("p").attr("class") ); //获取样式
$("p").attr("class","high"); //设置样式
$("p").addClass("another"); //追加样式
$("p").removeClass(); //删除全部样式
$("p").removeClass("high"); //删除指定样式（删除多个则依次由内及外removeClass()）
$("p").toggleClass("another"); //重复切换样式
alert($("p").hasClass("another")); //判断元素是否含有某样式（等价于如下代码）
alert($("p").is(".another")); //判断元素是否含有某样式

★3.2.10【设置和获取HTML、文本和值】

[code]html()方法：类似于JS中的innerHTML属性，用来读取或者设置某个元素中的HTML内容。
alert($("p").html()); //获取<p>元素的HTML代码
$("p").html("<strong>你最喜欢的水果是?</strong>"); //设置<p>元素的HTML代码
text()方法：类似于JS中的innerText属性，用来读取或者设置某个元素中的文本内容。
alert($("p").text());//获取<p>元素的文本
$("p").text("一江春水向东流"); //设置<p>元素的文本
$("p").text("<strong>花自飘零水自流</strong>"); //设置<p>元素的文本(带HTML)
val()方法：类似于JS中的value属性，用来获取或设置元素的值。如果元素为多选，则返回一个包含所有选择值的数组。
alert($(this).val()); //获取按钮的value值
$(this).val("我被点击了!"); //设置按钮的value值

3.2.10.1 val()方法实战：鼠标点击输入框默认值消失，用来登录时的提醒。

注：this指向当前的文本框，this.defaultValue就是当前文本框的默认值

3.2.10.2 val()重要用途之二：能使select[下拉菜单]、checkbox[多选框]、radio[单选按钮]，相应的选项被选中。

3.2.11【遍历节点】

3.2.11.1 Children()方法，用于取得匹配元素的子元素集合，该方法只考虑子元素而不考虑任何后代元素。

3.2.11.2 next()方法，用于取得匹配元素后面的同辈元素

Prev()方法，用于取得匹配元素前面的同辈元素

siblings()方法，用于取得匹配元素前后所有的同辈元素

3.2.11.3 closest()方法，用于取得最近的匹配元素

注：Jquery中还有很多遍历节点的方法：find()、filter()、nextAll()、prevAll()、parent()、parents().

3.2.12【CSS-DOM操作】读取和设置style对象的各种属性

[code]alert( $("p").css("color") ); //获取<p>元素的color

alert( $("p").height() ); //获取<p>元素的高度

alert( $("p").width() ); //获取<p>元素的宽度

$("p").css("color","red"); //设置<p>元素的color

$("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"}) //设置<p>元素的fontSize和backgroundColor（驼峰式）

$("p").css("opacity","0.5"); //设置<p>元素的透明度

$("p").height("100px"); //设置<p>元素的高度

$("p").width("400px"); //设置<p>元素的宽度

offset()方法：获取元素在当前视窗的相对偏移，返回的对象包含两个属性：top和left

var left = $("p").offset().left;

var top = $("p").offset().top;

alert("left:"+left+";top:"+top); //获取<p>元素的的左边距和上边距

position()方法：获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回的对象同上。

var left = $("p").position().left;

var top = $("p").position().top;

alert("left:"+left+";top:"+top);

scrollTop()方法、scrollLeft()方法：获取元素的滚动条距离顶端和左侧的距离

var scrollTop = $("textarea").scrollTop(); //滚动条距离顶端的距离

var scrollLeft = $("textarea").scrollLeft(); //滚动条距离左端的距离

alert("scrollTop:"+scrollTop+";scrollLeft:"+scrollLeft);

可以为上述方法指定一个参数，控制元素的滚动条滚动到指定位置。

$("textarea").scrollTop(300);

$("textarea").scrollLeft(300); //控制元素的滚动条滚动到距离顶端300和距离左侧300的位置

【案例研究】网站超链接和图片的提示效果（相当经典，整理、收藏！）

3.3-案例-文字超链接效果.html

3.3-案例-图片提示效果.html

【代码】https://github.com/rxbook/study-jquery-1/tree/master/03.Jquery%E4%B8%AD%E7%9A%84DOM%E6%93%8D%E4%BD%9C