遍历元素

　　jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同的操作，就需要用到遍历。

　　语法1：$(‘div’).each(function ( index, dmoEle ) { xxx })。

　　　　　　这个方法遍历匹配的每一个元素，主要用 DOM 处理。参数 index 是每个元素的索引号；dmoEle 是每个 DOM 对象，不是 jQuery 对象。

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>
<script src="./jquery.min.js"></script>
<script>
  let arr = ['red', 'cyan', 'blue']
  $('li').each(function (i, domEle) {
    $(domEle).css('backgroundColor', arr[i])
  })
</script>

　　语法2：$.each( object, function ( index, element ) { xxx } )。

　　　　　　这个方法可用于遍历任何对象，主要用于数据处理，比如数组、对象。参数 index 是每个元素的索引，element 是遍历内容。

<script src="./jquery.min.js"></script>
<script>
  let arr = ['red', 'cyan', 'blue']
  $.each(arr, function (i, ele) {
    console.log(ele, i);
  })
  $.each({ name: '张三', age: 18 }, function (i, ele) {
    console.log(i, ele);
  })
</script>

创建元素

　　语法：$(‘<li></li>’)。

　　　　　　动态创建了 li。

<script src="./jquery.min.js"></script>
<script>
  let li = $('<li>创建</li>')
</script>

添加元素

　　内部添加：

　　　　element.append(‘内容’)：把内容放进匹配元素的最后面，类似于原生的 appendChild。
　　　　element.prepend(‘内容’)：把内容放进匹配元素的最前面。

　　外部添加：

　　　　element.after(‘内容’)：把内容放到目标元素后面。

　　　　element.before(‘内容’)：把内容放到目标元素前面。

　　注意

　　　　1、内部添加元素之后它们是父子关系。

　　　　2、外部添加元素之后它们是兄弟关系。

<body>
  <ul>
    <li>原先</li>
  </ul>
  <div>原先div</div>
</body>
<script src="./jquery.min.js"></script>
<script>
  // 创建
  let li = $('<li>创建</li>')
  // 内部添加
  // 后面添加
  // $('ul').append(li)
  // 前面添加
  $('ul').prepend(li)
  let div = $('<div>创建-DIV</div>')
  // 后面添加
  // $('div').after(div)
  // 前面添加
  $('div').before(div)
</script>

删除元素

　　element.remove()：删除元素本身。

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

　　element.html(”)：清空匹配的元素内容。

<body>
  <ul>
    <li>原先</li>
  </ul>
  <div>原先div</div>
</body>
<script src="./jquery.min.js"></script>
<script>
  // 创建
  let li = $('<li>创建</li>')
  // 内部添加
  // 后面添加
  // $('ul').append(li)
  // 前面添加
  $('ul').prepend(li)
  let div = $('<div>创建-DIV</div>')
  // 后面添加
  // $('div').after(div)
  // 前面添加
  $('div').before(div)
  // 删除
  // $('ul').remove()
  // $('div').empty()
  $('div').html('')
</script>