jQuery知识详解

喜欢ヅ旅行 2022-11-17 14:57 214阅读 0赞

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

--------------------

## 一.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>我是一个p标签</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('子节点');   // 在子级前面添加

1.  删除节点

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

1.  增加兄弟节点

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

1.  插入到兄弟节点

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

1.  节点的替换

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

### 26. iframe 和 load() ###