jQuery"的核心
$ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象
DOM对象
根据id属性获取DOM对象 document.getElementById("id属性值");
如果元素存在那么直接获取dom对象,如果元素不存在,值为null
Jquery包装集对象
根据id属性获取DOM对象 $("#id属性值");
如果元素存在那么直接获取jquery对象,如果元素不存在,值为空包装集对象 (不会是null)
注意:
dom对象判断对象是否获取到,判断值是否为null
Jquery包装集对象判断对象是否获取到,判断jquery对象的长度length
Dom转换成jquery对象
$(dom对象)
jquery对象转换成Dom
- 基础选择器
id选择器 #idKaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲testDiv")选择id为t…(“div”)选择所有div元素
类选择器 .class$(".blue")选择所有class=blue的元素
选择所有元素 ( " ∗ " ) 选 择 页 面 所 有 元 素 组 合 选 择 器 s e l e c t o r 1 , s e l e c t o r 2 , s e l e c t o r N ("*")选择页面所有元素 组合选择器 selector1,selector2,selectorN ("∗")选择页面所有元素组合选择器selector1,selector2,selectorN("#testDiv,span,.blue")同时选中多个选择器匹配的元素
层次选择器
后代选择器 ancestor descendantKaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲parent div") …("#parent>div") 选择id为parent的直接div子元素
相邻选择器 prev + next
(
"
.
b
l
u
e
+
i
m
g
"
)
选
择
c
s
s
类
为
b
l
u
e
的
下
一
个
i
m
g
元
素
同
辈
选
择
器
p
r
e
v
s
i
b
l
i
n
g
(".blue + img") 选择css类为blue的下一个img元素 同辈选择器 prev ~ sibling
(".blue+img")选择css类为blue的下一个img元素同辈选择器prev sibling(".blue ~ img") 选择css类为blue的之后的img元素
属性选择器
$("[属性]"); 选中页面中具备某样属性的元素
$("[属性 = 值]"); 选中页面中具备属性等于某个特定值的元素
表单选择器
表单元素选择器 :input 查找所有的input元素:
(
"
:
i
n
p
u
t
"
)
;
<
b
r
/
>
注
意
:
会
匹
配
所
有
的
i
n
p
u
t
、
t
e
x
t
a
r
e
a
、
s
e
l
e
c
t
和
b
u
t
t
o
n
元
素
。
文
本
框
选
择
器
:
t
e
x
t
查
找
所
有
文
本
框
:
(":input");<br />注意:会匹配所有的input、textarea、select和button元素。 文本框选择器 :text 查找所有文本框:
(":input");<br/>注意:会匹配所有的input、textarea、select和button元素。文本框选择器:text查找所有文本框:(":text")
密码框选择器 :password 查找所有密码框:
(
"
:
p
a
s
s
w
o
r
d
"
)
单
选
按
钮
选
择
器
:
r
a
d
i
o
查
找
所
有
单
选
按
钮
:
(":password") 单选按钮选择器 :radio 查找所有单选按钮:
(":password")单选按钮选择器:radio查找所有单选按钮:(":radio")
复选框选择器 :checkbox 查找所有复选框:
(
"
:
c
h
e
c
k
b
o
x
"
)
提
交
按
钮
选
择
器
:
s
u
b
m
i
t
查
找
所
有
提
交
按
钮
:
(":checkbox") 提交按钮选择器 :submit 查找所有提交按钮:
(":checkbox")提交按钮选择器:submit查找所有提交按钮:(":submit")
图像域选择器 :image 查找所有图像域:
(
"
:
i
m
a
g
e
"
)
重
置
按
钮
选
择
器
:
r
e
s
e
t
查
找
所
有
重
置
按
钮
:
(":image") 重置按钮选择器 :reset 查找所有重置按钮:
(":image")重置按钮选择器:reset查找所有重置按钮:(":reset")
按钮选择器 :button 查找所有按钮:
(
"
:
b
u
t
t
o
n
"
)
文
件
域
选
择
器
:
f
i
l
e
查
找
所
有
文
件
域
:
(":button") 文件域选择器 :file 查找所有文件域:
(":button")文件域选择器:file查找所有文件域:(":file")
过滤选择器
$(":eq(index)") 匹配元素的指定下标的元素 (下标从0开始) .eq(index)
$(":gt(index)") 匹配元素下标大于指定值元素 (下标从0开始).gt(index)
$(":odd") 匹配奇数下标
$(":even") 匹配偶数下标
$(":checked") 匹配元素被选中
属性的分类
固有的属性
src align method
自定义的属性
abc=‘123’
返回值是boolean类型的属性
checked disabled selected
操作属性
attr
获取已存在的属性,可以直接获取到具体的值,如果属性是boolean类型的也是一样 具体的值
prop (不能操作自定义属性)
获取已存在的属性,可以直接获取到具体的值,如果属性是boolean类型 返回的是true/false
获取属性
attr('属性名');
prop('属性名');
设置属性
attr('属性名','属性值');
prop('属性名','属性值');
移除属性
removeAttr(属性名)移除指定的属性
操作样式
attr(“class”) 获取class属性的值,即样式名称
attr(“class”,”样式名”) 修改class属性的值,修改样式 直接覆盖原有的样式
addClass(“样式名”) 添加样式名称
css(“样式名”,“样式值”) 添加具体的样式 相当于在元素上添加style属性
removeClass(class) 移除样式名称
非表单元素/表单元素的内容/值
html() 获取元素的html内容
html("html,内容") 设定元素的html内容
text() 获取元素的文本内容,不包含html
text("text 内容") 设置元素的文本内容,不包含html
val() 获取元素value值
val(‘值’) 设定元素的value值
创建元素
$(‘元素内容’)
添加元素
prepend(content) 在被选元素内部的开头插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。
$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。
$(content).appendTo(selector) 把 content元素或内容插入selector 元素内,默认是在尾部
before() 在元素前插入指定的元素或内容:$(selector).before(content)
after() 在元素后插入指定的元素或内容:$(selector).after(content)
remove()删除所选元素或指定的子元素,包括整个标签和内容一起删。
empty()清空所选元素的内容
遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数,
index 为遍历元素的序列号,从 0 开始。
element是当前的元素,此时是dom元素。
<script src=“js/jquery-3.5.1.min.js”
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var spans = $("span");
spans.each(function(index,element){
console.log(index,element);
console.log($(element));
});
</script>
ready加载事件
ready()类似于 onLoad()事件
ready()可以写多个,按顺序执行
$(document).ready(function(){})
等价于
$(function(){})
ready加载事件和load加载事件的区别
load:等待加载页面中DOM结构(元素)和引入的资源后,执行对应代码
ready:等待加载页面中DOM结构(元素),执行对应代码
绑定事件
$(selector).bind( eventType [, eventData], handler(eventObject));