任先生的笔记库

# 一、元素节点（1）

# 1、获取元素

  在 jQuery 中通常我们直接使用$()即可，它类似于原生 js 中document.querySelector()和document.querySelectorAll()的结合体。

  在复杂的应用场景中，我们还可以使用 jQuery 入门中讲到的 jQuery 选择器。

$('.list li').eq(0)

$('.list').length
原生 js 实现 
document.querySelector('.list li:nth-child(1)')

document.querySelectorAll('.list').length

# 2、节点的获取

  提前说明一下，下面第一个表示（注释掉的部分）表示原生的写法，第二个表示 jQuery 的写法。

/* 兄弟（关键字：相邻） */
// 1、上铺的兄弟
console.log(box.prev()) // 除此之外还有 prevAll()

// 2、下铺的兄弟
console.log(box.next()) // 除此之外还有 nextAll()

/* 父子（关键字：相邻）🚩 */
// 1、父节点
console.log(box.parent()) // 除此之外还有 parents()

// 2、子节点
console.log(box.children(selector))
console.log(box.find('li'))
原生 js 实现 
/* 兄弟（关键字：相邻） */
// 1、上铺的兄弟
console.log(box.previousElementSibling)

// 2、下铺的兄弟
console.log(box.nextElementSibling)

/* 父子（关键字：相邻）🚩 */
// 1、父节点
console.log(box.parentNode)

// 2、子节点集合 `HTMLCollection`
console.log(box.children)

  值得说明的是，jQuery 还有比原生方法更强大的是：

  • 它可以直接获取所以的兄弟、父子节点（prevAll()、nextAll()、parents()），而不是单单获取一个节点
  • 相应的 jQuery 还提供了获取周围节点 siblings()方法，这在原生 js 中是没有的
// 周围的兄弟
console.log(box.siblings())
siblings()方法的 🤔 原生实现

  说白了就是，原生 js 没有 jQuery 的隐式迭代功能。

function siblings(element) {
  var siblingsArr = []
  var parent = element.parentNode
  var children = parent.children
  for (var i = 0; i < children.length; i++) {
    if (children[i] !== element) {
      siblingsArr.push(children[i])
    }
  }
  return siblingsArr
}

# 二、节点操作

# 试一试

tolist 案例实现

# 1、创建新节点

// 方式1（链式）
var odiv = $('<div>').addClass('box').html('节点内容')

// 方式2
var odiv = $(`<div class="box">节点内容</div>`)
原生 js 实现 
// 1、createElement
var odiv = document.createElement('div')
odiv.className = 'box'
odiv.innerHTML = '节点内容'

// 2、模板字符串
var odiv = `<div class="box">节点内容</div>`

# 2、插入子节点

  jQuery 提供的写法有两种使用方式，但个人推荐使用第一种 😂，第二种为我注释掉的部分

  • 在末尾插入
// 1、在末尾插入
$('#box').append(odiv)
// $(odiv).appendTo($('#box'))

$('#box').prepend(odiv)
// $(odiv).prependTo($('#box'))

// 2、指定位置插入
$('#box').before(odiv)
// odiv.insertBefore($('#box'))

$('#box').after(odiv)
// odiv.insertAfter($('#box'))
原生 js 实现

  在原生 js 的 DOM 方法中，只有下面两个常用的方法（不过说实话，也够用了 😂）

// 1、在末尾插入
box.appendChild(odiv)

// 2、指定位置插入
box.insertBefore(odiv, child) // 在child的前面插入

  jQuery 中的 append()方法相较于原生的 appendChild()方法更加 NB 的一点就是，append()方法还可以传入字符串，而不仅限于 node 节点。

$('#box').append(`<div class="box">节点内容</div>`)
原生 js 实现 
document.getElementById('box').innerHTML += '<div class="box">节点内容</div>'

# 3、删除子节点

  • jQuery 方式
// 1、删除当前节点
$('#box').remove()

// 2、删除指定子节点
$('#parent').find('#child').remove()
原生 js 实现 
// 1、删除当前节点
box.remove()

// 2、删除指定子节点
box.removeChild(odiv)

  除此此外，jQuery 还提供了一个清空方法empty()

其实该方法是变相的删除所有节点，使用 innerHTML 也可以实现同样的效果

// 清空所以子节点
$('#box').empty()
// $('#box').html("")
原生 js 实现 
box.innerHTML = ''

# 4、替换子节点

// 替换节点
$('#box #child').replaceWith(odiv)
odiv.replaceAll($('#box #child'))
原生 js 实现 
// 替换当前节点（将A替换为B）
$(A).replaceWith(B)
// $(B).replaceAll(A);

// 替换子节点
// Node.prototype.replaceChild()
box.replaceChild(odiv, child)

# 5、克隆节点

  jQuery 中的 clone()就直接是克隆完整节点，相当于原生中的 clone(true)。

并且 jQuery 中的 true 表示的是是否复制事件处理程序

// 克隆完整节点（含子节点）
const cloneElm = $('#box').clone()
console.log(cloneElm) // <ul id="list">...</ul>
原生 js 实现 
const ulElm = document.querySelector('ul')

// 1、克隆当前节点
const cloneElm1 = ulElm.cloneNode()
console.log(cloneElm1) // <ul id="list"></ul>

// 2、克隆完整节点（含✨子节点）
const cloneElm2 = ulElm.cloneNode(true)
console.log(cloneElm2) // <ul id="list">...</ul>

# 二、jQuery 属性操作

# 1、属性使用

  • prop() 原生属性操作
<input type="checkbox" checked id="rember" />

<script>
  // 1、常规使用
  $('#rember').prop('checked', false)
  $('#rember').prop('checked')

  // 2、自定义属性
  $('#box').attr('effect', 'copy')
  $('#box').attr('effect')
  $('#box').removeAttr('effect')
</script>
  • 拓展 👏
// attr()也可以操作原生属性
$('#mybtn').attr('disabled', true)
原生 js 实现 
// 1、常规使用
photo.checked = false

// 2、自定义属性
box.setAttribute('myMsg', 'welcome')
box.getAttribute('myMsg')
box.removeAttribute('myMsg')

# 2、元素样式

  关于使用原生 js 和 jQuery 对元素样式进行操作的区别，大家可以先看看下面这个错误案例：

$('ul li')[activeIndex].css('display', 'inline-block')
答案

  使用$()和原生方式获取的内容是不同的：

console.log($('ul li'))
console.log(document.querySelectorAll('ul li'))

  当使用[activeIndex]后，jQuery 中的一些封装方法就无法使用了。

// 解决方式1
$('ul li').eq(activeIndex).css('display', 'inline-block')

// 解决方式2
$('ul li')[activeIndex].style.display = 'inline-block'
  • 样式操作
// 获取
console.log($('#box').css('width'))
console.log($('#box').css('background-color'))

// 修改/添加
$('#box').css('width', '300px')
// $('#box').css('width', 300)
原生 js 实现 
// 获取
console.log(box.style['background-color'])
console.log(box.style.backgroundColor)

// 修改/添加
box.style.width = '60px'
  • 隐式迭代
// 无需遍历🤔
$('ul li').css('color', 'red')
  • 批量添加
$('#box').css({ width: 200, height: 300, backgroundColor: 'green' })
原生 js 实现 
box.setAttribute('style', 'width:100px;' + 'background-color:skyblue;')

# 3、class 类名

<div id="box" class="item item1 item2"></div>

<script>
  $('#box').addClass('item3')
  $('#box').removeClass('item3')

  // 显示与隐藏
  $('#box').toggleClass('itme3') // 将某个 class 移入或移出当前元素

  // 其他
  $('#box').hasClass('active') // 检查当前元素是否包含某个 class
</script>
原生 js 实现 
// 1、常规
box.classList.add('item3')
box.classList.remove('item3')

// 2、切换
box.classList.toggle('itme3') // 将某个 class 移入或移出当前元素

// 3、其他
box.classList.contains() // 检查当前元素是否包含某个 class

  除了上面的这些方法，jQuery 还提供了index()方法用于获取当前 index 位置（相对于兄弟节点）

let index = $('#box li').index() // 返回当前index位置（相对于兄弟节点）
原生 js 实现

  在原生 JavaScript 中，可以使用 Array.prototype.indexOf()方法来获取一个元素在数组中的索引位置（如果不存在则返回-1）。

// 获取元素在父元素中的索引位置
function index_R(element) {
  var childList = element.parentNode.children
  var index = Array.prototype.indexOf.call(childList, element)
  return index
}

// 示例用法：
var index = index_R(document.getElementById('#box li'))
  • 应用示例
// 样式切换✍
$('ul').on('click', 'li', function () {
  $(this).addClass('active').siblings().removeClass('active')
})

# 三、jQuery 文本操作

# 1、文本操作

<div id="box">
  hello world
  <div>lencamo</div>
</div>

<script>
  // 1、打印
  console.log($('#box').html()) // 获取所有

  console.log($('#box').text()) // 不解析 html

  // 2、修改（全部覆盖）
  $('#box').html('呵呵')
</script>
原生 js 实现 
<div id="box">
  hello world
  <div>lencamo</div>
</div>

<script>
  // 1、打印
  console.log(box.innerHTML) // 获取所有

  console.log(box.innerText) // 不解析 html

  // 2、修改（全部覆盖）
  box.innerHTML = '呵呵'
</script>

# 2、value 属性

<select name="" id="select">
  <option value="1">one</option>
  <option value="2" selected>two</option>
  <option value="3">three</option>
</select>

<script>
  // 1、原生方式
  // console.log(select.value)
  select.value = '3' // 注意匹配字符串

  // 2、jQuery方式
  console.log($('#select').val())
  $('#select').val('3')
</script>
更新于 : 8/7/2024, 2:16:31 PM

← DOM事件 →

Apache License 2.0 | Copyright © 2022 lencamo All Rights Reserved | 蜀ICP备2022012538号-2