第4章 使用 jQuery操作DOM - jQuery开发基础教程
jquery使用方法
jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。
据统计，全世界排名前100万的⽹站，有46%使⽤jQuery，远远超过其他库。
微软公司甚⾄把jQuery作为他们的官⽅库。
对于⽹页开发者来说，学会jQuery是必要的。
因为它让你了解业界最通⽤的技术，为将来学习更⾼级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。
⼀、选择⽹页元素jQuery的基本设计和主要⽤法，就是"选择某个⽹页元素，然后对其进⾏某种操作"。
这是它区别于其他函数库的根本特点。
使⽤jQuery的第⼀步，往往就是将⼀个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。
选择表达式可以是CSS选择器：1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩⼩结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动⽅法：1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后，就可以对它进⾏某种操作。
jQuery入门教程(很不错)
jQuery入门[1]－构造函数/archive/2008/03/05/1091816.html jQuery优点◦体积小（v1.2.3 15kb）◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器（IE6,FF,Safari,Opera）◦链式代码◦强大的事件、样式支持◦强大的AJAX功能◦易于扩展，插件丰富jQuery的构造函数接收四种类型的参数：jQuery(expression,context)jQuery(html)jQuery(elements)jQuery(fn)第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。
DEMO:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>jQuery basic title><style type="text/css">.selected{background-color:Yellow;}style><script src="../scripts/jquery-1.2.3.intellisense.js"type="text/javascript">script>head><body><h3>jQuery构造函数h3><ul><li>jQuery(expression,context)li><li>jQuery(html)li><li>jQuery(elements)li><li>jQuery(fn)li>ul><script type="text/javascript">script>body>html>将以下jQuery代码加入文末的脚本块中：jQuery("ul>li:first").addClass("selected");页面运行效果如下：其中jQuery()可替换为快捷方式$()，如果$被其它对象占用，可使用jQuery.noConflict()函数取消快捷方式。
JavaScript+jQuery前端开发基础教程(第2版)(微课版)第4章
2．设置JavaScript对象属性注册事件处理程序
将函数设置为事件目标对象的事件属性值，也可完成事件处理程序的 注册。
3．使用addEventListener()方法注册事件处理程序
不管是通过设置属性，还是通过调用addEventListener()方法注册的事 件处理程序，在处理程序中调用preventDefault()方法均可阻止事件默认 动作。
在事件处理程序中，也可通过将event.returnValue属性设置为false来阻 止事件默认动作。
4.2.4 阻止事件传播
beforeunload和unload事件处理过程会屏蔽所有用户交互，window.open、alert、 confirm等都无效，不能阻止unload事件。一般在unload事件处理程序中执行一些必要 的清理操作，事实上只有极少的这种需求。
4.2.6 鼠标事件
鼠标事件对象除了拥有事件对象的主要属性外，还有下列常用属性。
stopPropagation()方法：调用该方法可阻止事件传播过程，事件传播路径中的后继节点不 会再接收到该事件。
3．事件处理程序的返回值
事件处理程序的返回值具有特殊意义。 通常，事件处理程序返回false时，会阻止浏览器执行这个 事件的默认动作。 例如，表单的submit事件处理程序返回false时，会阻止提 交表单；单击链接<a>时，会跳转到链接的URL，若在其 click事件处理程序中返回false，则会阻止跳转。
cancelable属性：逻辑值，表示是否能用preventDefault()方法取消对象的默认动作。
《jQuery程序设计》课程标准
《jQuery程序设计》课程标准课程代码：400034 课程类别：理论+实践适用专业：计算机应用技术学时：96编写人：孙婷婷审定负责人：李凌一、课程的性质jQuery是继prototype之后的又一个优秀的Javascript框架。
它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。
此外，数百种为扩展jQuery功能而开发的插件，更使得它几乎成为使用各类客户端脚本编程的必备工具。
《jQuery程序设计》是软件技术专业的核心课程之一，是网页制作技术方向系列课程中的主干课程。
该课程对于实现专业的培养目标、增强学生的就业竞争力具有非常重要的作用，是检验专业教学成果的重要课程，也是评价本专业学生是否掌握学科基础知识、能否综合运用所学知识解决实际问题、是否具备软件开发各种技能的重要课程；本课程的先导课为《HTML网页制作技术》、《CSS网页制作技术》、《JavaScript程序设计》；后续课程为《程序设计》、《顶岗实习》。
二、设计思路高职教育的集中实践教学环节也要明确必要的理论知识深化和拓展的要求，不能局限于单纯的技能训练作用。
单纯的技能训练不是高职教育的理想课程。
本课程设计理念是以职业能力培养为重点，以就业为导向，培养学生具备职业市场所需的职业能力，生涯发展所需的能力和终身学习的能力。
基于工作过程开发课程，以行动导向进行教学设计，以学生为主体，以实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为目标、以施工任务（项目）为载体、理论学习与实践操作结合。
三、课程职业描述与培养目标1 课程职业描述本课程对高端技能型专门人才的培养具有重要意义，通过课程的教学使学生掌握jQuery专业理论知识和实际操作技能，为从事软件技术专业软件开发工程师岗位奠定良好的专业基础。
具备jQuery 技能的人才主要从事基于WEB技术的电子商务及网站开发、维护工作 ,参与开发环境的设计和搭建,承担系统设计、程序设计和开发工作,完成项目相关文档和质量记录 ,解决软件出现的问题和缺陷。
详解jQuery中的DOM操作
详解jQuery中的DOM操作⼤致介绍 jQuery作为JavaScript库，继承并发扬了JavaScript对DOM对象操作的特性，使开发⼈员能⽅便的操作DOM对象。
jQuery中的DOM操作看看DOM操作都有哪些逐⼀来看先写⼀份HTML代码，后⾯的代码将操作这份HTML代码<p title="选择你最喜欢的⽔果">你最喜欢的⽔果？</p><ul><li title="苹果">苹果</li><li title="橘⼦">橘⼦</li><li title="菠萝">菠萝</li></ul>查找节点1、查找元素节点查找节点可以⽤各种各样的选择器来查找$('ul li');2、查找属性节点可以⽤attr()⽅法，参数是⼀个的时候是查找属性，两个的时候是设置属性console.log($('li:eq(2)').attr('title'));//菠萝创建节点1、创建元素节点var $li_1 = $('<li></li>');2、创建⽂本节点var $li_1 = $('<li>⾹蕉</li>');3、创建属性节点var $li_1 = $('<li title="⾹蕉">⾹蕉</li>');插⼊节点1、向每个匹配的元素追加内容$('li:eq(1)').append('<p>⾹蕉</p>');2、将匹配的元素追加到指定元素中$('<p>⾹蕉</p>').appendTo('li:eq(1)');这两种⽅法都是进⾏同⼀个操作，prepend()和prependTo()与上述⽅法类似，不同之处就是在元素内部前插⼊内容3、在每个匹配的元素之后插⼊内容$('li:eq(1)').after('<p>⾹蕉</p>');4、将匹配的元素插⼊到指定的元素后⾯$('<p>⾹蕉</p>').insertAfter('li:eq(1)');这两种⽅法都是进⾏同⼀个操作，before()和insertBefore()与上述⽅法类似，不同之处就是在元素前插⼊内容删除节点1、remove()⽅法当某个节点⽤了remove()⽅法之后，该节点所包含的所有后代节点都将同时删除。
使用jQuery操作 DOM
DOM Core：任何一种支持DOM的编程语言都可 以使用它，如getElementById() HTML-DOM：用于处理HTML文档，如 document.forms CSS-DOM：用于操作CSS，如 element.style.color="green"
提示
JavaScript用于对(x)html文档进行操作，它对这三类 DOM操作都提供了支持
演示示例6：节点属性操作
21/38
插入同辈节点
元素外部插入同辈节点
语法 after(content) 功能 $(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1); $(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul"); $(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1);
appendTo(content) $(A).appendTo(B)表示把A追加到B中 如：$newNode1.appendTo("ul"); prepend(content) $(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1);
prependTo(content $(A). prependTo (B)表示将A前置插入到B中 ) 如：$newNode1. prependTo ("ul");
3/38
本章任务
制作今日团购模块 制作YY安全中心登录框特效 制作会员信息 制作凡客诚品帮助中心页面
html的jquery使用方法
HTML的jQuery使用方法一、简介1.1 什么是jQuery？jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax等常见的操作。
通过jQuery，我们能够以更少的代码完成更多的功能，提高了JavaScript代码的可读性和可维护性。
1.2 为什么要使用jQuery？相比纯粹的JavaScript，jQuery提供了更丰富的API和更简洁的语法，能够大大提高开发效率。
另外，jQuery还兼容了各种浏览器，并且具有良好的扩展性，使得它成为前端开发中不可或缺的工具。
二、引入jQuery2.1 下载jQuery我们需要从官方全球信息湾下载jQuery库文件。
选择合适的版本，然后将文件保存到项目的相应目录下。
2.2 引入jQuery在HTML文件中，通过`<script>`标签将jQuery库文件引入到页面中。
通常情况下，我们会将jQuery的引入放在`<head>`标签的末尾或者`<body>`标签的开始位置。
```html<!DOCTYPE html><html><head><title>使用jQuery的HTML页面</title><script src="jquery.min.js"></script></head><body><!-- 页面内容 --></body></html>```三、基本用法3.1 文档就绪事件在使用jQuery时，为了确保DOM结构已经加载完毕，我们通常会将jQuery代码放在文档就绪事件中。
这可以通过`$(document).ready()`来实现。
```javascript$(document).ready(function(){// 在此处编写jQuery代码```3.2 选择器jQuery的选择器和CSS的选择器非常相似，我们可以使用各种选择器定位页面上的元素，然后对这些元素进行操作。
jQuery开发基础第4章使用jQuery操作DOM
【例4-1】 设置div元素的文本内容 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个<div>元素，令它的文本内容为空，代码如下：
要获取div元素的文本内容，可以使用下面的代码：
$("div").text();
得到的结果为：当前时间：2014-07-06 星期日 13:20:10
说明：text()方法取得的结果是所有匹配元素包含的文本组合起来的文本内容，这个方法也对 XML文档有效，可以用text()方法解析XML文档元素的文本内容。
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容和HTML内容，并
获取设置后的文本内容和HTML内容，具体代码如下：
2．对HTML内容操作 jQuery提供了html()和html(val)两个方法用于对HTML内容进行操作。其中html()用于获取第一 个匹配元素的HTML内容，text(val)用于设置全部匹配元素的HTML内容。例如，在一个HTML页面中， 包括下面3行代码。
<div> <span id="clock">当前时间：2011-07-06 星期三 13:20:10</span> </div>
这时，再应用“$("div").html();”获取div元素的HTML内容时，将得到如图4-3所示的内容。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
成这个任务需要两个步骤。
（1）创建两个新的<p>元素。
（2）将这两个新元素插入到文档中。
第（1）步可以使用jQuery的工厂函数$()来完成，格式如下：
$(html)
$(html)方法可以根据传入的HTML标记字符串，创建一个DOM对象，并且将这个DOM对象包装成一个
jQuery对象后返回。
首先，创建两个<p>元素，jQuery代码如下：
</script>
注意：使用text()方法获取div元素的文本内容时，是将全部匹配的元素中包含的文本内容都获 取出来了，即将div1和div2元素的文本都获取。而使用html()方法获取div元素的HTML内容时，只是 将第一个匹配元素，即div1元素包含的HTML内容显示出来了，并没有显示div2元素的HTML内容。
// 将第1个p元素添加到div中，使它能在页面中显示
$(“div”).append($p_2);
// 也可以采用链式写法： $("div").append($p_1).append($p_2);
运行代码后，新创建的<p>元素将被添加到页面当中。
创建文本节点
两个<p>元素节点已经创建完毕并插入到文档中了，此时需要为它们添加文本内容。具体的jQuery
要获取div元素的文本内容，可以使用下面的代码：
$("div").text();
得到的结果为：当前时间：2014-07-06 星期日 13:20:10
说明：text()方法取得的结果是所有匹配元素包含的文本组合起来的文本内容，这个方法也对 XML文档有效，可以用text()方法解析XML文档元素的文本内容。
</select>
（3）在引入jQuery库的代码下方编写jQuery代码，并应用val()方法获取该多行列表框的值，具体 代码如下：
<script type="text/javascript"> $(document).ready(function(){ $("select").val(['列表项1','列表项2']); alert($("select").val()); });
代码如下：
var $p_1 = $("<p>明日科技</p>"); // 创建第1个p元素，包含元素节点和文本节点，文本节点为“明日科技”
var $p_2 = $("<p>明日图书</p>"); // 创建第2个p元素，包含元素节点和文本节点，文本节点为“明日图书”
$("div").append($p_1);
第4章 使用jQuery操作DOM
本章要求：
DOM操作的分类 对元素的内容和值进行操作 创建节点 查找节点 插入节点 删除、复制与替换节点 遍历节点M
主要内容
1. DOM操作的分类 2. 对元素的内容和值进行操作 3. 对DOM节点进行操作 4. 对元素属性进行操作 5. 对元素的CSS样式操作 6. 综合实例：实现我的开心小农场
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容和HTML内容，并 获取设置后的文本内容和HTML内容，具体代码如下：
<script type="text/javascript"> $(document).ready(function(){ $("#div1").text("<span style='color:#FF0000'>我是通过text()方法设置的HTML内容
（2）在页面的<body>标记中，添加一个包含3个列表项的可多选的多行列表框，默认为后两项被选 中，代码如下：
<select name="like" size="3" multiple="multiple" id="like"> <option>列表项1</option> <option selected="selected">列表项2</option> <option selected="selected">列表项3</option>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加两个<div>标记，这两个<div>标记除了id属性不同外，其他均相 同，关键代码如下：
应用text()方法设置的内容 <div id="div1"> <span id="clock">当前时间：2014-07-06 星期日 13:20:10</span> </div> <br />应用html()方法设置的内容 <div id="div2"> <span id="clock">当前时间：2014-07-06 星期日 13:20:10</span> </div>
4.2.1 对元素内容操作
1．对文本内容操作 jQuery提供了text()和text(val)两个方法用于对文本内容操作，其中text()用于获取全部匹配 元素的文本内容，text(val)用于设置全部匹配元素的文本内容。例如，在一个HTML页面中，包括下 面3行代码。
<div> <span id="clock">当前时间：2014-07-06 星期日 13:20:10</span> </div>
运行本实例，将显示如图4-4所示的运行结果。从该运行结果，我们可以看出，应用text()设置文 本内容时，即使内容中包含HTML代码，也将被认为是普通文本，并不能作为HTML代码被浏览器解析 ，而应用html()设置的HTML内容中所包含的HTML代码就可以被浏览器解析。因此，文本“我是通过 html()方法设置的HTML内容”是红色的，而通过text()方法设置的HTML文本则是按照原样显示的
【例4-1】 设置div元素的文本内容 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个<div>元素，令它的文本内容为空，代码如下：
</span>"); $("#div2").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容
</span>"); alert("通过text()方法获取：\r\n"+$("div").text()+"\r\n通过html()方法获取：
\r\n"+$("div").html()); });
要获取div元素的HTML内容，可以使用下面的代码：
alert($("div").html());
得到的结果如图4-2所示。
图4-2 获取到的div元素的HTML内容
要重新设置div元素的HTML内容，可以使用下面的代码：
$("div").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
</script>
运行本实例，效果如图4-1所示。
图4-1 设置div元素的文本内容 注意：使用text()方法重新设置div元素的文本内容后，div元素原来的内容将被新设置的内容 替换掉，包括HTML内容。例如，对下面的代码 <div><span id="clock">当前时间：2011-07-06 星期三 13:20:10</span></div> 应用“$("div").text("我是通过text()方法设置的文本内容");”设置值后，该<div>标记的内容将 变为 <div>我是通过text()方法设置的文本内容</div>
</script>
运行后将显示如图4-5所示的效果。 图4-5 获取到的多行列表框的值
4.3 对DOM节点进行操作
4.3.1 4.3.2 4.3.3 4.3.4
创建节点 插入节点 删除、复制与替换节点 遍历节点
4.3.1 创建节点
创建元素节点
例如要创建两个<p>元素节点，并且要把它们作为<div>元素节点的子节点添加到DOM节点树上，完
【例4-3】 为多行列表框设置并获取值。 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。