`
zhengtianbing123
  • 浏览: 55166 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

jQuery函数学习

阅读更多
函数:after(content)
功能:在每个匹配的元素后面添加html内容
返回:jQuery对象
参数:content (<Content>): Content to insert after each target.
例子:
Inserts some HTML after all paragraphs.

jQuery Code
$("p").after("<b>Hello</b>");
Before
<p>I would like to say: </p>
Result:
<p>I would like to say: </p><b>Hello</b>

Inserts an Element after all paragraphs.

jQuery Code
$("p").after( $("#foo")[0] );
Before
<b id="foo">Hello</b><p>I would like to say: </p>
Result:
<p>I would like to say: </p><b id="foo">Hello</b>

Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.

jQuery Code
$("p").after( $("b") );
Before
<b>Hello</b><p>I would like to say: </p>
Result:
<p>I would like to say: </p><b>Hello</b>


函数:append(content)
功能:在每个匹配元素之内添加content内容
返回:jQuery对象
参数:content (<Content>): Content to append to the target
例子:
Appends some HTML to all paragraphs.

jQuery Code
$("p").append("<b>Hello</b>");
Before
<p>I would like to say: </p>
Result:
<p>I would like to say: <b>Hello</b></p>

Appends an Element to all paragraphs.

jQuery Code
$("p").append( $("#foo")[0] );
Before
<p>I would like to say: </p><b id="foo">Hello</b>
Result:
<p>I would like to say: <b id="foo">Hello</b></p>

Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.

jQuery Code
$("p").append( $("b") );
Before
<p>I would like to say: </p><b>Hello</b>
Result:
<p>I would like to say: <b>Hello</b></p>


函数:appendTo(content)
功能:和append(content)类似,只不过是将前面匹配的元素添加到后面的元素内
返回:jQuery对象
参数:content (<Content>): Content to append to the selected element to.
例子:
Appends all paragraphs to the element with the ID "foo"

jQuery Code
$("p").appendTo("#foo");
Before
<p>I would like to say: </p><div id="foo"></div>
Result:
<div id="foo"><p>I would like to say: </p></div>


函数:before(content)
功能:在匹配元素之前添加内容
返回:jQuery对象
参数:content (<Content>): Content to insert before each target.
例子:
Inserts some HTML before all paragraphs.

jQuery Code
$("p").before("<b>Hello</b>");
Before
<p>I would like to say: </p>
Result:
<b>Hello</b><p>I would like to say: </p>

Inserts an Element before all paragraphs.

jQuery Code
$("p").before( $("#foo")[0] );
Before
<p>I would like to say: </p><b id="foo">Hello</b>
Result:
<b id="foo">Hello</b><p>I would like to say: </p>

Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.

jQuery Code
$("p").before( $("b") );
Before
<p>I would like to say: </p><b>Hello</b>
Result:
<b>Hello</b><p>I would like to say: </p>


函数:clone(deep)
功能:克隆dom元素
返回:jQuery对象
参数:deep (Boolean): (可选的) 是否克隆子节点及其自身
例子:
Clones all b elements (and selects the clones) and prepends them to all paragraphs.

jQuery Code
$("b").clone().prependTo("p");
Before
<b>Hello</b><p>, how are you?</p>
Result:
<b>Hello</b><p><b>Hello</b>, how are you?</p>


函数:empty()
功能:移除匹配元素的子节点
返回:jQuery对象
例子:
jQuery Code
$("p").empty()
Before
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
Result:
[ <p></p>


函数:insertAfter(content)
功能:将匹配元素插入到content插入到之后
返回:jQuery对象
参数:Content to insert the selected element after
例子:
jQuery Code
$("p").insertAfter("#foo");
Before
<p>I would like to say: </p><div id="foo">Hello</div>
Result:
<div id="foo">Hello</div><p>I would like to say: </p>


函数:insertBefore(content)
功能:将匹配元素插入到content插入到之前
返回:jQuery对象
参数:Content to insert the selected element before.
例子:
jQuery Code
$("p").insertBefore("#foo");
Before
<div id="foo">Hello</div><p>I would like to say: </p>
Result:
<p>I would like to say: </p><div id="foo">Hello</div>


函数:prepend(content)
功能:与append相反,append是添加到匹配元素子节点之后,prepend是添加到匹配元素子节点之前
返回:jQuery对象
参数: Content to prepend to the target.
例子:
jQuery Code
$("p").prepend("<b>Hello</b>");
Before
<p>I would like to say: </p>
Result:
<p><b>Hello</b>I would like to say: </p>

jQuery Code
$("p").prepend( $("#foo")[0] );
Before
<p>I would like to say: </p><b id="foo">Hello</b>
Result:
<p><b id="foo">Hello</b>I would like to say: </p>

$("p").prepend( $("b") );
Before
<p>I would like to say: </p><b>Hello</b>
Result:
<p><b>Hello</b>I would like to say: </p>


函数:prependTo(content)
功能:将前面元素添加到后面元素子节点的前面
返回:jQuery对象
参数:content (<Content>): Content to prepend to the selected element to.
例子:
jQuery Code
$("p").prependTo("#foo");
Before
<p>I would like to say: </p><div id="foo"><b>Hello</b></div>
Result:
<div id="foo"><p>I would like to say: </p><b>Hello</b></div>


函数:remove(expr)
功能:移除匹配元素
功能:jQuery对象
参数:expr (String): (optional) A jQuery expression to filter elements by.
例子:
jQuery Code
$("p").remove();
Before
<p>Hello</p> how are <p>you?</p>
Result:
how are

jQuery Code
$("p").remove(".hello");
Before
<p class="hello">Hello</p> how are <p>you?</p>
Result:
how are <p>you?</p>


函数:wrap(html)
功能:对匹配元素用html包裹起来
返回:jQuery对象
参数:
例子:
jQuery Code
$("p").wrap("<div class='wrap'></div>");
Before
<p>Test Paragraph.</p>
Result:
<div class='wrap'><p>Test Paragraph.</p></div>


函数:wrap(elem)
功能:对指定元素用html包裹起来
参数:
例子:
jQuery Code
$("p").wrap( document.getElementById('content') );
Before
<p>Test Paragraph.</p><div id="content"></div>
Result:
<div id="content"><p>Test Paragraph.</p></div>
Tag标签: jquery,jquery函数,append函数,clone函数,empty函数,wrap函数,remove函数
分享到:
评论

相关推荐

    jquery手册jquery的学习jquery的学习

    "jQueryAPI_CHM.CHM"是jQuery的离线API文档,是学习和查询jQuery函数及方法的重要参考资料。通过阅读此文档,你可以详细了解每个函数的用法、参数和返回值。 总结: jQuery的学习需要从基础选择器和DOM操作开始,...

    jquery函数包及中文提示包

    标题中的“jquery函数包”指的是这个压缩包包含的jQuery核心库文件,即`jquery-1.3.2.min.js`。这个版本的jQuery是在2009年发布的,虽然现在已经有了更新的版本,但1.3.2仍然是许多项目中仍然使用的稳定版本。`.min....

    jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结

    - **jQuery对象**:使用`$()`函数选择的元素集合,可以执行jQuery特有的方法。 - **DOM对象**:原生JavaScript中的DOM元素,只能使用DOM API操作。 转换关系: - DOM对象转jQuery对象:`$(domElement)`。 - ...

    JQuery学习网站

    通过这个文件,你可以查找详细的函数说明、参数列表和使用示例,是学习和查阅jQuery API的重要参考资料。在Windows环境下,双击打开CHM文件,可以按照索引或搜索功能找到所需信息。 总之,jQuery是一个强大的...

    50个jQuery函数演示-SmashingMagazinePost的完整代码___下载.zip

    现在,这个压缩包“50个jQuery函数演示-SmashingMagazinePost的完整代码___下载.zip”中包含了这些示例的完整代码,让我们一同探索和学习这些实用的jQuery函数。 1. **选择器(Selectors)**:jQuery的选择器使得...

    jquery学习笔记及常用函数封装.zip

    在实践中,你还可以尝试封装一些常用的jQuery函数,这样可以提高代码的复用性和可维护性。 除了JavaScript文件,`jquery-ui.min.css`是jQuery UI的样式文件,确保UI组件的外观和布局。学习如何与CSS配合,调整UI...

    JQuery学习资料与源代码

    - 阅读文档:官方文档是学习jQuery的重要资源,它详尽地解释了每一个函数和方法的使用。 - 解决问题:遇到问题时,尝试自己解决,如果必要,可以查阅在线论坛、Stack Overflow等社区寻求帮助。 综上所述,这个...

    jquery零碎实例和学习心得

    `jquery-1.2.6.js` 文件是jQuery 1.2.6的核心库文件,你可以通过查看源代码来学习jQuery的内部实现和函数结构,这对于深入理解jQuery的工作原理很有帮助。 `jQuery官方UI插件.rar` 包含了jQuery UI库,这是jQuery的...

    jquery 教程 jQuery学习资料 jQuery学习

    jQuery API_CHM.CHM文件包含了jQuery的完整文档,其中详细列出了jQuery的所有函数、方法和属性。以下是一些关键API的简介: 1. `$()`: 这是jQuery的主要构造函数,用于创建jQuery对象,通常用于包裹HTML元素或选择...

    适合学习jQuery的学习讲义

    jQuery学习讲义 jQuery是一种JavaScript函数库,它的设计理念是“写的更少,做的更多”。jQuery提供了多种功能,包括HTML元素的选取、DOM元素的选取、CSS操作、JavaScript事件函数、JavaScript特效和动画、DOM元素...

    jQuery基础.pptx

    1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? jQuery是一个JavaScript函数库 轻量级,“写的少,做的多” 包含以下功能: HTML元素选取 HTML元素操作 CSS操作 HTML...

    最新JQuery类库 -- JQuery1.4

    **jQuery 1.4:一个高效、易用的JavaScript库** ...无论你是初学者还是经验丰富的开发者,jQuery 1.4都是值得学习和使用的工具。通过深入理解和实践,你可以构建出功能强大且用户体验优秀的Web应用。

    jquery基础学习插件实例大全

    《jQuery基础学习插件实例大全》是一套针对初学者及有一定JavaScript基础的开发者设计的教程,旨在通过实例化的教学方式,帮助用户快速掌握jQuery的核心功能和常见插件的使用。教程分为三个部分,即“jQ学习第一季”...

    JQuery学习手册.rar

    《JQuery学习手册》是一份全面且深入的资源,旨在帮助开发者掌握JavaScript库JQuery的核心概念和实用技巧。这份手册不仅包含理论知识,还有实践应用的案例,是初学者和经验丰富的开发者提升JQuery技能的理想参考资料...

    jQuery学习文档

    学习 jQuery,你需要掌握基本的选择器语法,理解如何选取和操作 DOM 元素,以及如何使用事件处理函数来响应用户行为。此外,了解 jQuery 的动画效果、Ajax 功能和插件系统也是进阶学习的重要内容。通过实践和不断...

    jQuery插件开发学习

    这篇“jQuery插件开发学习”的主题旨在帮助开发者深入理解如何利用jQuery来开发自定义插件,提高代码复用性和项目效率。下面我们将详细探讨jQuery插件开发的相关知识点。 首先,了解jQuery的核心概念是至关重要的。...

    Jquery插件-通用基本函数

    Jquery Map Request DIV居中 Windows /** * MAP拥有JAVA HashMap函数基本特性 * @Attribute datas 数据源 * @Attribute size 数据长度 * @Function containsKey(key) 判断KEY是否存在 * @Function contains...

    JQuery学习资料

    首先,`jquery1.4 API`是JQuery 1.4版本的官方API文档,它详细列出了该版本的所有函数、方法和属性。通过学习API,你可以了解到如何使用选择器选取DOM元素、如何操作DOM结构、如何绑定和触发事件以及如何进行AJAX...

    jQuery学习指南

    【jQuery学习指南】 jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript编程,提高了网页开发的效率。jQuery的核心理念是“write less, do more”,通过提供一系列强大的API,开发者可以便捷地处理DOM...

    Jquery学习笔记Jquery学习笔记

    本笔记中,我们学习了使用Jquery来实现Ajax异步交互,包括使用$.get()方法来发送Get请求、使用回调函数来处理服务器端的返回数据。 四、XMLHttpRequest对象的基本应用 XMLHttpRequest对象是javascript中实现Ajax...

Global site tag (gtag.js) - Google Analytics