zoukankan      html  css  js  c++  java
  • 初识jQuery

    初识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标识符命名规范

  • 相关阅读:
    032 Gradle 下载的依赖jar包在哪?
    031 can't rename root module,Android Studio修改项目名称
    030 Cannot resolve symbol'R' 问题解决汇总大全
    029 Android Studio层级显示目录文件
    028 You are about to commit CRLF line separators to the Git repository.It is recommended to set the core. autocrlf Git attribute to true to avoid line separator issues If you choose Fix and Comit ,
    027 【Android基础知识】Android Studio 编译慢及 Adb connection Error:远程主机强迫关闭了一个现有的连接
    026 Android Studio 和Gradle版版本对应关系
    025 Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierIm
    024 Android Studio上传项目到Github 最全记录
    023 解决AndroidStudio下载gradle慢的问题
  • 原文地址:https://www.cnblogs.com/chuanzi/p/9452177.html
Copyright © 2011-2022 走看看