jQuery学习笔记 操作jQuery对象 文档处理

下面就是一些常用方法，格式为$(selector).方法，其中$(selector)即当前选定元素：

移动元素





























方法

描述

append($(selector))

向当前元素的内部追加内容

appendTo($(selector))

将当前元素在某元素内部追加。但由于会根据需要对当前元素进行移动，所以jQuery对象更改了，可用end()还原

prepend($(selector))

向当前元素的内部前置内容

prependTo($(selector))

将当前元素在某元素内部前置。类似于appendTo()，会改变对象

after($(selector))

向当前元素之后插入内容

insertAfter($(selector))

将当前元素插入到某元素之后。类似于appendTo()，会改变对象

before($(selector))

向当前元素之前插入内容

insertBefore($(selector))

将当前元素插入到某元素之前。类似于appendTo()，会改变对象

添加元素











方法

描述

$(html)

创建生成jQuery对象。根据原始HTML代码字符串，创建指向新元素的jQuery对象，再利用移动方法来添加到文档中

clone()

复制生成jQuery对象。复制当前选定页面元素，生成副本元素的jQuery对象，同样利用移动方法来添加到文档中。而且clone()指向副本，相当于更改了jQuery对象，所以可用一次end()还原到当前选定元素；二次end()则彻底还原对jQuery对象的更改

替换元素











方法

描述

replaceWith($(selector))

replaceWith($(html))

移动页面上原有的元素来替换当前选定的页面元素，也可以添加新元素来替换

replaceAll($(selector))

replaceAll($(html))

用当前选定的元素来替换某元素，可以使页面上原有元素，也可以是新元素。同样会根据需要复制当前元素副本，从而更改jQuery对象

包裹元素

















方法

描述

wrap($(selector))

wrap($(html))

复制页面上原有的元素来包裹当前选定的元素，也可以添加新元素来包裹

unwrap()

用来去除当前元素的父元素，但是父元素内部的文本内容依旧保留

wrapAll($(selector))

复制页面原有元素把所有当前选定元素包裹在一起，不同于wrap()分别包裹每个元素

wrapInner($(selector))

复制页面原有元素把分别包裹每个当前选定元素内部的文本和后代元素，不同于wrap()分别包裹每个元素本身

删除和清空元素














方法

描述

remove()

删除当前元素，该元素包含的文本内容和后代元素会一起删除掉，绑定的事件也不复存在

detach()

同样是删除当前元素，但是绑定的事件还是存在的

empty()

清空当前元素，该元素的文本内容和后代元素都将删除，但保留其本身

赞 (0)

相关推荐

  • 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合了一些书籍内容,总结一下.先说一下ready函数的实现思路:变量ready通过表达式赋值,右侧为一个自执行匿名函数,在这个匿名函数中,首先为各个浏览器的事件绑定处理函数,并为isReady赋值(根据事件异步处理程序来确定),然后返回一个传参闭包,在闭包中,主要判断isReady值来执行操作,如果dom

  • jQuery的ready方法详解

    jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码 复制代码 代码如下: DOMContentLoaded = function()  {          //取消事件监听,执行ready方法     if ( document.addEventListener )     {             

  • 详解Jquery实现ready和bind事件

    讲这一节之前,先回顾之前一段代码: (function (win) { var _$ = function (selector, context) { return new _$.prototype.Init(selector, context); } _$.prototype = { Init: function (selector, context) { this.elements = []; var context = context || document; if (context.qu

  • Jquery 基础学习笔记之文档处理

    主要包括以下几部分:(1)内部插入(2)外部插入(3)包裹(4)替换(5)删除(6)赋值.那我们就开始详细地看一下. 1.内部插入:向一些元素的内部插入内容 (1)append(content) :向每个匹配的元素内部追加内容,追加到元素内部的末尾,比如 描述: 向所有段落中追加一些HTML标记. HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").append("<b>Hello

  • jQuery中ready事件用法实例

    本文实例讲述了jQuery中ready事件用法.分享给大家供大家参考.具体分析如下: 此事件会在文档加载就绪以后触发,也就是当DOM对象已经加载,并且网页内容全部呈现时候触发. ready()方法可以为ready事件绑定事件处理方法,并且此方法的选择器是唯一的,那就是document对象. 语法形式有三种,后两种是第一种的简写. 语法结构: 语法一: 复制代码 代码如下: $(document).ready(function) 语法二: 复制代码 代码如下: $().ready(function

  • Jquery中"$(document).ready(function(){ })"函数的使用详解

    Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready(function(){}); 使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧,就是它了)的操作. 比如jquery写法:$("div p"); // (1)$("div.container"); // (2)$

  • jQuery.holdReady()方法用法实例

    本文实例讲述了jQuery.holdReady()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以暂停或者恢复jQuery.ready()事件. 调用此方法可以延迟jQuery的ready事件,也就是说尽管文档已经加载完成,也不会执行ready事件处理方法. 可以多次调用jQuery.holdReady()方法,以延迟jQuery的ready事件,当满足一定条件时,再通过将此方法的参数设置为false,一一解除延迟.方法一般用于动态脚本加载,知道脚本加载完成然后再通过将此方法的参数设置

  • jquery中的$(document).ready()使用小结

    window.onload = function(){ alert("welcome"); }这样的写法作用是希望在页面加载完,自动执行定义js代码(function). $(document).ready(function(){.... })这个函数是用来取代页面中的window.onload; document.ready()和传统的方法<body onload="load()"> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括

  • jquery $(document).ready()和window.onload的区别浅析

    jquery $(document).ready()和window.onload的区别浅析

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间         window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同          window.onload不能同时编写多个,如果有多个window.onl

  • jquery中ready()函数执行的时机和window的load事件比较

    jquery的ready()实现的是 DOMContentLoaded 事件,DOMContentLoaded与window load事件的区别 简单的说ready()是在文档加载完成就会触发,此时图片等资源可能还没有完全加载, load是在所有资源都加载完成后才会触发 看下ready函数的代码就什么都清楚了.下面的代码加上了注释: // Handle when the DOM is ready ready: function() { // Make sure that the DOM is n

  • JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法window.onload没有简化写法$(document).r

  • jQuery的文档处理程序详解

    本文实例讲述了jQuery的文档处理程序.分享给大家供大家参考,具体如下: jQuery文档处理程序 所谓的文档处理程序,是指jQuery中提供的$(document).ready事件,此事件会在dom加载完毕后触发,而window.onlaod和body.onload都是在页面完全加载后触发. jQuery文档处理程序介绍 在jQuery中想实现在DOM加载完毕后的处理逻辑,只需要使用$(document).ready()事件.此事件函数称为"jQuery文档处理程序". 可以在页面

随机推荐