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()