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的入口函数（四种写法）

 

$(document).ready(function () {      })

 

jQuery(document).ready(function
(){

})

　　❤（最简洁，企业开发推荐使用下面这种）

 

$(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.
$();
// 2.
jQuery();

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

　　　　一个函数

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

　　　　  选择器

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

 

let $box1 = $(".box1");
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静态方法和实例方法

　　实例方法

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

 

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

 

　　　如何调用

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

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

 

　　静态方法

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

Aclass.staticMethod = function () 
{    
     alert("staticMethod"); 
}

　　　如何调用

　　　　通过类名调用

Aclass.staicMethod();