Jquery-03DOM操作

1. DOM操作
   1.  筛选节点API

过滤 ： 类似基本过滤选择器 、 内容过滤选择器

       $(“table tr”) 选中table中所有tr元素

       $(“table tr:first”) 基本过滤选择器写法

       $(“table tr”).first() 选中这些tr元素的第一个

 

查找 ： 通过当前元素，获取祖先、后代、 父元素、子元素、 兄弟元素

       $(“#mydiv”) 获取id为mydiv的元素

       $(“#mydiv a”) 获取id为mydiv 中所有a元素

       $(“#mydiv”).children(“a”) 获取子元素 等价于: $(“#mydiv>a”)

       $(“#mydiv”).find(“a”) 获取id为mydiv 中所有a元素 等价于 $(“#mydiv  a”)

       $(“#mydiv”).parent(“div”) 获取父元素

       $(“#mydiv”).parents(“div”) 获取id为mydiv 的所有div祖先元素

 

1. 1.  文档对象属性操作

获取一个元素的属性  jquery对象.attr(属性名)

为一个元素的属性赋值  jquery对象.attr(属性名, 属性值)

删除一个属性 jquery对象.removeAttr(属性名)

 

【示例代码】

HTML代码：

<div>你好</div>

<input type="button" value="设置属性" />

需求：

    // 1．点击一个button，动态设置 div的属性 id name class

    // 2．尝试能否设置一个不存在的属性？

 

脚本代码：

 

 

1. 1. 文档对象CSS样式操作

通过attr属性设置/获取 style属性

attr(“style”,”color:red”);

设置CSS样式属性

css(name)  获取一个CSS样式属性

css(name, value)  设置一个CSS样式属性

css(properties)  传递key-value对象，设置多个CSS样式属性

设置class属性

addClass(class)  添加一个class属性 attr(‘class’,’classValue’)

removeClass([class])  移除一个class属性

toggleClass(class)   如果存在（不存在）就删除（添加）一个类

 

【示例代码】

HTML代码：

       <div>心情不错！</div>

       <input type="button" value="背景变黄" id="btn1"/>

       <input type="button" value="字体变蓝" id="btn2"/>

 

需求：

    // 1．点击btn1，使一个div的背景颜色变为 黄色

    // 2．通过toggleClass(class) 实现点击btn2  字体变为蓝色，再点击样式还原

 

脚本代码：

 

 

 

1. 1. 设置或获取HTML、文本和值 

读取和设置某个元素中HTML内容

html() 获取一个元素中html内容

html(val) 设置一个元素中html内容

这个函数不能用于XML文档。但可以用于XHTML文档

读取和设置某个元素中的文本内容

text() 获取一个元素中 文本内容

text(val) 设置一个元素中 文本内容

该方法既可以用于 XHTML 也可以用于 XML 文档

文本框、下拉列表框、单选框 选中的元素值

val() 获取文本框、下拉列表框、单选框 value值

val(val) 设置文本框、下拉列表框、单选框 value值

【示例代码】

HTML代码：

       <div><p>传智播客</p></div> 

       <form>

              用户名 <input type="text" name="username" /> <br/>

              城市 <select>

                            <option value="">请选择</option>

                            <option value="北京">北京</option>

                            <option value="上海">上海</option>

                     </select><br/>

              性别 <input type="radio" name="gender" value="男" />男

                     <input type="radio" name="gender" value="女" />女 <br/>

              <input type="button" value="取值" id="pickBtn" />

              <input type="button" value="设值" id="setBtn" />

       </form>

 

需求：

  // 1．<div><p>传智播客</p></div>  获取div中 html和text 对比

    // 2．单击pickBtn 使用val() 获得文本框、下拉框、单选框选中的value

    // 3．单击setBtn 测试能否通过 val() 设置单选框、下拉框的选中效果 ？

脚本代码：

 

 

重点： val() 快速获取select选中的值 ， val(值) 对select、radio、checkbox 进行赋值 ！！

 

【示例代码2】

HTML代码：

       <!-- 选择学历 -->

       <select id="edu" name="edu">

              <option value="">请选择</option>

              <option value="本科">本科</option>

              <option value="高中">高中</option>

              <option value="中专">中专</option>

              <option value="小学">小学</option>

       </select>

 

需求：

              //1. 输出所有select元素下的所有option元素中对应的文本内容

                 // 例如:<option value="中专">中专^^</option>  输出--->中专^^

           //2. 当选中一个option，获取选中的值

 

脚本代码：

 

 

 

 

1. 1.  文档DOM对象 增删改查

回顾传统XML DOM编程

1. 1. 1.  添加节点

DOM 添加节点：

       document.createElement(元素名称);  // 创建节点 <a></a>

       element.setAttribute(name, value) ; // 设置元素属性值 <a href=”#”></a>

       element. innerHTML= 文本内容;  // 浏览器不兼容 <a href=”#”>xxxx</a>

       父节点.appendChild(elements) ; // 添加节点元素

 

// 需求:  向页面添加 a标签 ,连接到 传智播客 官网

 

 

 

 

JQuery 创建节点

       jQuery(HTML片段) ------- 获得jquery对象

创建元素

使用工厂函数 jQuery(html, [ownerDocument])  --- jQuery可以写为$

例如： $(“<div>你好，jQuery</div>”);

内部插入

$node.append($newNode)向每个匹配的元素内部的结尾处追加结尾处

$newNode.appendTo($node)将新元素追加到每个匹配元素内部的结尾处

$node.prepend($newNode) 向每个匹配的元素内部的结尾处追加开始处

$newNode.prependTo($node)将新元素追加到每个匹配元素内部的开始处

外部插入

$node.after($newNode) 向每个匹配的元素的之后插入内容，是并列兄弟

$newNode.insertAfter($node)  将新元素插入到每个匹配元素之后

$node.before($newNode)  向每个匹配的元素的之前插入内容

$newNode.insertBefore($node)  将新元素插入到每个匹配元素之前

 

 

【示例代码】

HTML代码：

       <!-- 选择学历 -->

       <select id="edu" name="edu">

              <option value="">请选择</option>

              <option value="本科">本科</option>

              <option value="高中">高中</option>

              <option value="中转">中专</option>

              <option value="小学">小学</option>

       </select>

需求：

// 插入大专学历 （本科和高中之间）--- 外部插入

// 插入幼儿园 （学历列表最后） --- 内部插入

 

js脚本

 

 

1. 1. 1.  删除节点

传统DOM操作： 通过父节点干掉子节点

       获取被删除节点 o

       通过父节点删除子节点 o. parentNode. removeChild(o);

$(“p”).remove();删除所为class属性值为hello的p元素，还有它下面的所有元素

       该方法返回被删除节点的引用

    该方法删除节点后，连同节点的事件也删除了

 

$(“p”).empty();  清除所有p元素，还有它下面的所有元素

 

jQuery 1.4版本 新增 detach 方法，被删除的节点，会保留原有的事件

 

【示例代码】

HTML代码：

<body>

       AAA

       <p>你好，jQuery</p>

       BBB

</body>

需求：

// 1、删除p 元素

// 2、清除p元素内容

// 3、练习：分别使用detach和remove 删除带有click事件的p标签，删除后再将p 重新加入body 查看事件是否存在？

 

脚本代码：

 

<script type="text/javascript">

    //页面加载完成后执行

    $(function(){

        // 1、删除p 元素

        // 传统js

        // var _p = document.getElementsByTagName("p")[0];

        //_p.parentNode.removeChild(_p);

       

        // jquery: jquery对象.remove()

        // $("p").remove();

       

        // 2、清除p元素内容

        // 传统js

        // document.getElementsByTagName("p")[0].innerHTML = "";

       

        // jquery: jquery对象.empty();

        // $("p").empty();

       

        // 3、练习：分别使用detach和remove 删除带有click事件的p标签，删除后再将p 重新加入body 查看事件是否存在？

        $("p").click(function(){

            alert("敢点我..");

        });

       

        var $p = $("p").detach();

       

        $("body").append($p);

       

    });

</script>