jQuery知识详解

故心故心故心故心小故冲啊

---

一.jQuery 的简介

1. 什么是JS框架和库

   • JS框架和库都是将原本JS的部分功能集合成一个JS文件，并且在使用的时候，引入这个文件，便可以使用这里面的功能。

2. 库和框架区别：

   • 框架（framework）通常是强制执行解决方案的一种方式，就像一个模具，需要你把所需的原材料放在模具里面，然后成品就会出来，由于模具已经建好，所以原材料不能乱加，人家要什么你就给什么，这时控制权在模，框架就像一门语言，有自己的世界。
   • 库（library）的形式就不同，控制权在用户手中，想实现什么功能就实现什么功能，库只是帮你封装了大量实用的函数，帮助你实现自己的目的。

3. 什么是jQuery

   • jQuery也是JS框架中的一种，它是2006年由一个17岁的美国人——约翰·莱西格创作出来的，可以说这是曾经世界上流行最为广泛的JS框架，没有之一，统治了JS十多年时间。

4. jQuery优点

   • 轻量级

   • 免费开源

   • 完善的文档

   • 丰富的插件支持

   • 完善的Ajax功能

   • 不会污染顶级变量

   • 强大的选择器功能

   • 出色的DOM操作封装

   • 出色的浏览器兼容性

   • 可靠的事件处理机制

   • 隐式迭代和链式编程操作

     主旨口号：write less，do more（写的更少,干的更多，以更少的代码,实现更多的功能)

5. jQuery的基本功能

   1. 访问和操作DOM元素
      既减少了代码的编写,又大大提高 了用户对页面的体验度。
   2. 控制页面的CSS样式
      更方便快捷的来操作CSS样式，且jQuery 已经完成了浏览器兼容性处理。
   3. 完善的Ajax网络请求
      使用AJAX可以极大提高用户体验和程序性能，jQuery框架中提供了专门处理网络请求的AJAX组件，使用jQuery中提供的方法来实现AJAX网络请求。
   4. 页面标签事件处理
      让表现层与功能开发分离
   5. 整套的动画特效实现
      可以满足开发中常见的动画效果实现，而且使用简单方便。
   6. 好用的工具方法和强大的插件支持
      利用插件机制程序员可以方便的对原有的框架和功能进行扩展。这些插件的使用,极大丰富了页的展示效果

二.jQuery的基本操作

1. 引入方式

1. 引入jquery-3.5.1.min.js文件，通过script标签的src属性引入；
2. 建议在body的尾部引入，效率更高；
3. 注意：不要在引入文件的那个script标签之间书写代码！
4. 版本问题：
   1. 要做IE兼容性处理，建议引入1.0版本
   2. 涉及安全性问题，需要3.0以上

2. 入口函数

JQ的入口函数相当于原生JS的window.onload事件

// 原生的JS写法
	window.onload = function(){...}
// JQ 的写法一
	jQuery(document).ready(function(){...})
// JQ 的写法二
	jQuery().ready(function(){...})
console.log(jQuery ===  $)   //  结果为 true  说明这两个是全等的
// JQ 最方便最简单的写法
	$(回调函数);
	$(function(){....})

执行时机不同：

• window.onload ：等页面全部加载完成后才执行该方法
• $(function(){})：等页面的DOM树绘制完成(此时浏览器还没有解析加载元素)后进行执行
• 总结：JQ入口函数执行在原生load事件之前。

执行次数不同：

• window.onload只能执行一次，后面会覆盖前面的
• jQuery框架中的ready方法可以多次执行，不存在覆盖

3. 事件绑定

// 语法:
	$('选择器').事件(function(){.....})  //这里注册事件不需要加 on
	$('选择器').on('事件',function(){....})
// 例子
	$('button').click(function(){
        console.log(this)
    })

4. 显示、隐藏与切换

// 语法:
	$('选择器').show(time)  // 显示
	$('选择器').hide(time)  // 隐藏
	$('选择器').toggle(time)  // 切换
// 这里的time表示动画时长.单位为毫秒


//  :eq(索引值)   : 找到相对索引的某个元素   eq()  同样是一个方法
//  .stop()    :   动画阻断
$('button:eq(0)').click(function(){
    $('.box').stop().toggle(1000);
})

5.滑动显示 , 隐藏和切换

// 语法:
	$('选择器').slideDown(time)    // 滑动显示
	$('选择器').slideUp(time)      // 滑动隐藏
	$('选择器').slideToggle(time)   // 滑动切换
// time : 参数 .动画时长,单位为毫秒

6.动画阻断

​ 当某个事件对象短时间内被重复触发，到时程序瘫痪时，可以使用动画阻断，来从事件源头清除动画，使动画每次都从零开始，没有叠加。

// 方法是
	$('选择器').stop()  // 如果设置为true,则清空队列,可以立即结束动画
// 例如
	$('#box').stop(true).slide(1000)

7. JQ 中访问和修改文本

// 语法:
	$('选择器').text('')   // 获取和修改选择器中的文本内容
	$('选择器').html('')   // 获取和修改选择器中的html内容
// 例子
	$('#box').text('我是一个P标签')
	$('#box').html('
我是一个p标签
')

8. JQ中的this : $( this )

console.log(this);    // 此时是一个 DOM 对象
console.log($(this));   // 此时是一个 JQ 对象

9. JQ操作css方法

$('选择器').css()   // JQ 操作css方法
// 语法一
	$('选择器').css('属性名','属性值')
	$('选择器').css('属性名','属性值').css('属性名','属性值')  //链式编程
// 语法二
	$('选择器').css({
        '属性名' : '属性值',
        '属性名' : '属性值'
    })

10. JQ 操作 标签方法

// 语法一
	$('选择器').prop('属性名','属性值')
	$('选择器').attr('属性名', '属性值')
// 语法二
	$('选择器').prop({
         '属性名' : '属性值',
        '属性名' : '属性值'
    })
	$('选择器').attr({
         '属性名' : '属性值',
        '属性名' : '属性值'
    })


// prop  和 attr 的区别
	attr   一般都是用来操作自动义属性的
    prop   一般都是用来操作标签自带的属性(尤其是表单标签)

11. JQ 的选择器

// 基本的css的选择器差不多
	$('元素:eq(索引值)')          //  :eq(索引值)  选取相对索引值的某个元素
    $('元素:gt(索引值)')          //  :gt(索引值)  选取大于某个索引值的元素
	$('元素:lt(索引值)')         //  :le(索引值)   选取小于某个索引值的元素
	:even    // 获取索引为偶数的元素
    :odd     // 获取索引为奇数的元素
    :first   // 获取索引为第一个的元素
    :last   //  获取索引为最后一个的元素

+  当前元素下一个元素
~  当前元素下面的所有兄弟元素
>  当前元素所有的子元素  第一级 只包括儿子 不包括孙子

11. 级别选择器的相关方法

// parent()
	$('选择器').parent();   //  表示选中某个元素的父级,括号里有元素,表示选中该父级,括号里面没有元素,表示默认的父级
// siblings()
	$('选择器').siblings()  // 表示选中某个元素兄弟元素,括号里有元素表示选中该兄弟元素,括号里没有元素表示选中所有的兄弟元素
// children()
	$('选择器').children()  // 表示选中某个元素的子级元素.括号里有元素,表示选中某个子级中的元素.括号里没有元素表示选中所有子级元素
		

12. hover方法

// hover()
	$('选择器').hover(function(){} , function(){})
	//第一个参数是鼠标移入事件函数.第二个函数是鼠标移出事件函数.如果只是传了一个参数,那么就是鼠标移出事件,相当于做了移入和移出两件事

13. 快捷修改宽高的方法

// 修改宽度的方法   width()
	width(200)    width('200px')     //  两种写法都可以.等同于   css('width', '200px')
// 修改高度的方法   height()
	height(200)   height('200px')    //  两种写法都可以.等同于   css.('width' ,  '200px')

14. 获取索引的的方法

index()   

15. 动态设置class的方法

addClass('类名')         //  添加类名.多个类名用空格分开
removeClass('类名')      //  删除类名.括号里没有写类名就是删除所有的类名.删除多个类名用空格分开
toggleClass('类名')      //  切换类名
hasClass('类名')        //  判断是否有这个类名

16.透明度方法

fadeOut()      //  淡出.  参数可以传时间.单位为毫秒
fadeIn()       //  淡入.
fadeToggle()   //  切换淡出淡入
fadeTo(time,opacity)     //  第一个参数是时间,第二个参数是透明到....   0 表示完全透明   1 表示完成不透明

17.自定义动画

animate()

• 第一个参数 : 表示修改样式,格式与css多属性修改完全相同 { key : value ,} (必选)
• 第二个参数: 表示动画持续时间
• 第三个参数: 用来设置动画速度.比如 linear swing
• 第四个参数: 是回调函数,在动画完成时执行的函数,每个元素执行一次

delay()

• 延迟后面动画的的执行方法
• 参数可以传延迟的时间

18. 重排与重绘

 /*
 	修改页面元素的css时，会涉及到重排与重绘
         重排：元素重新排列（比如改变盒子大小、文字大小，添加删除DOM元素）
         重绘：样式重新渲染（比如改变颜色、背景颜色、下划线）

         导致结果：html或css不稳定
  */

19. 对象的转换

// JS 对象转 JQ 对象
	var box = document.getElementById('box');   // JS 对象
	var box = $(box);       // 通过$()  转成 JQ 对象
// Jq 对象 转 JS 对象
	$('#box')     // JS 对象
	$('#box')[索引值]   // 方式一 转成了 JS对象
	$('#box').get(索引值)   // 方式二 转成 JS 对象

20.表单相关方法

// 获取文本输入框的值  
	$('选择器').val();
// 去除前后空格
	$.trim()
// 让用户不能输入空格
	var value = $('input').val()   // 获取表单的值
    var $valur = $.trim(value)      //  获取不能为空的值
    $('input').val($value)   // 用户输入不了空格
    

21.键盘事件

// 键盘按下触发
	.keydown(回调函数)
// 鼠标松开触发
	.keyup(回调函数)
// 键码
	e.keyCode

22.事件委托

• 定义：事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

• 为什么使用事件委托：

  • 考虑一个ul，在li的数量非常少的时候，为每一个li添加事件当然会使用for循环；但是数量多的时候这样做太浪费内存，长到上百上千上万的时候，为每个li添加事件就会对页面性能产生很大的影响。
  • 给一个ul里面的几个li添加了事件但是如果动态又生成了li则刚生成的li不具备事件这时就需要用到委托。

• 事件委托的作用:

  • 性能要好（为多个相同元素绑定事件）

  • 针对新创建的元素，直接可以拥有事件（为不存在的元素绑定事件）

    // 语法:
    	$('选择器').on('事件类型'. '子元素'.回调函数)  // 子元素可以不传,不传就是给自己绑定事件
    // 例子
    	$('ul').on('click', 'li'.function(){
                   // 此时的 $(this)指向的是 li(子级)
              })
    

23.位置相关方法

// 获取元素距离网页文档最左边的距离
	$('选择器').offset().left
// 获取元素距离网页文档最顶部的距离
	$('选择器').offset().top
// 获取匹配元素垂直滚动滚出的距离
	$(window).scrollTop()
// 案例   点击一个按钮让动画滑动到顶部
	$('button').click(function(){
        // 这里给html,body 设置是为了浏览器的兼容性
        $('html,body').animate({scrollTop : 0},1000);
    })

24. 遍历方法

1. each()方法

// 格式一
	$('选择器').each(function(index, item){})   // 第一个参数是索引,第二个参数是元素,只能遍历JQ对象
// 格式二
	$.each(obj,function(index,item){})     // 第一个参数是索引,第二个参数是元素,可以遍历JQ对象,数组,对象
	// 遍历对象传入的是  (key , value)

2. map()方法

// 格式一
	$('选择器').map(function(index,item){})  // 第一个参数是索引.第二个参数是元素,只能遍历JQ对象
// 格式二
	$.map(obj,function(item,index){})     // 第一个参数是元素,第二个参数是索引,可以遍历JQ对象,数组,对象
	// 遍历对象传入的 ( val , key)    传参的顺序很重要

3. JS原生遍历数组

// 方式一
	数组.forEach(function(item,index){})    //  无返回值,返回的是 undefined
		第一个参数 item -----  数组的元素
		第二个参数 index ----  数组的索引
// 方式二
     数组.map(function(item,index){})       //  有放回值,返回的是一个新的返回
		第一个参数 item -----  数组的元素
		第二个参数 index ----  数组的索引

25. 节点控制

1. 增加子节点

$('父元素').append('子节点');    // 在子级后面的添加
$('父元素'),prepend('子节点');   // 在子级前面添加

2. 删除节点

$('元素').empty()          // 清空元素里面的内容
$('元素').remove()        //  直接把元素都删除了(包括自己)

3. 增加兄弟节点

$('元素').before('兄弟元素')     // 在兄弟节点之前
$('元素').after('兄弟元素')      // 在兄弟节点之后

4. 插入到兄弟节点

$('插入的兄弟元素').insertBefore('被插入的兄弟元素')     // 插入到兄弟节点之前
$('插入的兄弟元素').insertAfter('被插入的兄弟元素')     // 插入到兄弟节点之后

5. 节点的替换

$('元素').replaceWith('元素')       //  用后者代替前者

26. iframe 和 load()

// ifranme
是一个标签,可以设置样式,做网页的嵌套,后台系统切换子页面的时候经常用到
把iframe 标签放在指定位置,修改他的src属性(prop)

// load()
$('选择器').load('文件路径')
载入HTML文件代码并插入到DOM中
如果想从vscode发布到浏览器查看，需要使用 `live server` 查看，不要用 `open in default browser` 。

三.UI框架

前端框架主要分为两种：

1.1、技术框架

JQuery、VueJs、ReactJs等，这些框架大多用于操作DOM，或者是处理数据，对于页面效果或数据处理是强项，但对UI美观能力较弱。

1.2、UI框架

Bootstrap、WEUI、VantUI、Ant-design、ElementUI等，这类框架是有人写好了大多数样式，你可以借助这些框架实现快速布局。

1.Bootstrap框架

2.jquery weui