一、样式
设置一条样式
1. css()
为
dom
对象设置样式
第一种用法
:
css(
属性名称
,
属性值
)
一次只能设置一个样式
第二种用法
:
css({
属性名称
:
属性值
,
属性名称
:
值
....})
二、
DOM
操作
1. append()
向匹配到的父元素末尾追加子元素
2. appendTo()
把子元素追加到父元素中
3. prepend()
向父元素的开头添加子元素
<div
class
=
"demo"
>
设置一条样式
</div>
<script>
$
(
'.demo'
).
css
(
'color'
,
'blue'
).
css
(
'background-color'
,
'red'
)
</script>
<div
class
=
"add"
>
append
</div>
<script>
/*
1.
创建
dom
元素
jQ: $('<a href="http://www.baidu.com">
百度
</a>')
2.
获取父元素
$('.add')
3.
使用
append()
追加
父元素对象
.append(
要追加的子元素
)
*/
var
obj
=
$
(
'<a href="http://www.baidu.com">taobao</a>'
)
$
(
'.add'
).
append
(
obj
)
</script>
<div
class
=
"add"
>
append
</div>
<script>
var
obj
=
$
(
'<a href="http://www.baidu.com">taobao</a>'
)
obj
.
appendTo
(
$
(
'.add'
))
</script>
4. prependTo()
元素前置到另一个、指定的元素元素集合中。
5. remove()
移出匹配到的元素
三、属性
1. attr()
获取或者设置属性
2. removeAttr()
移除属性
注意:只接受一个参数
3. addClass()
添加类名
<div
class
=
"add"
>
prepend
</div>
<script>
var
obj
=
$
(
'<a href="http://www.baidu.com">taobao</a>'
)
$
(
'.add'
).
prepend
(
obj
)
//
结果:
<div class="add"><a
href="http://www.baidu.com">taobao</a>prepend</div>
</script>
<div
class
=
"parent"
>
宝剑锋从磨砺出
</div>
<span
id
=
"child"
>
梅花香自苦寒来
</span>
<script>
$
(
function
(){
$
(
'#child'
).
prependTo
(
$
(
'.parent'
))
//
效果:
<div class="parent"> <span id="child">
梅花香自苦寒来
</span>
宝剑锋从
磨砺出
</div>
})
</script>
<p>
苹果
01
</p>
<p
class
=
"two"
>
苹果
02
</p>
<p>
苹果
03
</p>
<script>
//$('p').remove() // remove()
方法不传递参数的情况下 表示删除匹配到的所有元素
$
(
'p'
).
remove
(
'.two'
)
//
移除类名等于
two
的
p
标签
</script>
<div
class
=
"demo"
title
=
"
这是一个测试代码
"
>
attr
方法
</div>
<script>
// attr()
获取匹配元素属性的值
var
res
=
$
(
'.demo'
).
attr
(
'title'
)
// attr()
设置匹配元素的属性值
$
(
'.demo'
).
attr
(
'title'
,
'this is a test code'
)
//
只修改一个属性值
$
(
'.demo'
).
attr
({
name
:
'code'
,
id
:
'test'
})
//
设置多个属性
</script>
<div
class
=
"demo"
title
=
"
这是一个测试代码
"
id
=
'test'
>
attr
方法
</div>
<script>
$
(
'.demo'
).
removeAttr
(
'id'
)
</script>
<div
id
=
"demo"
>
白日依山尽
</div>
<script>
$
(
this
).
addClass
(
'active'
)
</script>
4. removeClass()
移出类名的
<div
id
=
"demo"
class
=
'active'
>
白日依山尽
</div>
<script>
$
(
this
).
removeClass
(
'active'
)
</script>
5. toggleClass()
当某个类名存在时则删除,不存在时则添加
<div
id
=
"demo"
>
白日依山尽
</div>
<script>
$
(
'#demo'
).
click
(
function
(){
$
(
this
).
toggleClass
(
'active'
)
</script>
6. html()
获取或者设置匹配元素的内容
(
包含标签
)
<div
class
=
"content"
><span>
作者
:
王之涣
</span><br>
白日依山尽
</div>
<script>
$
(
function
(){
// html()
获取元素的内容 和
JavaScript
中的
innerHTML
相同的
var
con
=
$
(
'.content'
).
html
()
// console.log(con);
// html()
设置匹配元素的内容
$
(
'.content'
).
html
(
'
去
<a href="http://jd.com" target="_blank">
京东
</a>
网购
'
)
})
</script>
7. text()
<div
class
=
"content"
><span>
作者
:
王之涣
</span><br>
白日依山尽
</div>
<script>
$
(
function
(){
// text()
获取元素的文本内容不包含标签 和
JavaScript
中
innerText
的相
同的
var
con
=
$
(
'.content'
).
text
()
// console.log(con);
// text()
设置匹配元素的文本内容
$
(
'.content'
).
text
(
'
去
<a href="http://jd.com" target="_blank">
京东
</a>
网购
'
)
})
</script>
注意:
text()
和
html()
最大的区别,
text()
只处理文本内容,不能识别标签,而
html()
方法可以识别
标签
text()
和
html()
方法不能够用于获取或者设置表单标签的值,除了
button
和
textarea
这两个
标签之外
8. val()
获取或者设置表单标签的值
<input
type
=
"text"
id
=
"user"
value
=
"zhangsan"
>
<script>
$
(
function
(){
// val()
获取表单标签的值
var
res
=
$
(
'#user'
).
val
()
// console.log(res);
// val()
设置匹配元素的
value
值
$
(
'#user'
).
val
(
'
张三
'
)
})
</script>
9. prop()
设置或者获取元素的属性值
10. removeProp()
移出属性
attr()
和
prop()
的应用场景
prop()
方法经常用于标签属性值有
true
和
false
的时候使用,例如:
checked
、
seleted
、
readonly
、
disabled