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>元素的coloralert( $(\"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和leftvar 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