一、jQuery概述

1、JavaScript库

即library，是一个封装好的特定的集合（方法和函数）。从封装的一大堆函数的角度理解库。就是在个库中，封装了很多预先定义好的函数在里面，比如动画animation、hide、show，比如获取元素等。

简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如jQuery，就是为了快速方便的操作DOM，里面界都是函数（方法）。

常见的JavaScript库：jQuery、Protoytpe、YUI、Dojo、Ext JS、移动端的zepto

这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的。

2、jQuery的概念

jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事。

j就是JavaScript；Query查询：意思就是查询js，把js中的DOM操作做了封装，可以快速的查询使用里面的功能。

jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。

3、jQuery的优点

① 轻量级。核文件才几十kb，不会影响页面加载速度

② 跨浏览器兼容，基本兼容了现在主流的浏览器

③ 链式编程、隐式迭代

④ 对事件、样式、动画支持，大大简化了DOM操作

⑤ 支持插件扩展开发。有丰富的第三方插件。例如：树形菜单、日期控件、轮播图等

⑥ 免费、开源

二、jQuery的基本使用

1、jQuery的使用步骤

① 引入jQuery文件

② 使用即可

2、jQuery的入口函数

$(function() {...   //此处是页面DOM加载完成的入口});

$(document).ready(function(){...     //此处是页面DOM加载完成的入口});

① 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。

② 相当于原生js中的DOMContentLoaded。

③ 不同于原生js重点load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

④ 更推荐使用第一种方式

3、jQuery的顶级对象$

① $是jQuery的别称，在代码中可以使用

② $是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。

4、jQuery对象和DOM对象

① 用原生JS获取来的对象就是DOM对象

<div></div>
var myDiv = document.querySelector('div');
console.dir(myDiv);

② jQuery对象：用jQuery方式获取过来的对象的jQuery对象。本质：通过$把DOM元素进行了包装

<div></div>
$('div');          //$('div')是一个jQuery对象

③ jQuery对象只能使用jQuery方法，DOM对象则使用原生JavaScript属性和方法

myDiv.style.display = 'none';
myDiv.hide();  // myDiv是一个DOM对象，不能使用jQuery里面的hide方法
$('div').style.display = 'none'; //$('div')是一个jQuery对象补鞥呢使用原生js的属性和方法

④ DOM对象和 jQuery对象之间是可以相互转换的。

因为原生js比 jQuery更大，元素的一些属性和方法 jQuery没有给我们封装，要想使用这些属性和方法需要把 jQuery对象转换为DOM对象才能使用。

（1）DOM对象转换为 jQuery对象：$（DOM对象）

 // (1)直接获取，得到是就是jQuery对象$('div');
//(2)已经使用原生js获取过来的DOM对象
var div = document.querySelector('div');
$(div);

（2）jQuery对象转换为DOM对象： $('div')[index] $('div').get(index) index是索引号0

三、jQuery选择器

1、jQuery基础选择器

$('选择器')     //里面选择器直接写CSS选择器即可，但是要加引号

名称	用法	描述
ID选择器	$（“#id”）	获取指定的ID元素
全选择器	$（'*'）	匹配所有元素
类选择器	$（“.class”）	获取同一类class的元素
标签选择器	$（“div”）	获取同一类标签的所有元素
并集选择器	$（“div.p.li”）	选取多个元素
交集选择器	$（"li.current"）	交集元素

2、jQuery层级选择器

名称	用法	描述
子代选择器	$("ul>li");	使用>号，获取亲儿子的层级的元素；注意：并不会获取孙子层级的元素
后代选择器	$("ul li");	使用空格，代表后代选择器，获取ul下所有li元素，包括孙子等

知识拓展：jQuery设置样式

$('div').css('属性','值')

3、隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul><li>相同的操作</li><li>相同的操作</li><li>相同的操作</li>
</ul>
<script>
//1、获取两个div元素
console.log($("div"));
//2、给两个div设置背景颜色为粉色  jQquery对象不能使用style
$("div").css('background', 'pink');
//3、隐式迭代就是把匹配的所有元素内部进行遍历循环，给每个元素添加CSS这个方法
//把ul里面所有的li的字体变为红色
$('ul li').css('color', 'red');</script>

4、jQuery筛选选择器

语法	用法	描述
:first	$("li:first")	获取第一个li元素
:last	$("li:last")	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$("li:odd")	获取到的li元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到的li元素中，选择索引号为偶数的元素

语法	用法	描述
parent()	$("li").parent();	查找父级
children(selector)	$("ul").children("li");	相当于$("ul>li")，最近一级（亲儿子）
,find(selector)	$("ul").find("li");	相当于$("ul li")，后代选择器
siblings(selector)	$("first").siblings("li");	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$("div").hasClass("protected")	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$("li").eq(2);	相当于

<div class="father"><div class="son"></div>
</div><div class="nav"><p>我是屁</p><div><p>我是p</p></div>
</div><script>
$(function() {//1、父 parent（）返回的最近一级的父级元素console.log($(".son").parent());//2、子//（1）亲儿子  children（）    类似子代选择器console.log($(".nav").children("p").css("color", "red"));//（2） 儿子+孙子  find()      类似后代选择器console.log($(".nav").find("p").css("color", "red"));
</script>

5、jQuery排他思想

排他思想：当前元素设置样式，其他兄弟元素清除样式。

<button>快速</button>
<button>快速</button>
<button>快速</button><script>$(function() {//隐式迭代  给所有的按钮都绑定了点击事件$("button").click(function() {//当前的元素变化背景颜色$(this).css("background", "pink");//其余的兄弟去掉背景颜色  隐式迭代$(this).siblings("button").css("background", "");})})
</script>

6、jQuery链式编程

使用链式编程一定注意是哪个对象执行样式

<button>快速</button>
<button>快速</button>
<button>快速</button><script>$(function() {$("button").click(function() {//让当前元素颜色编程红色//$(this).css("color", "red");//让其他界面元素不变色//$(this).siblings().css("color", "");//链式编程的写法$(this).css('color',red).sibiling().css('color','');})})</script>

四、jQuery样式操作

1、操作CSS方法

jQuery可以使用CSS方法来修改简单元素样式，也可以操作类，修改多个样式

1.1 参数只写属性名，则是返回属性值

$(this).css("color");

1.2 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是是数字可以不用跟单位和引号

$(this).css("color","red");

1.3 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。

$(this).css({"color":"white","font-size":"20px"});

2、设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。

2.1 添加类

$("div").addClass("current");

2.2 删除类

$("div").removeClass("current");

2.3 切换类

$("div").toggleClass("current");

3、类操作与className的区别

原生JS中className会覆盖元素原先里面的类名。

jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

五、jQuery效果

1、显示隐藏

show( ) hide( ) toggle( )

1.1 显示语法规范

show([speed,[easing],[fn])

① 参数都可以省略，无动画直接显示

② speed：三种预订速度之一的字符串（“slow”，“normal”，“or”，“fast”）或表示动画时长的毫秒数组（如：1000）

③ easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”

④ fn：回调函数，在动画完成执行的函数，每个元素执行一次

1.2 隐藏语法规范

hide([speed,[easing],[fn]);

1.3 切换语法规范（一般情况下不加参数，直接显示隐藏切换）

toggle([speed,[easing],[fn]);

2、滑动

slideDown（） slideUp（） slideToggle（）

3、淡入淡出

fadeIn（） fadeOut（） fadeToggle（） fadeTo（）

3.1 渐进方式调整到指定的不透明度

fadeTo([speed],opacity,[easing],[fn]);

注意： opacity透明度必须写，取值0~1之间。

4.自定义动画

animate（）

animate(paarams,[speed],[easing],[fn])

① params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft，其余参数都可以省略。

4.1动画队列及其停止排队方法

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止排队

stop()

① stop（）方法用于停止动画或效果

② 注意：stop（）写到动画或者效果的前面，相当于停止结束上一次的动画

5、事件切换

hide([over,]out)

① over：鼠标移到元素上要触发的函数（相当于mouseenter）

② out：鼠标移出元素要触发的函数（相当于mouseout）

六、jQuery属性操作

1、设置获取元素固有属性值prop（）

固有属性：元素本身自带的属性，比如<a>元素里自带href，<input>元素里自带type

1.1 获取属性语法

element.prop("属性名")   获取元素固有的属性值//举例
$("a").prop("href");

1.2 设置属性语法

prop("属性","属性值")

2、设置或获取元素自定义属性值attr()

自定义属性：用户自己给元素添加的属性。比如给div添加index=“1”

2.1 获取属性语法

attr("属性")；            获取元素自定义属性，类似原生getAttribute()//举例
$("div").attr("index");

2.2 设置属性语法

attr("属性","属性值")     //类似于原生setAttribute()

3、数据缓存data（）

data（）方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

3.1 附加数据语法

data("name","value")   //向被选元素附加数据

3.2 获取数据语法

data("name")     //向被选元素获取数据

同时，还可以读取HTML5自定义属性data-index，得到的是数字型

七、jQuery文本属性值

主要针对元素的内容还有表单的值的操作

1、普通元素内容html（）

相当于原生inner HTML（）

html()             //获取元素的内容
html("内容")       //设置元素的内容

2、普通元素文本内容text（）

相当于原生innerText（）

3、表单的值val（）

相当于原生value

八、jQuery元素操作

1、遍历元素

jQuery隐式迭代是对同一类元素做了相同的操作。如果想要给同一元素做不同操作，就需要用到遍历。

语法一：

$("div").each(function(index,domEle) { xxx;})

① each（）方法遍历匹配的每一个元素。主要用DOM处理

② 里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jQuery对象。

③ 所以想要使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)

<div>1</div>
<div>2</div>
<div>3</div><script>$(function() {//如果针对同一元素做不同操作，需要用到遍历元素（类似for，但是比for强大）//采用each（）方法遍历元素var sum = 0;var arr = ["red", "blue", "green"];$("div").each(function(i, domEle) {//回调函数第一个参数一定是索引号 可以自己指定索引号名称//回调函数第二个参数一定是dom元素对象 // domEle.css("color");   dom对象没有CSS方法$(domEle).css("color", arr[i]);// $(domEle).text()获取的都是字符型，要转换为数字型 sum += parseInt($(domEle).text());})console.log(sum); //6})</script>

语法二：

$.each(object,function(index,element){ xxx;})

① $.each（）方法可用于遍历任何对象。主要用于数据处理，比如数组，对象。

② 里面的函数有2个参数：index是每个元素的索引号，element遍历内容。

2、创建元素

语法：

$("<li></li>");   //动态的创建了一个li标签

3、添加元素

① 内部添加

element.append("内容")

把内容放入匹配元素内容的最后面，类似原生appendChild。

element.prepend("内容")；

把内容放入匹配元素内容的最前面，类似原生insertBefore。

② 外部添加

element.after("内容")   //把内容放入目标元素后面
element.before("内容")  //把内容放入目标元素前面

内部添加元素生成之后，它们是父子关系。

外部添加元素生成之后，它们的兄弟关系。

4、删除元素

element.remove()     //删除匹配的元素（本身）
element.empty()      //删除匹配元素集合中所有的子节点
element.html(" ")    //清空匹配的元素内容

九、jQuery尺寸、位置操作

1、jQuery尺寸

语法	用法
width( ) / height( )	取得匹配元素宽度和高度值只算width/height
innerWidth() / innerHeight	取得匹配元素宽度和高度值，包含padding
outerWidth( ) / outerHeight	取得匹配元素宽度和高度值，包含padding、border
outerWidth(true) / outerHeight（true）	取得匹配元素宽度和高度值，包含padding、border、margin

① 以上参数为空，则是获取响应值，返回是数字型

② 如果参数为数字，则是修改响应值

③ 参数可以不必写单位

2、jQuery位置

位置主要有三个：offset（）、position（）、srollTop（）/ srollLeft（）

2.1 offset（）设置或获取元素偏移

① offset（）方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系

② 该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。

③ 可以设置元素的偏移：offset({top:10,left:30});

2.2 position（）获取元素偏移

① position（）方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为主。

② 只能获取，不能设置

2.3 srollTop（）/ srollLeft（）设置或获取元素被卷去的头部和左侧

① srollTop（）方法设置或返回被选元素被卷去的头部。

② srollLeft（）方法设置或返回被选元素被卷去的左侧。

十、jQuery事件

1、jQuery事件注册

1.1 单个事件注册

element.事件(function(){})//举例
$("div").click(function(){})

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

2、jQuery事件处理

2.1 事件处理on（）绑定事件

on（）方法在匹配元素上绑定一个或多个事件的事件处理函数

element.on(events,[selector],fn)

① events：一个或多个用空格分隔的事件类型，如“click”或“keydown”。

② selector：元素的子元素选择器。

③ fn：回调函数，即绑定在元素身上的侦听函数。

2.2 on（）方法优势

on（）方法优势1：可以绑定多个事件，多个处理事件处理程序。

$("div").on({mouseenter: function() {$(this).css("background", "skyblue");}，click: function() {$(this).css("background", "yellow");}，mouseleave: function() {$(this).css("background", "green");}});

如果事件处理程序相同

$("div").on("mouseover mouseout",function(){$(this).toggleClass("current");});

on（）方法优势2：可以事件委派操作。事件委派的定义是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$("ul").on("click", "li", function() {alert(11);//click是绑定在ul身上的，但是触发的对象是ul里面的li
});

在此之前有blind（），live（），delegate（）等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

on（）方法优势3：动态创建的元素，click（）没有办法绑定事件，on（）可以给动态生成的元素绑定事件。

2.2 事件处理off（）解绑事件

off（）方法可以移除通过on（）方法添加的事件处理程序。

$("p").off();                 //解绑P元素所有事件处理程序
$("p").off("click");          //解绑P元素上面的点击事件  后面的off是侦听函数名
$("ul").off("click","li");    //解绑事件委托

如果有的时间只想触发一次，可以使用one（）来绑定事件。

2.3 自动触发事件 trigger（）

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click()               //第一种简写方式
element.trigger("事件")       //第二种简写方式$("p").on("click",function(){alert("hi~");
)};
$("p").trigger("click");      //此时自动触发点击事件，不需要鼠标点击element.triggerHandler("事件")  //第三种简写方式，不会触发远元素的默认行为

3、jQuery事件对象

事件被触发，就会有事件对象的产生

element.on(events,[selector],function(event){})

阻止默认行为：event.preventDefalut（）或者return false

阻止冒泡：event.stopPropagation（）

十一、jQuery拷贝对象

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法

语法：

$.extend([deep],target,object1,[objctN])

① deep：如果设为true为深拷贝，默认为false（浅拷贝）

② target：要拷贝的目标对象

③ object1：待拷贝到第一个对象的对象

④ 浅拷贝是把被拷贝对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。

⑤ 深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象。

十二、多库共存

jQuery使用$作为标志符，随着jQuery的流行，其他的js库也会用这$作为标志符，这样一起使用会引起冲突。

1、客观需求

需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这叫做多库共存

2、jQuery解决方案

① 把里面的$符号同意改为jQuery。比如jQuery（“div”）

② jQuery变量规定新的名称：$.noConflict() var xx = $.noConflict();

$(function() {function $(ele) {return document.querySelector(ele);}console.log($("div"));// 1、如果$符号冲突，使用jQueryjQuery.each();//2、让jQuery释放对$控制权，自己决定，定义变量var suibian = jQuery.noConflict();console.log(suibian("span"));suibian.each();})

十三、jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成

注意：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件

jQuery插件常用的网站：

1、jQuery插件库：http://www.jq22.com/

2、jQuery之家：www.htmleaf.com

jQuery插件使用步骤：

1、引入相关文件。（jQuery文件和插件文件）

2、复制相关html、css、js（调用插件）

图片懒加载

图片使用延迟加载在可提高网页下载速度，它也能帮助想减轻服务器负载

当我们页面滑动到可视区域，再显示图片。

我们使用jQuery插件库EasyLazyload。注意，此时的js引入文件和js调用必须写到DOM元素（图片）最后面。

全屏滚动（funllpage.js）

gitHub:https://github.com/alvarotrigo/fullPage.js

中文翻译网站：http://www.dowebok.com/demo/2014/77/

bootstrap JS插件

bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件。

jQuery基础知识（黑马程序员前端基础必备教程视频笔记）相关推荐

黑马程序员《JVM完整教程》笔记 - p001- p015
黑马程序员<JVM完整教程>笔记 - p001- p015 引言什么是JVM? 学习JVM有什么用? 内存结构程序计数器虚拟机栈栈内存溢出线程运行诊断 b站链接: 黑马程序员JV ...
黑马程序员 python 基础版哪个老师_(看黑马程序员Python基础班视频挺好，犹豫该不该报班？)...
看黑马程序员Python基础班视频挺好,犹豫该不该报班? 如果看视频比较好的话,还是建议自学吧,毕竟录制视频的老师不一定参与实质的讲课,且能自学也省一笔培训费用了.我是看的bilibili上黑马程序员 ...
计算机基础知识对程序员来说有多重要？
数据结构和算法,操作系统,编译原理,计算机组成原理这些课程对普通程序员来说是否需要去学习?会带来哪些帮助? 我们依次来了解这几门课程是在工作中有啥用,回答有点长,请保持耐心:) 一.数据结构与算法正 ...
黑马程序员——Java基础---流程控制
黑马程序员--Java基础---流程控制 ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------ 一．概述 Java提供了两种基本的流程控制结构:分支结构 ...
计算机知识太多了,计算机基础知识对程序员来说有多重要？
原标题:计算机基础知识对程序员来说有多重要? 科班和培训生同比于自学者的优势就在于这些计算机专业的核心课程(数据结构与算法这种不管科班培训都要学的不算):离散数学.编译原理.计算机组成原理.操作与系统 ...
黑马程序员——Java基础---IO(下)
黑马程序员--Java基础---IO(下) ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------ 一.概述 Java除了基本的字节流.字符流之外,还提供 ...
黑马程序员-黑马程序员训练营基础测试
---------------------- ASP.Net+Unity开发. .Net培训.期待与您交流! ---------------------- 为了帮助更多的人了解黑马,让更多想知道黑马测 ...
黑马程序员_基础测试
-------android培训.java培训.期待与您交流! ---------- 黑马程序员训练营基础测试题及个人代码(包含思路.步骤和基本注释) 1. 编写程序计算12+22+32+....+1 ...
黑马程序员-iOS基础-Objective-C基础（六）内存管理
------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 黑马程序员-iOS基础-Objective-C基础(六)内存管理一.内存管理的必要性移动设备 ...

jQuery基础知识（黑马程序员前端基础必备教程视频笔记）