老师的课堂笔记记录

一、样式

设置一条样式

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