码迷,mamicode.com
首页 > Web开发 > 详细

初识jQuery

时间:2018-08-09 23:02:58      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:turn   UNC   select   内部使用   rop   2.3   直接   通过   roo   

初识jQuery

1、jQuery本质

(function( window, undefined ) { var jQuery = function( ) { return new jQuery.prototype.init( ); } jQuery.prototype = { constructor: jQuery } jQuery.prototype.init.prototype = jQuery.prototype; window.jQuery = window.$ = jQuery; })( window ); 1.1.jQuery的本质是一个闭包 jQuery为什么要使用闭包来实现?为了避免多个框架的冲突 1.2、jQuery采用了面向对象的方法,jQuery是原始类名,$符号和jQuery等价 1.3.jQuery如何让外界访问内部定义的局部变量:window.xxx = xxx; 1.4.jQuery为什么要给自己传递一个window参数? 为了方便后期压缩代码,提升查找的效率 1.5.jQuery为什么要给自己接收一个undefined参数? 为了方便后期压缩代码 IE9以下的浏览器undefined可以被修改, 为了保证内部使用的undefined不被修改, 所以需要接收一个正确的undefined

2、jQuery构造方法

jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } 传参处理: 2.1、不传参或传递空字符串、null、undefined、NaN、0、false时,返回一个空的jQuery对象 2.2、$(callback):如果传入的参数是一个函数,则在document上绑定一个ready事件监听函数,当DOM结构加载完成时执行。ready事件触发要早于load事件,ready事件并不是浏览器的原生事件。该函数称为jQuery的入口函数 2.3、$(selectorStr [,context]),接收一个字符串选择器,返回一个jQuery对象,没匹配到则返回一个空jQuery对象。 这里的context选择器称为"上下文",其格式有以下几种: 写法例如: $(‘p‘,‘#p_wrap‘) //在遍历时缩小范围id $(‘p‘,‘div‘) //DOM元素 $(‘p‘, $(‘div‘)) //jQuery对象 $(‘domElement‘, this) //用于当前指定的DOM元素范围内 2.4、$(html [,ownerDocument]),$(html, props) 如果传入的是html代码片段,就会用这些代码创建新的DOM元素, 然后创建并返回一个包含这个元素引用的jQuery对象。 如果html代码是一个单独的标签,jQuery源码的实现是使用浏览器原生方法 document.creatElement()创建一个DOM元素; 如果是比较复杂的html片段,jQuery源码实现使用浏览器的innerHtml机制创建DOM元素, 这个过程由两个方法完成的。 若html代码是一个单独标签,第二个参数可以是props,props是一个包含了属性、事件的普通对象。 在调用document.createElement()创建DOM元素后,props会被传给jQuery方法.attr(), 然后由attr()负责把参数props中的属性、事件设置到新创建的元素上。 2.5、$(element),$(elementArray),如果传入一个DOM元素或DOM元素数组,则把DOM元素封装到jQuery对象中并返回。 2.6、$(object),传入一个普通的JavaScript对象,则把该对象封装到jQuery对象中并返回。 2.7、$(jQuery object)如果传入一个jQuery对象,则创建该jQuery对象的一个副本并返回(相当于克隆,深拷贝?)。 2.8、传入一个基本数据类型,会将传入的基本数据类型存储到jQuery对象中返回

3、jQuery入口函数

3.1、4种等效写法 $(function(){}); jQuery(function(){}); $(document).ready(function(){}); jQuery(document).ready(function (){}); 3.2、jQuery入口函数 vs window.onload 执行顺序:jQuery入口函数在window.onload之前执行 window.onload会等到DOM元素加载完毕,并且图片也加载完毕才会执行 jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行 故通过jQuery入口函数不可以拿到图片元素的宽高 覆盖问题: window.onload如果多次赋值,则后面编写的会覆盖前面编写的 jQuery中编写多个入口函数,后面的不会覆盖前面的

4、$符号使用冲突问题

4.1、释放$的使用权:直接调用jQuery.noConflict()方法 注意点: 释放操作必须在编写其它jQuery代码之前编写,释放之后就不能再使用$,改为使用jQuery 4.2、自定义一个访问符号:var jq=jQuery.noConflict() 注意,这个自定义的符号也要遵循js标识符命名规范

初识jQuery

标签:turn   UNC   select   内部使用   rop   2.3   直接   通过   roo   

原文地址:https://www.cnblogs.com/chuanzi/p/9452177.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!