jQuery基础

jQuery

• JavaScript库：即library，是一个封装好的特定的集合（方法和函数）
  对原生js进行封装
• jQuery就是一个JavaScript库，为了方便的操作DOM，里面基本都是函数（方法）
  常用功能代码：DOM操作、事件处理、动画设计。ajax交互
• 官方网站：jquery
• jQuery对象 和 DOM 对象
  1.DOM 对象：通过原生js获取过来的对象
  2.jQuery对象：用jQuery获取过来的对象，其对象本质是利用 $ 对DOM对象包装后产生的对象（伪数组形式存储）
  3.两种对象只能用各自的属性和方法，不能混淆
• jQuery对象 和 DOM 对象相互转换
  1.由于原生js的功能比jQuery更强大，一些属性和方法jQuery没有封装，想要使用就需要把jQuery对象转换为DOM对象
  2.如视频的 play 方法。

//DOM 转 jQuery
$(myVideo)
//jQuery 转 DOM
$('video')[index].play()
$('video').get(index)

1.版本选择

• 看大公司选择什么
  查看网页源代码，搜索jquery
  基本使用：1.x
• 1.x的特点
  1.优点：兼容IE678
  2.缺点：文件较大
• production 和 development 版本区别
  1.production ：压缩版本（推荐使用）
  2.development ：未压缩

2.jQuery的使用

• 步骤
  1.下载jQuery库
  ——jQuery官网–download–1.x minified–复制链接–右键–另存为–项目文件中
  2.引入下载的jQuery库
  ——在HTML文件head标签中引入js文件：<script src="../js/jquery-1.12.4.min.js"></script>
  3.编写jQuery代码

//原生JS固定格式
window.onload = function(){
    // 通过原生JS的入口函数可以拿到DOM元素
    var img = document.getElementsByTagName('img')[0]
    console.log(img)
}
//jQuery固定格式
$(document).ready(function(){
    // 通过jQuery的入口函数可以拿到DOM元素
    var $img = $('img')[0]
    console.log($img)
})

• 下载jQuery库
  1.jQuery提供两个版本：uncompressed、compressed
  ——uncompressed：未压缩版本；有很多空格和换行，所有单词完整，有利于阅读
  ——minified：压缩版本；没有空格换行，很多单词都不完整

3.jQuery和jQuery UI的区别

• jQuery是一个js库，主要提供的功能是选择器、属性修改和事件绑定等；
• jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等；
• jQuery本身注重于后台，没有漂亮的界面，而jQuery UI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。既有强大的后台，又有华丽的前台。jQuery UI是jQuery插件，只不过专指由jQuery官方维护的UI方向的插件。

4.jQuery和js加载模式的区别

• 入口函数
  function：都是为了在界面中拿到元素
• 区别一
  1.onload：原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
  2.onready：jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
  ——因此HTML有img标签，原生JS可以获取到其高度，jQuery不行
• 区别二
  1.原生JS如果编写了多个入口函数（function），后面写的会覆盖前面写的
  ——两个 window.onload
  2.jQuery中编写多个入口函数，后面的不会覆盖前面的，会依次执行
  ——两个 $(document)

5.jQuery入口函数的其他写法

• 使用第三种写法

//第一种写法
$(document).ready(function(){
    var $img = $('img')[0]
})
//第二种写法
jQuery(document).ready(function(){
    var $img = $('img')[0]
})
//第三种写法（推荐）
$(function(){
    var $img = $('img')[0]
})
//第四种写法
jQuery(function(){
    var $img = $('img')[0]
})

• jQuery的冲突问题：$
  1.如果遇到使用多个框架，且框架中都用了$，就会出现$符号冲突
  2.冲突后会根据引入js文件的顺序进行覆盖

//解决办法一：释放 $ 的使用权，使用jQuery
jQuery.noCinflict()
jQuery(function(){
	//代码
})

//解法二:自定义一个访问符号;将 $ 释放，改为 nj
var nj = jQuery.noCinflict()
nj(function(){
	//代码
})

6.jQuery的核心函数

• 调用jQuery的核心函数：$()
  和普通函数调用一样，fn()
• 核心函数接收参数：返回一个jQuery对象，而jQuery对象就是一个伪数组
  1.接收一个函数（入口函数）
  2.接收一个字符串
  ——字符串选择器：
  ——字符串代码片段：会根据代码片段创建一个元素，类似于 innerHTML
  3.接收一个DOM元素
  ——jQuery会把传过来的原生DOM元素包装成jQuery对象

// 1.接收一个函数（入口函数）
$(function(){
    // 2.接收一个字符串
    // 2.1 字符串选择器
    var $box1 = $(".box1")
    var $box2 = $("#box2")
    // 2.2 字符串代码片段
    var $p = $("<p>这是一个段落</p>")
    // 3.接收一个DOM元素
    var span = document.getElementsByTagName("span")[0]
    var $span = $(span)
})

7.jQuery的静态方法

• 静态方法：直接添加在类上面的就是静态方法
  特点：通过类名调用
• 实例方法：添加到类原型上面的就是实例方法
  特点：通过实例来调用
• 静态方法和实例方法

// 1.定义一个类
function AClass(){}
// 2.给这个类添加一个静态方法：直接添加给类的方法
AClass.staticMethod = function(){
    alert("staticMethod")
}
// 静态方法通过类名调用
AClass.staticMethod()

// 3.给这个类添加一个实例方法
AClass.prototype.instanceMethod = function(){
    alert("instanceMethod")
}
// 实例方法通过类的实例调用
var a = new AClass()
a.instanceMethod()