jQuery的介绍
为什么要使用jQuery
???在用js写代码时，会遇到一些问题：
???window.onload 事件有事件覆盖的问题，因此只能写一个事件。
???代码容错性差。
???浏览器兼容性问题。
???书写很繁琐，代码量多。
???代码很乱，各个页面到处都是。
???动画效果很难实现。
jQuery的出现，可以解决以上问题。
什么是 jQuery
jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。
js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。
jQuery 的两大特点
链式编程：比如.show()和.html()可以连写成.show().html()。
隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。
使用 jQuery 的基本步骤
???（1）引包
???（2）入口函数
???（3）功能实现代码（事件处理）
jQuery 的入口函数和 $ 符号
写法一：
???//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
??????????$(document).ready(function () {
??????????????alert(1);
??????????})
写法二：
// 2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
???????$(function() {
???????????alert(1);
???????});
写法三：
???????// 3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
???????$(window).ready(function(){
???????????alert(1);
???????})
jQuery入口函数与js入口函数的区别：
区别一：书写个数不同：
???Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
???jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。
区别二：执行时机不同：
???Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
???jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
文档加载的顺序：从上往下，边解析边执行。
jQuery的$符号
jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。
js中的DOM对象 和 jQuery对象 比较
其本质jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。
二者的相互转换
jQuery的选择器
jQuery 的基本选择器
层级选择器
基本过滤选择器
属性选择器
筛选选择器
jQuery动画效果
显示动画
方式一：
???$("div").show();
方式二：
???$(‘div‘).show(3000);
方式三：
???$("div").show("slow");
方式四：
//show(毫秒值，回调函数;
???$("div").show(5000,function () {
???????alert("动画执行完毕！");
???});
隐藏动画
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function(){});
开关式显示隐藏动画
$(‘#box‘).toggle(3000,function(){});
显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。
滑入和滑出
1、滑入动画效果：（类似于生活中的卷帘门）
$(selector).slideDown(speed, 回调函数);
2、滑出动画效果：
$(selector).slideUp(speed, 回调函数);
3、滑入滑出切换动画效果：
$(selector).slideToggle(speed, 回调函数);
淡入淡出动画
1、淡入动画效果：
$(selector).fadeIn(speed, callback);
2、淡出动画效果：
$(selector).fadeOut(1000);
3、淡入淡出切换动画效果：
$(selector).fadeToggle(‘fast‘, callback);
自定义动画
$(selector).animate({params}, speed, callback);
作用：执行一组CSS属性的自定义动画。
???第一个参数表示：要执行动画的CSS属性（必选）
???第二个参数表示：执行动画时长（可选）
???第三个参数表示：动画执行完后，立即执行的回调函数（可选）
停止动画
$(selector).stop(true, false);
第一个参数：
???true：后续动画不执行。
???false：后续动画会执行。
第二个参数：
???true：立即执行完成当前动画。
???false：立即停止当前动画。
PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。
jQuery的属性操作
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
???html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
???DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
???类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
???值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
设置属性值或者 返回被选元素的属性值
attr()
移除属性
removeAttr()
prop()
关于attr()和prop()的区别
什么时候使用attr()，什么时候使用prop()？
1.是有true,false两个属性使用prop();
2.其他则使用attr();
addClass（添加多个类名）
removeClass从所有匹配的元素中删除全部或者指定的类。（可以通过添加删除类名，来实现元素的显示隐藏）
toggleClass如果存在（不存在）就删除（添加）一个类。//toggleClass(‘box‘)
html
html() 是获取选中标签元素中所有的内容
text
text() 获取匹配元素包含的文本内容
val
val()用于表单控件中获取值，比如input textarea select等等
使用jQuery操作input的value值
jQuery的文档操作
插入操作
父元素.append(子元素)
解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
子元素.appendTo(父元素)
解释：追加到某元素 子元素添加到父元素
父元素.prepend(子元素)；
解释：前置添加， 添加到父元素的第一个位置
父元素.prependTo(子元素)；
解释：后置添加， 添加到父元素的最后一个位置
父元素.after(子元素)；
子元素.inserAfter(父元素)；
解释：在匹配的元素之后插入内容
父元素.before(子元素)；
子元素.inserBefore(父元素)；
解释：在匹配的元素之后插入内容
克隆操作
$(选择器).clone();
解释：克隆匹配的DOM元素
修改操作
$(selector).replaceWith(content);
将所有匹配的元素替换成指定的string、js对象、jquery对象。
$(‘<p>哈哈哈</p>‘)replaceAll(‘h2‘);
解释：替换所有。将所有的h2标签替换成p标签。
删除操作
$(selector).remove();
解释：删除节点后，事件也会删除（简言之，删除了整个标签）
$(selector).detach();
解释：删除节点后，事件会保留
$(selector).empty();
解释：清空选中元素中的所有后代节点
jQuery的位置信息
宽度和高度
获取宽度 ??.width()
设置宽度 ??.width( value )
高度
获取高度 ???.height()
设置高度 ???.height( value )
innerHeight()和innerWidth()
获取内部宽 ???.innerWidth()
设置内部宽 ???.innerWidth(value);
获取内部高 ???.innerHeight()
设置内部宽 ???.innerHeight(value);
outWidth和outHeight()
获取外部宽 ????.outerWidth( [includeMargin ] )
设置外部宽 ????.outerWidth( value )
获取外部高 ????.outerHeight( [includeMargin ] )
设置外部高 ????.outerHeight( value )
偏移
获取 ???.offset()
设置 ????.offset( coordinates )
元素坐标 ???.position()
滚动距离
获取：
???水平方向 ??.scrollLeft()
描述：获取匹配的元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度）
设置：
???.scrollLeft( value )
描述：设置每个匹配元素的水平方向滚动条位置。
垂直方向
获取：
???.scrollTop()
描述：获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）
设置：
???.scrollLeft( value )
描述：设置每个匹配元素的垂直方向滚动条位置。
JS的事件流的概念
什么是事件流
事件流描述的是从页面中接收事件的顺序
1、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：
???① 事件捕获阶段；
???② 处于目标阶段；
???③ 事件冒泡阶段
document、documentElement和document.body三者之间的关系：
???document代表的是整个html页面；
???document.documentElement代表的是<html>标签；
???document.body代表的是<body>标签；
三阶段示意图：
jquery的常用事件
事件对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件流的由来
微软和网景乱搞
关于event对象
jQuery的事件绑定和解绑
绑定事件
语法
???bind(type,data,fn)
???描述：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。
参数解释：
???type (String) : 事件类型
???data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
???fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
解绑事件
语法
???unbind(type,fn);
描述：
???bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
???如果没有参数，则删除所有绑定的事件。
???如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
参数解释：
???type (String) : (可选) 事件类型
???fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
把所有段落的所有事件取消绑定
???$("p").unbind()
自定义事件
语法
???trigger(type,data);
???描述：在每一个匹配的元素上触发某类事件，它触发的是由bind()注册的自定义事件。
参数解释：
???type (String) : 要触发的事件类型
???data (Array) : (可选)传递给事件处理函数的附加参数
一次性事件
语法
???one(type,data,fn)
描述：
???为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同
参数解释：
???type (String) : 事件类型
???data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
???fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
事件委托（事件代理）
什么是事件委托
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
原理：
利用冒泡的原理，把事件加到父级上，触发执行效果。
作用：
???1.性能要好
???2.针对新创建的元素，直接可以拥有事件
事件源:
跟this作用一样(他不用看指向问题，谁操作的就是谁), event对象下的
使用情景：
为DOM中的很多元素绑定相同事件；
为DOM中尚不存在的元素绑定事件；
语法：
on(type,selector,data,fn);
描述：在选定的元素上绑定一个或多个事件处理函数
参数解释
???events( String) : 一个或多个空格分隔的事件类型
???selector( String) : 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素
???data: 当一个事件被触发时，要传递给事件处理函数的event.data。
???fn:回调函数
轮播图实现 ?网上到处都有，改改就行了
jQuery的ajax
什么是ajax
???AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）
???简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
???通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery的load()方法
load()方法从服务器加载数据，并把返回的数据放入被选元素中。
语法
???$("selector").load(url,data,callback);
jquery的getJSON方法
jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据，并对数据进行解析，显示到页面中
语法:
???$.getJSON(url,[data],[callback])
参数解释：
???url参数：为请求加载json格式文件的服务器地址
???可选项data参数：为请求时发送的数据
???callback参数：为数据请求成功后执行的函数
jquery的$.get()方法
???$.get() 方法通过 HTTP GET 请求从服务器上请求数据
语法：
???$.get(URL,callback);
url参数：规定你请求的路径，是必需参数
callback参数：为数据请求成功后执行的函数
jquery的post()方法
post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面
语法：
???$.post(URL,data,callback);
url参数：规定你请求的路径，是必需参数，可选的data参数是连同请求发送的数据
可选的callback参数：为数据请求成功后执行的函数
基本格式
//get()方式
?$.ajax({
????url:‘./data/index.txt‘,
????type:‘get‘,
????dataType:‘text‘,
????success:function(data){
???????$(‘p‘).html(data);
????},
????error:function(error){
???????console.log(error)
????}
//post()方式
$.ajax({
??url:‘/index‘,
??type:‘post‘,
??data:{name:‘张三‘,age:12},
??success:function(data){
?????$(‘p‘).html(data);
??},
??error:function(error){
?????console.log(error)
}
XMLHttpRequest自己学去吧
jquery还包含：
???jquery 插件 ???https://www.oschina.net/project/tag/273/jquery
???jqueryUI ??????https://jqueryui.com/ ?????http://www.jqueryui.org.cn/
前端jQuery部分简单整理
原文地址：https://www.cnblogs.com/ngz311616/p/9483560.html