jQuery入门（三）--jQuery中的DOM操作

• 查找元素节点
  获取<ol>里第一个<li>元素节点的文本内容

console.log($("ol li:eq(1)").text());

• 查找属性节点
  利用 jQuery 选择器查找到需要的元素之后，就可以使用 attr() 方法来获取它的各种属性的值。比如：
  获取<p>元素节点属性title

 console.log($("p").attr("title"));

        <script type="text/javascript">
            $(document).ready(function() {
                $('ul').append($("<li>黄色</li>"););
            });
        </script>

示例：将新建的 li 元素插入到 ul 中
.appendTo() 将匹配的元素插入到目标元素的最后面。

 <script type="text/javascript">
            $(document).ready(function() {
                $("<li>yellow</li>").appendTo("ul");
            });
 </script>

• 移动节点

.insertBefore()

<script type="text/javascript">
            $(document).ready(function() {
                $("<span>Hello world!</span>").insertBefore( $("ul li:eq(1)"));//移动节点
            });
</script>

detach() 方法
删除元素后，重新追加此元素,发现它之前绑定的事件还在,如果使用remove()方法删除元素的话,那么它之前绑定的事件将失效

 <script type="text/javascript">
            $(document).ready(function() {
                var $li = $("ul li:eq(1)").detach();//删除元素
                $li.appendTo("ul");//
            });
</script>

empty() 方法
获取第二个<li>元素节点后,清除此元素里的内容,注意是元素里

<script type="text/javascript">
            $(document).ready(function() {
                $("ul li:eq(1)").empty();
            });
        </script>

remove() 方法
remove() 方法也可以通过传递参数来选择性的删除元素。比如：
将<li>元素中属性title不等于’syl’的<li>元素删除

<script type="text/javascript">
            $(document).ready(function() {
                $("ul li").remove("li[title!=syl]");
            });
 </script>

• clone()

$(this).clone().appendTo('ul');

• replaceWith()

 $("p").replaceWith("<p>SHIYANLOU</p>");
//下面代码与上面的代码作用一样
$("<p>SHIYANLOU</p>").replaceAll("p");

• wrap() 方法

$("p").wrap("<div style='border:1px red solid;'></div>");

• wrapAll() 方法

 $("p").wrapAll("<div style='border:1px red solid;'></div>");

• wrapInner() 方法

$("p").wrapInner("<div style='border:1px red solid;'></div>");

• 获取元素属性

 var p_class = $("p").attr("class");
 $('div').append(p_class);

• 设置元素属性

示例：设置 div 的 class 值

            $(document).ready(function() {
                $("div").attr("class", "demo");
            });

• 删除元素属性
• removeAttr()

$("div").removeAttr("class");

//获取<p>元素的class
var  p_class = $("p").attr("class");
//替换class样式，如果想要添加可以使用addClass()方法
$("p").attr("class","SYL");

• 追加样式

$("div").addClass("another");

• 移除样式

 $("div").removeClass("another");

注：如果要删除多个 class 值，我们可以以空格的方式删除多个 class 名，比如：

$("div").removeClass("another demo");//删除 another 类和 demo 类

如果 removeClass() 方法不带参数，就会将 class 的值全部删除，比如：

$("div").removeClass(); //删除<div>元素的所有class

（4）切换样式

.toggleClass() 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。

例子：

$("p").toggleClass("main");

（5）判断是否含有某个样式

.hasClass() 可以用来判断元素中是否含有某个 class，如果有则返回 true，否则返回 false。比如：

$("p").hasClass("another");

• .html()
  获取 div 中的 HTML 内容

var div_html = $("div").html();

设置 div 中的 HTML 内容

 $("div").html("<span>shiyanlou</span>");

• .text() 方法
  示例：获取 div 元素的文本内容

var p_text = $("div").text();

设置 div 中的文本内容

 $("div").text("shiyanlou");

• .val() 方法
  示例：设置输入框的值

  $("input").val("shiyanlou");

• .children() 方法
  示例：获取 ul 的子元素 li 的文本值

 var ul_chlildList = $('ul').children();
for (var i = 0, len = ul_chlildList.length; i < len; i++) {
       alert(ul_chlildList[i].innerHTML);
}

• .next() 方法

示例：获取 div 后面紧邻的同辈元素

var div_next = $('div').next();

• .css()
  获取匹配元素集合中的第一个元素的样式属性的值或设置每个匹配元素的一个或多个 CSS 属性。

.css() 方法可以非常方便地获取匹配的元素集合中第一个元素的样式属性值
示例：获取 div 的背景颜色

$('div').css('background-color')

示例：为 div 设置边框和高度属性

$('div').css({"border":"1px solid red","height":"100px"});

对于透明度的设置，可以直接使用 opacity 属性，jQuery 已经处理好了兼容性的问题，比如：

$("p").css("opacity","0.5");

（2）.height()、.width()

.height() 获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值。

.width() 为匹配的元素集合中获取第一个元素的当前计算宽度值 或 给每个匹配的元素设置宽度。

示例：获取 div 的高度和宽度

$('div').height()
$('div').width()

height() 方法也能用来设置元素的高度，如果传递的是一个数字，则默认单位是 px，如果要用其他单位，则必须传递一个字符串，比如：

$("p").height(520);//设置<p>元素的高度值为520px
$("p").height(10rem);//设置<p>元素的高度值为10rem

还可以通过 css 方法来获取高度值：

$(element).css("height");

（3）元素定位

offset() 方法，是获得该元素相对于 documet 的当前坐标 ,返回一个包含 top 和 left 属性的对象 。这个方法不接受任何参数。
当通过全局操作（特别是通过拖拽操作）将一个新的元素放置到另一个已经存在的元素的上面时，若要取得这个新的元素的位置，那么使用 .offset() 更合适。

var p_offset = $("p").offset();//获取<p>元素的offset()
var p_offsetLeft = p_offset.left;//获取左偏移
var p_offsetTop = p_offset.top;//获取右偏移

.position() 可以取得元素相对于父元素的偏移位置。 ,返回一个包含 top 和 left 属性的对象
当把一个新元素放在同一个容器里面另一个元素附近时，用 .position() 更好用。`

var position = $("p").position();//获取<p>元素的position()
var left = position.left;//获取左偏移
var top = position.top;//获取右偏移

scrollTop() 方法和 scrollLeft() 方法，这两个方法的作用是分别获取元素的滚动条距顶端的距离和距左侧的距离。
另外可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。比如：

var $p = $("p");
var scrollTop = $p.scrollTop();//获取元素的滚动条距顶端的距离
var scrollLeft = $p.scrollLeft();//获取元素的滚动条距左侧的距离
$("textarea").scrollTop(300);//元素的垂直滚动条滚动到指定的位置
$("textarea").scrollLeft(300);//元素