JQuery 介绍
jQuery 是一个开源的，免费的JavaScript库，也是目前最广泛使用的JavaScript库。
JQuery 在语法上，极大的简化了js的功能，可以更加快捷，方便的编写web功能
在开发过程当中，JQuery就是一个js文件，我们直接导入就可以了。
<script src="jquery.min.js"></script>
<script>
$()
</script>JQ使用js的基本语法
JQ选择器
JQ选择器的固定格式是$(“选择器”)，选择器的使用方式类似CSS
选择器 | 描述 |
$("#id") | id选择器 |
$(".class") | 类选择器 |
$(“tag”) | 标签选择器 |
$(“tag[attribute = ‘value’]”) | 属性选择器 |
$(“tag[attribute != ‘value’]”) | 属性反选择器 |
$(“a,b”) | 并列选择器 |
$(“a>b”) | 子选择器 |
$(“a b”) | 后代选择器 |
$(“a:eq(index)”) | 索引选择器 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>p1</p>
<p id="p2">p2</p>
<p class="pp">p3</p>
<p class="pp">p4</p>
<p class="pp">p5</p>
<p name="p_name">p6</p>
<p>p7</p>
<div class="d1">
<span>1</span>
<p>
<span>2</span>
</p>
</div>
<div class="d2">
3
</div>
<script src="jquery.min.js"></script>
<script>
// $("#p2").css("color","red"); //id选择
// $(".pp").css("color","green"); // class选择器，可以批量修改表情的属性
//$("p").css("color","green") // 标签选择器，可以批量修改表情的属性
// $("p[name='p_name']").css("color","red") // 属性选择器
//$("p[name!='p_name']").css("color","red") // 属性选择器取反
// $(".d1,.d2").css("color","red") // 并列选择器
// $(".d1>span").css("color","red") // 子选择器
// $(".d1 span").css("color","red") // 后代选择器
$("p:eq(2)").css("color","red") // 索引选择器取反
</script>
</body>
</html>注意：
1、JQ和JS一样，只有id选择器返回一个对象，其他的返回数组对象，但是JQ可以直接批量操作
2、JQ批量选择的对象一旦被循环，遍历的对象就不是jq对象，是js对象了。
var p_list = $(".pp")[1];
// p_list.css("color","red"); 建议写法 $(p_list).css("color","red")
// p_list.style.color = "red";
console.log(p_list)JQuery选择方法
方法 | 描述 |
parents | 先辈，包括父 |
parent | 父辈 |
siblings | 兄弟 |
prev | 上一个兄弟 |
next | 下一个兄弟 |
childre | 子元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
parents
<div>
<p>prev</p>
<p id="p_id">
self
<span>child1</span>
<span>child2</span>
<span>child3</span>
</p>
<p>next</p>
<p>brother</p>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
$("#p_id").css("border","1px black solid")
$("#p_id").children().css("border","1px black solid")
$("#p_id").parent().css("border","1px black solid")
$("#p_id").parents().css("border","1px black solid")
$("#p_id").siblings().css("border","1px black solid")
$("#p_id").prev().css("border","1px black solid");
$("#p_id").next().css("border","1px red solid")
</script>
</body>
</html>JQ修改样式
JQ主要使用.css方法进行样式修改，但是.css方法实际上比js的style方法要灵活很多。
可以通过.css方法获取标签的css参数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
}
</style>
</head>
<body>
<p id="p_id">
这是一个P
</p>
<script src="jquery.min.js"></script>
<script>
var color = $("#p_id").css("background-color");
console.log(color)
</script>
</body>
</html>也可以传递新的样式，修改样式到标签上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
}
</style>
</head>
<body>
<p id="p_id">
这是一个P
</p>
<script src="jquery.min.js"></script>
<script>
var color = $("#p_id").css("background-color","blue");
console.log(color)
</script>
</body>
</html>修改多个样式需要在css方法当中传入对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
}
</style>
</head>
<body>
<p id="p_id">
这是一个P
</p>
<script src="jquery.min.js"></script>
<script>
$("#p_id").css({
"background-color": "blue",
"font-size": "80px"
});
</script>
</body>
</html>.css方法会对之前的css样式进行覆盖，单独修改一个样式不方便，所有还有三个方法可以使用。
方法 | 描述 |
addClass | 添加class |
removeClass | 移除class |
toggleClass | 切换class，有就删除，没有就加上 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.big{
font-size: 32px;
}
.small{
font-size: 2px;
}
.red{
color: white;
background-color: red;
}
</style>
</head>
<body>
<p id="p_id">
这是一个P
</p>
<button id="b_id">变大</button>
<button id="s_id">变小</button>
<button id="r_id">变红</button>
<script src="jquery.min.js"></script>
<script>
$("#b_id").click(
function () {
$("#p_id").toggleClass("big")
}
);
$("#s_id").click(
function () {
$("#p_id").toggleClass("small")
}
);
$("#r_id").click(
function () {
$("#p_id").toggleClass("red")
}
);
// $("#p_id").addClass('big');
// $("#p_id").addClass('red');
// $("#p_id").removeClass('red')
</script>
</body>
</html>JQ修改属性
JQ的属性操作拥有一个方法叫作.attr
.attr 可以获取属性值
.attr 可以设置属性值
.attr 可以设置多个属性值
removeAttr 可以移除属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p_id">
123
</p>
<script src="jquery.min.js"></script>
<script>
// var id = $("#p_id").attr("id");
// var id = $("#p_id").attr("class");
// $("#p_id").attr("class","red");
$("#p_id").attr({
"class":"red",
"name": "abc"
});
$("#p_id").removeAttr("class")
</script>
</body>
</html>JQ文本操作
方法 | 描述 |
text | 如果有值，覆盖当前的内容放入标签，只放入文本内容，没有传参就获取当前内容 |
html | 如果有值，覆盖当前的内容放入标签，可以放入HTML标签，没有传参就获取当前内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p_id"></p>
<script src="jquery.min.js"></script>
<script>
$("#p_id").text("<span>hello world</span>");
console.log($("#p_id").text());
$("#p_id").html("<span>hello world</span>");
console.log($("#p_id").text());
</script>
</body>
</html>JQ尺寸操作
方法 | 描述 |
width | 对象的宽度，没有值，获取当前的宽度，如果有值，设置宽度 |
height | 对象的高度，没有值，获取当前的，高度，如果有值，设置高度 |
offset | 对象的偏移量 (左，上) |
offset.top | 上偏移量 |
offset.left | 左偏移量 |
offset不修改标签的位置，只是获取偏移量,如果想移动对象，还需要css方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background-color: royalblue;
position: absolute;
top: 30px;
left: 50px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script src="jquery.min.js"></script>
<script>
// var offset = $("#box").offset();
// console.log(offset)
var offset_left = $("#box").offset().left;
console.log(offset_left);
$("#box").css("left","500px")
</script>
</body>
</html>JQ动画
显示和隐藏
三种参数
fast 快
slow 慢
毫秒
方法 | 描述 |
show() | 显示 |
hide() | 隐藏 |
toggle() | 切换 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 500px;
height: 500px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">切换</button>
<script src="jquery.min.js"></script>
<script>
$("#btn").click(
function () {
$("#box").toggle(3000)
}
)
</script>
</body>
</html>淡入淡出
方法 | 描述 |
fadeIn | 淡入 |
fadeOut | 淡出 |
fadeToggle | 切换 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 500px;
height: 500px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">切换</button>
<script src="jquery.min.js"></script>
<script>
$("#btn").click(
function () {
$("#box").fadeToggle(1000)
}
)
</script>
</body>
</html>滑入滑出
方法 | 描述 |
slideDown | 滑出 |
slideUp | 滑入 |
slideToggle | 切换 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 500px;
height: 500px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">切换</button>
<script src="jquery.min.js"></script>
<script>
$("#btn").click(
function () {
$("#box").slideToggle(1000)
}
)
</script>
</body>
</html>自定义动画
animate自定义动画，四个参数
参数 | 描述 |
{attr:value，attr1:“value1”} style | 对象格式的css样式，就是要变化的结果样式 |
speed | 时间戳，用来表示整个效果执行的时间（快慢） |
easing | 不同动画中设置动画的速度，swing linear |
callback | animate动画执行完成调用的函数，回调函数 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
font-size: 50px;
font-weight: 900;
color: green;
opacity: 1;
display: block;
}
</style>
</head>
<body>
<div id="box">
hello world
</div>
<button id="btn">切换</button>
<script src="jquery.min.js"></script>
<script>
$("#btn").click(
function () {
$("#box").animate(
{
opacity: "0",
},2000
)
}
)
</script>
</body>
</html>回调函数使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
font-size: 50px;
font-weight: 900;
color: green;
opacity: 1;
display: block;
}
</style>
</head>
<body>
<div id="box">
hello world
</div>
<button id="btn">切换</button>
<script src="jquery.min.js"></script>
<script>
$("#btn").click(
function () {
$("#box").animate(
{
opacity: "0"
},2000,function () {
$("#box").css("display","none")
}
)
}
)
</script>
</body>
</html>JQ事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点击</button>
<script src="jquery.min.js"></script>
<script>
$("#btn").click(
function () {
$("#btn").text("点击过了")
}
)
</script>
</body>
</html>注意:不要再js当中写jq，jq当中可以使用js
JQ元素操作
创建HTML元素节点
方法 | 描述 |
$("<p>") | 创建元素 |
append | 元素内尾部追加元素 |
prepend | 元素内头部添加元素 |
before | 元素外前边添加元素 |
after | 元素外后边添加元素 |
clone | 复制元素，记得加参数true来clone内容 |
remove | 删除元素 |
empty | 清空所有后代元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div_id">
<span>1</span>
</div>
<script src="jquery.min.js"></script>
<script>
var p = $("<p>这是一个p</p>");
var div = $("#div_id");
div.append(p.clone(true)); //放到后面
div.prepend(p.clone(true)); //插入到前面
div.after(p.clone(true));
div.before(p);
// p.remove()
div.empty()
</script>
</body>
</html>案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c_p{
border-bottom: black 2px solid;
line-height: 50px;
font-size: 24px;
}
.c{
display: inline-block;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<p class="c_p">
<span>城市：</span>
<span class="c">北京</span>
<span class="c">天津</span>
<span class="c">上海</span>
<span class="c">广州</span>
<span class="c">深圳</span>
<span class="c">张家口</span>
</p>
<p id="result" class="c_p" style="border: none;display: inline-block">
</p>
<span class="c_p" id="empty_span">清空</span>
<script src="jquery.min.js"></script>
<script>
function del_self(obj) {
$(obj).remove()
} //删除自己
function add_city(obj) {
var clone_obj = $(obj).clone(true);
clone_obj.attr("onclick","del_self(this)");
$("#result").prepend(clone_obj)
} //clone后添加
$(".c").attr("onclick","add_city(this)"); // 给城市添加属性
$("#empty_span").click(
function () {
$("#result").empty()
}
) //清空
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
