`
残血舞
  • 浏览: 31722 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Jquery 基础函数用法

阅读更多
13.removeAttr(name) 删除属性

eg: <input disabled="disabled"/>

$("input").removeAttr("disabled") ==>> [ <input/> ]
删除元素属性,使用方法与attr(加入元素属性)一样

14.removeClass(class) 删除样式,当class是空时删除所有的样式,如果class为指定样式则删指定样式

eg: <p class="highlight selected first">Hello</p>

$("p").removeClass("selected highlight") ==>> [ <p class="first">Hello</p> ]

$("p").removeClass() ==>> [ <p>Hello</p> ]
删除class样式,使用方法与addClass使用方式一样

15. text() 取得element中的内容text(val) 设置element内容text与html差不多,只是text会把<,>用html标识符替换

eg: <p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>

$("p").text() ==>> [ Test Paragraph.Paraparagraph ];

<p>Test Paragraph.</p>

$("p").text("<b>Some</b> new text."); ==>> [ <p><b>Some</b> new text.</p> ]

$("p").text("<b>Some</b> new text.", true) ==>> [ <p>Some new text. </p> ]

与.html()使用方式相似!

16.toggleClass(class) 这是一个比较有用的方法,就是当element存在参数中的样式的时候取消,如果不存在就设置此样式

eg:<p>Hello</p><p class="selected">Hello Again</p>

$("p").toggleClass("selected")==>[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
很有意思的操作,搜索所有的p元素,查看p元素是否有class为selected的CSS,如果有.就取消,如果没有就添加,例子只是对CSS样子操作,不知对元素属性是否能操作.如果能单选或是复选框会很灵活的使用!

17.val() 取得第一个element的vlaue值 val(val) 设置属性的值

eg: <input type="text" value="some text"/>

$("input").val(); ==>> [ "some text" ]
val()是取值的操作.例子是取input元素中的所有值

设置元素值
$("input").val("test"); ==>> [ <input type="text" value="test"/> ]
设置input元素的值为test

18.1.after(content)给相关的element从后面插入节点

eg: <p>I would like to say: </p>

$("p").after("<b>Hello</b>"); ==>> [ <p>I would like to say: </p><b>Hello</b><b>Hello</b> ]
after()是向指定元素的最后面插入html代码.上面的例子只加入了一次<b>Hello</B>!

<p>I would like to say: </p>

$("p").after( $("b") ); ==>> [<p>I would like to say: </p><b>Hello</b> ]
这个是组合添加.搜索所有的p元素.在p元素后面添加搜索的所有b元素.

18.2.before(content)与after相反是插入到前面

eg: <p>I would like to say: </p>

$("p").before("<b>Hello</b>"); ==>> [ <b>Hello</b><p>I would like to say: </p> ]
这个完全和after相反

19.append(content) 与上面不同的是append是添加把content做为子element

eg: <p>I would like to say: </p>

$("p").append("<b>Hello</b>"); ==>> [<p>I would like to say: <b>Hello</b></p> ]

append 是指和after交换不同的,他是在指定元素的内部最后面加入html代码,做为子元素存在

eg: <p>I would like to say: </p><b>Hello</b>

$("p").append($("b")); ==>> [ <p>I would like to say: <b>Hello</b></p> ]



20.appendto(content)与append刚好相反

eg:<p>I would like to say: </p>
<div id="foo"></div>
$("p").appendTo("#foo"); ==>> [ <div id="foo"><p>I would like to say: </p></div> ]
与append功能相反.把指定的元素或是html代码,加到选择元素的外部.做为选定元素的父元素存在!
分享到:
评论

相关推荐

    jquery基础教程中文版2015

    合理地使用jQuery选择器和方法,结合原生JavaScript,可以优化性能。此外,使用`$(document).ready()`或`$(function() {})`确保DOM加载完成后执行脚本。 九、学习资源 学习jQuery,可以参考jQuery官方文档,阅读...

    jQuery常见函数

    ### jQuery常见函数详解 #### 一、理解jQuery对象 **jQuery对象**是DOM元素的一种封装形式,通过jQuery库提供的API来操作这些元素。相比于原生JavaScript中的DOM操作,使用jQuery对象更加简便高效。 - **创建...

    jquery函数 强大的封装

    标题中的“jquery函数 强大的封装”正揭示了jQuery的核心魅力:它将复杂的JavaScript操作封装成易于理解和使用的函数,极大地降低了前端开发的难度,特别是对于熟悉CSS的人来说,jQuery提供了更便捷的操作DOM(文档...

    jQuery setTimeout()函数使用方法

    setTimeout()从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次 ;和window.clearTimeout一起使用.我在 代码如下:$(document).ready(function(){setTimout(test(),200); function test() { alert&#40;1&#...

    jquery基础教程第四版源码

    《jQuery基础教程第四版》是一本深受欢迎的前端开发指南,专注于jQuery库的使用和实践。jQuery是一个轻量级、高性能的JavaScript库,它极大地简化了JavaScript操作DOM(文档对象模型)、事件处理、动画制作以及Ajax...

    jQuery基础教程源码

    在提供的源码中,读者可以找到各种jQuery技术的实际应用,包括选择器的用法、DOM操作、事件绑定、动画实现以及Ajax请求。每个实例都对应书中的一个教学点,通过查看和运行这些源码,读者可以深入理解jQuery的工作...

    jQuery基础教程(第四版)中文

    通过阅读《jQuery基础教程(第四版)中文》,读者不仅能掌握jQuery的基本用法,还能了解最佳实践和最新趋势。配合提供的"教程重要说明及更新链接点击这个文本.txt",读者可以获取最新的教学资源和更新信息。"jQuery...

    jQuery自定义插件开发基础1——jQuery实用函数的实现

    在本文中,我们将深入探讨jQuery自定义插件的开发基础,特别是如何实现jQuery实用函数。首先,我们需要了解jQuery的核心理念,它是一个轻量级的JavaScript库,极大地简化了DOM操作、事件处理、动画效果和Ajax交互。...

    jQuery基础教程(第四版)中文pdf版+配套源码

    教程会讲解`fadeIn()`, `fadeOut()`, `slideToggle()`等动画函数,以及如何自定义动画效果和使用`animate()`方法。此外,还将涉及`queue()`和`.dequeue()`,理解动画队列的工作原理。 对于Ajax交互,jQuery提供了...

    jQuery基础教程第四版+配套源码

    jQuery的动画功能强大且易于使用,`fadeIn()`, `fadeOut()`, `slideToggle()`等方法可以创建平滑的显示和隐藏效果。`animate()`函数则允许自定义动画,包括改变元素的宽度、高度、透明度等属性。 对于Ajax交互,...

    jquery封装函数,前后端分离框架

    总结,使用jQuery封装函数可以有效地构建前后端分离的框架,通过模块化处理静态页面,使用Ajax进行无刷新的数据交互。与后端语言(如Java)配合,通过RESTful API实现数据交换。在实际开发中,还需要注意性能优化和...

    jQuery事件函数共4页.pdf.zip

    2. **$.on()**:这个函数是jQuery中处理事件的主要方法,它可以绑定一个或多个事件处理器到匹配的元素。例如,`$('div').on('click', function() {...})`将为所有`&lt;div&gt;`元素添加点击事件处理。 3. **$.off()**:与...

    jQuery基础教程第5章中文版

    在IT领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了网页的DOM操作、事件处理、动画制作以及Ajax交互。本教程聚焦于jQuery的基础知识,旨在帮助初学者快速掌握这一强大的工具。以下是关于jQuery基础教程...

    jQuery基础教程源码 第三版

    在"jQuery第三版基础教程"中,你将通过实例代码学习到这些概念,并逐步掌握使用jQuery构建动态网页的技巧。这本书涵盖了从基础到进阶的全部内容,无论你是初学者还是寻求提升,都能从中受益。通过阅读源码,你可以更...

    jQuery基础文件

    在学习和使用jQuery时,你需要理解基本的链式调用、对象和数组操作,以及如何与原生JavaScript方法结合使用。同时,了解如何利用jQuery提高开发效率,减少代码量,优化用户体验,是每个前端开发者必备的技能。 总之...

    jQuery基础教程.pdf

    因此,我将根据文件的标题“jQuery基础教程.pdf”来生成关于jQuery基础的知识点。jQuery是一个快速、小巧、功能丰富的JavaScript库。它简化了HTML文档遍历、事件处理、动画和Ajax交互的过程,极大地提高了Web开发的...

    jQuery 对象和函数列表

    这里是我从Jquery中整理出来的一些对象和函数的用法,加上我自己的一些理解,和各位分享一下

    jQuery基础教程+锋利的jQuery+源代码+jquery1.7.2中文API+jquery-1.7.2.min.js.rar

    "jquery1.7.2_20120420中文版.chm"是jQuery 1.7.2的中文API帮助文档,对于开发者来说,它是查询jQuery函数和方法的宝典。通过查阅这个CHM文件,你可以快速找到特定函数的用法和参数说明,以便在编程时进行参考。 ...

    jQuery基础

    当需要确保页面的DOM完全加载后再运行jQuery代码时,可以使用文档就绪函数$(document).ready()。这个函数确保了在DOM完全加载之后再执行其中的函数体。这种做法可以有效避免在DOM还未完全加载完成时执行代码所带来的...

    jquery基础教程6章

    这一章介绍了jQuery的基本使用方法,包括如何在网页中引入jQuery库,以及如何编写jQuery选择器来选取页面元素。它还会讲解如何使用$函数进行DOM元素的选择和操作,例如通过ID、类名或标签名选取元素,并展示如何利用...

Global site tag (gtag.js) - Google Analytics