1、jquery对象，下面两个是一样的，都是jquery对象，我们学习jquery就是学习jquery对象的属性和方法
jquery
$
2、基本语法：先找到标签，然后对这个标签做操作
jquery（selector）.action() == $(selector).action()
3、寻找标签
3_1、选择器
基本选择器
通配符：查找所有的标签
$("*").css("color","red");
标签名：查找指定的标签名字
$("div").css("color","red");
id：通过id查找标签
$("#p1").css("color","blue");
class：通过class查找标签
$(".h1").css("color","red");
并列选择；通过逗号隔开上面的几种选择器
$(".h1,#p1,div").css("color","yellow");
层级选择器
后代选择器：通过空格隔开上面的几种基本选择器
$(".h1 #p1").css("color","yellow");
子代选择器：通过>隔开上面的几种基本选择器
$(".h1>#p1").css("color","yellow");
毗邻选择器：通过+号隔开上面的几种基本选择器，选择的下一个紧挨着的元素
$(".h1+#p1").css("color","yellow");
兄弟选择器：用~号隔开上面的几种基本选择器，选择是下一个兄弟选择器，不用紧挨着
$(".h1~#p1").css("color","yellow");
基本帅选器
first:选择器第一个标签
$("div li:first").css("color","red")
eq:选择指定的标签
$("div li:eq(2)").css("color","red")
last:选择最后一个标签
$("div li:last").css("color","red")
even：选择序列为偶数的标签
$("div li:even").css("color","red")
gt:选择序列大于某个值的标签
$("div li:gt(2)").css("color","red")
lt：选择序列大于某个值的标签
$("div li:lt(2)").css("color","red")
属性选择器
通过属性名称选择
$("[alex]").css("color","red")
通过属性名称和属性的值选择
$("[alex='sb']").css("color","red")
表单选择器：只对input标签生效，通过冒号来选择input的类型，下面的例子是帅选出type的类型为text标签
$(":text").css("width","800px")
3_2、帅选器：作用就是通过上面的选择器可以选中一个标签或者多个标签，如果选择了多个标签，那么我们就需要通过帅选器去选择我们想要的标签
过滤筛选器:
$("li").eq(2)
$("li").first()
$("li").last()
$("li").hasclass("div")
查找筛选器
children：只找儿子这一级的标签
$("div").children("#test3").css("color","red")
find：找所有的后代标签，包括儿子，孙子。。。。。
$("div").find("#test3").css("color","red")
next:指定标签的下一个标签
nextAll:指定标签的下面所有的标签
nextUntil：区间筛选器,找指定标签下面的兄弟标签，直到某个标签截止，但是不包括这个标签
$("div").nextUntil("#test3").css("color","red")
prev：找指定标签上面的一个标签
prevAll：找指定标签上面的所有的标签
prevUntil：区间筛选器，找指定标签上面的兄弟标签，直到某个标签截止，但是不包括这个标签
parent：找指定标签的父标签
parents：找父标签，父标签的父标签，父标签的父标签的父标签，一直往上找
parentsUntil：找父标签，父标签的父标签，父标签的父标签的父标签，一直往上找，直到某个标签截止
siblings：找兄弟标签，包括上面和下面的兄弟标签
$("div").siblings().css("color","red")
$("div").siblings("h1").css("color","red")
4、操作标签
attr:获取或者操作某个标签的属性
alert($("input").attr("type"));
获取某个属性的值
$("input").attr("type","radio");
设置某个属性的值
alert($("input").attr("type"));
打印某个属性的值
removeAttr：移除某个属性的值
$("body").children().eq(1).removeAttr("value")
prop和attr用法一致,prop一般用自由属性，attr一般用于自定义属性
removeProp和removeAttr的用法一致
看一个正选反选的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery实现正选和反选</title>
<script src="jquery-3.3.1.js"></script>
<style>
.xxx{
display: block;
}
table{
padding: 10px;
}
</style>
</head>
<body>
<table border="1">
<caption>正选和反选测试</caption>
<thead>
<tr>
<th>属性</th>
<th>属性值</th>
<th>是否选择</th>
</tr>
</thead>
<tbody>
<tr>
<td>国籍</td>
<td>中国</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>民族</td>
<td>汉</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>年龄</td>
<td>20</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>外甥</td>
<td>周雍博</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>儿子</td>
<td>崔皓然</td>
<td>
<input type="checkbox">
</td>
</tr>
</tbody>
</table>
<div class="xxx">
全选:<input type="button" value="全选" onclick="select_all()">
</div>
<div class="xxx">
反选:<input type="button" value="反选" onclick="delete_all()">
</div>
<div class="xxx">
反选:<input type="button" value="取消" onclick="cancel_all()">
</div>
<script>
function select_all() {
$("tbody").find("input").each(
function () {
$(this).attr("checked","checked")
}
)
}
function delete_all() {
$("tbody").find("input").each(
function () {
var select_y_n = $(this).attr("checked")
// alert(select_y_n)
if (select_y_n == "checked"){
$(this).removeAttr("checked")
}else {
$(this).attr("checked","checked")
}
}
)
}
function cancel_all() {
$("tbody").find("input").each(
function () {
$(this).removeAttr("checked")
})
}
</script>
</body>
</html>
5、Jquery的for循环
方式1
li = ["a","b","c"];
$.each(li,function (i,x) {
console.log(i,x)
})
dic = {name:"hahh",age:"xxx"}
$.each(dic,function (i,x) {
console.log(i,x)
})
方式2
先通过jquery来选择标签，然后在通过each来对选择出来的每个标签做处理，然后this这个关键词就是循环的每个元素
$("ul li").each(function () {
this.innerText = "xxxxx"
})
6、文档处理
内部插入
// $("#div1").append($("#p2"))
// 在id为div1的标签内部的最后面插入一个id为p2的标签
// $("#p2").appendTo($("#div1"))
// 把id为p2的标签插入到id为div1的标签的内部的最后面
// $("#div1").prepend($("#p2"))
// 在id为div1的标签内部的最前面插入一个id为p2的标签
// $("#p2").prependTo($("#div1"))
// 在id为div1的标签内部的最前面插入一个id为p2的标签
外部插入
// $("#div1").after($("#p3"))
// 在id为div1的标签的后面插入一个id为p3的标签
insertAfter
// $("#div1").before($("#p3"))
// 在id为div1的标签的上面插入一个di为p3的标签
insertBefore\
7、clone操作；clone、remove、empty、val、attr
看一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery_clone</title>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<div id="outer">
<div class="item">
<input type="button" value="+" onclick="func_clone(this)">
<input type="text">
</div>
</div>
<script>
function func_clone(self) {
var clone_ele = $(self).parent().clone();
clone_ele.children(":button").val("-");
clone_ele.children(":button").attr("onclick","func2(this)");
$("#outer").append(clone_ele)
}
function func2(self) {
$(self).parent().remove();
// empty：就要清空标签，只是清空内部的数据
// remove：就是删除整个标签
// 删除标签
}
</script>
</body>
</html>
浙公网安备 33010602011771号