jQuery语法操作:$("selector").action()
寻找元素(选择器与筛选器)
基本选择器:
$("*") 查找所有标签; $("#id") 查找某id标签; $(".class") 查找class标签;
$("element") 查找某一类标签如($("p")); $(".class,#id") 联合查找
层级选择器:
$(".outer div") 查找所有后代; $(".outer>div") 查找所有子代; $(".outer+div") 查找相邻兄弟; $(".outer~div") 查找不相邻兄弟
//常用的就是前六个
基本筛选器:
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="tiem1">111</li>
<li class="tiem2">222</li>
<li class="tiem3">333</li>
<li class="tiem4">444</li>
<li class="tiem5">555</li>
<li class="tiem6">666</li>
</ul>
<script src="jquery-3.2.1.js"></script>
<script>
$("li:first").css("color","red");
//li标签的第一行变红
$("li:last").css("color","red");
//li标签的最后一行变红
$("li:eq(3)").css("color","red");
//li标签索引为3的变红
$("li:gt(3)").css("color","red");
//li标签索引大于3的变红
$("li:lt(3)").css("color","red");
//li标签索引小于3的变红
$("li:even").css("color","red");
//li标签索引为偶数的变红
</script>
</body>
</html>
属性选择器:
$('[>) //自定义属性
表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
}
.left{
float: left;
width: 25%;
height: 800px;
background-color: burlywood;
}
.right{
float: left;
width: 75%;
height: 800px;
background-color: wheat;
}
.title{
background-color: yellow;
text-align: center;
line-height: 40px;
}
.con{
list-style: none;
padding-left: 80px;
font-size: 18px;
color: white;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">
<div class="item">
<div class="title" onclick="foo(this)">菜单一</div>
<ul class="con">
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="item">
<div class="title" onclick="foo(this)">菜单二</div>
<ul class="con hide">
<li>222</li>
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div class="item">
<div class="title" onclick="foo(this)">菜单三</div>
<ul class="con hide">
<li>333</li>
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div>
<div class="right"></div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
function foo(self) {
$(self).next().removeClass('hide');
$(self).parent().siblings().children('.con').addClass("hide");
}
</script>
</body>
</html>
查找筛选器
$("div").children(".test")
//查找div标签的子代中class="test"的标签
$("div").find(".test")
//查找div标签的后代中class="test"的标签
$(".test").next()
//查找class="test"的下一个标签(相邻)
$(".test").nextAll()
//查找class="test"的下面所有的标签
$(".test").nextUntil(可填下标值)
//查找class="test"的下面所有的标签，如果填值则取到相应标签
$("div").prev()
$("div").prevAll()
$("div").prevUntil()
//同next一样，只不过是往上取
$(".test").parent()
$(".test").parents()
$(".test").parentUntil()
//查找标签父类
$("div").siblings()
//查找除自己外的其他相邻标签
元素操作(属性,css,文档处理)
--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="" name="username">
<p>first P</p>
<p>second P</p>
<script src="jquery-3.2.1.js"></script>
<script>
// console.log($("p").first().text());
//取出第一个p标签的文本值，console.log()在控制台查看
// $("p").first().text('hello')
//text()括号里有值就是赋值
// console.log($("p").last().html());
//取出最后一个p标签的文本值，看似与text一样
// console.log($("p").last().html('hello'));
//赋值
// console.log($("p").last().html('<h1>hello</h1>'));
//与text的区别就是在于html可以创建一个标签，而text则是纯文本
// console.log($("input").val());
//取出input框中输入的值
// console.log($("input").val('123'));
//给input框中赋值
</script>
</body>
</html>