jQuery学习教程，写更少的代码,做更多的事情
Posted IT_Holmes
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习教程，写更少的代码,做更多的事情相关的知识，希望对你有一定的参考价值。
1.jQuery DOM的CSS属性
1.css()方法
例如：给元素添加css的一些样式,看注释！！
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div>你好啊。</div>
<script type="text/javascript">
$(function(){
//css设定单个属性和值
$("div").css("height","100px");
//css可以设定多个属性和属性值
$("div").css({"color":"red","background-color":"green"});
//css还可以获取属性的属性值，颜色获取的值会是2进制形式
console.log($("div").css("color"));
})
</script>
</body>
</html>
2.height()和width()方法
例如：使用height和width来查看属性值,也可以设定。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
div{
width: 100px;
height: 100px;
padding: 20px;
margin:30px;
border: 2px solid yellow;
}
</style>
<body>
<div>你好啊。</div>
<script type="text/javascript">
$(function(){
//使用height和width来查看属性值,也可以设定。
var d = $("div");
console.log(d.height());
console.log(d.width());
})
</script>
</body>
</html>
3.innerHeight()和innerWidth()方法
例如：
1.使用innerHeight和innerWidth得到的数值，会加上padding，但不加border！这里和上一个的方法有一个加不加padding的区别。
2.padding有两个，所以加双倍。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
div{
width: 100px;
height: 100px;
padding: 100px;
margin:30px;
border: 20px solid yellow;
}
</style>
<body>
<div>你好啊。</div>
<script type="text/javascript">
$(function(){
//使用innerHeight和innerWidth得到的数值，会加上padding，但不加border！。
//padding有两个，所以加双倍。
var d = $("div");
console.log(d.innerHeight());
console.log(d.innerWidth());
})
</script>
</body>
</html>
4.offset()方法
例如：
1.offset()方法获取坐标值，当然和其他方法一样，也可以设置坐标。
2.offset()方法设置坐标。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
div{
width: 100px;
height: 100px;
padding: 100px;
margin:30px;
border: 20px solid yellow;
}
</style>
<body>
<div>你好啊。</div>
<script type="text/javascript">
$(function(){
//offset()方法获取坐标值，当然和其他方法一样，也可以设置坐标。
var d = $("div");
console.log(d.offset());
//offset()方法设置坐标。
var p = {
top:300,
left:300
}
console.log(d.offset(p));
})
</script>
</body>
</html>
5.outerHeight()和outerWidth()方法
例如：
1.outerHeight()和outerWidth()方法，包括了padding,margin,border，注意上下要双倍。
2.这里默认为false，是不添加margin的，想要计算margin，就要添加true。
3.添加true，来加上margin的计算
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
div{
width: 100px;
height: 100px;
padding: 100px;
margin:30px;
border: 20px solid yellow;
}
</style>
<body>
<div>你好啊。</div>
<script type="text/javascript">
$(function(){
//outerHeight()和outerWidth()方法，包括了padding,margin,border，注意上下要双倍。
//这里默认为false，是不添加margin的，想要计算margin，就要添加true。
var d = $("div");
console.log(d.outerHeight());
console.log(d.outerWidth());
//添加true，来加上margin的计算
console.log(d.outerHeight(true));
console.log(d.outerWidth(true));
})
</script>
</body>
</html>
6.position()方法
position()方法和offset()方法的坐标不一样！
例如：
1.position()方法所指定的元素是和父级元素所确定的坐标。
2.这里和offset()方法不一样!offset是和左上角最顶端定位的。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
*{
margin:0;
padding: 0;
}
div{
padding: 15px;
background-color: antiquewhite;
position: absolute;
left:100px;
top: 100px;
}
p{
margin-left: 10px;
background-color: aquamarine;
}
</style>
<body>
<div>
<p>内部里面。</p>
</div>
<script type="text/javascript">
$(function(){
//position()方法所指定的元素是和父级元素所确定的坐标。
//这里和offset()方法不一样!offset是和左上角最顶端定位的。
var p = $("p").position();
console.log(p);
var of = $("p").offset();
console.log(of);
})
</script>
</body>
</html>
7.srollLeft()和scrollTop()方法
例如：
1.这两个方法一般和overflow属性配合使用。
2.scrollTop方法改变开始的垂直坐标位置。
3.scrollLeft方法改变开始的水平坐标位置。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
.d{
width: 200px;
height: 100px;
overflow: auto;
margin: 5px;
padding: 5px;
position:relative;
border: 3px solid #666666;
background-color: #cccccc;
}
p{
width: 1000px;
height: 1000px;
margin: 10px;
padding: 5px;
border: 2px solid #666666;
}
</style>
<body>
<div class="d">
<h1>您好啊</h1>
<p>hello</p>
</div>
<script type="text/javascript">
//这两个方法一般和overflow属性配合使用。
//scrollTop方法改变开始的垂直坐标位置。
$(".d").scrollTop(300);
console.log($(".d").scrollTop());
//scrollLeft方法改变开始的水平坐标位置。
$(".d").scrollLeft(300);
console.log($(".d").scrollLeft());
</script>
</body>
</html>
2.jQuery 过滤
1.eq(index)方法
index是索引。
例如：
1.eq方法通过index来找到相应的元素！
2. 这里注意index索引从0开始
3.eq方法的索引也可以是负数，也就是倒着来决定。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
</head>
<style type="text/css">
</style>
<body>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
//eq方法通过index来找到相应的元素！
// 这里注意index索引从0开始
$("li").eq(1).css("background-color","red");
//eq方法的索引也可以是负数，也就是倒着来决定。
$("li").eq(-1).css("background-color","green");
})
</script>
</body>
</html>
2.filter()方法
1.filter选择器，:odd和:even，注意的是也是从0开始的。
2.filter选择器，通过是用class名来选择。
3.filter方法接受一个函数，返回一个只有一个string标签的元素，来执行css事件。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
</head>
<style type="text/css">
div{
width: 50px;
height: 50px;
background-color: aquamarine;
float: left;
margin-left: 10px;
}
</style>
<body>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
<div></div>
<div class="mid"></div>
<div class="mid"></div>
<div class="mid"></div>
<div></div>
<br><br><br><br>
<ul>
<li>
<strong>s1</strong>
</li>
<li>
<strong>s2</strong>
<strong>s3</strong>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
//filter选择器，:odd和:even，注意的是也是从0开始的。
$("li").filter(":even").css("background-color","red");
// filter选择器，通过是用class名来选择。
$("div").filter(".mid").css("border","2px solid green")
//filter方法接受一个函数，返回一个只有一个string标签的元素，来执行css事件
$("li").filter(function(){
return $("strong",this).length() == 1;
}).css("background-color","skyblue")
})
</script>
</body>
</html>
3.first()和last()方法
顾名思义，就是获取匹配元素的第一个或者最后一个元素。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
</ul>
<script type="text/javascript">
//first和last方法很简单，就是选择集合中第一个或者最后一个元素
$("ul li").first().css("background-color","green");
$("ul li").last().css({"background-color":"red","color":"yellow","list-style-type":"none"})
</script>
</body>
</html>
4.has()方法
匹配是否含有has()方法里内容，包括子代元素，是否匹配。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li>li 1</li>
<li class="l2">li 2</li>
<li>li 3</li>
</ul>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
</ul>
<script type="text/javascript">
//has方法就是选择元素是否含有某些东西。
$("ul").has(".l2").css("background-color","green")
</script>
</body>
</html>
5.is()方法
判断是否是is中的内容，是，返回true；否，返回false。
例如：
注意点击strong和span是无效的，因为target指向li标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li>list<strong>item 1</strong></li>
<li><span>list item 2</span></li>
<li>list item3</li>
</ul>
<script type="text/javascript">
//
$(function(){
$("ul").click(function(event){
var target = $(event.target);
//注意点击strong和span是无效的，因为target指向li标签。
if (target.is("li")) {
$(target).css("background-color","green")
}
})
})
</script>
</body>
</html>
6.not()方法
not，就是不是，的意思。读代码的时候就翻译成不是就可以。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li id="strong">list<strong>item 1</strong></li>
<li id="span"><span>list item 2</span></li>
<li>list item3</li>
</ul>
<script type="text/javascript">
//将ul里面不是奇数的li元素，变成黄色。
$(function(){
$("li").not(":odd").css("background","green")
})
</script>
</body>
</html>
7.map()方法
map()方法是使用函数来运行的，它会产生一个新的jQuery对象。
1.下面是使用map打印出div的id名。
2.使用map来给数组中的每一个数值加4
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>
<script type="text/javascript">
//
$(function(){
//使用map方法将每一个div的id打印出来。
$("div").map(function(){
console.log(this.id);
})
})
var s = [1,2,3];
console.log($(s).map(function(n){
return n+4;
}))
</script>
</body>
</html>
8.slice()方法
slice()方法根据下表范围，过滤匹配元素，并且生成一个新的jQuey对象。
参数有两个：
start：起始下标 0，从0开始。
end：终止下标 包含首，不包含尾。
1.注意包含首，不包含尾。
2.如果只有一个参数，就一直执行到最后。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style type="text/css">
div{
margin: 5px;
}
</style>
</head>
<body>
<div>你好啊。</div>
<div>你好啊。</div>
<div>你好啊。</div>
<div>你好啊。</div>
<p>你好塞雷啊</p>
<p>你好塞雷啊</p>
<p>你好塞雷啊</p>
<p>你好塞雷啊</p>
<script type="text/javascript">
//
$(function(){
//注意包含首，不包含尾。
$("div").slice(1,3).css("background","green")
//如果只有一个参数，就一直执行到最后。
$("p").slice(1).css("background-color","green")
})
</script>
</body>
</html>
3.jQuery遍历之最常用的遍历方法
1.add方法
就是在集合元素中添加相应的样式。
1.给div和p标签添加样式。这里注意一下格式，div和p都是标签元素，并且没有关系。
2.这里的add就是加，和的意思
这里可以利用顺序来单独给div设置事件。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style type="text/css">
div,p{
margin: 5px;
width: 50px;
height: 50px;
float: left;
}
</style>
</head>
<body>
<div>你好啊。</div>
<div>你好啊。</div>
<div>你好啊。</div>
<div>你好啊。</div>
<p>你好塞雷啊</p>
<p>你好塞雷啊</p>
<p>你好塞雷啊</p>
<p>你好塞雷啊</p>
<script type="text/javascript">
$(function(){
//给div和p标签添加样式。这里注意一下格式，div和p都是标签元素，并且没有关系。
//这里的add就是加，和的意思，div和p执行css事件。
//$("div").add("p").css("background-color","green")
//这里可以利用顺序来单独给div设置事件。
$("div").css("background-color","skyblue").add("p").css( "border" ,"2px solid yellow");
})
</script>
</body>
</html>
2.contents()方法
获得匹配元素集合中每个元素的子元素，包括文字和注释节点。
1.contents方法，得到p标签下内容的类型，文本还是元素标签啥的。
2.nodeType是以数字的形式返回节点的类型。
3.nodeType，元素节点返回1，属性节点返回2，文本节点返回3。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style type="text/css">
</style>
</head>
<body>
<p>hello, <a href="#">Join</a>,how are you ?</p>
<script type="text/javascript">
$(function(){
//contents方法，得到p标签下内容的类型，文本还是元素标签啥的。
$("p").contents().filter(function(){
//nodeType是以数字的形式返回节点的类型。
//nodeType，元素节点返回1，属性节点返回2，文本节点返回3。
return this.nodeType != 1;
}).wrap("<b/>")
})
</script>
</body>
</html>
3.end()方法
终止在当前链的最新过滤操作，并返回匹配的元素的以前的状态。
这里的end方法结束了最近的过滤操作find方法，将css传递给了ul。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li class="foo">li 1</li>
<li>li 2</li>
<li class="bar"></li>
</ul>
<p><span>你好呀</span>，靓仔。</p>
<script type="text/javascript">
$(function(){
//这里的end方法结束了最近的过滤操作find方法，将css传递给了ul。
$("ul").find(".foo").css("background-color","yellow").end().find(".bar").css("background-color","red");
//同样结束了find方法，将css传递给了p标签。
$("p").find("span").end().css("background-color","blue");
})
</script>
</body>
</html>
以上是关于jQuery学习教程，写更少的代码,做更多的事情的主要内容，如果未能解决你的问题，请参考以下文章