第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所示的内容。
jquery对dom的操作常用方法整理_
jquery对dom的操作常用方法整理_Jquery对dom的操作也是很总要的。
1.三个简洁有用的用于 DOM 操作的 jQuery 方法：· text() - 设置或返回所选元素的文本内容· html() - 设置或返回所选元素的内容（包括 HTML 标记）· val() - 设置或返回表单字段的值2.attr()猎取属性。
当然这两也是可以自己设置值来修改的，3.对html内容的添加。
添加新的 HTML 内容我们将学习用于添加新内容的四个 jQuery 方法：· append() - 在被选元素的结尾插入内容· prepend() - 在被选元素的开头插入内容· after() - 在被选元素之后插入内容· before() - 在被选元素之前插入内容4.删除元素/内容如需删除元素和内容，一般可用法以下两个 jQuery 方法：· remove() - 删除被选元素（及其子元素）· empty() - 从被选元素中删除子元素5.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法。
我们将学习下面这些：· addClass() - 向被选元素添加一个或多个类· removeClass()- 从被选元素删除一个或多个类· toggleClass()- 对被选元素进行添加/删除类的切换操作· css() - 设置或返回样式属性例子$("h1,h2,p").addClass("blue");首先我们知道当对多种标签添加样式的时候我们用‘，'分开。
Blue肯定是一个设置好的.Blue{}类选择器$("h1,h2,p").removeClass("blue");$("h1,h2,p").toggleClass("blue");有样式就会移除，没样式就会添加6.设置多个 CSS 属性如需设置多个 CSS 属性，请用法如下语法：css({"propertyname":"value","propertyname":"value", ...});7.jQuery 尺寸方法jQuerywidth() 和height() 方法width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
jquery4
<head>
<title>jQuery事件的链式写法</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
2. 什么是jQuery对象
在jQuery库中，通过本身自带的方法获取页面元素的对象，我们称之为jQuery对象；为了同样实现在ID为"divOut"的标记中显示ID为"divTmp"的标记内容，采用jQuery访问页面元素的方法，其实现的代码如下：
var tDiv=$("#divTmp"); //获取jQuery对象
var oDiv=$("#divOut"); //获取jQuery对象
var cDiv=tDiv.html(); //获取jQuery对象中的内容
oDiv.html(cDiv); //设置jQuery对象中的内容
通过代码的对比，可以看出jQuery对象访问方法比DOM对象访问方法更简单、高效，它们都实现同样的功能。
执行HTML文件1-2.html，实现的页面效果如图1-3所示。
图1-3 DIV元素单击前后的页面对比效果
1.2 jQuery的简单应用
1.2.1 jQuery访问DOM对象
1. 什么是DOM对象
DOM（Document Object Model，文本对象模型）的每一个页面都是一个DOM对象，通过传统的JavaScript方法访问页面中的元素，就是访问DOM对象。
jquery的使用方法
jquery的使用方法jQuery作为一种常用的JavaScript库，其强大的功能和简化代码的方便性让其成为前端开发者中的首选。
以下是在项目中常见的jQuery使用方法的分步骤阐述：1. 引入jQuery库在HTML文件的<head>区域中使用script标签引入jQuery库，通常我们是从官网下载一个jquery-x.x.x.js文件，在引用时需要写正确的路径。
2. jQuery对象的创建要使用jQuery对象，首先需要用jQuery构造函数来创建一个jQuery对象。
这可以使用两种方式创建：1）通过$或jQuery函数创建：例如：$("选择器")或者jQuery("选择器")；2）通过使用jQuery()或$()函数作为参数传递原始DOM元素来创建。
3. 选择器的使用jQuery中的选择器实现了所有的CSS选择器，也支持自定义选择器。
与CSS选择器类似，jQuery选择器是用于选择HTML元素的字符串。
例如：选择id为“content”的元素：$("#content")；选择class为“box”的元素：$(".box")；选择label元素中“for”属性值为“id”的元素：$("label[for='id']")4. 事件处理函数的绑定通过bind()或者on()函数可以给元素绑定事件，例如：$(selector).bind(event,function)绑定事件。
事件可以是click、dblclick、mouseenter等等，函数可以是已定义的函数名，也可以是匿名函数。
5. 样式的操作通过jQuery对象的css()方法设置样式。
例如：$(selector).css('color','#fff')设置字体颜色为白色，$(selector).addClass('className')增加类名为'className'的样式。
jQuery基础教程
jQuery基础教程jQuery是什么？jQuery是⼀个JavaScript常⽤的⼯具函数库。
jQuery是⼀个轻量级的"写的少，做的多"的JavaScript库。
jQuery当中包含有以下⼀些常⽤功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities下⾯的内容当中，我们会逐⼀的介绍jQuery的常⽤内容。
学习jQuery的⼼态以练为主，多看多练以js为基础，更好的理解jQueryjQuery只是js的⼀个函数库，不能忘记jsjQuery的版本问题⽬前jQuery有三个⼤版本，1.xx 、 2.xx 和 3.xx ，三个版本当中，1版本兼容性最⾼，可以有效的兼容ie浏览器，6，7，8，9都能得到⼀个很好的兼容，2版本则最低只能兼容到ie9，⽽3版本则彻底放弃了ie9以下的浏览器。
但是却新增加了很多的使⽤的⽅法，并且代码的安全性也增加很多，例如可以很好的防⽌xss攻击等。
jQuery的使⽤⾸先，我们可以根据需要下载⼀个指定版本的jquery⽂件，当然也可以选择使⽤cdn⽂件。
js 官⽅⽹址: /常⽤CDN:<script src="/jquery/1.10.2/jquery.min.js"></script> 百度CDN中的jQuery<script src="/libs/jquery/jquery-2.0.2.min.js"> </script> 右拍云<script src="/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> 新浪jQuery 中的核⼼语法在jQuery当中，jQuery是⼀个核⼼⽅法，⽤来查找元素从⽽⽅便对元素的操作，可以简写为$。
JQuery的学习和使用
学习要学会总结JQuery 学习大全JQuery 介绍...................................................................................................................................... 2 JQuery 事件...................................................................................................................................... 2 选择器（隐藏元素）....................................................................................................................... 4 使用 JQuery 元素选择器： ..................................................................................................... 5 属性选择器：........................................................................................................................... 5 CSS 选择器：............................................................................................................................ 5 文档就绪函数................................................................................................................................... 6 JQuery 效果...................................................................................................................................... 6 隐藏和显示............................................................................................................................... 6 切换........................................................................................................................................... 8 jQuery 滑动函数 - slideDown, slideUp, slideToggle ................................................. 8 JQuery 自定义动画（还是这个最合人心） ........................................................................ 10 JQuery HTML 操作.......................................................................................................................... 11 改变 HTML 内容....................................................................................................................... 11 添加 HTML 内容....................................................................................................................... 11 JQuery CSS 操作.......................................................................................................................... 11 JQuery Size 操作.......................................................................................................................... 12 JQuery 和 AJAX............................................................................................................................... 13学习要学会总结JQuery 介绍JQuery 是一个 JavaScript 库，但是它极大的简化了 JS 编程，说的再具体一点，就是： JQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 函数库 下面就开始我们的学习旅程吧！看如何通过使用 JQuery 应用 JS 效果。
jQuery基础知识点总结(DOM操作)
jQuery基础知识点总结(DOM操作)下面就为大家带来一篇jQuery基础知识点总结(DOM操作)。
觉得挺不错的，现在就分享给大家，也给大家做个参考。
使用jQuery的方式来操作DOM更加的简洁、方便，统一的调用方式方便学习并且可降低学习成本。
1、样式属性操作1）设置样式属性操作①设置单个样式：// 个参数表示：样式属性名称// 第二个参数表示：样式属性值$(selector).css(“color”, “red”);②设置多个样式（也可以设置单个）// 参数为 {}（对象）$(selector).css({“color”: “red”, “font-size”: “30px”});2）获取样式属性操作// 参数表示要获取的样式属性名称$(selector).css(“font-size”);2、类操作1）添加类样式——addClass(className)为指定元素添加类className$(selector).addClass(“liItem”); //此处类型不带点，所有类操作的方法类名都不带点2）移除类——removeClass(className)为指定元素移除类className$(selector).removeClass(“liItem”);$(selector).removeClass ; //不指定参数，表示移除被选中元素的所有类3）判断有没有类样式——hasClass(className)判断指定元素是否包含类className$(selector).hasClass(“liItem”); //返回值为true 或false4）切换类样式——toggleClass(className)为指定元素切换类className，该元素有类则移除，没有指定类则添加$(selector).hasClass(“liItem”);【注意】1、操作类样式的时候，所有的类名都不带点（.）2、操作的样式非常少，那么可以通过.css 这个方法来操作3、操作的样式很多，那么要通过使用类的方式来操作4、如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。
jQuery开发基础第4章使用jQuery操作DOM
（3）在引入jQuery库的代码下方编写jQuery代码，并应用val()方法获取该多行列表框的值，具体 代码如下：
<script type="text/javascript"> $(document).ready(function(){ $("select").val(['列表项1','列表项2']); alert($("select").val()); });
</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库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容和HTML内容，并
获取设置后的文本内容和HTML内容，具体代码如下：
<script type="text/javascript"> $(document).ready(function(){
jQueryDOM节点操作-父节点、子节点、兄弟节点
jQueryDOM节点操作-⽗节点、⼦节点、兄弟节点 -------------------------------------------------------------------⼦(/孙)节点: .children([selector]). 获得匹配元素集合中每个元素的所有直接⼦元素（选择器可选）。
实例:<div><a href="#"><span>welcome to </span>zhenheinfo</a><p id="p1">欢迎来到臻和信息</p><p id="p2">欢迎来到臻和信息</p></div>操作: $("div").children();结果: 得到<a></a>和<p></p>总共3个节点. 操作: $("div").children("#p1");结果: 得到<p id="p1"></p>节点. .find(selector). 获得当前匹配元素集合中每个元素的后代（选择器必须）。
实例:<div> <a href="#"><span>welcome to </span>zhenheinfo</a> <p id="p1">欢迎来到<span>臻和信息</span></p> <p id="p2">欢迎来到臻和信息</p> </div> 操作: $("div"). find ("span");结果: 得到2个<span></span>节点.兄弟节点: .siblings([selector]). 获得匹配元素集合中所有元素的同辈元素（选择器可选）。
- 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库。