文献种类:专题技术总结文献;
开发工具与关键技术:DW与 jQuery
作者: 陈良鑫 ;年级: 19 ;撰写时间: 2020 年 4 月 28 日
jQuery基础使用与样式
开发工具与关键技术:Adobe Dreamweaver JavaScript
作者:陈良鑫
撰写时间:2020年4月28日
每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。
如:在img元素中,src就是元素的特性,用来标记图片的地址
JavaScript中操作特性的DOM方法主要有3个,
1.getAttribute()获取特性
2.setAttribute()设置特性
3.removeAttribute() 移出特性
在jQuery中操作特性的jQuery方法:
1.attr() 获取/设置属性
2.removeAttr() 移出属性
在jQuery中用一个attr()与removeAttr()就可以全部搞定了,
jQuery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr()
attr()方法的用法:
1. $(element).attr(“属性名”);//获取属性名的属性值
2. $(element).attr(“属性”,“属性值”);//设置属性的属性值
3. $(element).attr(“属性名”,“函数值”);//设置属性的函数值
4. $(element).attr({“属性名”:“属性值”,“属性名”:“属性值”});//给指定元素设置多个属性值
removeAttr()方法的用法:
1. $(element).removeAttr(“属性名”);//移出对应的属性
prop()方法的用法:
1. $(element).prop(“属性名”);//获取属性名的属性值
2. $(element).prop(“属性名”,“属性值”);//设置属性的属性值
3. $(element).prop(“属性名”,“函数值”);//设置属性的函数值
4. $(element).prop({“属性名”:“属性值”,“属性名”:“属性值”});//给指定元素设置多个属性值
removeProp()方法的用法:
1. $(element).removeProp(“属性名”);//移出对应的属性
Attribute
- attribute是HTML中就有的,是元素的选项|附加项。
例如:id、class、title、src、alt、href
- 值只能为string类型
- 客户端向HTML元素添加的自定义的属性,推荐称为attribute
Property
- JS DOM中,对象的成员(组成部分),所以可以用JS DOM对象访问property(用对象访问成员)
例如:tagName, nodeName, nodeType, defaultChecked (这几个属性是DOM对象中属性)
- 值类型多样化:property因为是对象的成员,类型可多样化(boolean, string, number等)
- 如果获取DOM对象中的属性,推荐使用property
页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。
jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专注业务逻辑的编写。
jQuery几乎支持主流的css1~css3选择器的写法,我们从最简单的也是最常用的开始学起:
id选择器也是基本的选择器,jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。
原生语法的支持总是非常高效的,所以在操作DOM的获取上,如果能采用id的话尽然考虑用这个选择器
注意:id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,
将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的
类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选
同样的jQuery在实现上,对于类选择器,如果浏览器支持,jQuery使用JavaScript的原生getElementsByClassName()函数来实现的
元素选择器,根据给定html标记名称选择所有的元素
搜索指定元素标签名的所有节点,这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持
文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述,
可以把文档树当作一个家谱,那么节点与节点之间就会存在父子,兄弟,祖孙的关系了。
选择器中的层级选择器就是用来处理这种关系
子元素 后代元素 兄弟元素 相邻元素
通过一个列表,对比层级选择器的区别
选择器 描述
$(“ancestor descendant”) 后代选择器:选择给定的祖先元素的所有后代元素,一个元素的后代可能该元素的一个孩子,孙子,曾孙等
$(“parent > child”) 子选择器:parent的直接子元素
$(“prev + next”) 相邻兄弟选择器:匹配所有紧接在 prev 元素后的 next 元素
$(“prev ~ siblings”)一般兄弟选择器:匹配 prev 元素之后的所有 siblings 元素
读取、修改元素的html结构或者元素的文本内容是常见的DOM操作,
JavaScript中提供innerHTML与innerText属性
jQuery针对这样的处理提供了2个便捷的方法.html()与.text()
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容.
1. $(element).html() 获取element元素的HTML内容
2.
(
e
l
e
m
e
n
t
)
.
h
t
m
l
(
"
h
t
m
l
S
t
r
i
n
g
"
)
为
每
一
个
匹
配
元
素
添
加
h
t
m
l
内
容
重
要
说
明
:
(element).html("htmlString") 为每一个匹配元素添加html内容 重要说明:
(element).html("htmlString")为每一个匹配元素添加html内容重要说明:(element) .html()方法内部使用的是DOM的innerHTML属性来处理的,
所以在设置与获取上需要注意的一个最重要的问题,这个操作是针对整个HTML内容(不仅仅只是文本内容)
得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,
或设置匹配元素集合中每个元素的文本内容为指定的文本内容。
1. $(element).text() 获取element元素的文本内容
2. $(element).text(“textString”) 用于设置匹配元素内容的文本
.html与.text的异同:
.html与.text的方法操作是一样,只是在具体针对处理对象不同
.html处理的是元素内容,.text处理的是文本内容
.html只能使用在HTML文档中,.text 在XML 和 HTML 文档中都能使用
如果处理的对象只有一个子文本节点,那么html处理的结果与text是一样的火狐不支持innerText属性,用了类似的textContent属性,.text()方法综合了2个属性的支持,所以可以兼容所有浏览器
$(ele).val()方法主要是用于处理表单元素的值,比如 input, select 和 textarea。
JavaScript中的value属性
1. $(ele).val() 获取匹配的元素集合中第一个元素的当前值
2.
(
e
l
e
)
.
v
a
l
(
v
a
l
u
e
)
设
置
匹
配
的
元
素
集
合
中
每
个
元
素
的
值
通
过
(ele).val(value) 设置匹配的元素集合中每个元素的值 通过
(ele).val(value)设置匹配的元素集合中每个元素的值通过(ele).val()处理select元素, 当没有选择项被选中,它返回null
$(ele).val()方法多用来设置表单的字段的值
如果select元素有multiple(多选)属性,并且至少一个选择项被选中,
$(ele).val()方法返回一个数组,这个数组包含每个选中选择项的值
1.DOM对象是通过原生的JS获取的对象,DOM对象只能使用JS中的方法和属性
2.jQuery对象是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。jQuery可以使用jQuery库里面的方法,但是不能使用JS中的方法
通过jQuery语法获取id为jqBox的元素获得一个jQuery对象
调用该对象的html()方法进行更改内容
调用该对象的css()方法进行更改颜色样式
JS对象只能调用JS中提供的方法和属性,不能使用jquery中的方法和属性
jquery对象只能使用jQuery的方法和属性,不能使用JS提供的方法和属性
通过标准的JavaScript操作DOM与jQuery操作DOM的对比,我们不难发现:
通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。
通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,
而不需要我们具体知道哪个DOM节点有那些方法,
也不需要关心不同浏览器的兼容性问题,
我们通过jQuery提供的API进行开发,代码也会更加精短。
jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,
为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。
我们使用jQuery的同时也能混合JavaScript原生代码一起使用。
在很多场景中,我们需要jQuery与DOM能够相互的转换,
它们都是可以操作的DOM元素,jQuery是一个类数组对象,
而DOM对象就是一个单独的DOM元素。
相比较jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象。
(
参
数
)
是
一
个
多
功
能
的
方
法
,
通
过
传
递
不
同
的
参
数
而
产
生
不
同
的
作
用
。
如
果
传
递
给
(参数)是一个多功能的方法, 通过传递不同的参数而产生不同的作用。 如果传递给
(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。如果传递给(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
通过$(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了
1.DOM对象转换为jQuery对象
var box = document.getElementById(“box”);//DOM对象
$(box);//jQuery对象
2.jQuery对象转换为一个DOM对象
var
d
i
v
s
=
divs=
divs=(“div”);//jQuery对象 divs中包含所有的
d
i
v
s
元
素
v
a
r
d
i
v
=
divs元素 var div=
divs元素vardiv=divs[0];//div为DOM对象
使用jQuery中的get()方法进行转换,只需要提供一个索引就可以了
var div=
d
i
v
s
.
g
e
t
(
0
)
;
/
/
将
divs.get(0);//将
divs.get(0);//将divs对象中索引为0的元素转换为DOM对象
- $(element).addClass();//为每个匹配元素所要增加的一个或多个样式名
- 方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上 - $(element).removeClass();//每个匹配元素移除的一个或多个用空格隔开的样式名
- $(element).toggleClass();
-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类
选择器
(
"
:
f
i
r
s
t
"
)
获
取
匹
配
第
一
个
元
素
例
如
:
(":first") 获取匹配第一个元素 例如:
(":first")获取匹配第一个元素例如:(‘li:first’);
(
"
:
l
a
s
t
"
)
获
取
匹
配
的
最
后
个
元
素
例
如
:
(":last") 获取匹配的最后个元素 例如:
(":last")获取匹配的最后个元素例如:(‘li:last’);
(
"
:
n
o
t
(
s
e
l
e
c
t
o
r
)
"
)
去
除
所
有
与
给
定
选
择
器
匹
配
的
元
素
例
如
:
(":not(selector)") 去除所有与给定选择器匹配的元素 例如:
(":not(selector)")去除所有与给定选择器匹配的元素例如:(“input:not(:checked)”)
(
"
:
e
v
e
n
"
)
匹
配
所
有
索
引
值
为
偶
数
的
元
素
,
从
0
开
始
计
数
例
如
:
(":even") 匹配所有索引值为偶数的元素,从 0 开始计数 例如:
(":even")匹配所有索引值为偶数的元素,从0开始计数例如:(“li:even”)
(
"
:
o
d
d
"
)
匹
配
所
有
索
引
值
为
奇
数
的
元
素
,
从
0
开
始
计
数
例
如
:
(":odd") 匹配所有索引值为奇数的元素,从 0 开始计数 例如:
(":odd")匹配所有索引值为奇数的元素,从0开始计数例如:(“li:odd”)
(
"
:
e
q
(
i
n
d
e
x
)
"
)
匹
配
一
个
给
定
索
引
值
的
元
素
,
从
0
开
始
计
数
例
如
:
(":eq(index)") 匹配一个给定索引值的元素,从 0 开始计数 例如:
(":eq(index)")匹配一个给定索引值的元素,从0开始计数例如:(“li:eq(1)”)
(
"
:
g
t
(
i
n
d
e
x
)
"
)
匹
配
所
有
大
于
给
定
索
引
值
的
元
素
,
从
0
开
始
计
数
例
如
:
(":gt(index)") 匹配所有大于给定索引值的元素,从 0 开始计数 例如:
(":gt(index)")匹配所有大于给定索引值的元素,从0开始计数例如:(“li:gt(0)”)
(
"
:
l
t
(
i
n
d
e
x
)
"
)
匹
配
所
有
小
于
给
定
索
引
值
的
元
素
,
从
0
开
始
计
数
例
如
:
(":lt(index)") 匹配所有小于给定索引值的元素,从 0 开始计数 例如:
(":lt(index)")匹配所有小于给定索引值的元素,从0开始计数例如:(“li:gt(2)”)
(
"
:
h
e
a
d
e
r
"
)
匹
配
如
h
1
,
h
2
,
h
3
之
类
的
标
题
元
素
例
如
:
(":header") 匹配如 h1, h2, h3之类的标题元素 例如:
(":header")匹配如h1,h2,h3之类的标题元素例如:(":header").css(“background”, “#EEE”);
(
"
:
a
n
i
m
a
t
e
d
"
)
匹
配
所
有
正
在
执
行
动
画
效
果
的
元
素
(
只
有
对
不
在
执
行
动
画
效
果
的
元
素
执
行
一
个
动
画
特
效
)
例
如
:
(":animated") 匹配所有正在执行动画效果的元素(只有对不在执行动画效果的元素执行一个动画特效) 例如:
(":animated")匹配所有正在执行动画效果的元素(只有对不在执行动画效果的元素执行一个动画特效)例如:(":header").css(“background”, “#EEE”);
$(":focus") 匹配当前获取焦点的元素。
(
"
:
r
o
o
t
"
)
选
择
该
文
档
的
根
元
素
。
在
H
T
M
L
中
,
文
档
的
根
元
素
,
和
(":root") 选择该文档的根元素。在HTML中,文档的根元素,和
(":root")选择该文档的根元素。在HTML中,文档的根元素,和(":root")选择的元素一样, 永远是元素。
示例:设置背景颜色为黄色
$(":root").css(“background-color”,“yellow”);
链接
发表平台 文章发表网站链接URL 文章发表网站链接【二维码】 发表者
CSDN个人博客
https://blog.csdn.net/
https://blog.csdn.net/weixin_44563954/article/details/86534500
学生本人
陈良鑫
CSDN专业技术论坛
https://bbs.csdn.net/
.NET、Java、Web、数据库开发、企业IT(地理信息系统)、云计算、移动开发、开发语言等 每个月发布在同一个主题下,每个月的网页链接和二维码都是同一个。 学生本人
陈良鑫
https://bbs.csdn.net/topics/392512019
百度贴吧:广信IT学院吧
https://tieba.baidu.com/f?kw=%E5%B9%BF%E4%BF%A1it%E5%AD%A6%E9%99%A2
(百度贴吧正文开头添加本文章CSDN的两个发表链接) 每个月发布在同一个主题下,每个月的网页链接和二维码都是同一个。 学生本人
陈良鑫
百度贴吧:广东信息科技职业培训学院吧
https://tieba.baidu.com/f?kw=%E5%B9%BF%E4%B8%9C%E4%BF%A1%E6%81%AF%E7%A7%91%E6%8A%80%E8%81%8C%E4%B8%9A%E5%9F%B9%E8%AE%AD%E5%AD%A6%E9%99%A2
(百度贴吧正文开头添加本文章CSDN的两个发表链接) 学生本人
陈良鑫
广信IT学院
官网
www.gxrjxy.cn
学院督导