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库的各种功能和用法。jQuery是一款强大的JavaScript库，简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务，使得前端...
通过查阅此文档，开发者可以快速理解和掌握jQuery 1.7中的每一个功能，如如何选择DOM元素、执行DOM操作、处理事件、进行AJAX请求等。同时，它还包含了对新特性、改进和已知问题的说明，对于开发过程中遇到的问题，这...
《jQuery1.2 API 本地帮助文档》是一个用于学习和参考jQuery 1.2版本API的重要资源，以CHM（Compiled Help Manual）格式提供。CHM文件是一种微软编译后的帮助文件，通常包含丰富的索引、搜索功能以及组织有序的内容...
这个“jQuery开发文档”包含了jQuery API和方法的详细说明，是开发者日常工作中不可或缺的参考资料。 ### 1. jQuery 基础 jQuery 的核心概念是选择器，它允许我们轻松地选取HTML元素。例如，`$("p")` 会选择所有...
《jQuery中文文档1.8和1.4的chm文档》是两个版本的jQuery官方文档的中文翻译版，主要用于帮助开发者理解和使用这个广泛应用于Web开发的...无论你是初学者还是有经验的开发者，这些文档都是学习和查阅jQuery的宝贵资源。
### jQuery学习文档详解 #### 一、jQuery简介与特点 **1.1 jQuery定义** - **定义**: jQuery是一个快速、简洁且高效的JavaScript框架，旨在简化HTML文档遍历、事件处理、动画以及Ajax交互等常见的Web开发任务。 -...
jQuery帮助文档是学习过程中不可或缺的参考资料。它详细解释了每个方法的用途、参数和返回值，还包括了大量的示例代码，帮助开发者理解和应用这些功能。 这个压缩包中的"jQuery教程"可能是详细的指南或教程，涵盖从...
jQuery UI 中文帮助文档是学习和解决问题的重要参考，它详细解释了各个组件的使用方法和API。此外，社区论坛、Stack Overflow 和其他在线资源也是获取帮助和分享经验的好地方。 综上所述，jQuery UI 是一个功能强大...
其次，jQuery提供了丰富的DOM操作方法，如`.append()`用于在元素内部添加内容，`.prepend()`用于在元素开头添加内容，`.remove()`用于删除元素，以及`.html()`、`.text()`和`.attr()`用于获取或设置元素的HTML、文本...
jQuery提供了丰富的DOM操作方法，如`$(selector).html()`用于设置或获取元素的HTML内容，`$(selector).append()`用于在元素内部添加内容，`$(selector).remove()`用于移除元素，以及`$(selector).clone()`用于复制...
jQuery是JavaScript的一个强大的库，它极...总之，这个压缩包提供了两个经典的jQuery版本和相应的帮助文档，对于学习和使用jQuery进行前端开发是非常有价值的参考资料。无论是新手还是经验丰富的开发者，都能从中受益。
**jQuery文档预览功能插件详解** 在网页开发中，为用户提供便捷的文档预览功能是提高用户体验的重要一环。jQuery作为一个广泛使用的JavaScript库，提供了许多便利的插件来简化这种功能的实现。本篇文章将深入讲解...
《jQuery API 3.3.1中文文档》是前端开发者不可或缺的重要参考资料，它详细阐述了jQuery库3.3.1版本的各项功能和方法，帮助开发者更高效地进行网页交互和DOM操作。jQuery作为一款广泛使用的JavaScript库，极大地简化...
总的来说，这个jQuery API帮助文档集合是开发者学习和调试jQuery代码的宝贵资源。无论是初学者还是经验丰富的开发者，都可以从中受益，更好地利用jQuery提高开发效率，创建出高性能和易用的Web应用程序。通过深入...
- 这个文档版本是针对中文用户设计的，使国内开发者能更方便地学习和查阅jQuery 1.1的API，提高学习效率。 总之，jQuery 1.1中文文档为开发者提供了详尽的参考，涵盖了从基本操作到高级特性的所有内容。无论你是...
- jQuery文档提供了全面的API参考，涵盖了所有可用的方法、属性和选择器，是学习和使用jQuery的关键资源。 - 它详细解释了每个方法的参数、返回值和示例，帮助开发者理解和应用这些功能。 - 文档还包含教程和最佳...
3. **DOM操作（DOM Manipulation）**：jQuery提供了丰富的DOM操作方法，包括添加、删除和修改元素，如`$("div").append("<p>Hello</p>")`在每个div后添加一个段落。 4. **事件处理（Events）**：jQuery统一了事件...
jQuery EasyUI 1.2 是一款强大且易用的前端框架，通过官方离线文档，开发者可以系统地学习和应用这个框架。无论是快速构建原型，还是打造复杂的Web应用，jQuery EasyUI都能成为得力的工具。在实际开发中，结合“教程...