首页 jQuery

jQuery

  • 大数字转换为万、亿、万亿jquery代码

    大数字转换为万、亿、万亿jquery代码

        function strNumSize(tempNum) {         var stringNum = tempNum.toString();         var index = stringNum.indexOf(&...

    jQuery 2019-11-19 121 0
  • jQuery源码解析(二十四)DOM操作模块包裹元素详解

    jQuery源码解析(二十四)DOM操作模块包裹元素详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法:wrap(html)      ;在每个匹配元素的外层添加一层DOM元素         ;该方法会遍历匹配元素集合,在每个元素上调用.wrapAll()方法  ;不同于wrapAll()的是该方法会在每个匹配元素外面都套一层html元素。wrapAll(html)   ;会将html转化为一个DOM节点并放在第一个匹配元素的...

    jQuery 2019-11-16 58 0
  • jQuery源码解析(二十三)DOM操作模块替换元素详解

    jQuery源码解析(二十三)DOM操作模块替换元素详解

    本节说一下DOM操作模块里的替换元素模块,该模块可将当前匹配的元素替换指定的DOM元素,有两个方法,如下:replaceWith(value)  ;使用提供的新内容来替换匹配元素集合中的每个元素。value是新内容,可以是html字符串、DOM元素、jQuery对象或返回新内容的函数。replaceAll(value)  ;使用匹配元素集合中的元素替换目标元素。内部执行.replaceWith(value)方法,只是语法顺序上不同。类似于append()和appendTo()。举个栗子:<...

    jQuery 2019-11-16 58 0
  • jQuery源码解析(二十二)DOM操作模块复制元素详解

    jQuery源码解析(二十二)DOM操作模块复制元素详解

    本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下:$.clone(elem, dataAndEvents, deepDataAndEvents) ;jQuery底层方法,返回DOM引用 ;elem是要复制的DOM元素,dataAndEvents和deepDataAndEvents分别表示是否复制克隆元素的数据和事件 和 是否复制深度复制数据和事件$.fn.clone(dataAndEvents,d...

    jQuery 2019-11-16 56 0
  • jQuery源码分析(二十一)DOM操作模块删除元素详解

    jQuery源码分析(二十一)DOM操作模块删除元素详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个:empty()               ;移除匹配元素的所有子元素。  ;先移除所有后代元素关联的数据和事件,以避免内存泄漏。然后移除子元素。remove(selector,keepData) ;从匹配元素中移除selector元素。 ;s...

    jQuery 2019-11-16 50 0
  • jQuery源码分析(二十)DOM操作模块插入元素详解

    jQuery源码分析(二十)DOM操作模块插入元素详解

    jQuery的DOM操作模块封装了DOM模型的insertBefore()、appendChild()、removeChild()、cloneNode()、replaceChild()等原生方法。分为5个子模块来实现:插入元素、删除元素、复制元素、替换元素和包裹元素,本节讲解第一个子模块:插入元素插入元素模块可用于新增DOM节点,修改文本节点等,API如下:append(content)   ;在被选元素子节点的末尾插入指定内容,内部调用appendChild(elem)方法 ;content可以是HTML代码、函...

    jQuery 2019-11-16 59 0
  • jQuery源码分析(十九)DOM遍历模块详解

    jQuery源码分析(十九)DOM遍历模块详解

    jQuery的DOM遍历模块对DOM模型的原生属性parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling进行了封装和扩展,用于在DOM树中遍历父元素、子元素和兄弟元素。可以通过jQuery的实例来访问,方法如下:parent()         ;获取匹配元素的父元素parents(selector)     ;获取匹配元素的所有祖先元素                  ;sel...

    jQuery 2019-11-16 53 0
  • jQuery源码分析(十八)ready事件详解

    jQuery源码分析(十八)ready事件详解

    ready事件是当DOM文档树加载完成后执行一个函数(不包含图片,css等),因此它的触发要早于load事件。用法:$(document).ready(fun)    ;fun是一个函数,这样当DOM树加载完毕后就会执行该匿名函数了ready有一个简写,可以直接传入$(fun)即可,这是因为在jQuey内部也定义了一个$(document)的jQuery对象,和我们在上面的写法是一样的ready事件和window的onload区别:ready事件  ;等dom树载完毕后就可以执行onload事件  ;等网页中所有的...

    jQuery 2019-11-16 51 0
  • jQuery源码分析(十七)事件系统模块实例方法和便捷方法详解

    jQuery源码分析(十七)事件系统模块实例方法和便捷方法详解

    实例方法和便捷方法是指jQuery可以直接通过链接操作的方法,是通过调用$.event上的方法(上一节介绍的底层方法)来实现的,常用的如下:on(types,selector,data,fn,one)  ;为匹配元素集合中的每个元素绑定一个或多个类型的事件监听函数types    ;事件类型字符串,多个事件类型之间用空格隔开selector   ;可选,是一个选择器表达式字符串,用于绑定代理事件。data     ;传递给事件监听函数的自定义数据,可以是任何类型。fn      ;待绑...

    jQuery 2019-11-16 42 0
  • jQuery源码分析(十六)事件系统模块底层方法详解

    jQuery源码分析(十六)事件系统模块底层方法详解

    jQuery事件系统并没有将事件监听函数直接绑定到DOM元素上,而是基于数据缓存模块来管理监听函数的,事件模块代码有点多,我把它分为了三个部分:分底层方法、实例方法和便捷方法、ready事件来讲,好理解一点。jQuery的事件分为普通事件和代理事件:普通事件  ;当我们再div上定义一个click事件,此时如果点击div或按钮都会触发该普通事件,这是由于冒泡的缘故代理事件  ;当我们在div上定义一个代理事件,且selector设置为button时,我们点击div将不会触发该事件,只有点击了这个按钮才会触发这个代理...

    jQuery 2019-11-16 44 0
  • jQuery源码分析(十五)数据操作模块val详解

    jQuery源码分析(十五)数据操作模块val详解

    jQuery的属性操作模块总共有4个部分,本篇说一下最后一个部分:val值的操作,也是属性操作里最简单的吧,只有一个API,如下:val(vlaue)  ;获取匹配元素集合中第一个元素的当前值,或者设置匹配元素集合中每个元素的值,有三种用法:val()      ;没有参数,获取第一个匹配元素的当前值val(value)     ;为每个匹配元素设置value值  ;如果为null则表示设置值为空val(func)      ;设置每个匹配元素为函数func返回的值...

    jQuery 2019-11-16 50 0
  • jQuery源码分析(十四)数据操作模块类样式操作详解

    jQuery源码分析(十四)数据操作模块类样式操作详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下:addClass(value)      ;为匹配元素集合中的每个元素添加一个或多个类样式,通过修改DOM属性className来修改类样式,value可以是个以空格分隔的类样式或者一个函数(返回一个或多个以空格分隔的类样式)hasClass(selector)      ;检测匹配元素中的任意元素是否含有指定的...

    jQuery 2019-11-16 41 0
  • jQuery源码分析(十三)数据操作模块DOM属性详解

    jQuery源码分析(十三)数据操作模块DOM属性详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DOM属性的静态方法接口如下: prop(elem, name, value) ;设置或读取DOM属性,有两种用法,如下       ·$.prop(elem,name,value) ;传入第三个参数表示设置elem元素的name属性值为value      ·$.p...

    jQuery 2019-11-16 39 0
  • jQuery源码分析(十二)数据操作模块html特性详解

    jQuery源码分析(十二)数据操作模块html特性详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第1个部分:HTML特性部分,html特性部分是对原生方法getAttribute()和setAttribute()的封装,用于修改DOM元素的特性的jQuery的静态方法含有如下API:$.attr(elem, name, value)  ;设置或读取html属性,该方法有三种用法:&middot;$.attr(elem,name,null)   ;如果value为null则调用jQuery.removeAttr(elem, name)删除该属...

    jQuery 2019-11-16 44 0
  • jQuery源码分析(十一)队列模块Queue详解

    jQuery源码分析(十一)队列模块Queue详解

    队列是常用的数据结构之一,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队)。特点是先进先出,最先插入的元素最先被删除。在jQuery内部,队列模块为动画模块提供基础功能,负责存储动画函数、自动出队并执行动画函数,同时还要确保动画函数的顺序执行。jQuery的静态方法含有如下API:$.queue(elem,type,data) ;返回或修改匹配元素关联的队列,返回最新的队列,参数如下:                elem   ;DOM元素或JavaScript对象      ...

    jQuery 2019-11-16 49 0