jQuery入门（二）

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战

筛选器

• jQuery 的筛选器就是在选择器选择到一组元素以后

• 对元素进行筛选，也可以对准确的某一个元素进行判断和获取

  1. 找到所有元素中的第一个

     $('li').first()
     

  2. 找到所有元素中的最后一个

     $('li').last()
     

  3. 找到某一个元素的下一个兄弟元素

     $('li:eq(3)').next()
     

  4. 找到某一个元素的上一个兄弟元素

     $('li:eq(3)').prev()
     

  5. 找到某一个元素的后面的所有兄弟元素

     $('li:eq(3)').nextAll()
     

  6. 找到某一个元素的前面的所有兄弟元素

     $('li:eq(3)').prevAll()
     

  7. 找到某一个元素的父元素

     $('li:eq(3)').parent()
     

  8. 找到某一个元素的所有结构父级，一直到 html

     $('li:eq(3)').parents()
     

  9. 找到一组元素中的某一个

     // 在 li 的所有父级里面找到所有 body 标签
     $('li').parents().find('body')
     
     // 找到 div 标签下所有后代元素中所有类名为 box 的元素
     $('div').find('.box')
     

属性操作

• 给一个元素添加某个属性

  // 给 div 元素添加一个 id 属性，值是 box
  $('div').prop('id', 'box')
  // 获取 div 的 id 属性
  console.log($('div').prop('id'))
  

  • prop 这个方法只能添加元素自己本身就有的属性
  • 如果是添加的自定义属性，不会显示在标签上，但是可以使用

• 给一个元素添加某个自定义属性

  // 给 div 添加一个 index 属性，值是 1
  $('div').attr('index', 1)
  // 获取 div 的 index 属性
  console.log($('div').attr('index'))
  

• 移除元素的某一个属性

  // 移除元素自己本身的属性
  $('div').removeProp('id')
  // 移除元素的自定义属性
  $('div').removeAttr('index')
  

• 操作元素的类名

  // 判断某一个元素有没有某一个 class
  $('div').hasClass('box') // true 表示该元素有 box 类名，false 表示该元素没有 box 类名
  
  // 给元素添加一个类名
  $('div').addClass('box2') // 给 div 元素添加一个 box2 类名
  
  // 移除元素的类名
  $('div').removeClass('box') // 移除 div 的 box 类名
  
  // 切换元素类名
  $('div').toggleClass('box3') // 如果元素本身有这个类名就移除，本身没有就添加
  

• 操作元素的内容

  // 给元素的 innerHTML 赋值
  $('div').html('<span>hello world</span>')
  // 获取元素的 innerHTML
  $('div').html()
  
  // 给元素的 innerText 赋值
  $('div').text('hello world')
  // 获取元素的 innerText
  $('div').text()
  
  // 给元素的 value 赋值
  $('input').val('admin')
  // 获取元素的 value 值
  $('input').val()
  

操作样式

• jQuery 操作元素的样式就是一个方法 css

  // 给元素设置一个 css 样式
  $('div').css('width', '100px')
  
  // 获取元素的某一个样式
  $('div').css('width')
  
  // 给元素设置一组样式
  $('div').css({
      width: '100px',
      height: '200px'
  })