2021-10-02

一、样式
1. css() 为dom对象设置样式
第一种用法： css(属性名称,属性值) 一次只能设置一个样式

<div class="demo">
  //设置一条样式
</div>
<script>
$('.demo').css('color','blue').css('background-color','red')
</script>

第二种用法：css({属性名称:属性值,属性名称:值....})

        设置一条样式

二、DOM操作
1. append() 向匹配到的父元素末尾追加子元素

<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>

2. appendTo() 把子元素追加到父元素中

<div class="add">append</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
obj.appendTo($('.add'))
</script>

3. prepend() 向父元素的开头添加子元素

<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>

4. prependTo() 元素前置到另一个、指定的元素元素集合中。

<div class="parent">宝剑锋从磨砺出</div>
  <span id="child">梅花香自苦寒来</span>
<script>
  $(function(){
    $('#child').prependTo($('.parent'))
    // 效果：<div class="parent"> <span id="child">梅花香自苦寒来</span>宝剑锋从
磨砺出</div>
 })
</script>

5. remove() 移出匹配到的元素

<p>苹果01</p>
<p class="two">苹果02</p>
<p>苹果03</p>
<script>
//$('p').remove()  // remove()方法不传递参数的情况下 表示删除匹配到的所有元素
$('p').remove('.two')  // 移除类名等于two的p标签
</script>

三、属性
1. attr() 获取或者设置属性

<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>

2. removeAttr() 移除属性

<div class="demo" title="这是一个测试代码" id='test'>attr方法 </div>
<script>
$('.demo').removeAttr('id')
</script>

注意：只接受一个参数
3. addClass() 添加类名

<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