jQuery学习笔记(一)

孤者浪人 提交于 2020-03-16 03:47:21

  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();
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!