故心故心故心故心小故冲啊
一.jQuery 的简介
-
什么是JS框架和库
- JS框架和库都是将原本JS的部分功能集合成一个JS文件，并且在使用的时候，引入这个文件，便可以使用这里面的功能。
-
库和框架区别：
- 框架（framework）通常是强制执行解决方案的一种方式，就像一个模具，需要你把所需的原材料放在模具里面，然后成品就会出来，由于模具已经建好，所以原材料不能乱加，人家要什么你就给什么，这时控制权在模，框架就像一门语言，有自己的世界。
- 库（library）的形式就不同，控制权在用户手中，想实现什么功能就实现什么功能，库只是帮你封装了大量实用的函数，帮助你实现自己的目的。
-
什么是jQuery
- jQuery也是JS框架中的一种，它是2006年由一个17岁的美国人——约翰·莱西格创作出来的，可以说这是曾经世界上流行最为广泛的JS框架，没有之一，统治了JS十多年时间。
-
jQuery优点
-
轻量级
-
免费开源
-
完善的文档
-
丰富的插件支持
-
完善的Ajax功能
-
不会污染顶级变量
-
强大的选择器功能
-
出色的DOM操作封装
-
出色的浏览器兼容性
-
可靠的事件处理机制
-
隐式迭代和链式编程操作
主旨口号：write less，do more（写的更少,干的更多，以更少的代码,实现更多的功能)
-
-
jQuery的基本功能
- 访问和操作DOM元素
既减少了代码的编写,又大大提高 了用户对页面的体验度。 - 控制页面的CSS样式
更方便快捷的来操作CSS样式，且jQuery 已经完成了浏览器兼容性处理。 - 完善的Ajax网络请求
使用AJAX可以极大提高用户体验和程序性能，jQuery框架中提供了专门处理网络请求的AJAX组件，使用jQuery中提供的方法来实现AJAX网络请求。 - 页面标签事件处理
让表现层与功能开发分离 - 整套的动画特效实现
可以满足开发中常见的动画效果实现，而且使用简单方便。 - 好用的工具方法和强大的插件支持
利用插件机制程序员可以方便的对原有的框架和功能进行扩展。这些插件的使用,极大丰富了页的展示效果
- 访问和操作DOM元素
二.jQuery的基本操作
1. 引入方式
- 引入jquery-3.5.1.min.js文件，通过script标签的src属性引入；
- 建议在body的尾部引入，效率更高；
- 注意：不要在引入文件的那个script标签之间书写代码！
- 版本问题：
- 要做IE兼容性处理，建议引入1.0版本
- 涉及安全性问题，需要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. 节点控制
- 增加子节点
$('父元素').append('子节点'); // 在子级后面的添加
$('父元素'),prepend('子节点'); // 在子级前面添加
- 删除节点
$('元素').empty() // 清空元素里面的内容
$('元素').remove() // 直接把元素都删除了(包括自己)
- 增加兄弟节点
$('元素').before('兄弟元素') // 在兄弟节点之前
$('元素').after('兄弟元素') // 在兄弟节点之后
- 插入到兄弟节点
$('插入的兄弟元素').insertBefore('被插入的兄弟元素') // 插入到兄弟节点之前
$('插入的兄弟元素').insertAfter('被插入的兄弟元素') // 插入到兄弟节点之后
- 节点的替换
$('元素').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等，这类框架是有人写好了大多数样式，你可以借助这些框架实现快速布局。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
