Jquery学习（五）—jQuery 文档操作方法
<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<style type="text/css">
.intro{
color: red;
font-size: 30px;
}
#wrapDiv{
color: red;
font-size: 30px;
}
</style>
<script type="text/javascript">
//1向第一个 p 元素添加一个类：addClass()
//语法：$(selector).addClass(class)
$(document).ready(function(){
$("#button1").click(function(){
//向第一个p标间添加一个或多个class 属性之间加一个空格
//设置class属性的css样式
$("p:first").addClass("intro");
});
//2在每个 p 元素结尾插入内容：
//append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器
//语法：$(content).appendTo(selector)
$("#button2").click(function(){
//在每个P标间之后 加上HOLLE WORLD
$("<b>HOLLE WORLD! </b>").appendTo("p");
});
//语法：$(selector).append(content)
$("#button3").click(function(){
//在每个P标间之后 加上HOLLE WORLD
$("p").append("<b>HOLLE WORLD! </b>");
});
//3attr() 方法设置或返回被选元素的属性值
//语法:$(selector).attr(attribute)
$("#button4").click(function(){
//设置
$("img").attr("width","80px");
});
//克隆并追加e某个元素
//语法：$(selector).clone(includeEvents)
$("#button5").click(function(){
$("body").append($("#p1").clone());
});
//detach() 方法移除被选元素，包括所有文本和子节点
//这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
//detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同
//语法：$(selector).detach()
$("#button6").click(function(){
$("#p2").detach();
});
//empty() 方法从被选元素移除所有内容，包括所有文本和子节点
//语法：$(selector).empty()
$("#button7").click(function(){
$("#p2").empty();
});
//remove() 方法移除被选元素，包括所有文本和子节点。
//该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素
//remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不yiyang
$("#button8").click(function(){
$("#p2").remove();
});
//hasClass() 方法检查被选元素是否包含指定的 class
//语法： $(selector).hasClass(class)
$("#button9").click(function(){
alert($("div:first").hasClass("divClass"));
});
//removeAttr() 方法从被选元素中移除属性
//语法：$(selector).removeAttr(attribute)
$("#button10").click(function(){
alert($("p").removeAttr("id"));
});
//removeClass() 方法从被选元素移除一个或多个类
//语法：$(selector).removeClass(class)
$("#button11").click(function(){
$("p").removeClass("intro");
});
//replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。
//该方法与 replaceWith() 执行的任务相同，但颠倒了参数
//语法：$(content).replaceAll(selector)
$("#button12").click(function(){
alert(11);
$("<b><font>===============================</font></b>").replaceAll($("<p>"));
});
//replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。
//该方法与 replaceAll() 执行的任务相同，但颠倒了参数
//语法：$(selector).replaceWith(content)
$("#button13").click(function(){
alert(111);
$("<p>").replaceWith("<b><font>===============================</font></b>");
});
//wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。
//语法:$(selector).wrap(wrapper)
$("#button14").click(function(){
$("#p3").wrap("<div id='wrapDiv'></div>");
});
//wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。
//语法：$(selector).wrapInner(wrapper)
$("#button15").click(function(){
$("#p4").wrapInner(document.createElement("b"));
});
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id="button1">向第一个 p 元素添加一个类</button>
<button id="button2">向每个 p 元素之后用appendTo()加上HOLLE WORLD</button>
<button id="button3">向每个 p 元素之后用append()加上HOLLE WORLD</button>
</p>
<img alt="搞笑" src="images/1.jpg">
<button id="button4">改变图片的大小</button> </p>
<p id="p1">我可以被克隆出来哦...</p>
<button id="button5">复制每个 p 元素id为p1de 然后追加到 body 元素</button></p>
<p id="p2">this is P2</p>
<button id="button6">detach()删除p元素id为p2的 所有元素属性</button>
<button id="button7">empty()删除p元素id为p2的 所有元素属性</button>
<button id="button8">remove()删除p元素id为p2的</button></p>
<div class="divClass">this is p3</div>
<button id="button9">检查第一个div元素是否包含class为divClass的属性</button></p>
<button id="button10">从任何p元素中移除id属性</button><p>
<p class="intro">我的class值是："intro"</p>
<button id="button11">从第一个p元素为P3的中 移除class属性"intro"</button></p>
<button id="button12">replaceAll()用红色粗体=替换所有换行</button>
<button id="button13">replaceWith()用红色粗体=替换所有换行</button></P>
<p id="p3">This is a paragraph.</p>
<button id="button14">wrap()用div替换p元素</button></P>
<p id="p4">This is another paragraph.</p>
<button id="button15">加粗p元素id="p4"段落中的所有内容</button></P>
相关推荐
jQuery 文档操作方法详细列表，里面列出常用的jQuery 文档操作方法语法并且做了详细的说明，是一个不错工具书。
"xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。...
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 31 一.摘要 31 二.前言 31 三. 区分DOM属性和元素属性 31 四. 操作"DOM属性" 32 五. 操作"元素属性" 32 六,修改CSS样式 34 七.获取常用属性 35 八.总结 39 ...
内容包括:jQuery Ajax 操作函数,jQuery 选择器,jQuery 事件处理方法,jQuery 事件方法,jQuery 效果函数,jQuery 文档操作方法,jQuery 属性操作方法,jQuery CSS 操作函数,jQuery 遍历函数
它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式 本资源包含jQuery-3.6.0...
这个文档中包含了jQuery官方出版图书的第四章DOM的操作方法，作为无网状态下使用这个文档还是比较方便的，而且这个是英文的，不会引入不好理解的中文翻译。
·attribute（改进了.attr()的性能）、jQuery()核心函数、CSS（.css()性能有两倍提升）、特效和事件、DOM操作等也有显著改进 1.5 美国时间1月31日John Resig在jQuery官方博客发表文章，宣布jQuery 1.5正式版已经...
从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) AJAX快餐 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery (九) jQuery工具函数 从零开始学习jQuery (十) jQueryUI常用...
最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉，由于很多人和我要chm格式的，所以本次API我提供了2种版本的API，一个还是以前的EXE格式，另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 1.什么是jQuery 认识jQuery 1.什么是jQuery 认识jQuery 什么是jQuery jQuery的特点： ...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括...
原生JS打印插件之jQuery.EasyPrint.js使用文档 调用浏览器自带打印功能，使用JavaScript的 window.print(); 方法。 使用JS实现打印功能；JavaScript 实现打印操作；javascript打印大全；通用；js实现打印的方式；JS...
本文档介绍了jquery的一些函数及方法，以及操作表单的方法！
鉴于这种复杂的体系架构，以及对浏览器缺陷的完善也非短期可以完成，开始为这款机顶盒浏览器移植jQuery，从而开始了对jQuery源码的学习和分析。 从2011年6月开始，开始把心得和记录整理成《jQuery 1.6.1源码分析系列...
第一个简单的jQuery程序 jQuery事件的链式写法 控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 ...
注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementById("msg"))则为jquery对象，可以使用...
本文实例讲述了jquery文档操作wrap()方法。分享给大家供大家参考。具体实现方法如下： wrap()方法：是指用某个标签将某个元素包起来，即在外面多加一层标签。 代码如下:<html> <head> <title>...
jQuery 3.1 中文参考手册，里面有详细的jQuery方法的使用例子，可以很好的帮助新手们学习jQuery的使用。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架...
jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中： 实例 ...
主要介绍了jQuery中DOM常见操作,结合实例形式总结分析了jQuery针对dom属性操作、文档操作等常用方法与操作技巧,需要的朋友可以参考下