[jquery] 获取元素---first eq() ,css样式---.css() ,元素类名---addClass() ,元素属性---attr prop，绑定事件---on one off

文章目录

• ​​1. jQuery 获取元素 :​​

• ​​jQuery 的基本选择器​​
• ​​jQuery 的特殊选择器​​
• ​​jQuery 的筛选器 `first()` `eq(3)`​​

• ​​2. jQuery 操作元素 CSS 样式 `$('div').css` :​​
• ​​3. jQuery 操作元素类名 addClass removeClass toggleClass :​​
• ​​4. jQuery 操作元素属性 attr prop:​​
• ​​5. jQuery 绑定事件 :​​

• ​​1. on( ) 方法​​
• ​​2. one( ) 方法​​
• ​​3. off( ) 方法​​
• ​​4. trigger( ) 方法​​
• ​​5. 常用的事件函数​​
• ​​6. 特殊事件​​

• ​​参考：​​

1. jQuery 获取元素 :

jQuery 的基本选择器

• 语法: $(‘选择器’)
  => 可以完全按照 css 的方式来获取 , 有多少获取多少
  => 注意: 不管你用什么选择器, 获取到一定是一个 jquery 的元素集合

<div class="box" id="box">你好 世界</div>

// 1) 基本选择器
// 通过标签选择器获取到 div 元素
console.log($('div'))

// 通过 class 类名选择器获取到 .box 元素
console.log($('.box'))

// 通过 id 选择器获取到元素
console.log($('#box'))

jQuery 的特殊选择器

直接在基本选择器的后面连接使用

:first

=> 获取到 第一个

:last

=> 获取到 最后一个

:odd

=> 获取到索引为 奇数 的所有内容

:even

=> 获取到索引为 偶数 的所有内容

:eq( 索引 )

=> 获取到 索引 为指定某一个的

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

// 2) 特殊选择器
// :first ( 第一个 )
console.log($('ul > li:first'))

// :last  ( 最后一个 )
console.log($('ul > li:last'))

// :odd   ( 索引为奇数的所有内容 )
console.log($('ul > li:odd'))

// :even  ( 索引为偶数的所有内容 )
console.log($('ul > li:even'))

// :eq(索引) 索引指定为某一个的
// 获取到 索引 第三个
console.log($('ul > li:eq(3)'))

jQuery 的筛选器 ​​first()​​​ ​​eq(3)​​

=> 语法: $(‘选择器’).筛选器( )

=> 对于选择器选择出来的元素集合 , 进行 二次筛选

=> 目的: 为了 链式编程

<ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
        <li>我是第五个li</li>
        <li>我是第六个li</li>
        <li class="li7">我是第七个li</li>
        <li>我是第八个li</li>
        <li>我是第九个li</li>
    </ul>

(1) first( )

=> 获取到选择器内的 第一个 元素内容

console.log($('ul > li').first( ))

(2) last( )

=> 获取到选择器内的 最后一个 元素内容

console.log($('ul > li').last( ))

(3) eq(索引)

=> 获取到选择器内 索引 第几个的内容

console.log($('ul > li').eq(3))

<ul>
  <li>1</li>
  <li class="a">2</li>
  <li>3</li>
  <span> span </span>
  <li>4</li>
  <li class="b">5</li>
  <li>6</li>
</ul>

(4) next( )

=> 拿到你获取到的元素的 下一个 兄弟元素

console.log($('ul > span').next())

(5) nextAll( )

=> 语法1:元素集合.nextAll()

+ 获取到后面 所有 的兄弟元素

console.log($('ul > span').nextAll())

=> 语法2:元素集合.nextAll(选择器)

+ 获取到后面所有兄弟元素中满足选择器条件要求的元素

console.log($('ul > span').nextAll('.b'))

(6) nextUntil( )

=> 语法1:元素集合.nextUntil()

+ 获取到后面的所有兄弟元素

console.log($('ul > span').nextUntil())

=> 语法2:元素集合.nextUntil(选择器)

+ 获取到后面的所有兄弟元素, 直到选择器元素为止, 不包含选择器元素

console.log($('ul > span').nextUntil('.b'))

(7) prev( )

=> 获取到 上一个 兄弟元素

console.log($('ul > span').prev())

(8) prevAll( )

=> 语法1:元素集合.prevAll()

+ 获取到前面所有的兄弟元素

console.log($('ul > span').prevAll())

=> 语法2:元素集合.prevAll(选择器)

+ 获取到前面所有的兄弟元素中满足选择器要求的元素

console.log($('ul > span').prevAll('.a'))

(9) prevUntil( )

=> 语法1:元素集合.prevUntil()

+ 获取到前面所有的兄弟元素

console.log($('ul > span').prevUntil())

=> 语法2:元素集合.prevUntil(选择器)

+ 获取到前面所有的兄弟元素直到 选择器元素 为止, 不包含选择器元素

console.log($('ul > span').prevUntil('.a'))

(13) siblings( )

=> 获取自己的所有 兄弟 元素, 不包括自己

console.log($('span').siblings())

(14) find( )

=> 语法: 元素集合.find(‘选择器’)

=> 在该元素的所有后代元素中 查找 满足选择器要求的元素

console.log($('ul').find('span'))

(15) index( )

=> 元素集合.index( )

=> 返回值: 是该元素在其 html 结构中的 索引 位置

=> 注意: 不是在元素集合内容的索引位置, 而是在其真实的 html 结构中的 索引 位置

2. jQuery 操作元素 CSS 样式 ​​$('div').css​​ :

<div style="width: 100px;"></div>

div {
    height: 100px;
    background-color: pink;
  }

1. 获取样式

// 获取 div 元素的 宽度 / 高度 / 背景颜色
console.log($('div').css('width'))
console.log($('div').css('height'))
console.log($('div').css('background-color'))

2. 设置样式

$('div').css('opacity', 0.5)
    $('div').css('width', 300)
    $('div').css('height', 300)

3. 批量设置样式

$('div').css({
      width: 300,
      height: 400,
      backgroundColor: 'red',
      opacity: .6,
      float: 'right'
    })

3. jQuery 操作元素类名 addClass removeClass toggleClass :

<div class="a b c d e f g">我是 div 标签</div>

1. 添加类名

$('div').addClass('box')

2. 删除类名

$('div').removeClass('f')

3. 切换类名

$('div').toggleClass('a')

4. 是否存在这个类名

console.log($('div').hasClass('d'))  // true   false

4. jQuery 操作元素属性 attr prop:

• 几种属性操作

• 原生属性,id class src
• 自定义属性,getAttribute()
• H5自定义属性，dataset data-xxx

• jQuery有三种操作属性的方法

• =>attr()和 removeAttr()
• => prop()和removeProp()
• => data()和removeData()

对于HTML元素本身就带有的固有属性，在处理的时候，使用​​prop()​​​方法。​​id​​​,​​target​​​ ,​​checked​​ 对于HTML元素我们自己自定义的DOM属性，在处理时，使用​​attr()​​方法。​​del​​

举例说明：

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

这个例子里a元素的​​DOM属性​​​有​​href​​​、​​target​​​和​​class​​，这些属性就是a元素本身就带有的属性，也就是W3C标准里就包含有这几个属性，这些就叫做固有属性。处理这些属性时，建议使用​​prop()​​方法。

<a href="#" id="link1" del="delete">删除</a>

这个例子里a元素的​​DOM属性​​​有​​href​​​、​​id​​​和​​del​​，很明显，前两个是固有属性，而后面一个del属性是我们自己自定义上去的，a元素本身是没有这个属性的。这种就是自定义的DOM属性，处理这些属性时，建议使用​​attr()​​方法。使用prop()方法取值和设置属性值时，都会返回undefined值。

再举一例：
像​​​checkbox，disabled，radio和select​​​这样的元素，选中属性对应​​checked​​​和​​selected​​，这些也属于固有属性，因此需要使用​​prop()​​方法去操作才能获得正确的结果。

$("#chk1").prop("checked") // false
$("#chk2").prop("checked") // true

如果上面使用attr()方法，则会出现：

$("#chk1").attr("checked") // undefined
$("#chk2").attr("checked") // "checked"

大家都知道有的浏览器只要写​​disabled，checked​​​就可以了，而有的要写成​​disabled = "disabled"，checked="checked"​​​，比如用​​attr("checked")​​​获取​​checkbox​​​的​​checked​​​属性时选中的时候可以取到值，值为​​"checked"​​​，但没选中获取值就是​​undefined​​。

jQuery提供新的方法​​prop()​​​来获取这些属性，就是来解决这个问题的，以前我们使用​​attr()​​​获取​​checked​​​属性时返回​​"checked"​​​和​​undefined​​,现在使用​​prop()​​方法获取属性则统一返回​​true​​和​​false​​ 。

5. jQuery 绑定事件 :

1. on( ) 方法

1-1. 语法1:

=> 语法: 元素集合.on(‘事件类型’, 事件处理函数)
=> 作用: 给元素集合内容所有元素绑定事件

// 1-1. on 语法1
$('div').on('click', () => console.log('我被点击了'))

1-2. 语法2 :

=> 语法: 元素集合.on(‘事件类型’, ‘选择器’, 事件处理函数)
=> 作用: 用来实现事件委托的
=> 事件绑定在元素集合内的元素身上, 但是需要在选择器满足要求的元素身上才可以触发

// 1-2. on 语法2 : 事件委托
// 事件绑定在 div 身上
// 只有点击div 的后代元素 span 才能触发
$('div').on('click', 'span', function() {
  console.log('事件委托')
  // this 就是你点击的这个 span 
  console.log(this)
})

1-3. 语法3:

=> 语法: 元素集合.on(‘事件类型’, 复杂数据类型, 事件处理函数)
=> 作用: 给元素集合内所有元素绑定事件
=> 复杂数据类型是当事件触发的时候, 传递给事件处理函数的参数
=> 在事件处理函数内通过 事件对象.data 获取

// 1-3. on 语法3 : 传递数据
// 给 div 绑定点击事件
// 当点击事件触发的时候, 会把这个对象数据类型当做参数传递给事件对象
// e 内有一个叫做 data 的成员
$('div').on('click', { name: 'jack' }, function (e) {
  // e 是事件对象
  console.log(e)
  console.log(e.data) // { name: 'jack' }
})

1-4. 语法4:
=> 语法: 元素集合.on(‘事件类型’, ‘选择器’, 参数, 事件处理函数)
=> 作用: 事件委托的同时, 带有参数传递

// 1-4. on 语法4 : 事件委托 + 传递数据
// 事件绑定在 div 身上, 点击 div 的后代元素 span 才能触发
// 'hello world' 就是传递给事件对象的参数
$('div').on('click', 'span', { name: 'jack' }, e => {
  console.log(e)
  console.log(e.data)  //{ name: 'jack' }
})

1-5. 语法5:
=> 语法: 元素集合.on({
事件类型1: 处理函数1,
事件类型2: 处理函数2
…
})
=> 作用: 给元素集合内所有元素, 批量绑定事件
=> 注意: 不能进行事件委托和传递参数了

// 1-5. on 语法5: 批量绑定事件
$('div').on({
  click: function () { console.log('点击事件') },
  mouseover: () => console.log('鼠标移入事件'),
  mousemove: () => console.log('鼠标移动事件')
})

2. one( ) 方法

• one( ) 语法 和 on 方法传递参数的方式一模一样
• 唯一的区别, 就是 on 方法绑定的事件可以多次触发
• one 方法绑定的事件只能触发一次

// 2-1. one 语法1:
$('div').one('click', function () { console.log('点击事件') })
// 2-2. 事件委托
// 事件绑定给 div
// 你得点击 div 内满足 span 这个标签选择器的元素才能触发
$('div').one('click', 'span', function (e) {
  console.log('你点击的是 span')
  // this 就是你点击的这个 span
  console.log(this)
})
 
// 2-3. 传递数据
$('div > span').one('click', { name: 'Jack' }, e => {
  console.log(e)
})
 
// 2-4. 事件委托 + 传递数据
$('div').one('click', 'span', 'hello world', e => {
  console.log(e)
})
 
// 2-5. 批量绑定事件
$('div > span').one({
  click: () => console.log('点击事件'),
  mouseover: () => console.log('鼠标移入事件'),
  mousemove: () => console.log('鼠标移动事件')
})

3. off( ) 方法

3-1. 元素集合.off(事件类型)

=> 把该事件类型的所有事件处理函数全部取消

3-2. 元素集合.off(事件类型, 事件处理函数)

=> 把该事件类型的某一个事件处理函数解绑

// 3. off()
function handlerA() { console.log('handlerA') }
function handlerB() { console.log('handlerB') }
function handlerC() { console.log('handlerC') }

$('div > span').on('click', handlerA)
$('div > span').on('click', handlerB)
$('div > span').on('click', handlerC)

// 3-1.  取消所有click
$('div > span').off('click')

// 3-2. 取消handlerB的click
$('div > span').off('click', handlerB)

4. trigger( ) 方法

• 用来触发事件的
• 语法: 元素集合.trigger(事件类型)

// 4. trigger
    function handlerA() {
      console.log('handlerA')
    }

    function handlerB() {
      console.log('handlerB')
    }

    function handlerC() {
      console.log('handlerC')
    }
    $('div').on('click', handlerA)
    // 触发事件
    // 自动触发一次 li 的点击行为
    $('div').trigger('click')

5. 常用的事件函数

• jQuery 把一些常用的事件类型直接封装成函数, 我们可以直接使用

click( )
  keydown()
  mouseenter()
  mouseleave()
  mousemove()
  mouseout()
  mouseover()

• 以 click 事件为例

• 语法1 : 元素集合.click(事件处理函数)
• 语法2 : 元素集合.click(参数, 事件处理函数)
  => 用来给事件处理函数传递参数

// 3-1. 事件函数语法1
$('div').click(function () { console.log('绑定了点击事件') })
 
// 3-2. 事件函数语法2
$('div').click('hello world', e => console.log(e))

6. 特殊事件

• 在 jQuery 里面只有一个特殊事件: hover 事件

• 语法: 元素集合.hover(函数1, 函数2)
  => 函数1 : 会在鼠标移入的时候触发
  => 函数2 : 会在鼠标移出的时候触发
• 注意: 如果你只传递一个函数, 那么移入触发 移出也会触发

// 6. hover 事件
$('div').hover(
  function() { console.log('移入了') },
  function() { console.log('移出了') }
)

参考：

jquery中的attr()和prop()