###jQuery(jq)
是一个js代码的框架,用于简化原生js代码,可以让人写的少,做的多,此框架就是
js写的
优势:
-简化js代码
可以像css一样获取元素 可以直接修改元素的样式,解决内部兼容性
jQ引入方式
jq本身就是一个js文件,和普通的js文件的引入方式一样
#####获取按钮并动态绑定事件
$("#btn").click(function(){
alert(“jq动态绑定”);
})
####选择器
基本选择器
1.标签名选择器 选取所有div $(“div”)
2.id选择器 $("#abc")
3.类选择器 $(".c1")
4.分组选择器 $(“h1,p,div”)
5.所有元素选择器 KaTeX parse error: Expected 'EOF', got '#' at position 7: ("*") #̲##层级选择器 1.(“div span”)获取div下所有的span子孙后代选择器
2.
(
"
d
i
v
>
s
p
a
n
"
)
获
取
d
i
v
的
s
p
a
n
子
元
素
子
元
素
选
择
器
3.
("div>span")获取div的span子元素 子元素选择器 3.
("div>span")获取div的span子元素子元素选择器3.(“div+span”)获取div后面紧邻的span兄弟选择器
4.$(“div~span”)获取div后面所有的span兄弟元素
####层级函数
1.获取元素的所有兄弟元素
$("#one").siblings(“div”)获取id为one元素的所有div兄弟元素
2.获取元素的哥哥元素
$("#one").prev()获取id为one元素的上一个兄弟元素
3.获取元素的哥哥们元素
$("#one").prevAll()获取id为one元素的上一个兄弟元素
4.获取元素的弟弟元素
$("#one").next()获取id为one元素的上一个兄弟元素
3.获取元素的弟弟们元素
$("#one").nextAll()获取id为one元素的上一个兄弟元素
#####$介绍
$是jq缩写 $("#one")等效 jq("#one")
#####过滤选择器
1.
(
"
d
i
v
:
f
i
r
s
t
"
)
匹
配
所
有
d
i
v
的
第
一
个
元
素
2.
("div:first")匹配所有div的第一个元素 2.
("div:first")匹配所有div的第一个元素2.(“div:last”)匹配所有div中的最后一个
3.
(
"
d
i
v
:
e
v
e
n
"
)
匹
配
所
有
d
i
v
下
标
为
偶
数
的
d
i
v
4.
("div:even")匹配所有div下标为偶数的div 4.
("div:even")匹配所有div下标为偶数的div4.(“div:odd”)匹配所有div中下标为基数的div
5.
(
"
d
i
v
:
l
t
(
n
)
"
)
匹
配
d
i
v
下
标
小
于
n
的
d
i
v
6.
("div:lt(n)")匹配div下标小于n的div 6.
("div:lt(n)")匹配div下标小于n的div6.(“div:gt(n)”)匹配div下标大于n的div
7.
(
"
d
i
v
:
e
q
(
n
)
"
)
匹
配
d
i
v
下
标
等
于
n
的
d
i
v
8.
("div:eq(n)")匹配div下标等于n的div 8.
("div:eq(n)")匹配div下标等于n的div8.(“div:not(.one)”)匹配所有div中class值不为one的
####内容选择器
1.
(
"
d
i
v
:
h
a
s
(
p
)
"
)
匹
配
含
有
p
标
签
的
所
有
d
i
v
2.
("div:has(p)")匹配含有p标签的所有div 2.
("div:has(p)")匹配含有p标签的所有div2.(“div:empty”)匹配所有空的div
3.
(
"
d
i
v
:
p
a
r
e
n
t
"
)
匹
配
所
有
非
空
的
d
i
v
4.
("div:parent")匹配所有非空的div 4.
("div:parent")匹配所有非空的div4.(“div:contains(‘abc’)”)匹配所有div中包含abc文本的元素
###可见选择器
1.
(
"
d
i
v
:
h
i
d
d
e
n
"
)
匹
配
所
有
隐
藏
的
d
i
v
元
素
2.
("div:hidden")匹配所有隐藏的div元素 2.
("div:hidden")匹配所有隐藏的div元素2.(“div:visible”)匹配所有可见的div元素
###jq中和显示隐藏相关的函数
//让元素隐藏
$(’#abc’).hide();
//让元素显示
$("#abc").show();
//让元素隐藏显示切换
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲abc").toggle();…(“div[id]”)匹配所有 有id属性的div
2.KaTeX parse error: Double superscript at position 13: ("div[id=' '̲]")匹配所有id属性值为xx…(“div[id!=’ ']”)匹配所有id属性值不为xxx的div
#####子元素选择器
1.
(
"
d
i
v
:
n
t
h
−
c
h
i
l
d
(
n
)
"
)
匹
配
所
有
d
i
v
中
是
子
元
素
并
且
是
第
n
个
子
元
素
2.
("div:nth-child(n)")匹配所有div中是子元素并且是第n个子元素 2.
("div:nth−child(n)")匹配所有div中是子元素并且是第n个子元素2.(“div:frist-child”)匹配所有div中是子元素并且是第一个子元素
3.KaTeX parse error: Expected 'EOF', got '#' at position 42: …是子元素并且是最后一个子元素 #̲###表单选择器 1.(":input")匹配所有input包括文本框、密码框、按钮、单选、
2.
(
"
:
p
a
s
s
w
o
r
d
"
)
匹
配
所
有
密
码
框
3.
(":password")匹配所有密码框 3.
(":password")匹配所有密码框3.(":radio")匹配所有单选
4.
(
"
:
c
h
e
c
k
e
d
b
o
x
"
)
匹
配
所
有
多
选
5.
(":checkedbox")匹配所有多选 5.
(":checkedbox")匹配所有多选5.(":checked")匹配所有被选中的单选,多选,下拉选
6.
(
"
i
n
p
u
t
:
c
h
e
c
k
e
d
"
)
匹
配
所
有
被
选
中
的
单
选
,
多
选
7.
("input:checked")匹配所有被选中的单选,多选 7.
("input:checked")匹配所有被选中的单选,多选7.(":selected")匹配所有被选中的下拉选
each()方法是用来遍历选择器选择的所有元素
####js对象和jq对象相互转换
var div=document.getElementById(“mydiv”);
$("#mydiv")
//页面加载完成事件
$(function(){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn").click(fun…("#i1").val());
})
})
######相互转换
$(function(){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn2").click(fu…(input).val());
})
})
$(function(){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn3").click(fu…("#i1");
//把jq转成js
var js1=jq[0];
alert(js1.value);
//把jq转成js
var js2=jq.get(0);
})
})
######jq的文档操作
1.创建元素
var jq=$("
2添加元素
-添加到最后
/* $(“body”).append(h3); */
-添加到最前面
$(“body”).prepend(h3);
-插入元素
-插入到兄弟元素的后面
兄弟元素,after(新元素);
-插入到兄弟元素的前面
兄弟元素.before(新元素)
-删除元素
元素.remove()
5.样式相关
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲xxx").css("widt…("#xxx").css(“width”)
$(function(){
$("#btn1").click(function(){
$(“div”).css(“color”,“red”);
//设置多个样式
$(“div”).css({“background-color”:“yellow”,“width”:“200px”})
})
})
6.属性相关
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲xxx").attr("属性名…("#xxx").attr(“属性名”);//获取属性值
7.文本相关 innerText
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲xxx").text("abc…("#xxx").text();//获取元素的元素内容
8.html相关innerHTML
$("#xxx").html(“
xxx
”);//给元素添加html内容var str= $("#xxx").html();//获取元素的html内容