[TOC]
JQuery基础
主要对 选择元素的方法 进行大量优化
简介
版本
1.X：兼容 IE6/7/8 ，工作中最常见的，一般学习1.12版本
2.X：不兼容 IE6/7/8 ，多用于JQuery官方调整bug使用。开发中不使用
3.X：不兼容 IE6/7/8 ，只能用于高版本浏览器中使用，是现在官方主要维护
下载
官网下载：jquery.com/download/
辅助下载地址：www.bootcdn.cn/jquery/
min版本
普通版是存在回车、空格，调用起来会有点影响
min版是去除了回车、空格，调用起来略快
使用
引用JQuery
直接用 script 标签引入
选择元素(标签)
//$() 方法 该方法用于获取元素节点，并且十分强大
$('#id') // 通过 id 属性获取
$(".id") // 通过class属性获取
// 传统 dom树 获取
getElementById("id");
getElementsByClass("class");
获取/修改样式
// 获取某一样式属性
$("#id").css("属性名");
// 修改某一样式属性值
$("#id").css("属性名", "属性值");
注意：若是以class属性、标签名等选取的多个dom节点，修改样式时会将同class的所有元素一起修改
事件
$("#id").click(function(){
// 点击事件
});
动画效果
$("#id").animate( styleObj , time );
// styleObj为动画结束时元素样式，数据类型为对象
// time表示动画时间
对象
在JQuery对象中，内部封装了大量属性方法，如 css() 、 html() 、 animation()
| 方法/属性 | 说明 | |
|---|---|---|
| css() | 方法 | 样式获取、修改 |
| html() | 方法 | 标签内容修改 |
| animation() | 方法 | 动画样式 |
| length | 属性 | 元素个数 |
| size() | 方法 | 元素个数 |
注意：
通过JQuery获取到的元素不能直接使用原生js的对象
JQuery与原生js dom对象转换
JQuery => JS
let $p = $("p");
$p[0].innerText = "你好";
JS => JQuery
let op = document.getElementsByTagName("p")[0];
$(op).css("background-color","skyblue");
筛选选择器
在基础选择器后面增加一些筛选词，筛选出前面选择器的选中内容中一部分
或者可以作为高级选择器一部分
| 筛选词 | 说明 |
|---|---|
| $(":first") | 第一项 |
| $(":last") | 最后一项 |
| $(":eq(index)") | 下标为index的项 |
| $(":gt(index)") | 大于下表为index的项 |
| $(":lt(index)") | 小于下标为index的项 |
| $(":obb") | 下标为奇数的项 |
| $(":even") | 下标为偶数的项 |
| $(":not(selector)") | 去除所有与给定选择器匹配的元素 |
筛选方法
作用与筛选选择器相似，区别在于一个写在内，一个封装成方法
| 方法 | 说明 |
|---|---|
| first() | 第一项 |
| last() | 最后一项 |
| eq( index ) | 下标为index的项 |
JQuery常用方法
标签内容操作
html方法
作用：获取/修改文本内部标签
$().html()//获取内部子标签及文本
$().html( 修改内容 )//修改标签内容
// 与之相似的原生js
document.getElementById().innerHTML;
text方法
作用:获取/修改标签内部文本
$().text()//获取内部文本
$().text( 修改内容 )//修改标签内容
// 与之相似的原生js
document.getElementById().innerText;
val方法
作用：用来获取或者设置表单元素内容
$().val()//获取内部文本
$().val( 修改内容 )//
// 与之相似的原生js
document.getElementById().value
标签属性操作
attr方法
作用：用来获取或者设置标签的属性值
$().attr( 属性名 )//获取某个属性值
$().attr( 属性名, 属性值 )//修改某个属性值
// 与之相似的原生js
document.getElementById().getAttribute(属性名)
document.getElementById().setAttribute(属性名，属性值)
removeAttr方法
作用：用来移除标签的属性值
$().removeAttr( 属性名 )//删除某一属性
// 与之相识的原生js
document.getElementById().removeAttribute(属性名)
prop方法
作用：与attr方法相似，都是获取或者设置标签的属性值
$().prop( 属性名 )//获取某个属性值
$().prop( 属性名, 属性值 )//修改某个属性值
// 与之相似的原生js
document.getElementById().getAttribute(属性名)
document.getElementById().setAttribute(属性名，属性值)
标签样式操作
css方法
- 获取元素某一样式属性值
$().css( 样式属性名 )//获取
- 修改/设置
$().css( 样式属性名, 样式属性值 )
// 可以输入对象来一次性修改多个样式
$().css({
width:300,
height:400
})
//注意：复合属性的单一写法：要么 横线隔开，要么驼峰命名法
$().css( "backgroundColor" );
$().css( "background-color" );
标签类名操作
addClass方法
作用：添加类名
$().addClass( 类名 )
// 与之相似的原生js
document.getElementById().className +=""
removeClass方法
作用：移除全部类
$().removeClass()//不可传参
// 与之相似的原生js
document.getElementById().className = ""
toggleClass方法
作用：添加/移除目标类名
$().toggleClass( 类名 );
// 原来有该类就会自动移除
// 原来没有该类就会添加
hasClass方法
作用：判断该标签是否有某一属性
$().hasClass( 属性名 )
//返回值为：true 和 false
// 与之相似的原生js
document.getElementById().hasAttribute( 属性名 )
标签事件方法
点击事件
$().click(function(){
})
// 原生js
document.getElementById().addLinster("click",function(){
})
mouseenter方法
触发：鼠标进入元素时触发
$().mouseenter(function(){
})
// 原生js
document.getElementById().addLinster("mouseover",function(){
})
//注意：mouseenter没有事件冒泡，而mouseover有
mouseleave方法
触发：鼠标离开元素时触发
$().mouseleave(function(){
})
// 原生js
document.getElementById().addLinster("mouseout",function(){
})
//注意：mouseleave没有事件冒泡，而mouseout有
hover方法
$().hover( mouseenter方法,mouseleave方法 )
// hover想当然整合了mouseenter方法和mouseleave方法
$(this)指向自己
//在触发事件时，指向事件原
$().click(function(){
$(this).css("background","red");
})
标签节点操作
$(this)指向自己
//在触发事件时，指向事件原
$().click(function(){
$(this).css("background","red");
})
parent方法
作用：获取到自己的父级，获取到的对象为JQuery对象
可以直接使用Jquery方法属性
$().parent()
children方法
作用：获取到自己子级中的所有Jquery对象
$().children()
// 也可以在children方法内继续选取
$().children("p");//标签
$().children("#id");//id属性
siblings方法
作用：获取到除自己以外的其他同级兄弟JQuery对象
$().siblings();
// 也可以在siblings方法内继续选取
$().children("p");//标签
$().children("#id");//id属性
链式调用
$().click(function () {
$(this).css("background-color", "red") // 自己变红色
.siblings().css("background-color", "gold") // 兄弟变金色
.parent().css("background-color", "pink") // 父级变粉色
.siblings().css("background-color", "blue") // 父级的兄弟变蓝色
.children().css("background-color", "yellowgreen") // 父级的兄弟的子级变黄绿色
})
自行感悟即可
获取子级方法
作用：获取到子级内目标元素/元素组
方法：find()
$().find("span");
// 可以修改特定子级元素(组)
$().find("span").css({
color:red,
backgroundColor:black
})
兄弟节点获取
| 方法 | 说明 |
|---|---|
| $().next() | 下一个兄弟 |
| $().prev() | 上一个兄弟 |
| $().nextAll() | 后面所有兄弟 |
| $().prevAll() | 前面所有兄弟 |
方法内可以不写参数，会自动找下一个；若加参数，则自动寻找下一个目标参数的兄弟
祖先级节点
作用：获取到父级、父级的父级、一直获取到body前的所有父级
方法：$().parents()
JQuery排序和动画
排序
eq方法
结构：eq( number )
作用：排序并选取序数第number个元素
// 排序与自己原来的父级没有关系，只与位置有关
$("p").eq(1);
// 所有p标签中第二个（注意：序数是从0开始）
$(".div").eq(8);
// 所有class属性为div的标签中第九个（注意：序数是从0开始）
index方法
结构：index()
作用：获取在同一父级中同级兄弟的序数
$("p").index();
排他思想
思想：某一些触发事件时，触发源独一无二，其他同级兄弟都是默认
$().click(function(){
$(this).addClass("on").sublings().removeClass("on");
})
例子：Tab导航栏
// 上面导航栏为 .title span
// 内容部分为 .content ul
$(".title span").mouseenter(function(){
$(this).addClass("current").siblings().removeClass("current");
let index = $(this).index();
$(".content ul").eq(index).addClass("on").siblings().removeClass("on");
})
遍历
each方法
作用：遍历元素组内每一个元素
$().each(function(){
console.log($(this).index());
})
// 也可以为每个元素添加事件
$().each(function(i){
$(this).click(function(){
console.log(i)
})
})
优点：
- each内部this指向每一次遍历的元素
- each方法内部可以传参数 i，表示在遍历对象中的位置
入口函数
加载事件
在原生js中，加载事件一般为： window.onload
但加载事件一般都要等到页面所有资源(如DOM树、音频、视频、图片等)加载完成后才触发
window.onload = function() {}
JQuery的入口函数
在JQuery中，写有入口函数，只会在DOM树加载完成后执行
可以利用入口函数来代替加载事件
$(document).ready(function(){
})
// 简化入口函数
$(function(){
})
显示与隐藏
正常显示隐藏：宽度高度缩放+透明化
显示
方法：show()
| 参数 | 效果 |
|---|---|
| 无参数 | 直接显示，没有过度动画 |
| Number | 在规定时间内出现显示动画，单位：毫秒 |
| "slow" | 慢速动画显示 |
| "normal" | 正常动画显示 |
| "fast" | 快速动画显示 |
注意：show方法是在 css的display中修改的
隐藏
方法：hide()
| 参数 | 效果 |
|---|---|
| 无参数 | 直接隐藏，没有过度动画 |
| Number | 在规定时间内出现隐藏动画，单位：毫秒 |
| "slow" | 慢速动画隐藏 |
| "normal" | 正常动画隐藏 |
| "fast" | 快速动画隐藏 |
注意：hide方法是在 css的display中修改的
切换
方法：toggle()
| 参数 | 效果 |
|---|---|
| 无参数 | 直接隐藏/显示，没有过度动画 |
| Number | 在规定时间内出现隐藏/显示动画，单位：毫秒 |
| "slow" | 慢速动画隐藏/显示 |
| "normal" | 正常动画隐藏/显示 |
| "fast" | 快速动画隐藏/显示 |
滑动式显示隐藏
| 方法 | 说明 |
|---|---|
| slideDown() | 滑动显示 |
| slideUp() | 滑动隐藏 |
| slideToggle() | 滑动切换 |
参数：
| 参数 | 效果 |
|---|---|
| 不传参 | 默认动画过渡时间为400毫秒 |
| Number | 设置动画过度时间，单位为毫秒 |
| "slow" | 慢速动画过度 |
| "normal" | 正常动画过渡 |
| "fast" | 快速动画过渡 |
注意：
- 切换原理都是在css的display中修改的
- 若元素没设置宽高，不会有动画效果
- 动画效果为高度变化
淡入淡出
| 方法 | 效果 |
|---|---|
| fadeIn() | 淡入 |
| fadeOut() | 淡出 |
| fadeToggle() | 切换 |
| fadeTo() | 淡入/淡出到某一特定透明度 |
参数：
| 参数 | 效果 |
|---|---|
| 不传参 | 默认动画过渡时间为400毫秒 |
| Number | 设置动画过度时间，单位为毫秒 |
| "slow" | 慢速动画过度 |
| "normal" | 正常动画过渡 |
| "fast" | 快速动画过渡 |
注意：
- fadeTo( time, i )方法中，time表示动画时长，i表示透明度( 范围在0~1 )
动画
动画方法
方法：animate()
作用：执行css属性集的自定义函数
语法：$().animate( styles, speed, easing, callback )
参数1：css属性集合，确定最后位置的样式
参数2：规定动画速度，可以参考之前显示隐藏的时间参数，默认"normal"，可省略
参数3：设置动画效果，原理为easing函数
参数4：animate函数执行完后，要执行的函数
补充：easing函数
| 属性值 | 说明 |
|---|---|
| linear | 匀速 |
| swing | 开始结束慢，中间快 |
| easeInCubic | 逐步变快 |
| easeOutCubic | 逐步变慢 |
动画排队
- 同一个元素对象身上，如果定义了多个动画，动画会按照代码执行顺序排队等待执行
- 其他非运动的代码（如宽度高度等非位置属性），不会等待
- 不同元素动画不会相互干涉
动画延迟
方法：delay( time )
作用：设置延时
$().animate({top:30,left:30}).delay(300);
终止动画
方法：stop( boolean1 , boolean2 )
第一个参数：是否清空后面动画排队，true表示清空，false表示只停止当前动画
第二个参数：是否让当前动画立即完成，true表示立即完成并终止，false表示立即终止
上述参数都是布尔型
第二个参数默认值为true
清空动画排队思路
防止自己被多次触发执行，需要有及时清理排队的动画
方法一：
每个动画前面写个 stop(true)，及时清除
$().click(function(){
$(this).children().stop(true).slideUp(2000);
})
方法二：
使用函数节流=> is(":animated")
$().click(function(){
// 判断当前是否有动画过渡，有就节流
if($(this).children().is(":animated"))
return;
$(this).children().stop(true).animation({});
})
JQuery 节点操作
增删元素
添加元素
语法：
// 添加的新元素
let li = $("<li>123</li>");
// 添加进去
$("ul").append(li);
// 也可以一步到位
$("ul").append($("<li>123</li>"));
移除元素
语法：
// 元素自我删除
$(id).remove();
// 父级删除所有子级元素
$().empty()// 清除所有子节点以及子节点上面的事件
// 也可以设置空的html方法
$().html("");
克隆元素
语法：
let newBox1 = $("#box").clone(false);// 只克隆html元素，不克隆js部分
let newBox2 = $("#box").clone(true); // 克隆html元素以及所涉及的js部分
操作元素尺寸
内容宽度高度方法
获取语法：
$().width();// 获取宽度
$().height();//获取高度
设置语法：
$().width( Number );// 设置宽度，传参为数字型
$().height( Number );// 设置高度，传参同上
注意：设置的宽高原理是设置在行内式
包括padding的宽高
获取语法：
$().innerWidth(); // 获取宽度+左右padding
$().innerHeight(); //获取高度+上下padding
设置语法：
$().innerWidth( Number ); // 设置包含padding的宽度，注意：不会修改padding属性
$().innerHeight( Number ); //设置包含padding的高度，注意：不会修改padding属性
包括padding+border的宽高
获取语法：
$().outerWidth();// 获取宽度+padding左右+margin左右
$().outerHeight();// 获取高度+padding上下+margin上下
设置语法：
$().outerWidth( Number ); // 设置包含padding、margin的宽度，注意：不会修改padding、margin属性
$().outerHeight( Number ); //设置包含padding、margin的高度，注意：不会修改padding、margin属性
操作元素位置
获取元素距离文档位置
语法：
$().offset();
$().offset().left;// 相对于左位置（x轴）
$().offset().top; // 相对于上位置（y轴）
注意：获取到的数据是相对于网页的，并不是相对于上一个定位父级
获取相对于上一个定位参考元素的位置
语法：
$().position();
$().position().left;
$().position().right;
注意：获取到的数据是相对于上一级定位父级的，并不是相对于网页
卷去页面距离
语法：
// 无参时为获取卷页距离
$().scrollTop();
// 有参时为跳转到对应的卷页距离
$().scrollTop( Number );
JQuery事件操作
注册事件
简单方式注册
语法：$().事件名( 执行函数 )；
| 事件函数名 | 说明 |
|---|---|
| click() | 点击事件 |
| dbclick() | 双击事件 |
| mouseenter() | 鼠标进入事件 |
| mouseleave() | 鼠标移出事件 |
| scroll() | 鼠标中键滚动事件 |
| select() | 表单选中 |
on注册方法
语法：
$().on( 事件类型 , 执行函数 );
// on方法还可以委托让子元素执行
$("ul").on("click","li",function(){
})
移除事件
off方法
语法：
$().off( 事件类型， 执行函数名 );
// 也可以移除委托给子级的事件
$("ul").off( "click", "li", fn2 );
触发事件
trigger方法
语法：
$().trigger( 事件名 );
// 此方法可以让一些不触发的事件立即触发
$("button").click(function(){
$("input").trigger("click");
})
$("input").click(function(){
$(this).css({background:"#000",color:"#fff"});
$(this).select();
})
事件对象
事件处理程序中第一个形参为e
$().click(function(e){
})
通过事件对象e 获取的属性方法
| 事件属性/方法 | 说明 |
|---|---|
| 鼠标 | |
| e.clientX/Y | 参考浏览器确定鼠标横纵坐标 |
| e.pageX/Y | 参考文档确定鼠标横纵坐标 |
| e.offsetX/Y | 参考触发元素确定鼠标横纵坐标 |
| 键盘 | |
| e.keyCode | 返回键盘输入的键码数字 |
| e.altKey/shiftKey/ctrlKey | 检查”alt“、”shift“、”ctrl“是否被按下 true表示按下、false表示未按下 |
| 公共 | |
| e.target | 触发事件的dom元素 |
| e.currentTarget | 事件冒泡阶段中 |
| e.prevventDefault() | 阻止默认行为 |
| e.stopPropagation() | 阻止事件冒泡 |
多库共存问题
现象：$符号被占用
<script src="./js/jquery.js"></script>
<script> let $ = 123 </script>
<!-- 解决方法 -->
<script>
// 方法一：使用jQuery标识符进行调用
jQuery("button")click(function(){
...
})
// 方法二：释放$符号，设置新符号
let $1 = jQuery.noConflict();
$1("button").click(function(){
...
})
</script>
JQuery插件使用
获取方式
搜索 百度、Gitee、GitHub 等网站
浏览 CSDN、知乎、简书等技术性 文章
注意：插件都是非官方的，都是个人完成的
使用
找到并下载，再导入
