jquery基础语法：$(selector).action()
<body>
<div>hello</div>
<script src="jquery-3.4.1.js"></script>
<script>
$("div").css("color","red")
</script>
</body>
1、选择器
- 基本选择器
$("*") //选择所有
$("#id") //根据id选择
$(".class") //根据class选择
$("element") //根据标签名字选择
$("div,p") //选择多个标签
- 层级选择器
$("div1 div2") //后代选择器，选择所有div中的div2标签
$("div1 > div2") //子代选择器，选择div1中的第一层为div2的标签
$("div1 + div2") //匹配div1下紧挨着的div2
$("div1 ~ div2") //匹配div1下相邻的div2
- 属性选择器
$('[id="abc"][name="dongfei"]') //选择属性是name="dongfei"的元素
- 基本筛选器
$("div:first") //筛选第一个，另一种写法：$("div").first() (推荐)
$("div:last") //筛选最后一个
$("div:eq(3)") //筛选第三个
$("div:even") //筛选偶数
$("div:odd") //筛选基数
$("div:gt(2)") //索引大于2的
$("div:lt(2)") //索引小于2的
- 表单选择器
$(":text") //选择text类型的input标签，$("['type'='text']")
- 查找筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<div class="outer">
<div class="inner">inner
<p class="p2">p2</p>
</div>
outer
<p class="p1">p1</p>
</div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li id="end">555</li>
<li>666</li>
</ul>
<script src="jquery-3.4.1.js"></script>
<script>
$(".outer").children("p").css("color","blue"); //只查找子标签
$(".outer").find("p").css("color","blue"); //查找.outer下所有的标签
$("li").eq(2).next().css("color","red"); //此标签以下一个标签
$("li").eq(2).nextAll().css("color","red"); //此标签以下所有
$("li").eq(1).nextUntil("#end").css("color","red"); //直到遇到id="end"的标签
$("li").eq(2).prev().css("color","red"); //此标签以上，prevAll和prevUntil同next
$(".p2").parent().css("color","red"); //查找父标签
$(".p2").parents().css("color","red"); //查找所有父标签
$(".p2").parentsUntil(".outer").css("color","red"); //查找所有父标签，直到".outer"
$("ul").siblings().css("color","red"); //反选
</script>
</body>
</html>
2、菜单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
height: 1000px;
100%;
}
.menu{
float: left;
background-color: beige;
30%;
height: 500px;
}
.content{
float: left;
background-color: firebrick;
70%;
height: 500px;
}
.title{
background-color: darkorange;
line-height: 40px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">菜单一</div>
<div class="con">
<div>子选项1</div>
<div>子选项2</div>
<div>子选项3</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单二</div>
<div class="con hide">
<div>子选项1</div>
<div>子选项2</div>
<div>子选项3</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单三</div>
<div class="con hide">
<div>子选项1</div>
<div>子选项2</div>
<div>子选项3</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
function show(self) {
$(self).next().removeClass('hide');
$(self).parent().siblings().children('.con').addClass('hide');
}
</script>
</body>
</html>
3、属性操作
<body>
<div class="div1" con="c1"></div>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见2
<div id="id1">
<p>ppp</p>
</div>
<input type="text" value="abc">
<div value="123"></div>
<script src="jquery-3.4.1.js"></script>
<script>
// attr,removeAttr, prop,removeProp
console.log($("div").hasClass("div1")); //判定div标签中是否有div1的class
console.log($('div').attr('con')); //获取con值
console.log($('div').attr('con','c2')); //修改con值
// checkbox不建议用attr，建议使用prop
console.log($(":checkbox:first").attr("checked")); //checked
console.log($(":checkbox:last").attr("checked")); //undefined
console.log($(":checkbox:first").prop("checked")); //true
console.log($(":checkbox:last").prop("checked")); //false
// addClass,removeClass
$('div').addClass("div2"); //添加class
$('div').removeClass("div1"); //删除class
// html,text,val(针对标签固有的value值)
console.log($("#id1").html()); //<p>ppp</p>
console.log($("#id1").html("<h1>h1</h1>")); //修改HTML内容
console.log($("#id1").text()); //ppp
console.log($("#id1").text("<h1>h1</h1>")); //修改文本内容
console.log($(":text").val()); //abc
$(":text").val("defg"); //修改value值
console.log($(":text").next().val()); //<empty string>
// css
$("div").css("color","red"); //添加单个css
$("div").css({"color":"red","background-color":"green"}); //添加多个css
</script>
</body>
4、遍历循环
<body>
<p>001</p>
<p>002</p>
<p>003</p>
<script src="jquery-3.4.1.js"></script>
<script>
var arr = [11,22,33];
// for (var i=0;i<arr.length;i++){
// $("p").eq(i).html(arr[i]);
// }
// 遍历数组
$.each(arr,function (x,y) {
console.log(x); //下标
console.log(y); //值
});
// 遍历标签
$("p").each(function () {
console.log($(this)); //标签
$(this).html('hello');
})
</script>
</body>
5、正反选
<body>
<button onclick="selectall();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button>
<hr>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>001</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>002</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>003</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>004</td>
</tr>
</table>
<script src="jquery-3.4.1.js"></script>
<script>
function selectall() {
$(":checkbox").each(function () {
$(this).prop("checked",true);
})
}
function cancel() {
$(":checkbox").each(function () {
$(this).prop("checked",false);
})
}
function reverse() {
$(":checkbox").each(function () {
$(this).prop("checked",!$(this).prop("checked"));
})
}
</script>
</body>
6、模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: rebeccapurple;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: coral;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
200px;
background-color: gold;
}
</style>
</head>
<body>
<div class="back">
<input id="ID1" type="button" value="click" onclick="action1(this)">
</div>
<div class="shade hide"></div>
<div class="models hide">
<input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>
<script src="jquery-3.4.1.js"></script>
<script>
function action1(self){
$(self).parent().siblings().removeClass("hide");
}
function action2(self){
//$(self).parent().parent().children(".models,.shade").addClass("hide")
$(self).parent().addClass("hide").prev().addClass("hide")
}
</script>
</body>
</html>
7、文档处理
<body>
<div class="c1">
<p>ppp</p>
</div>
<button>add</button>
<script src="jquery-3.4.1.js"></script>
<script>
// append,appendTo,prepend(从上边追加),prependTo：内部插入
$("button").click(function () {
// $(".c1").append("<h1>hello</h1>")
var $ele = $("<h1>"); //创建jQuery对象的标签
$ele.html("hello");
$ele.css("color","red");
$(".c1").append($ele); // == $ele.appendTo($(".c1"));
})
// after,insertAfter,before,insertBefore：外部插入
// replaceWith：替换
// empty,remove：删除
// clone：复制
</script>
</body>
- clone练习示例
<body>
<div class="outer">
<div class="item">
<button onclick="add_obj(this);">+</button>
<input type="text">
</div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
function add_obj(self) {
var $obj = $(self).parent().clone();
$obj.children("button").text("-");
$obj.children("button").attr("onclick","remove_obj(this)");
$(".outer").append($obj);
}
function remove_obj(self) {
$(self).parent().remove();
}
</script>
</body>
8、css操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1,.div2{
200px;
height: 100px;
}
.div1{
border: 5px solid rebeccapurple;
padding: 20px;
margin: 2px;
background-color: antiquewhite;
}
.div2{
background-color: rebeccapurple;
}
/*.outer{*/
/*position: relative;*/
/*}*/
</style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
// offset：获取相对于视口的偏移量
console.log($(".div1").offset().top);
console.log($(".div1").offset().left);
console.log($(".div2").offset().top);
console.log($(".div2").offset().left);
// position：获取相对于已经定位的父标签的偏移量
console.log($(".div1").position().top);
console.log($(".div1").position().left);
console.log($(".div2").position().top);
console.log($(".div2").position().left);
// height,width
console.log($(".div1").height()); //获取height像素
console.log($(".div1").height("250px")); //修改height像素
console.log($(".div1").width()); //获取width像素
console.log($(".div1").innerHeight()); //包括padding，不包括border
console.log($(".div1").outerHeight()); //包括padding和border
console.log($(".div1").outerHeight(true)); //包括padding、border和margin
</script>
</body>
</html>
9、返回顶部按钮示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1,.div2{
100%;
height: 800px;
}
.div1{
background-color: antiquewhite;
}
.div2{
background-color: rebeccapurple;
}
.returnTop{
position: fixed;
right: 20px;
bottom: 20px;
90px;
height: 50px;
background-color: gray;
color: white;
text-align: center;
line-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="returnTop hide" onclick="returnTop()">返回顶部</div>
<script src="jquery-3.4.1.js"></script>
<script>
window.onscroll = function () {
console.log($(window).scrollTop());
if($(window).scrollTop()>100){
$(".returnTop").removeClass("hide")
}else {
$(".returnTop").addClass("hide")
}
};
function returnTop() {
$(window).scrollTop(0); //滚轮返回顶部
}
</script>
</body>
</html>
10、事件绑定和事件委托
- 简写
$(".returnTop").click(function () {
$(window).scrollTop(0);
})
- 全写
$("ul li").bind("click",function () {
alert("123")
})
- 解绑
$("ul li").unbind("click");
- 事件绑定
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button>add</button>
<script src="jquery-3.4.1.js"></script>
<script>
$("ul").on("click","li",function () { //ul将事件委托给li
alert("123")
});
$("button").click(function () {
var $ele=$("<li>");
var len=$("ul li").length;
$ele.html((len+1)*111);
$("ul").append($ele);
});
</script>
</body>
11、动画效果
- 显示和隐藏
<body>
<div>hello world</div>
<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<script src="jquery-3.4.1.js"></script>
<script>
function f1() {
$("div").show(1000); //显示
}
function f2() {
$("div").hide(1000); //隐藏
}
</script>
</body>
- 淡入淡出：fadein/fadeout/fadeToggle/fadeTo
- 滑入滑出：slideDown/slideUp/slideToggle
12、回调函数
function f1() {
$("div").show(1000,function () {
alert(1000)
});
}
13、扩展方法
<script>
$.extend({
Myalert:function () {
alert("警告")
}
});
$.Myalert()
</script>
$.fn.extend({
GetText:function () {
console.log($(this).text());
}
});
$("p").GetText();