2006年1月发布的1.0版本
目前在市场上, 1.x , 2.x, 3.x .
2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码
3.x的时候增加es的新特性以及调整核心代码的结构
核心: write less, do more
下载: https://jquery.com/download/
所有版本的jQuery: https://code.jquery.com/
手册
在线手册: https://www.jq22.com/chm/jquery/index.html
离线手册:
获取元素
jQuery提供了大量让开发者获取页面元素的方法.都是通过$()函数来完成的.返回值都是一个jQuery对象,也叫jQuery集合.是一个伪数组对象.
基本
#id # id选择符
element # 元素选择符
.class # class选择符
selector1, selector2, selectorN # 同时获取多个元素的选择符
层级
ancestor descendant # 包含选择符
parent > child # 父子选择符
prev + next # 下一个兄弟选择符
prev ~ siblings # 兄弟选择符
基本
:first # 从已经获取的元素集合中提取第一个元素
:even # 从已经获取的元素集合中提取下标为偶数的元素
:odd # 从已经获取的元素集合中提取下标为奇数的元素
:eq(index) # 从已经获取的元素集合中提取指定下标index对应的元素
:gt(index) # 从已经获取的元素集合中提取下标大于index对应的元素
:last # 从已经获取的元素集合中提取最后一个元素
:lt(index) # 从已经获取的元素集合中提取下标小于index对应的元素
内容
:has(selector) # 从已经获取的元素集合中提取拥有指定选择符的元素
属性
[attribute=value] # 获取拥有指定数据attribute,并且置为value的元素
子元素
:first-child # 从已经获取的所有元素中提取他们的第一个子元素
:last-child # 从已经获取的所有元素中提取他们的最后一个子元素
:nth-child # 从已经获取的所有元素中提取他们的指定下标的子元素
表单对象属性
:checked # 提取已经设置了默认值的单选框提取出来
jQuery对象和dom对象
上面$()函数的返回值都是jQuery对象来的.这是一个伪数组 .所以这个对象具有jQuery内置的功能.可以直接调用jQuery提供的方法.但是不能直接操作原来js提供的dom方法.
例如:
总结:
1. jQuery对象打印的时候都会附带jQuery单词,而dom对象打印的时候往往是标签效果.
2. jQuery对象可以直接调用jQuery提供方法和属性,不能直接调用js原生提供的dom方法和属性.
$("选择符").html() # 可以修改内容
$("选择符").innerHTML = "" # 没有效果!!!
dom对象是无法使用jQuery提供的方法和属性,如果一定要调用,则需要把dom对象转换成jQuery对象才可以使用
3. jQuery可以通过下标获取内部的dom对象
$("li")[0] ===> <li>一个文本</li>
4. dom对象转换成jQuery对象
var list = document.getElementsByClassName("list");
$(list) => jQuery对象
操作内容
$("选择符").html() # 读取指定元素的内容,如果$()函数获取了有多个元素,则提取第一个元素
$("选择符").html(内容) # 修改内容,如果$()函数获取了多个元素, 则批量修改内容
$("选择符").text() # 效果同上,但是获取的内容是纯文本,不包含html代码
$("选择符").text(内容) # 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码
代码:
操作属性
读取属性值
$("选择符").attr("属性名"); // 获取非表单元素的属性值,只会提取第一个元素的属性值
$("选择符").prop("属性名"); // 表单元素的属性,只会提取第一个元素的属性值
操作属性
$("选择符").attr("属性名","属性值"); // 修改非表单元素的属性值,如果元素有多个,则全部修改
$("选择符").prop("属性名","属性值"); // 修改表单元素的属性值,如果元素有多个,则全部修改
$("选择符").attr("属性名","属性值").attr("属性名","属性值").attr().....
$("选择符").prop("属性名","属性值").prop("属性名","属性值").prop().....
$("选择符").attr({'属性名1':'属性值1','属性名2':'属性值2',.....})
$("选择符").prop({'属性名1':'属性值1','属性名2':'属性值2',.....})
特殊用法, 类似上面的内容操作,参数也可以使用一个匿名函数
$("选择符").attr("属性名",function(){
// 其他操作代码
return "新的属性值";
});
实现同一个对象,不断使用小圆点调用多个方法的关键,就是jQuery内部实现了链式调用.
操作样式
获取样式
$().css("样式属性"); # 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值
操作样式
$().css("样式属性","样式值").css("样式属性","样式值");
$().css({"样式属性1":"样式值1","样式属性2":"样式值2",....})
$().css("样式属性":function(){
// 其他代码操作
return "样式值";
});
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.0.js"></script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<script>
// 获取指定样式的值,jQuery中css方法,不仅可以获取到行内样式,还可以获取外部样式.
console.log( $("a").css("font-size") );
// 修改样式
$("a").css("font-size","22px").css("color","#fff");
$("a").css({
"text-decoration":"none",
"background-color":"blue",
"padding":"4px 8px",
"border-radius":"8px",
})
</script>
</body>
</html>
在jQuery除了css操作样式以外,我们也可以通过操作元素的class来给元素修改样式
$().addClass("class1 class2 ... ...") # 给获取到的所有元素添加指定class样式
$().removeClass() # 给获取到的所有元素删除指定class样式
$().toggleClass() # 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.0.js"></script>
<style>
a{
color: #000;
}
.close{
background-color: #000;
}
.close a{
color: #fff;
}
</style>
</head>
<body>
<button id="close">关灯</button>
<button id="open">开灯</button>
<button id="toggle">开灯/关灯</button>
<a href="http://www.baidu.com">百度</a>
<script>
$("#close").on("click", function(){
$("body").addClass("close");
});
$("#open").on("click", function(){
$("body").removeClass("close");
});
$("#toggle").on("click", function(){
$("body").toggleClass('close');
})
</script>
</body>
</html>
事件绑定
三种用法:
1. on 和 off
绑定事件
$().on("事件名",匿名函数)
解绑事件,给指定元素解除事件的绑定
$().off("事件名")
2. 直接通过事件名来进行调用
$().事件名(匿名函数)
3. 组合事件,模拟事件
$().ready() # 入口函数
$().hover(mouseover, mouseout) # 是onmouseover和 onmouseout的组合
$().trigger(事件名) # 用于让js自动触发指定元素身上已经绑定的事件
事件绑定和事件解绑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.0.js"></script>
</head>
<body>
<p>限制每次一个按钮只能投票3次</p>
<button id="zan">点下赞(<span>10</span>)</button>
<button id="cai">踩一脚(<span>10</span>)</button>
<script>
let zan = 0;
// // 事件绑定
// $("#zan").on("click", function(){
// $("#zan span").text(function(){
// zan++;
// let ret = parseInt($(this).text())+1;
// if(zan >= 3){
// $("#zan").off("click"); // 事件解绑
// }
// return ret;
// });
// });
$("#zan").click(function(){
$("#zan span").text(function(){
zan++;
let ret = parseInt($(this).text())+1;
if(zan >= 3){
$("#zan").off("click"); // 事件解绑
}
return ret;
});
})
</script>
</body>
</html>
入口函数的使用,可以让我们的jQuery或者js代码,在任意一个地方都可以使用,不会因为代码写在html的前面而报错!
$(document).ready(function(){
// js代码
});
// 简写
$(function(){
// js代码
})
模拟事件触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.0.js"></script>
<style>
input[type=file]{
display: none;
}
.upload{
width: 180px;
height: 44px;
border-radius: 5px;
color: #fff;
text-align: center;
line-height: 44px;
background-color: #000000;
border: none;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<input type="file" name="avatar">
<button class="upload">上传文件</button>
<script>
$(".upload").on("click", function(){
$("input[type=file]").trigger("click"); // 模拟事件的触发
});
</script>
</body>
</html>
动画特效
基本 show([s,[e],[fn]]) 显示元素 hide([s,[e],[fn]]) 隐藏元素 滑动 slideDown([s],[e],[fn]) 向下滑动 slideUp([s,[e],[fn]]) 向上滑动 淡入淡出 fadeIn([s],[e],[fn]) 淡入 fadeOut([s],[e],[fn]) 淡出 fadeTo([[s],opacity,[e],[fn]]) 让元素的透明度调整到指定数值 自定义 animate(p,[s],[e],[fn]) 自定义动画 stop([c],[j]) 暂停上一个动画效果,开始当前触发的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.0.js"></script>
<style>
.box{
width: 250px;
height: 250px;
background-color: #000;
position: fixed;
top: 50px;
left: 10px;
}
</style>
</head>
<body>
<button class="show">显示[入场]</button>
<button class="hide">隐藏[出场]</button>
<button class="fidein">淡入[入场]</button>
<button class="fideout">淡出[出场]</button>
<button class="slidedown">向下滑动[入场]</button>
<button class="slideup">向上滑动[出场]</button>
<button class="animate">自定义动画</button>
<div class="box"></div>
<script>
$(".show").on("click", function(){
$(".box").show(1000); // 参数1: 时间,单位毫秒 参数2: 执行效果完成以后的回调函数
});
$(".hide").on("click", function(){
$(".box").hide(1000, function(){
alert("找不到我了吧~");
});
});
$(".fidein").on("click", function(){
$(".box").fadeIn(1000);
});
$(".fideout").on("click", function(){
$(".box").fadeOut(1000);
});
$(".slidedown").on("click", function(){
$(".box").slideDown(1000);
});
$(".slideup").on("click", function(){
$(".box").slideUp(1000);
});
// 自定义动画
$(".animate").on("click",function(){
// $(".box").animate(动画最终效果,动画完成的时间,动画完成以后的回调函数)
$(".box").animate({
"border-radius":"50%",
"left": "120px",
"top": "200px",
},2000,function(){
$(".box").animate({
"border-radius":"0%",
"left": "10px",
"top": "50px",
},2000,function(){
$('.animate').trigger("click");
});
});
});
</script>
</body>
</html>
##
浙公网安备 33010602011771号