JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】
全部章节 >>>>
本章目录
7.1 DOM 对象和 jQuery 对象
7.1.1 DOM 对象
通过传统的 JavaScript 方法访问 DOM 中的元素，可生成 DOM 对象。如：
var obj=document.getElementById("content")使用JavaScript中的getElementById ()方法，在文档中选择id="content"的匹配元素，最后将生成的DOM对象储存在obj变量中
7.1.2 jQuery 对象
使用 jQuery 选择器选择页面中的元素，是为了生成 jQuery 对象，jQuery 对象具有特有的方法和属性，完全能够实现传统 DOM 对象的所有功能
使用jQuery操作元素
- 使用选择器获取某个元素
- 使用jQuery对象的方法操作元素
7.1.3 jQuery 对象和 DOM 对象的相互转换
jQuery 对象转换成 DOM 对象
- 使用 jQuery 中的 get() 方法，其语法结构为：get([index])
- 如果get()方法不带参数，get()方法会返回所有匹配元素的DOM对象，并将它们包含在一个数组中
DOM 对象转换成 jQuery 对象
- 对于一个 DOM 对象，只需要用 $() 将它包装起来就可以获得对应的 jQuery 对象，其语法结构为：$(DOM 对象 )
示例：使用 DOM 对象更改页面中文本字体的颜色
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("h3").click(function() {
this.style.color="red";//DOM 对象
});
});
</script>
<body>
<h3> 全部商品分类 </h3>
</body>
示例：使用 jQuery对象更改页面中文本字体的颜色
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("h3").click(function() {
$(this).css("color","red");//jQuery 对象
});
});
</script>
<body>
<h3> 全部商品分类 </h3>
</body>
7.1.4 实践练习
7.2 jQuery 中使用 DOM 操作元素
7.2.1 元素样式的操作
1、直接设置元素样式值：在 jQuery 中，可以通过 css() 方法为某个指定的元素设置样式值
设置单个属性：
jQuery 对象.css(name,value); //其中name为样式名称，value为样式的值
同时设置多个属性：
jQuery 对象.css({name:value,name:value,name:value…});
示例：在 jQuery 中使用 DOM 设置元素的样式值
<script type="text/javascript">
$(function() {
$("#content").click(function() {
$(this).css("font-weight","bold");
$(this).css("font-style","italic");
$(this).css("background-color","#eee");
});
});
</script>
<body>
<p id="content">Write Less, Do More.</p>
</body>
2、增加类：通过 jQuery 对象的 addClass() 方法增加元素类
增加单个类：
jQuery 对象.addClass(class);同时增加多个类，以空格隔开类名：
jQuery 对象.addClass(class0 class1…);示例：在 jQuery 中使用 addClass(class) 方法，给<p>标签动态添加样式
<style type="text/css">
.cls1{
font-weight:bold;
font-style:italic;
background-color:#eee;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#content").click(function() {
$(this).addClass("cls1");
});
});
</script>
<p id="content">Write Less, Do More.</p>
3、删除类：与增加 css 类的 addClass() 方法相反，removeClass() 方法则用于删除类
jQuery 对象.removeClass([class]);
示例：点击按钮后，删除添加的 <p> 标签样式类
<style type="text/css">
.cls1{
font-weight:bold;
font-style:italic;
background-color:#eee;
}
</style>
4、 类切换 toggleClass() 模拟了 addClass() 与 removeClass() 实现样式切换的过程 通过 toggleClass() 方法可以为元素切换不同的类
jQuery 对象.toggleClass(class);
示例：使用toggleClass(class) 方法，实现增加类样式和删除类样式的切换
<style type="text/css">
.cls1{
font-weight:bold;
font-style:italic;
background-color:#eee;
}
</style>
<script type="text/javascript">
$(function() {
添加类样式的代码略
$("#content").click(function() {
$(this).toggleClass("cls1");
});
});
</script>
<p id="content">Write Less, Do More.</p>
7.2.2 元素内容和值的操作
设置或获取元素的内容:
操作元素内容的方法包括 html() 和 text()
|
语法格式 |
参数说明 |
功能描述 |
|
html() |
无参数 |
用于获取第一个匹配元素的 HTML 内容或文本内容 |
|
html(content) |
content 参数为元素的HTML内容 |
用于设置所有匹配元素的 HTML 内容或文本内容 |
|
text() |
无参数 |
用于获取所有匹配元素的文本内容 |
|
text(content) |
content 参数为元素的文本内容 |
用于设置所有匹配元素的文本内容 |
示例：在页面中点击“增加图像”按钮后，在 <p> 标签中增加一幅图像
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("input[type='button']").click(function() {
// 设置页面中所有 <p> 元素内部的 HTML 代码
$("p").html("<img src='../img/frozen.jpg'/>");
});
});
</script>
<body>
<p></p>
<input type="button" value=" 增加图像 "/>
</body>
获取或设置元素值：要获取元素的值，可以通过 val() 方法来实现
jQuery 对象.val([val]);
如果 val() 方法不带参数，表示获取某元素的值
如果 val() 方法带有参数，则表示将参数赋给指定的元素，即设置元素的值
示例：制作页面登录框水印特效
<script type="text/javascript">
$(function() {
$("#userEmail").focus(function(){ // 邮箱输入框获得焦点
var text_value = $(this).val(); // 获取当前文本框的值 if(text_value == "xxx@163.com") {
$(this).val(""); // 如果符合条件，则清空文本框内容
}
});
$("#userEmail").blur(function() { // 邮箱输入框失去焦点
var text_value = $(this).val(); // 获取当前文本框的值
if(text_value=="") {
$(this).val("xxx@163.com"); } // 如果符合条件，则设置内容
});
});
</script>
7.2.3 元素属性的操作
1、获取或设置元素的属性值：通过 attr() 方法可以获取或设置元素的属性值
//获取属性值，参数name表示属性的名称
jQuery 对象.attr(name);
//设置属性值，参数value表示属性的值
jQuery 对象.attr(name,value);
//同时设置多个属性
jQuery 对象.attr({name0:value0,name1:value1…});
//绑定函数，将函数返回值作为元素的属性值
jQuery 对象.attr(name,function(index){});
示例：在页面中创建一个 <img> 标签，当页面加载完毕后，随机展示图片
<script type="text/javascript">
$(function() {
var imgs = new Array();
imgs[0]="../img/img_1.jpg";
imgs[1]="../img/img_2.jpg";
imgs[2]="../img/img_3.jpg";
imgs[3]="../img/img_4.jpg";
$("img").attr("src",function(){
// 随机产生 0 到 3 之间的数，即随机产生数组的下标
var i = Math.ceil(Math.random()*3);
// 函数的返回值作为 src 的属性值
return imgs[i];});});
</script>
<body><img/></body>
2、删除元素的属性 可使用 removeAttr() 方法将元素的属性删除
jQuery 对象.removeAttr(name);
7.2.4 实践练习
7.3 jQuery 中使用 DOM 操作节点
7.3.1 创建节点元素
通过函数 $(html) 完成元素的创建
调用新元素的上级或者同辈的相关方法，把新元素添加到 DOM 树中
$(html);
7.3.2 插入节点
动态创建新元素后，需要执行插入或追加操作
按照元素的层次关系来分，可以分为内部和外部两种方法
1、元素内部插入子节点
|
语法格式 |
功能描述 |
|
append(content) |
$(A).append(B) 表示将 B 追加到 A 中，如 $("ul").append($li); |
|
appendTo(content) |
$(A).appendTo(B) 表示把 A 追加到 B 中，如 $li.appendTo("ul") |
|
prepend(content) |
$(A).prepend(B) 表示将 B 前置插入到 A 中，如 $("ul").prepend($li) |
|
prependTo(content) |
$(A).prependTo(B) 表示将 A 前置插入到 B 中，如 $li.prependTo("ul") |
示例：在页面的文本框中输入流行的歌曲名和歌手后，将其添加到列表的最前面
<script type="text/javascript">
$(function() {
$("#song").blur(function() {
// 输入框中的内容不为空
if($(this).val()!="") {
// 创建 li 节点，节点的文本内容是在文本框中输入的
var $li=$("<li>"+$(this).val()+"</li>");
// 将 $li 对象前置插入到 <ul> 元素中
$li.prependTo($("ul"));
// 清空输入框中的内容
$(this).val("");
}
});
});
</script>
2、元素外部插入同辈节点
|
语法格式 |
功能描述 |
|
after(content) |
$(A).after(B) 表示将 B 插入到 A 之后，如 $("ul").after($div); |
|
insertAfter(content) |
$(A).insertAfter(B) 表示将 A 插入到 B 之后，如 $div.insertAfter("ul") |
|
before(content) |
$(A).before(B) 表示将 B 插入至 A 之前，如 $("ul").before($div) |
|
insertBefore(content) |
$(A).insertBefore(B) 表示将 A 插入到 B 之前，如 $div.insertBefore("ul") |
示例：在页面中点击“流行歌曲”标题，自动添加歌曲列表项
<script type="text/javascript">
$(function() {
$("h3").click(function() {
var $ul=$("<ul></ul>");
var $li1=$("<li> 想起————韩雪 </li>");
var $li2=$("<li> 没那么简单————黄小琥 </li>");
var $li3=$("<li> 指望————郁可唯 </li>");
// 将创建的 <ul> 元素作为 <h3> 元素的同辈元素，插入到 <h3> 元素之后
$(this).after($ul);
$ul.append($li1); // 追加 $ul 对象的子节点
$ul.append($li2);
$ul.append($li3); });});
</script>
<body> <h3> 流行歌曲 </h3> </body>
7.3.3 替换节点
在 jQuery 中，如果要替换元素中的节点，可以使用 replaceWith() 和 replaceAll() 这两种方法
jQuery 对象.replaceWith(content);
jQuery 对象.replaceAll(selector);
replaceWith() 方法的功能是将所有选择的元素替换成指定的 HTML 页面元素
replaceAll() 方法的功能是用所选择的元素替换指定的 <selector> 元素
示例：在页面中点击“替换”按钮，将歌曲列表中的最后一首歌曲替换成其他歌曲
<script type="text/javascript">
$(function() {
$("input[type='button']").click(function() {
var $li = $("<li> 也许明天————姚贝娜 </li>");
$("ul li:last").replaceWith($li);
});
});
</script>
<body> <h3> 流行歌曲 </h3>
<ul>
<li> 想起————韩雪 </li>
<li> 没那么简单————黄小琥 </li>
<li> 指望————郁可唯 </li>
</ul>
<input type="button" value=" 替换 "/>
</body>
7.3.4 复制节点
在页面中，有时候需要复制某个元素节点。可以通过 clone() 方法实现功能
jQuery 对象.clone();
该方法只是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要将该元素的全部行为也进行复制，那么可以通过 clone(true) 实现
示例：在页面中插入一幅图片，当点击此图片时，将其复制并粘贴在右侧
<script type="text/javascript">
$(function() {
$("img").click(function() {
$(this).clone(true).appendTo($("#p1"));
});
});
</script>
<body>
<p id="p1">
<img src="../img/img_2.jpg"/>
</p>
</body>
7.3.5 删除节点
在操作页面时，删除多余的或指定的页面元素是非常必要的。jQuery 中提供了 remove() 方法来删除元素
jQuery 对象.remove([expr]);
其中参数 expr 为可选项，该参数为筛选元素的 jQuery 表达式，通过该表达式将获取指定的元素，并进行删除
示例：在页面中插入无序列表和按钮，点击按钮时，将无序列表最后一项删除
<script type="text/javascript">
$(function() {
$("input[type='button']").click(function() {
//$("ul li").remove(); // 删除所有的列表项
$("ul li").remove("ul li:last"); // 删除最后一项
});
});
</script>
<body<h3> 流行歌曲：</h3>
<ul>
<li> 一个像夏天一个像秋天————范玮琪 </li>
<li> 想起————韩雪 </li>
<li> 没那么简单————黄小琥 </li>
<li> 指望———郁可唯 </li>
</ul>
<input type="button" value=" 删除 "/></body>
7.3.6 实践练习
7.4 遍历元素
7.4.1 jQuery 中元素的遍历
在 jQuery 中，可以直接使用 each() 方法实现元素的遍历
jQuery 对象.each(callback);
参数 callback 是一个function函数，可以给该函数传递一个index参数，此形参是遍历元素的序号。如果需要在函数体中访问当前遍历到的元素，可以使用 this 关键字
示例：点击“添加边框”按钮后，给页面图片添加边框并设置其 title 属性
<script type="text/javascript">
$(function() {// 页面加载完毕事件
$("input[type='button']").click(function() {
$("img").each(function(index, element) {
//jQuery 对象
//$(this).css("border","2px solid red");
//$(this).attr("title"," 第 "+(index+1)+" 幅风景画 ");
//DOM 对象
this.style.border="2px solid red";
this.title=" 第 "+(index+1)+" 幅风景画 ";});});});
</script>
7.4.2 实践练习
总结：
将 jQuery 对象转换成 DOM 对象，使用 jQuery 中的 get() 方法。DOM对象只需要用 $() 将它包装起来，就可以获得对应的 jQuery 对象
元素样式操作：css()、addClass() 、removeClass() 、toggleClass()
元素内容和值操作：html() 、text() 、val()
元素属性操作：attr(name) ；attr(name,value)
在 jQuery 中操作DOM节点：
- 创建节点：$(html)
- 插入节点：append(content)、appendTo(content) 、prepend(content) 、prependTo(content)、after(content) 、insertAfter(content) 、before(content) 、insertBefore(content)
- 替换节点：replaceWith() 、replaceAll()
- 复制节点：clone()
- 删除节点：remove()
JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】的更多相关文章
- JavaScript交互式网页设计作业目录（作业笔记）
JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...
- JavaScript交互式网页设计笔记 • 【目录】
章节 内容 实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...
- JavaScript交互式网页设计 • 【第6章 初识jQuery】
全部章节 >>>> 本章目录 6.1 jQuery概述 6.1.1 初识 jQuery 6.1.2 jQuery 基本功能 6.1.3 搭建 jQuery 开发环境 6.1 ...
- JavaScript交互式网页设计 • 【第8章 jQuery动画与特效】
全部章节 >>>> 本章目录 8.1 显示隐藏动画效果 8.1.1 show() 方法与hide() 方法 8.1.2 toggle()方法 8.1.3 实践练习 8.2 ...
- JavaScript交互式网页设计 • 【第5章 JavaScript对象】
全部章节 >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...
- JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
全部章节 >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...
- JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】
全部章节 >>>> 本章目录 1.1 JavaScript 概述 1.1.1 JavaScript 简介 1.1.2 JavaScript 的概念和执行原理 1.1.3 J ...
- JavaScript交互式网页设计 • 【第4章 JavaScript文档对象模型】
全部章节 >>>> 本章目录 4.1 文档对象模型简介及属性 4.1.1 文档对象模型概述 4.1.3 实践练习 4.2 document 对象查找 HTML 元素 4.2 ...
- JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】
全部章节 >>>> 本章目录 2.1 JavaScript 自定义函数 2.1.1 函数的定义 2.1.2 函数的调用 2.1.3 函数的参数 2.1.4 函数的返回值 2 ...
随机推荐
- 01 nodejs MVC gulp 项目搭建
文本内容 使用generator-express创建nodejs MVC DEMO 使用gulp实时编译项目 npm安装二进制包,无须再编译wget https://nodejs.org/dist/v ...
- ORACEL 创建DIRECTORY
oracle要直接对文件进行读写必须先创建一个DIRECTORY. 语法如下: CREATE DIRECTORY UTL_FILE_DIR AS '/home/oracle/oradir'; 可以通过 ...
- react-native安卓运行报错：The number of method references in a .dex file cannot exceed 64K.
错误原因:App里面方法数超过64K解决方法:在android/app/build.gradle中添加implementation 'com.android.support:multidex:1.0. ...
- APICloud - 提交项目 点击右键 没有git这个选项
你们是不是也遇到过这个问题,吧项目检出来后,花了很久的时间,好不容易吧项目改完,提交的时候点击鼠标右键,发现git选项没有在里面了,找不到,但是这个问题也不是很常遇到,机率很小,下面我来告诉你们吧 原 ...
- InnoDB学习（三）之BinLog
BinLog又称为二进制日志,是MySQL服务层的数据日志,MySQL所有的存储引擎都支持BinLog.BinLog记录了MySQL中的数据更新和可能导致数据更新的事件,可以用于主从复制或数据恢复.本 ...
- 小飞机可以解决git clone没有返回的问题吗？
[1]Linux如何使用小飞机? 以ss为例,先下载客户端: https://www.mediafire.com/folder/xag0zy318a5tt/Linux 下载客户端以后,右键把权限中&q ...
- Windows下mysql5.6升级到5.7的方法（亲测有效哦！）
Mysql的升级方式分为两种:原地升级和逻辑升级.这两种升级方式,本质没有什么区别的. 只是在对数据文件的处理上有些区别而已.原地升级是直接将数据文件进行拷贝,而逻辑升级对数据文件的处理方式是通过逻辑 ...
- 什么是mysql innodb cluster？
目录 一.简介 二.特性 一.简介 MySQL InnoDB集群提供了一个集成的,本地的,HA解决方案.MySQL InnoDB集群由以下几部分组成: MySQL Servers with Group ...
- CF106A Card Game 题解
Content 一种纸牌游戏有许多张卡牌,每张卡牌有一个套装(S,H,D和 C)和一个等级(按升序排列6,7,8,9,T, J,Q,K,A). 规定以下情况卡牌 A 才能赢卡牌 B: A 有王牌套装, ...
- java 数据类型：集合接口Collection之常用ArrayList；lambda表达式遍历；iterator遍历；forEachRemaining遍历；增强for遍历；removeIf批量操作集合元素(Predicate);
java.util.Collection接口 Java的集合主要由两个接口派生出来,一个是Collection一个是Map,本章只记录Collection常用集合 集合只能存储引用类型数据,不能存储基 ...