jQuery元素操作

2021-09-04 09:30:26 阅读：144 来源： 互联网

标签：jQuery index function 元素 element each 操作 div li

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

标签：jQuery,index,function,元素,element,each,操作,div,li
来源： https://blog.csdn.net/laisy334514/article/details/120094438

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9