jquery内容:
1、选择器
2、筛选器
3、样式操作
4、文档处理
5、事件
6、each、data
1、选择器
基本选择器:
- id选择器: $(’#id’)
- 标签选择器:$(“tagName”)
- class选择器:$(".className")
- 配合使用: $(“div.c1”) //找到有c1 class类的div标签
- 组合选择器:$("#id,.className,tagName")
层级选择器:
x和y可以为任意选择器
- $(“x y”) // x的所有后代y (子子孙孙)
- $(“x > y”) //x的所有儿子y (儿子)
- $(“x + y”) // 找到所有紧挨在x后面的y
- $(“x ~ y”) // x之后所有的兄弟y
2、筛选器
属性 | 含义 |
---|---|
:first | 第一个 |
:last | 最后一个 |
:eq(index) | 索引等于index的那个元素 |
:even | 匹配所有索引值为偶数的元素,从0开始计数 |
:odd | 匹配所有索引值为奇数的元素,从0开始计数 |
:gt(index) | 匹配所有大于给定索引值的元素 |
:lt(index) | 匹配所有小于给定索引值的元素 |
:not | 移除所有满足not条件的标签 |
:has | 选取所有包含一个或多个标签在其内的标签 |
表单筛选器:
- :text
- :password
- :file
- :radio
- :checkbox
- :submit
- :reset
- :button
表单对象属性:
- :enabled
- :disabled
- :checked
- :selected
筛选器方法:
下一个元素:
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素:
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素:
$("#id").parent()
$("#id").parents() //查找当前元素的所有的父辈元素
$("#id").parentsUntil() //查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
儿子和兄弟元素:
$("#id").children(); //儿子们
$("#id").siblings(); //兄弟们
3、样式操作
addClass(); | 添加指定的css类名 |
---|---|
removeClass(); | 移除指定的css类名 |
hasClass(); | 判断样式存不存在 |
toggleClass() | 切换css类名,如果有就移除,如果没有就添加 |
示例:
$("p").css("color","red");
//将所有p标签的字体设为红色
4、文档处理
添加到指定元素内部的后面
- $(A).append(B) //把B追加到A
- $(A).appendTo(B) //把A追加到B
添加到指定元素内部的前面:
- $(A).prepend(B) //把B前置到A
- $(A).prependTo(B) //把A前置到B
添加到指定元素外部的后面:
- $(A).after(B) //把B放到A的后面
- $(A).insertAfter(B) //把A放到B的后面
添加到指定元素外部的前面:
- $(A).before(B) //把B放到A的前面
- $(A).insertBefore(B) //把A放到B的前面
克隆:clone()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>克隆</title>
<style>
#b1 {
background-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<button id='b1'>一刀九十九</button>
<script src='jquery-3.4.1.min.js'></script>
<script>
$('#b1').on("click",function(){
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
5、事件
常用事件:
- click(function(){…}) 点击元素时,发生click事件
- hover(function(){…}) 鼠标悬浮
- blur(function(){…}) 当元素失去焦点时发生 blur 事件
- focus(function(){…}) 当元素获得焦点时
- change(function(){…}) 当元素的值发生改变时,会发生 change 事件。
- keyup(function(){…})
事件绑定:
$(‘选择器’).click(function(){…})
6、each、data
.each() 循环遍历:
li = [10,20,30,40]
$.each(li,function(k,v){
console.log(k,v);
})
.data() 在匹配的元素上存储任意相关数据:
$("div").data("k",100);
//给所有div标签都保存一个名为k,值为100
.removeData(key): 移除放在元素上的数据