文章目录
一、jQuery介绍
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库
- jQuery是用户能够更方便的处理HTML Document、Events、实现动画效果，并且方便地进行Ajax交互，能够极大的简化JavaScript编程。它的宗旨就是：“Write less,do more”
二、Jquery优势
-
一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。(加载速度快)
-
丰富的DOM选择器。jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。(选择器更多)
-
链式表达式。jQuery的链式操作可以把多个操作写在一行代码搞定，更加简洁。
-
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
-
Ajax操作支持。jQuery简化了 Ajax操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
-
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
-
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应的插件，并且用jQuery插件做出来的效果很炫，并且可以更具自己需要去改写和封装插件，简单实用。
三、jQuery版本
- 1.x：兼容IE678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增，如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4(2016年5月20日)
- 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版本。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的花，一般会选择放弃对IE678的支持
四、jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象就是jQuery独有的。
如果一个对象是jQuery对象，那么它就可以使用jQuery里面的方法
jQuery导入之后需要使用关键字才能够使用
默认的关键字就是jQuery但是不好输入可以使用$符号替换
jQuery封装了js代码，让编写更简单，但是有时候js代码更快(原因要下加载jQuery在加载js代码)
ex:$('#dl1').html(); //获取id值为dl1的元素的html代码，其中html()是jQuery里面的方法
上面一句话相当于：document.getElementById('dl1').innerHTML;
虽然jQuery对象是包装DOM对象产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法
一个约定，我们在申明一个jQuery对象变量的时候，都在变量名前面使用$符号
jQuery的引用
由于jQuery是基于JS而开发出来的，则jQuery就是一堆JS代码，所以我们在使用jQuery前需要先进行引入，这里介绍两种jQuery引入方式。
第一种方式：将jQuery保存到JS文件内引入(这种没有网络也可以使用)
-
第一步：官方页面下载地址：https://jquery.com/download/
-
第二步：我们将点击箭头指向的版本的jQuery
(压缩版jQuery可能会看不懂，但是相对会节省一些空间，虽然对于电脑来说大差不差)(未压缩版能让你看到排序完整的jQuery源码)，随便个人选择那个版本，点击进去后就能看到一堆代码，直接在页面Ctrl+S另存为就行了。(也可以自己Ctrl+A复制代码自己在编辑器中创建相应的js文件粘贴进去)
此时我们就已经将jQuery保存到了一个JS文件内了
-
第三步：我们在HTML内通过script标签进行jQuery引入
<script src='jQueryjs文件地址'></script>
第二种引入方式：通过网址引入(这种是必须要有网络才能使用)
- 我们可以通过Bootcdn：cdn是一个内容分发网络，主要作用就是可以从距离我们本地最近的一个服务器获取内容。网址：https://www.bootcdn.cn/
- 然后选择版本号和版本，然后点击复制即可。
- 复制标签后我们就可以在HTML内的
head的标签内粘贴了
到此我们的jQuery引入就已经完成了，我选择的是网址引入的，当然最好是把jQuery的js文件的留作备份，以防没网时需要用到。
js代码与jQuery代码对比
let pel = document.getElementsByTagName('p')[0]; //标签名
pel.style.color = 'lightblue';
pel.nextElementSibling.style.color='darkred';
$('p').first().css('color','yellow').next().css('color','blue');
标签对象与jQuery对象
产生对象
var $variable = JQuery对象 (不常用)
var vaiable = $(标签对象);
var variable = DOM对象
$variable[0] // jQuery对象转换成DOM对象
1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚写的时什么对象
$('#id').html(); //jQuery对象可以使用JQuery的方法
$('#id')[0].innerHTML; //DOM对象使用DOM的方法
2.两者可以互相转换
标签对象转jQuery对象
$(标签对象);
jQuery对象转标签对象
jQuery对象[0];
jQuery对象.get(0);
五、jQuery查找标签
1.基本选择器
$('#id值'); // id选择器
$('.class值'); // class选择器
$('标签名'); // 标签选择器
2.组合选择器
$('span.c1'); // 查找span元素并且class类为c1的元素
$('div#di'); // 查找div元素并且id值为di的元素
$('div,span,p'); //查找div、span、p标签
$('span,#dl,.box'); //查找span标签、id值为dl的标签和类为box的所有标签
$('*'); //查找所有元素选择器
3.层次选择器
$('div span'); // 查找div里面所有span后代(子子孙孙)
$('div > span'); // 查找div里面的span标签(儿子)
$('div + span'); // 查找紧挨着div同层级后面的span标签(相邻)
$('div ~ span'); // 查找div同层级后面的所有span标签(兄弟)
jQuery选择器查找标签之后的结果与js有何区别
结果集都是数组但是功能有区别
1.如果使用索引取值 那么都是标签对象
标签对象是无法调用jQuery提供的方法的 # 详细查看图一
2.标签对象如果想转换成jQuery对象需要使用 $()
转换成jQuery对象的目的是为了使用jQuery提供的更多方法 # 详细查看图二
4.属性选择器
$('[name=gender]'); //找到name值为gender的标签
$('input[name=gender]'); //找到name属性值为gender的input标签
$('input[name!=gender]'); //找到name属性值不为gender的input标签
5.基本筛选器
:first // 第一个
:last // 最后一个
:eq(index) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从0开始计数
:odd // 匹配所有索引值为奇数的元素，从0开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器) // 移除所有满足not条件的标签
:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('li:first'); 优化 $('li').first()
6.表单筛选器
// 举例查找input标签
<input type='text'>
<input type='password'>
<input type='checkbox'>
$('input[type="checkbox"]'); //取到checkbox类型的input标签
$("input[type!='text']"); //取到类型不是text的input标签
表单筛选器可以看成是属性选择器优化而来
:text //获取文本类型
:password // 获取密码类型
:file // 获取文件类型
:radio // 获取单选框类型
:checkbox // 获取复选框类型
:submit // 获取提交按钮类型
:reset // 获取重置按钮类型
:button // 获取普通按钮类型
:enabled // 获取可以使用的类型
:disabled // 获取被禁用的类型
:checked // 获取单选框默认被选中的类型
:selected // 获取下拉框默认被选中的类型
六、筛选器方法
查找下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
查找上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
查找父元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
查找儿子与兄弟元素：
$("#id").children(); // 儿子们
$("#id").siblings(); // 兄弟们
'''链式操作的底层原理'''
对象调用方法之后还会返回一个对象 从而实现链式操作的效果
如果面向对象里面返回的对象也想继续再通过句点符的方式使用函数内添加一个 return self(具体看图2)
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
七、操作标签
1.class操作
jQuery操作 js操作
addClass() classList.add() //添加指定的类名
removeClass() classList.remove() //移除指定的类名
hasClass() classList.contains() //判断当前类是否存在
toggleClass() classList.toggle() //判断当前类是否存在，存在则删除，不存在则添加
.css('样式名','样式值') style.样式名='样式值'
2.文本操作
jQuery操作 js操作
text() innerText() //获取text里所有的内容
html() innerHTML() //获取html里所有的内容
val() value() //取得匹配的内容值
[0].files files[0] //取得匹配的文件值
eg:
<input type="text" id="d1">
<input type="file" id="d2">
$('#d1').val() //获取input框内值
$('#d1').val('520快乐'); //设置input框内值
$('#d2').val() //获取文件对象
$('#d2')[0].files
$('#d2')[0].files[0] //正确拿到文件数据
3.创建标签
jQuery操作 js操作
$('<a>') document.createElement('a')
jQuery可以创建样式、属性和方法
4.属性操作
jQuery操作 js操作
atter() setAttribute() getAttribute() //获取匹配的属性值
prop() //获取属性值，可以动态变换(checked)
'''
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，
在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，
不要使用attr("checked", "checked")。
'''
attr针对动态变化的属性获取会失真,比如性别选择已经默认选择男生，但是我们在浏览器终端里面操作prop,
点击女生标签会选中，显示是true,本质应该是false
prop('checked') prop('selected')
代码展示1：
<body>
<input type="text">
<input type="password">
<input type="radio">男
<input type="radio" checked>女
<input type="radio">其他
<select name="" id="">
<option value="">111</option>
<option value="" selected>222</option>
<option value="">333</option>
</select>
<input type="submit" value="提交">
<input type="button" value="按钮">
</body>
'''
总结：
1. 对于标签上有的能看到的属性和自定义属性都用attr
2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
'''
5.位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
eg：
$(window).scrolltop()
$('p').position();
$('p').offset();
6.文档处理
添加到指定元素内部后面（追加内容）
$(A).append(B); //把B追加到A
$(A).appendTo(B); //把A追加到B
添加到指定元素内部的前面（放置到前标签前面）
$(A).prepend(B); // 把B放置到A
$(A).prependTo(B); //把A放置到B
添加到指定元素外部的前面
$(A).after(B); //把B放到A的后面
$(A).insertBefore(B); //把A放到B的前面
移除和清空元素
$('标签名').remove() //从DOM中删除所有匹配的元素
$('标签名 子标签名')empty() //删除匹配的元素集合中所有的子节点
prop() //获取属性值，可以动态变换(checked)
eg:
1.创建p标签
let $pEle = $('<p>')
2.p标签创建文本
$pEle.text('你好啊')
3.p标签设置属性id名为d1值
$pEle.attr('id','d1')
4.内部尾部追加
$('#d1').append($pEle)
将变量添加到标签内部
$pEle.appendTo($('#d1'))
八、jQuery事件
jQuery绑定事件
Js绑定事件
绑定方式1: 提现写好函数 标签内部指定点击的时候运行
<input type="button" value="点我" onclick="func1()">
function func1(){alert('点点点个鬼')}
绑定方式2: 先查询到标签 然后绑定使用 可以批量绑定
<button id="d1">点一点</button>
let butEle = document.getElementById('d1')
butEle.onclick = function(){alert('说了不要点，你又点！')}
'''对于JS绑定事件不明白 可以查看前篇文章'''
JQ绑定事件
绑定方式1 //事件名作为方法名
jQuery对象.事件名(function(){事件代码})
$('div').click(function(){alter(123)})
绑定方式2 //
jQuery对象.on('事件名',function(){事件代码})
$('div').on('click',function(){alter(123)}) //新版本使用的多一些
jQuery对象.bind('事件名',function(){事件代码})
$('div').bind('click',function(){alter(123)}) //1.6-1.8之间的版本
''' 有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2 '''
'''
this表示事件的触发对象，在jQuery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法
可以使用$(this)转换为jQuery对象，使用jQuery方法。
'''
克隆事件
clone(true) 默认括号内不填写true不克隆事件仅克隆html 加true就可以克隆事件包括html，css样式
<button id="d1"> 克隆成功</button>
<script>
// 克隆
$('#d1').on('click',function (){
// this指代是当前被操作的标签对象 $('#d1')
console.log(this) //点击按钮克隆成功，输出台会持续克隆
$(this).clone().insertAfter($('body'))//克隆按钮（克隆成功）在浏览器展示，只克隆html,css 不克隆事件
$(this).clone(true).insertAfter($('body')) //括号内增加true 实现克隆事件
})
</script>
常用事件
click(function(){...}) //
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
input监控
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})
keydown和keyup事件组合示例：
按住shift实现批量操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>EvaJ</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Gold</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">
<script>
var flag = false;
// shift按键被按下的时候
$(window).keydown(function (event) {
console.log(event.keyCode);
if (event.keyCode === 16){
flag = true;
}
});
// shift按键被抬起的时候
$(window).keyup(function (event) {
console.log(event.keyCode);
if (event.keyCode === 16){
flag = false;
}
});
// select标签的值发生变化的时候
$("select").change(function (event) {
// 如果shift按键被按下，就进入批量编辑模式
// shift按键对应的code是16
// 判断当前select这一行是否被选中
console.log($(this).parent().siblings().first().find(":checkbox"));
var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
console.log(isChecked);
if (flag && isChecked) {
// 进入批量编辑模式
// 1. 取到当前select选中的值
var value = $(this).val();
// 2. 给其他被选中行的select设置成和我一样的值
// 2.1 找到那些被选中行的select
var $select = $("input:checked").parent().parent().find("select")
// 2.2 给选中的select赋值
$select.val(value);
}
});
</script>
</body>
</html>
hover事件示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery-3.3.1.js"></script>
</head>
<body>
<p>风萧萧兮易水寒，壮士一去不复返</p>
<script>
$('p').hover(
function () {
alert('来啦，老弟')
},
function () {
alert('慢走哦～')
}
)
</script>
</body>
</html>
实时监听input输入值变化示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实时监听input输入值变化</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" id="i1">
<script>
/*
* oninput是HTML5的标准事件
* 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
* 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
* oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
* 使用jQuery库的话直接使用on同时绑定这两个事件即可。
* */
$("#i1").on("input propertychange", function () {
alert($(this).val());
})
</script>
</body>
</html>
**事件相关补充**
阻止后续事件执行
阻止后续事件可以理解成一个标签完成了百分之五十进度后面的百分之五十被阻止运行 这就是阻止后续事件
能够触发form表单提交数据的动作标签有两个 <input type="submit"> <button></button>
让标签自带的属性不执行有两种方法
1. return false //推荐使用这个
2. e.preventDefault()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<form action="">
<p>再加把劲: <input type="text" name="info" placeholder="加油啦！！！"/></p>
<input type="submit" value="提交"/><button>but提交</button>
</form> '''我们输入的内容通过点击按钮可以发送出去刷新页面'''
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
我们也可以让标签之前的事件不执行 看方式1、2
<script>
$(':submit').click(function (e){
alert('一定要细心 千万不要慌!!!')
return false 方式1
e.preventDefault() 方式2
})
</script>
</body>
</html>
注意：像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
阻止事件冒泡
冒泡事件可以理解成点击一个按钮之后被嵌套的其他按钮也跟着被按了 一下全部全部触发
涉及到标签嵌套并且有相同事件的时候 那么会逐级往上反馈并执行
比喻介绍: 当span被点击事件执行->会向上一级p标签汇报自己被点击了 p标签会自己查看是否有点击事件
有则自动执行 在向上一级div标签汇报 div标签也会查看自己是否有点击事件 有则自动执行
该操作叫作 《事件冒泡》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div>div
<p>div>p
<span>div>p>span</span>
</p>
</div>
<script>
$('div').click(function (e) {
alert('div')
})
$('p').click(function (e) {
alert('p')
e.stopPropagation()
})
$('span').click(function (e) {
alert('span')
// return false
})
</script>
</body>
</html>
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
1.完整写法
$(document).ready(function(){
// 在这里写你的JS代码...
// 文档加载完毕后执行
})
1.1
$().ready(function(){
//在这里写你的代码
//文档加载完毕后执行
})
2.简写
$(function(){
// 在这里写你的代码...
//文档加载完毕后执行
})
文档加载完绑定事件，并且阻止默认事件发生：
登录校验示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录注册示例</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">姓名</label>
<input type="text" id="name">
<span class="error"></span>
<label for="passwd">密码</label>
<input type="password" id="passwd">
<span class="error"></span>
<input type="submit" id="modal-submit" value="登录">
</form>
<script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script>
function myValidation() {
// 多次用到的jQuery对象存储到一个变量，避免重复查询文档树
var $myForm = $("#myForm");
$myForm.find(":submit").on("click", function () {
// 定义一个标志位，记录表单填写是否正常
var flag = true;
$myForm.find(":text, :password").each(function () {
var val = $(this).val();
if (val.length <= 0 ){
var labelName = $(this).prev("label").text();
$(this).next("span").text(labelName + "不能为空");
flag = false;
}
});
// 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件
return flag;
});
// input输入框获取焦点后移除之前的错误提示信息
$myForm.find("input[type!='submit']").on("focus", function () {
$(this).next(".error").text("");
})
}
// 文档树就绪后执行
$(document).ready(function () {
myValidation();
});
</script>
</body>
</html>
与window.onload的区别
● window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
● jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
我们在使用静态创建的标签的时候 一个JQ对象就可以使一样的标签拥有同样的效果
但是我们使用动态方法创建一个标签 默认情况JQ是不会对动态创建标签生效的 如果想生效需要事件委托
九、jQuery动画效果
1.基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
2，滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
3，淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
4.自定义（了解即可）
animate(p,[s],[e],[fn])
页面加载
$('#d1').hide(5000) // 5秒后 隐藏
w.fn.init [div#d1]
$('#d1').show(5000) // 5秒后 展示
w.fn.init [div#d1]
$('#d1').slideUp(5000) // 往上滑动
w.fn.init [div#d1]
$('#d1').slideDown(5000) // 往下滑动
w.fn.init [div#d1]
$('#d1').fadeOut(5000) // 渐变
w.fn.init [div#d1]
$('#d1').fadeIn(5000) // 渐显
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4) // 渐变到某透明度不在变化
w.fn.init [div#d1]
自定义动画示例：
点赞动画示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<script src="jquery-3.2.1.min.js"></script>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
十、Bootstrap框架
什么是Bootstrap？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap的特点
- 简洁、直观、强悍的前端开发框架，html，css，js工具集，让web开发高速简单
- 基于html5、css3的bootstrap，具有大量诱人的特性，友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档
- 自定义jquery插件，完整的类库，bootstrap3基于less；bootstrap4基于sass的css预处理技术
- bootstrap响应式布局设计，让一个网站兼容不同分辨率的设备，bootstrap的响应式布局设计，给用户提供更好的视觉使用体验
- 具有丰富的组件
Bootstrap的下载
直接到Bootstrap官方网站下载即可
中文官网https://www.bootcss.com/
英文官网https://getbootstrap.com/
我这里就已中文网的为例展示
-
进入网站后就可以看到选择下载的版本和一些版本的大概信息
-
我这里就展示下载的V5版本了，具体那个版本看个人喜好。直接点击对应的版本下方的中文文档按钮即可
3.下载经过编译并压缩过的生产文件即可
- 下载 Bootstrap生产文件。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
- 下载 Bootstrap源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。
为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。
由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。
Bootstrap的使用
下载好后，将压缩包解压出来就得到了bootstrap的资源文件。
分别是css、js、font，全部放在项目的根目录即可。
然后就是引用Bootstrap
需要先在<head>标签中引入bootstrap：
1.引用BootstrapCSS文件
<link href="css/bootstrap.min.css" rel="stylesheet" />
2.引用BootstrapJS文件
<script src="js/bootstrap.min.js"></script>
3.最好是在引用一下jQuery的JS文件(因为Bootstrap涉及到js的部分可能需要用到jQuery)
// 这里引用的是网络链接方式
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
具体的使用方法，这里就不一一说明了，直接去看官方文档即可。(官方使用文档写的非常详细)
Bootstrap CSS的官方使用文档：https://v3.bootcss.com/css/
Bootstrap JS的官方使用文档https://v3.bootcss.com/javascript/
Bootstrap 组件的官方使用文档：https://v3.bootcss.com/components/
另外一个Bootstrap组件库(Font Awesome中文网址)：http://www.fontawesome.com.cn/
Font Awesome英文网址：https://fontawesome.com/
Bootstrap官方图标组件使用的span标签，Font Awesome网站的Bootstrap图标组件是使用的i标签
914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
