jQuery – 3.JQuery的Dom操作

3.1 JQuery的Dom操作

    1、使用html()方法读取或者设置元素的innerHTML

   2、使用text()方法读取或者设置元素的innerText

    3、使用attr()方法读取或者设置元素的属性

   4、使用 removeAttr 删除属性

   案例：图片浏览器

3.2 节点遍历

   1.next()方法用于获取节点之后的挨着的第一个同辈元素

    2.prev、prevAll兄弟中之前的元素。

    3.siblings()方法用于获取所有同辈元素

    4.end()将匹配的元素列表变为前一次的状态

   5.andSelf()加入先前所选的加入当前元素中

   6.案例：横向菜单，选中的项高亮显示 $(this).css();$(this).siblings().css()

    7.案例：评分控件。prevAll,this,nextAll

3.1 JQuery的Dom操作

1、使用html()方法读取或者设置元素的innerHTML：
alert($("#btn1").html());
$("#btn1").html("hello");

2、使用text()方法读取或者设置元素的innerText：
alert($("#btn1").text());
$("#btn1").text("hello");

3、使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。
alert($(“#btn1").attr("href"));
$("#btn1").attr("href", "http://www.cnblogs.com/tangge”);

4、使用 removeAttr 删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。“查看源文件”只能看服务器上下载下来的那份。

显示行号复制代码？这是一段程序代码。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#btn").click(function () {

                $("#link").attr("href", "http://www.baidu.com");

});

            $("#btn_move").click(function () {

                //获取属性值

                //$("#link").attr("href");

                //删除属性值

                $("#link").removeAttr("href");

});

    </script>

</head>

<body>

    <div id="d">

        <a id="link">BaiDu</a>

        <input id="btn" type="button" value="Set" />

        <input id="btn_move" type="button" value="remove" />

    </div>

</body>

</html>

案例：图片浏览器

显示行号复制代码？这是一段程序代码。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function() {

            var link = $("ul a");

            link.click(function () {

                //this 触发事件的当前a标签  Dom对象

                // $(this).attr("href")

                $("#i1").attr("src", this.href);

                return false;

});

})

    </script>

</head>

<body>

       <ul id="meinv">

        <li><a href="image/1.jpg">美女1</a></li>

        <li><a href="image/2.jpg">美女2</a></li>

        <li><a href="image/3.jpg">美女3</a></li>

        <li><a href="image/4.jpg">美女4</a></li>

    </ul>

    <br />

    <img id="i1" src="image/1.jpg" />

</body>

</html>

对比开始的【 DOM版：图片浏览器】

节点遍历

1.next()方法用于获取节点之后的挨着的第一个同辈元素，$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有同辈元素，$(".menuitem").nextAll("div")

2.prev、prevAll兄弟中之前的元素。

3.siblings()方法用于获取所有同辈元素，$(".menuitem").siblings("li")。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。

4.end()将匹配的元素列表变为前一次的状态。

//end() 返回上一次包装集被破坏之前的状态

$("#d4").nextAll().css("background-color", "blue").end().css("background-color",

"red");

5.andSelf()加入先前所选的加入当前元素中

6.案例：横向菜单，选中的项高亮显示 $(this).css();$(this).siblings().css()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

            margin:0;

            padding:0;

        #menu

            list-style-type:none;

            margin-top:50px;

            margin-left:100px;

        #menu li

            float:left;

            width:100px;

            height:30px;

            line-height:30px;

            background-color:Gray;

            text-align:center;

            cursor:pointer;

    </style>

    <script src="Jqeury/jquery-1.10.2.js"  type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#menu li").click (function () {

                $(this).css("background-color", "red").siblings().css("background-color", "Gray");

})

})

    </script>

</head>

<body>

    <ul id="menu">

        <li>

            首页

        </li>

        <li>

            播客

        </li>

         <li>

            相册

        </li>

         <li>

            关于

        </li>

    </ul>

</body>

</html>

7.案例：评分控件。prevAll,this,nextAll

显示行号复制代码？这是一段程序代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

            margin:0;

            padding:0;

        #rating

            list-style-type:none;

            margin:50px 100px;

         #rating li

             float:left;

             width:20px;

             text-align:center;

             cursor:pointer;

    </style>

    <script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#rating li").mouseover(function () {

                //alert(1);

                $(this).prevAll().andSelf().css("color", "red").end().end().nextAll().css("color", "black");

                //分开写（上面用链式编程）

                //$(this).prevAll().andSelf().css("color", "red");

                //$(this).nextAll().css("color", "black");

})

})

    </script>

</head>

<body>

    <ul id="rating">

        <li>

☆

        </li>

        <li>

☆

        </li>

        <li>

☆

        </li>

        <li>

☆

        </li>

        <li>

☆

        </li>

    </ul>

</body>

</html>