jquery
jquery重点，封装后的js
引用方式
<script src="jquery-3.5.0.min.js"></script>
id获取方式，使用jquery对象和原生dom对象
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="d1">makabaka</div>
<script src="jquery-3.5.0.min.js">
var a=jQuery('#d1'); /*获取id的标签*/
console.log(a);
var b=$('#d1'); /*获取id的标签*/
console.log(b);
var c =$(d1); /*将原生dom转换成jquery的样式*/
var d = $('#d1')[0]; /*使用原生dom对象*/
console.log(c)
console.log(d)
</script>
</body>
</html>
基础写法
$('选择器').动作()
1.id选择 $('#id')
2.标签选择器 $('标签名字')
3.class选择器 $('.类名')
4.所有元素选择器 $('*')
5.组合选择器('#id, .类名, 标签名字')
层级选择器
1.$('x y') 找到x的所有后代子子孙孙y
2.$('x > y') 找到x的所有儿子y
3.$(x + y) 找到所有紧挨在x后面的y
4.$(x ~ y) x之后所有的兄弟y
基础筛选器
:first第一个
:last最后一个
:eq(index) 通过索引来获取
:even 匹配索引值为偶数的元素（从0开始计）
:odd 匹配索引值为奇数的元素（从0开始计数）
:gt(index) 匹配所有索引值大于给定索引值的元素
:lt(index) 匹配所有索引值小于给定索引值的元素
:not(元素选择器) 移除所有满足not条件的标签
:has(元素选择器) 获得所有（后代满足has条件）的标签
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#d1{
background-color: green;width: 100px;height: 100px;
}
#d2{
background-color:red;width: 100px;height: 100px;
}
#d3{
background-color:blue;width: 200px;height: 100px;
}
</style>
</head>
<body>
<div id="d1" class="c1">makabaka</div>
<div id="d2" class="c2">makabaka</div>
<div id="d3" class="c3">makabaka</div>
<ul>
<li>11</li>
<li>22</li>
</ul>
<script src="jquery-3.5.0.min.js"></script>
<script>
console.log($('div'))
console.log($('div:first'))
console.log($('div:last'))
console.log($('div:eq(0)'))
</script>
</body>
</html>
属性选择器
// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单状态互动选择器
$(input:enabled) /*找所有可用的input标签，没被勾选的那种*/
$(input:disabled) /*找所有不可用的input标签，被勾选的那种*/
$(:checked) /*用于获取勾选框checkbox被选中的*/
$(:selected) /*用于下拉框被选中的*/
console.log($(':selected').text()) 打印出下拉框选中的里面的文本
下一个元素：
$("#id").next() /*假设id是c1，next后是c2*/
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
上一个元素：
$("#id").prev() /*假设id是c6，prev之后是c5*/
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用
儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选
查找（好方法）
$("div").find("p") /*等价于$("div p")*/
筛选
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签
标签操作
1.addClass(类名); 来添加css样式
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.c1{
background-color: green;width: 100px;height: 100px;
}
.c2{
background-color:red;width: 100px;height: 100px;
}
.c3{
background-color:blue;width: 200px;height: 100px;
}
.cc{background-color: #080808}
</style>
</head>
<body>
<div id="d1" class="c1">makabaka</div>
<div id="d2" class="c2">makabaka</div>
<div id="d3" class="c3">makabaka</div>
<script src="jquery-3.5.0.min.js"></script>
<script>
$('#d1').addClass('cc');
</script>
</body>
</html>
2.removeClass(类名); 用于给指定标签删除指定的类
3.toggleClass(类名); 给指定标签 如果有这个类就把这个类删除掉，如果没有这个类就添加这个类
4.hasClass(类名); 判断指定标签有没有某样式存在
5.CSS（直接修改css的属性来修改样式）
$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置操作
.offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
.offset({top:200,left:200}); //修改位置
.position()// 获取匹配元素相对父元素的偏移，不能设置位置
$(window).scrollTop() //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向左移动的距离
监测滚轮上下移动距离进行弹框
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.c1{
background-color: green;width: 100px;height: 1500px;
}
</style>
</head>
<body>
<div id="d1" class="c1">makabaka</div>
<script src="jquery-3.5.0.min.js"></script>
<script>
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop()>200){alert('别他妈往下走了')}
});
</script>
</body>
</html>
$(window).scrollTop(0)可以用来制作回到顶部按钮。
尺寸操作
$('选择器').height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
$('选择器').width()
$('选择器').innerHeight() //内容content高度 + 两个padding的高度
$('选择器').innerWidth()
$('选择器').outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
$('选择器').outerWidth()
文本操作
HTML代码：
html()// 取得第一个匹配元素的html内容，包含标签内容 html(替换成的标签)// 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
文本值：
text()// 取得所有匹配元素的内容，只有文本内容，没有标签 text(文本)// 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
值，用于input之类的有值的：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
如果checkbox没有设置value值会显示on
属性操作
获取标签里的某个属性
$('a').attr('href');
修改某个标签的某个属性
$('a').attr('href','http://www.baidu.com');
删除某个属性值
$('a').remove('href');
checkbox和radio的检查有没有被选中的方法特殊，用prop
$('input').prop('checked');
浙公网安备 33010602011771号