jQuery元素操作

2024-02-19 20:08:58

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的内容，但结构还在

码农公寓