jQuery元素操作

1.遍历

$('选择器').each(function(index,demoFile){ })   （ 注意：这里的demoFile是DOM元素对象）

首先我们建立三个div并设置样式：

  <div>这里是div</div>
  <div>这里是div</div>
  <div>这里是div</div>
  <style>
    div {
      width: 200px;
      height: 50px;
    }
    div:first-child {
      background-color: pink;
    }
    div:nth-child(2) {
      background-color: blue;
    }
    div:nth-child(3) {
      background-color: chartreuse;
    }
  </style>

 

 然后，使用each方法遍历，修改所有的文字颜色，此时，我们用jquery方法修改样式试试：

<script>
    $(function () {
      $('div').each(function (index, demoFile) {
        console.log(index);
        demoFile.css('color', '#fff')
      })
    })
</script>

 

 发现报错了，就是我们之前说的，此时的对象时DOM对象，应该用js方法：

 $(function () {
      $('div').each(function (index, demoFile) {
        console.log(index);
        demoFile.style.color = '#fff';
      })
 })

 

 文字颜色改变，且没有报错

 $.each(object,function(index,element){  })    

该方法可以遍历任何对象（数组，对象）

遍历数组：index是索引，element是内容

  let arr = ['西瓜', '火龙果', '山竹'];
  $.each(arr, function (index, element) {
     console.log(index, element);
  })

 

遍历对象：index是属性名，element是属性值

 let obj = {
    name: '刘德华',
    film: '无间道',
    sex: '男'
};
$.each(obj, function (index, element) {
    console.log(index, element)
 })

 

2.创建元素

语法： $('<li></li>');   里面内容根据需要更改

3.添加元素

首先我们先准备：

<ul>
    <li>这里是li</li>
    <li>这里是li</li>
</ul>

 

 1.内部添加（父子关系）

 语法：element.append('内容');  （放到内部元素的最后面）

<script>
    $(function () {
      let li = $('<li>这是新的li</li>');
      $('ul').append(li);
    })
</script>

 

语法：element.prepend('内容');  （放到内部元素的最前面）

修改代码：

$('ul').prepend(li);

 

  2.外部添加 （兄弟关系）

语法：element.after('内容')  （放入目标元素的后面）

$('li:first').after(li);

 

  语法： element.before('内容')   （放入目标元素的前面）

 $('li:first').before(li);

 

4.删除元素

语法：element.remove()       删除匹配的元素（本身）

  <ul>
    <li>这里是li</li>
    <li>这里是li</li>
  </ul>
  <script>
    $(function () {
      $('li:first').remove();
    })
  </script>

只会删除第一个li 

语法：element.empty()        删除匹配的元素集合中的所有子节点

 $('ul').empty();

 

删除了所有的li但是ul自身的结构还在 

语法：element.html(" ")       清空匹配的元素内容

$('li:first').html(' ');

只清空了第一个li的内容，但结构还在