超详细的jQuery知识点

jQuery

jQuery的基本介绍

概念
jQuery是一个快速简介的JavaScript代码库，他不是一种新的语言，也不能取代JS，他能帮助我们快速方便的使用JS
官网：https://jquery.com/
传送门：jQuery官网
特点
1 优质的选择器和筛选器
2 方便的隐式迭代
3 强大的链式编程

基于以上特点：很多时候我们要做的事情被 “一行代码解决”

使用
必须下载并导入jQuery包
也就是 : jquery.js 或者 jquery.min.js
静态资源库

jQuery的引入

1. 将jQuery库文件添加到项目的js目录中
2. 在页面汇总使用script标签引入jQuery库文件

<script src="jquery-1.10.2.min.js"></script>

3. 在HTML页面使用jQuery

• 在<script></script>里面使用jQuery
• 在独立的.js文件中使用jQuery，然后将.js文件引入HTML页面

jQuery语法

jQuery就是通过选取HTML元素，并对选取的元素执行某些操作

> javascript 语法：$(selector).action(); 如 
> 隐藏当前元素：$(this).hide();
> 隐藏所有的<p>元素：$("p").hide(); 
> 隐藏所有的class="test"的元素：$(".test").hide();
> 隐藏所有的id="test"的元素：$("#test").hide();

入口函数

1. JavaScript入口函数

window.onload=function(){
//...
}

JavaScript 的 window.onload
事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。且只会执行一次，如果执行多次，前面的会被后面的覆盖

2. jQuery入口函数

$(document).ready(function(){
    //...
});
或者
$(function(){
    //...
});

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。可以执行很多次，不会覆盖

jQuery选择器

注意事项：通过jQuery选择器获取的对象是jQuery封装过后的对象，并不是JS原生的对象。所以JS对象的属性和方法并不能使用
Id选择器 $("#box");
Class选择器 $(".box");
标签选择器 $(“span”);
包含选择器 $("#box p");
子选择器 $("#box>p");
群组选择器 $("#box,.cont,p");
属性选择器 $(“input[type=button]”);
特殊选择器:
$("#box:first");
$("#box:last");
$("#box:eq(3)");
$("#box:odd");
$("#box:even")
筛选器方法 — 对选择器获取到的一组标签对象进行筛选
— 便于链式编程
first() 匹配第一个
.last() 匹配最后一个
.eq() 匹配指定下标
.find() 匹配指定的后代元素
.children() 匹配指定的子元素
.prev() 匹配上一个兄弟
.prevAll() 匹配上面所有的兄弟
.next() 匹配下一个兄弟
.nextAll() 匹配下面所有兄弟
.siblings() 匹配所有兄弟,不管上下
.parent() 匹配直接父级
.parents() 匹配所有父级
.end() 匹配链式编程选择器的上一级

jQuery的属性操作

1 .prop()方法

标签	解释
标签对象.prop(属性)	获取指定属性的属性值
标签对象.prop(属性 , 属性值)	设定属性和属性值
标签对象.prop(自定义属性 , 属性值)	设定自定义属性和属性值

注意：

设置内置属性时，可以直接显示在标签上，为 可见的内置属性 设置自定义属性时，不会直接显示在标签上，为 不可见的自定义属性

2 .attr()方法

标签	解释
标签对象.attr(属性)	获取指定属性的属性值
标签对象.attr(属性 , 属性值)	设定属性和属性值
标签对象.attr(自定义属性 , 属性值)	设定自定义属性和属性值

注意：

设置属性时，直接显示在标签上，为 可见的内置 或 自定义

3 .removeProp()方法

标签	解释
标签对象.removeProp(属性)	删除指定的属性，多用于自定义属性

4 .removeAttr()方法

标签	解释
标签对象.removeAttr(属性)	删除指定的属性

jQuery的样式操作

常用操作方式：

标签	解释
标签对象.css(属性)	获取指定属性的属性值
标签对象.css(属性 ：属性值)	设定属性和属性值
标签对象.css({属性 : 属性值})	以对象的形式,设定属性以及属性值也可以同时设定多个属性属性定义的方式比较灵活

标签对象的内容操作

1. html（）
效果类似于原生JavaScript的 innerHTML

标签	解释
标签对象.html()	没有参数是获取标签内容
标签对象.html(内容)	带有参数是设定标签内容

2. text（）
效果类似于原生JavaScript的 innerText

标签	解释
标签对象.text()	没有参数是获取标签内容
标签对象.text(内容)	带有参数是设定标签内容

3. 总结

.html —> innerHTML
.text —> innerText
区别 : 都是小写字母
没有参数是获取,有参数是设定

标签对象的class操作

常用操作方式

标签	解释
.hasClass()	判断标签是否具有某个class，返回布尔值
.addClass()	给标签添加class，可以添加多个
.removeClass()	删除标签的class，可以删除多个
.toggleClass()	判断当前标签是否具有某个class，有就删除，没有就添加

jQuery的样式操作

1.绑定事件 — on（）方法

//给button按钮绑定一个点击事件
$("button1),on(1 click1y function ) {
console.log(我被点击了)
//给button按钮绑定-个点击事件，并且携带参数
$('button1).on(1 click't { name: 'Jack' }, function (e) {
console.log(e) //所有的内容都再事件对象里面
console.log(e.data) // { name: 'Jack 1 }
})
//事件委托的方式给button绑定点击事件
$('div*).on(1 click*, 'button', function () {
console.log(this) // button按钮})
//事件委托的方式给button绑定点击事件并携带参数
$("div*).on(1 click*, 'button1{ name: 'Jack' }, function（e）{
console.log(this) // button按钮
console.log(e.data)
})

2.移除事件 — off（）方法

//给button 按钮绑定一个点击事件，执行handler 函数
$('button') . on('click', handler)
//移除事件使用off
$(' button') . off('click', handler)

3.只执行一次的事件 — one（）方法

//这个事件绑定在button身上
//当执行过一次之后就不再执行了
$("button").one("click",handler)

4.直接触发事件 — trigger（）方法

//当代码执行到这里的时候，会自动触发下一个button的click事件
$("button").trigger("click")

jQuery可以直接使用的事件

可以直接使用的事件也就是不需要on（）方法绑定，就可以直接执行的事件

1. click事件

//直接给div绑定一个点击事件
$("div").click(function(){
console.log("我被点击了")
}）

//给div绑定一个点击事件并传递参数
$("div").click( {name：“crystal”}， function(e){
console.log("e.data")
}）

2. dblclick事件

//直接给div绑定一个双击事件
$("div").dblclick(function(){
console.log("我被点击了")
}）

//给div绑定一个双击事件并传递参数
$("div").dblclick( {name：“crystal”}， function(e){
console.log("e.data")
}）

3. scroll事件

//直接给div绑定一个滚动事件
$("div").scroll(function(){
console.log("我被点击了")
}）

//给div绑定一个滚动事件并传递参数
$("div").scroll( {name：“crystal”}， function(e){
console.log("e.data")
}）

4. hover事件

//这个事件要包含两个事件处理函数
//一个是移入的时候触发，一个是移出的时候触发
//经过子级标签边界时不会被触发
$("div").hover(function(){
console.log("移入的时候触发")
}，function（）{
console.log("移出的时候触发")
})

5. ready事件

jQuery的ready事件，与window.onload有些类似
相同点：都是文件加载完成以后在执行程序
不同点：
window.onload:当所有内容加载完毕包括图片完整显示，才会认为是加载完成，执行程序
ready：当页面的标签结构加载完成以后，就会加载外部执行程序

window.onload=function(){
    console.log('这是JavaScript加载')
}
$(window).ready(function(){
    console.log("jQuery加载")
})

jQuery阻止冒泡事件

$(".inner").click(e=>{
    //通过事件对象，阻止冒泡事件
    e.stopPropagation();
    //通过return false，阻止冒泡事件
    return false;
})

jQuery阻止默认事件

事件对象 preventDefault（）或者 return false；

$("from").click(e=>{
    //如果输入的内容不是crystal，就阻止表单提交
    if($("input").val()!="crystal"){
        e.preventDefault();
        //通过return false；阻止默认事件
        return false;
    }
})

总结

jQuery中的return false； 号称可以阻止一切

jQuery的隐式迭代

1. 常用操作方式
隐式----计算机程序默认自动执行的操作
迭代----此处指的是遍历操作
总结

jQuery会默认对数组中所有标签对象，循环遍历，都执行相应操作
2. DEMO
jQuery的Tab切换

jQuery的元素操作

1. 创建元素

//创建一个标签对象，同时 可以定义标签的内容属性等
var div = $('<div id="div" index="1">我是: - 个div标签</div>');

2. 内部插入元素

//向div元素中插入一个p元素，放在最后
$('div'). append($('<p></p>'))
//把p元素插入到div中去，放在最后
$('<p>hello</p>'). appendTo($('div'))
//向div元素中插入一个p元素，放在最前
$('div'). prepend($('<p></p>'))
//把p元素插入到div中去，放在最前
$('<p>hello</p>'). prependTo($('div'))

3. 外部插入元素

//在div后面插入一个元素p
$("div").after($("<p></p>"))

//在div前面插入一个元素p
$("div").before($("<p></p>"))

//把p元素插入到div元素的后面
$("div").insertAfter($("<p></p>"))

//把p元素插入到div元素的前面
$("div").insertBefore($("<p></p>"))

4. 替换元素

//把div元素替换成p元素
$("div").replaceWith($("<p></p>"))

//用p元素替换掉div元素
$(("<p></p>").replaceAll($"div"))

5. 删除元素

//删除元素下的所有子节点
$("div").empty()

//把自己从页面中移出
$("div").remove()

6. 克隆元素

//克隆一个li元素，接受两个参数
//参数1：自己身上的事件要不要复制，默认是false
//参数2：所有子结点上的事件要不要复制，默认是true
$("li").clone()

jQuery的元素尺寸

1. 操作元素的宽和高

//获取div元素内容位置的高， 不包含padding 和border
$('div').height()

//设置div内容位置的高为200px
$('div').height(200)

//获取div元素内容位置的宽，不包含padding 和border
$('div').width()

//设置div内容位置的宽为200px
$(' div').width(200)

2. 获取元素内置宽和高

//获取div元素内容位置的高，包含padding 不包含border
$('div' ). innerHeight()

//获取div元素内容位置的宽，包含padding 不包含border
$('div'). innerwidth()

3. 获取元素外置宽和高

// 获取div元素内容位置的高， 包含padding 和border
$('div' ). outerHeight()

//获取div元素内容位置的高，包含padding 和border 和margin :
$(' div'). outerHeight(true)

. //获取div元素内容位置的宽，包含padding 和border
$(' div'). outerWidth()

//获取div元素内容位置的高，包含padding 和border 和margin
$('div') . outerWidth(true)

jQuery的元素位置

1. 元素相对页面的位置

//获取div相对页面的位置
$('div').offset()
//得到一个对象  {left: 值，top：值}

//给div设置相对页面的位置
$('div').offset({left:100,top:100})
//获取定位到一个距离页面左上角100  100的位置

2. 元素相对父级元素的偏移量

//获取div相对于父元素的偏移量（定位的值）
$("div").position()

3. 获取元素卷去的宽度和高度

window.onscroll=function(){
    //获取浏览器卷去的高度
    console.log($(window).scrollTop());
}

window.onscroll=function(){
    //获取浏览器卷去的宽度
    console.log($(window).scrollLeft());
}

jQuery的动画

之前在原生JavaScript中，要实现动画效果
我们要自己定义函数，使用逐步位移的方式，达到动画效果
也就是我们曾经封装的move函数
现在jQuery帮我们完成了这些操作，他拯救了我们~~~
1. show动画 显示动画

//给div绑定一个显示的动画
$('div').show() //如果元素本身是display none的状态可以显示出来

//给div绑定一个显示的动画，接受三个参数
// $('div').show('毫秒"，' 速度"，' 回调函数')

$('div'). show(1000，'linear', function () {
console.1og('我显示完毕')
})

2. hide动画 隐藏动画

//给div绑定一个隐藏的动画
$('div').hide() //如果元素本身是display block的状态可以隐藏出来

//给div绑定一个隐藏的动画，接受三个参数
// $('div').hide('毫秒"，' 速度"，' 回调函数')

$('div'). hide(1000，'linear', function () {
console.1og('我隐藏完毕')
})

3. toggle动画 显示隐藏动画

//给div绑定一个切换的动画
$('div').toggle() //如果元素本身是显示，那么就隐藏，本身隐藏那么就显示

//给div绑定一个切换的动画，接受三个参数
// $('div').toggle('毫秒"，' 速度"，' 回调函数')

$('div'). toggle(1000，'linear', function () {
console.1og('我动画执行完毕')
})

4. slideDown动画 下拉显示

//给div绑定一个下拉显示的动画
$('div').slideDown() //本身隐藏下拉就显示

//给div绑定一个下拉显示的动画，接受三个参数
// $('div').slideDown('毫秒"，' 速度"，' 回调函数')

$('div'). slideDown(1000，'linear', function () {
console.1og('我动画执行完毕')
})

5. slideUp动画 上拉隐藏

//给div绑定一个上拉隐藏的动画
$('div').slideUp() //本身显示上拉就隐藏

//给div绑定一个上拉隐藏的动画，接受三个参数
// $('div').slideUp('毫秒"，' 速度"，' 回调函数')

$('div'). slideUp(1000，'linear', function () {
console.1og('我动画执行完毕')
})

6. slideToggle动画 上下切换动画

//给div绑定一个上下切换的动画
$('div').slideToggle() //本身显示上拉就隐藏，本身隐藏  下拉就显示

//给div绑定一个切换的动画，接受三个参数
// $('div').slideToggle('毫秒"，' 速度"，' 回调函数')

$('div'). slideToggle(1000，'linear', function () {
console.1og('我动画执行完毕')
})

7. fadeIn动画 逐渐显示动画

//给div绑定动画
$('div').fadeIn() //元素逐渐显示

//给div绑定一个动画，接受三个参数
// $('div').fadeIn('毫秒"，' 速度"，' 回调函数')

$('div'). fadeIn(1000，'linear', function () {
console.1og('我动画执行完毕')
})

8. fadeOut动画 逐渐隐藏动画

//给div绑定动画
$('div').fadeOut() //元素逐渐隐藏

//给div绑定一个动画，接受三个参数
// $('div').fadeOut('毫秒"，' 速度"，' 回调函数')

$('div'). fadeOut(1000，'linear', function () {
console.1og('我动画执行完毕')
})

9. fadeToggle动画 渐隐渐显切换动画

//给div绑定动画
$('div').fadeToggle() //本身隐藏逐渐显示 本身显示逐渐隐藏

//给div绑定一个动画，接受三个参数
// $('div').fadeToggle('毫秒"，' 速度"，' 回调函数')

$('div'). fadeToggle(1000，'linear', function () {
console.1og('我动画执行完毕')
})

10. fadeTo切换到指定透明度

//给div绑定动画
$('div').fadeTo() //切换到指定透明度动画

//给div绑定一个动画，接受四个参数
// $('div').fadeToggle('毫秒"，'透明'， 速度"，' 回调函数')

$('div'). fadeToggle(1000，0.3，'linear', function () {
console.1og('我动画执行完毕')
})

11. animate动画 自定义动画

//给div绑定动画
$('div').animate() 

//给div绑定一个动画，接受四个参数
// $('div').animate({属性：属性值}，'时间"，' 速度"，' 回调函数')

$('div'). animate({width：400}，1000，'linear', function () {
console.1og('我动画执行完毕')
})

注意：如果一个动画效果，我们疯狂点击的时候会屏闪 ，感觉像鬼畜一样，这是为什么呢？？？（小朋友你是否有很多问号？）
jQuery 的动画,如果上一次动画没有执行完毕
就触发下一次了下一次动画的执行
默认会在之前动画结束之后,再去执行之后的动画
12. stop（）动画
当前动画直接停止，动画就停止在当前的位置，然后立即执行下一次动画效果
13. finish（）动画
当前动画直接结束，动画直接执行至终止状态，然后立即执行下一次动画效果

jQuery的Ajax

1. get请求

// 直接使用$.get方法发送一个请求
    // 参数一：请求地址
    // 参数二：请求时携带的参数
    // 参数三：请求成功的回调
    // 参数四：返回的数据类型

    $.get("./ajax.php", 
    { id: 10 }, 
    function (res) { 
        console.log(res)
    }, 
    "json")

2. post请求

   // 直接使用$.post方法发送一个请求
    // 参数一：请求地址
    // 参数二：请求时携带的参数
    // 参数三：请求成功的回调
    // 参数四：返回的数据类型

    $.post("./ajax.php", 
    { id: 10 }, 
    function (res) { 
        console.log(res)
    }, 
    "json")

3.综合发送Ajax请求

// 使用$.ajax方法
// 只接受一个参数，是一个对象，这个对象对当前的请求进行所有配置
$.ajax({
    url:"./ajax",  // 必填  请求地址
    type:"get",  //选填，请求方式，默认get 忽略大小写
    data:{},  //选填  发送请求是携带参数的
    dataType:"jsonp", //选填  期望返回值的数据类型  默认是string
    async:true, //选填  是否异步  默认为true
    success(){}, //选填  成功的回调函数
    error(){}, //选填  成功的回调函数
    cache:true,//选填  是否缓存  默认为true
    context:div, //选填  回调函数中的this指向，默认是Ajax对象
    status:{},  //选填，根据对应的状态码进行函数执行
    timeout:3000,  //选填  超时事件
})

4. 发送jsonp请求

// 使用$.ajax方法也可以发送jsonp请求
// 只不过dataType要写成jsonp
$.ajax({
    url:"./jsonp.php",
    dataType:"jsonp",
    data:{name:"crystal",age:18},
    success(res){
        console.log(res)
    },
    jsonp:"cb"//jsonp请求的时候回调函数的key
    jsonpCallback:"fn"//jsonp请求的时候回调函数的名称
})

jQuery的Ajax全局函数

1. Ajax的全局函数
全局的 ajax 函数，也称作钩子函数
所谓的钩子函数，也就是在整个 ajax 执行到某个状态时，执行的函数
而且每个 ajax 请求，钩子函数都会被触发
2. ajaxStart

ajax请求,在 开始 的时候,会触发这个函数,多个请求只会触发一次

$(window).ajaxStart(function(){
    console.log("有一个请求开始了")
})

3. ajaxSend

任意一个ajax请求,在 准备 send 之前 ,会触发这个函数

$(window).ajaxSend(function(){
    console.log("有一个请求发送了")
})

4. ajaxSuccess

任意一个ajax请求,在 成功时,会触发这个函数

$(window).ajaxSuccess(function(){
    console.log("有一个请求成功了")
})

5. ajaxError

任意一个ajax请求,在 失败时,会触发这个函数

$(window).ajaxError(function(){
    console.log("有一个请求失败了")
})

6. ajaxComplete

任意一个ajax请求,在 完成 时,会触发这个函数

$(window).ajaxComplete(function(){
    console.log("有一个请求完成了")
})

7. ajaxStop

所有ajax请求,都 结束 时,会触发这个函数,只会触发一次

$(window).ajaxStop(function(){
    console.log("有一个请求结束了")
})

jQuery的多库共存

1. 什么是多库共存
jQuery 通过 $() 或者 jquery() 这两个暴露的方法 来操作
如果有其他类库，暴露的也是这两个，就会造成使用上的冲突
此时我们就需要多库共存（就是jquery的自我改名）
例如 : 玩游戏时，用户名被别人占用了，只能换一个名字
2. 操作步骤 — 完全交出控制权

//这个方法可以交并且传递一个true 的时候，会完全交出控制权
jQuery.noConflict(true)

//. 上面代码执行完毕以后$这个变量就不能用了
//jQuery这个变量也不能用了

console.1og($) // undefined
console. log(jQuery) // undefined

//如果没有参数true jQuery 还可以使用

3. 操作步骤 — 更换控制权

// 可以用一个变量来接受返回值，这个变量就是新的控制权
var aa = jQuery . noConflict(true)
//接下来就可以把aa当作jQuery向外暴露的接口使用了
aa('div').click(function () { console.1og('我被点击了') }

jQuery的插件扩展

1. jQuery.extend — 扩展给自己
只能通过jQuery来调用

// jQuery.extend接受一个参数， 是一个对象， 对象里面是我们打展的方法
jQuery. extend({
max: function (...n) { return Math.max. apply(null, n) },
})

//使用添加的方法
const max = $.max(4, 5, 3, 2, 6, 1)
console.1og(max) // 6
const min = $.min(4, 5, 3, 2, 6, 1)
console.log(min) // 1

2. jQuery.fn.extend — 扩展给元素集

// jquery.fn. extend()接受一个参数。是- .个对象，对象里面是我们扩展的方法
jQuery . fn. extend({
checked: function () {
// return关键字是为T保证链式编程
return this . each(function() { this.checked = true })
})
//使用扩展的方法
//靠元素集合来调用
$(' input[type=checkbox]'). checked()
//执行完毕之后，所有的复选框就都是迷中状态了

呼~~~终于总结完了。。。
最后希望你我都是积极向上的人♥