• jQuery学习笔记(一)


      jQuery版本选择,入口函数,符号冲突,核心函数,对象,实例方法 and 静态方法

      一,版本选择

      一般面对如jQuery这样的文件的版本选择,大多人都会选择当然是版本越高越好,实则非其然也。

            一般选择为 1.x 版本的(当然如果自己用的话,可以用3.x版本)

        例如百度,京东等公司就用的 1.x版本

        百度  ==> 

        京东  ==> 

        原因就是:1.x版本的 jQuery兼容IE6-8, 而高版本却抛弃了这一特性

        至于是用压缩版本还是未压缩版本

      •  一般做项目的时候 ==>  用未压缩的版本  原因:易于阅读
      •     一般项目上线的时候 ==> 用压缩的版本   原因:节省空间(降低成本)

      二, jQuery入口函数和原生JS入口函数

         a. 原生JavaScript的入口函数

    1 windows.onload = function (ev) {
    2    
    3 }

          b. jQuery的入口函数(四种写法)

    1 $(document).ready(function () {      })
    1 jQuery(document).ready(function
    2 (){
    3 
    4 })

      ❤(最简洁,企业开发推荐使用下面这种

    $(function () {
    
    })
    jQuery(function () {
    
    })

        两者之间的区别分为两类,一为加载,二为覆盖

        One. 加载问题

      • 原生JS和jQuery的入口函数加载模式不同
      • 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
      • jQuery会等到DOM元素加载完毕,但是不会等到图片也加载完毕就会执行

        Two. 覆盖问题

      •  jQuery写多个入口函数,后面的不会覆盖前面的
      •  原生JS写多个入口函数,后面的会覆盖前面的      

      三,jQuery符号冲突

        例如,引入jQuery后又导入一个JavaScript,其内部定义了一个变量  

    let $ = 777;

        于是导致了 多文件引入,$ 符号冲突问题

        解决方法

          1. 释放 $ 的使用权,改用 jQuery

    jQuery.noConflict();

          2. 自定义一个访问符号,从而避免冲突

    let nj = jQuery.noConflict();

        关键点

           释放操作必须再编写其他jQuery代码之前

             释放之后就不能使用 $, 改用jQuery或者自定义符号

       四,jQuery核心函数

       那么什么是jQuery核心函数呢,即:

    1 // 1.
    2 $();
    3 // 2.
    4 jQuery();

       jQuery核心函数可以接收的参数有四类(大致上)

        一个函数

    $(function(){
       alert("This is a function");
    })

          选择器

           返回一个jQuery对象,对象中保存了找到的对应的DOM元素

    1 let $box1 = $(".box1");
    2 let $box2 = $("#box2");

        一个字符串片段

            返回一个jQuery对象,对象中包含了创建的DOM元素

    let $p = $("<p>我是段落.jpg</p>");
    console.log($p);
    $box1.append($p);

         一个DOM元素

           返回一个jQuery对象,对象中包含DOM元素  

    let span = document.getElementByTagName("span")[0]
    console.log(span);
    let $span = $(span);
    console.log($span);

      五,jQuery对象

        什么是jQuery对象

         jQuery对象就是一个伪数组(有 0 到 length-1 的属性,并且有 length 属性)

        

      六,jQuery静态方法和实例方法

      实例方法

       添加给类的原型的方法就是实例方法

    1 Aclass.prototype.instanceMethod =  function () {
    2     alert("instanceMethod");
    3 }

       如何调用

        先创建一个对象的实例,再通过实例调用

    1 let a = new Aclass()
    2  // 通过实例调用 
    3 a.instanceMethod()

      静态方法

       直接给类添加的方法就是静态方法

    1 Aclass.staticMethod = function () 
    2 {    
    3      alert("staticMethod"); 
    4 }

       如何调用

        通过类名调用

    1 Aclass.staicMethod();
  • 相关阅读:
    python描述符(descriptor)、属性(property)、函数(类)装饰器(decorator )原理实例详解
    JVM内存模型、指令重排、内存屏障概念解析
    图解JVM的Class文件格式(详细版)
    图解JVM执行引擎之方法调用
    为何JAVA虚函数(虚方法)会造成父类可以"访问"子类的假象?
    小乖上学第一天
    FLEX RIA快速添加图标
    1,2,3,5,7,8,10,11,12,13,14,15,16,21,22 》1~3,5,7~8,10~16,21~22
    ABAP 函数编写
    ABAP子进程(字符串分割定位)
  • 原文地址:https://www.cnblogs.com/xmdykf/p/11370817.html
Copyright © 2020-2023  润新知