Jquery-03DOM操作

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. 文档对象属性操作

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

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

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

【示例代码】

HTML代码：

需求：

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

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

脚本代码：

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代码：

需求：

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

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

脚本代码：

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

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

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

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

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

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

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

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

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

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

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

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

【示例代码】

HTML代码：

<form>

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

城市 <select>

</select><br/>

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

</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>

需求：

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

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

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

脚本代码：

1. 文档DOM对象增删改查

回顾传统XML DOM编程

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>

需求：

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

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

js脚本

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 查看事件是否存在？

脚本代码：

//页面加载完成后执行

$(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>

猜你喜欢