一、什么是jquery?
1.jquery是javaScript的一个框架产品。
2.简化js编码,提高开发效率。
3.屏蔽了js的浏览器差异。
二、使用jquery开发
1.搭建jquery开发环境:将 jquery-1.8.3.js引入到项目;
在需要使用jquery开发的页面(jsp/html)引入jquery-1.8.3.js
在head引入:
DOM对象 与 jquery中对象的转换:$(DOM对象);
js对象不能 操作jquery对象的方法;
三、jquery的选择器【重点】
** 1.基本选择器【必须掌握】**
1.1 id选择器
语法:KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id的属性值”) 1.2…(“.class属性的值”)
1.3 标签选择器
语法:
(
“
标
签
名
”
)
注
意
:
修
改
h
t
m
l
标
签
样
式
:
j
q
对
象
.
c
s
s
(
“
c
s
s
的
样
式
属
性
名
”
,
”
属
性
值
”
)
∗
∗
2.
层
次
选
择
器
∗
∗
2.1
后
代
选
择
器
语
法
:
(“标签名”) 注意:修改html标签样式: jq对象.css(“css的样式属性名”,”属性值”) **2.层次选择器** 2.1 后代选择器 语法:
(“标签名”)注意:修改html标签样式:jq对象.css(“css的样式属性名”,”属性值”)∗∗2.层次选择器∗∗2.1后代选择器语法:(seltorA seltorB) –获取seltorA 下与 seltorB匹配的标签对象。
2.2 直接子代选择器 [掌握]
语法:
(
s
e
l
t
o
r
A
>
s
e
l
t
o
r
B
)
/
/
只
拿
到
儿
子
2.3
直
接
兄
弟
选
择
器
【
掌
握
】
语
法
:
(seltorA>seltorB) //只拿到 儿子 2.3 直接兄弟选择器 【掌握】 语法:
(seltorA>seltorB)//只拿到儿子2.3直接兄弟选择器【掌握】语法:(seltorA+seltorB) //拿到直接后续的兄弟
2.4 所有兄弟选择器
语法:$(seltorA~seltorB) // 拿到后续所有兄弟
3.简单过滤选择器
3.1 :first–拿到数组中第一个标签对象
3.2 :last—拿到数组中最后一个标签对象
3.3 :eq(idx)—拿到对应idx下标的标签对象【掌握】
注意:idx下标从0开始。
3.4 :gt(idx) –拿到对应大于idx下标的标签对象
3.5 :lt(idx) –拿到小于idx下标的标签对象
3.6 :even –所有偶数下标的标签对象
3.7 :odd –所有奇数下标的标签对象。
4.内容过滤选择器
1):empty –所有标签体内容为空的对象。【掌握】
2):parent—所有标签体有内容。
3):contains(text) //包含指定内容(text)的对象。【掌握】
5.属性选择器【重点】
1)
(
“
s
e
l
o
r
[
属
性
名
=
属
性
值
]
”
)
–
拿
到
指
定
属
性
等
于
某
个
属
性
值
的
元
素
对
象
。
【
掌
握
】
2
)
(“selor[属性名=属性值]”) –拿到指定属性等于 某个属性值的元素对象。【掌握】 2)
(“selor[属性名=属性值]”)–拿到指定属性等于某个属性值的元素对象。【掌握】2)(“selor[属性名]”) –拿到所有含有属性的对象。
6.用于单选按钮和 复选框
:checked –拿到选中的按钮
注意:元素与 :checked之间没有空格
7.用于获取被选中的下拉列表的option
:selected
注意:元素与 :selected之间有空格
四、jquery中的对象数组遍历
1.for 循环
1.1 objArr.size();//获取对象数组长度
2.objArr.each(function(){})
五、使用jquery操作页面结构
1.添加:
1.1)创建一个标签元素:
var spa = $(“内容”)
1.2)在父标签下添加子标签
$supObj.append(子元素对象)
2. 删除
1)empty()—只是单纯的清空子元素 对本身没有任何影响。
2)remove()—将自身以及子元素全部移除
3.修改
1)对于input标签的value属性值。
获取:
(
o
b
j
)
.
v
a
l
(
)
修
改
v
a
l
u
e
属
性
值
:
(obj).val() 修改value属性值:
(obj).val()修改value属性值:(obj).val(“新内容”)
2)获取标签体内容
$obj.text()obj.innerText –只是拿到文本的内容
$obj.text(内容)obj.innerText=新值// 修改标签体内容。
$obj.html() obj.innerHTML// 拿到标签体所有内容包括 html标签元素
$obj.html(内容) 修改标签体内容
3)修改元素的样式
$obj.css(“样式属性名”,”属性值”).css(“样式名”,”属性值”)
$obj.css(“样式属性名”:”属性值”, “样式属性名”:属性值)
4)给标签添加或移除class属性
addClass() –添加
removeClass() –移除
六、操作标签属性的方法【掌握】
1)
o
b
j
.
a
t
t
r
(
属
性
名
)
/
/
获
取
对
应
属
性
值
obj.attr(属性名) // 获取对应属性值
obj.attr(属性名)//获取对应属性值obj.prop(属性名)
2)$obj.attr(属性名,属性值) //修改属性值 ¥obj.prop(属性名,属性值)
注意:attr是1.6版本之前的,prop是1.6版本之后,开发建议使用prop