前端 _ jQuery 之 小白版( 上 )

目录

认识 jQuery 

1. jQuery 获取元素 :

1 )  jQuery 的基本选择器

2 )  jQuery 的特殊选择器

3 )  jQuery 的筛选器

2.  jQuery 操作元素 CSS 样式 :

3.  jQuery 操作元素类名 : 

4.  jQuery 操作元素属性 : 

5.  jQuery 绑定事件 :

1. on( ) 方法

2. one( ) 方法

3. off( ) 方法

4. trigger( ) 方法

5. 常用的事件函数

6. 特殊事件

jQuery 简图 : ( 上 )

---

认识 jQuery 

认识  jquery

+ 官方名称 :  jQuery

+ 是一个大型的 开源类库

  => 封装的都是 DOM 相关的操作

+ jQuery 的 优势 :

=> 无与伦比的 选择器

=> 无处不在的 隐式迭代

=> 无所不能的 链式编程

+ 优点 : => 全兼容

扩展了解 : 

前端的第三方

+ 插件: 为了实现某一单一类功能而出现的封装代码

+ 类库: 对于基本功能的封装, 功能类函数的封装

  => jQuery

+ 框架: 一个有自己完整独立生态系统的代码封装

  => Vue

  => React

  => Angular

jQuery 的使用 :

  1. 必须要引入一个 第三方 文件

  => jquery.js

  2. 在页面引入

  3. 开始使用

jQuery 的引入 :

  + 可以引入 jquery.js 或者引入 jquery.min.js

  + 文件引入以后, 会向全局暴露两个变量名

    1.  $

    2.  jQuery

    => 这两个名字完全一样

+ 引入以后, 就可以使用 jQuery 里面提供的所有方法了

    =>  jQuery 方法网站 :  https://jquery.cuishifeng.cn/

注意 : =>  jQuery 的所有操作方法 : 
        + 必须是 jquery 的元素集合才能调用 <= 

<script src="./jquery/jquery.min.js"></script>
    
console.log($)
console.log(jQuery)

---

1. jQuery 获取元素 :

jQuery 的选择器 : 

+ 语法: $('选择器')

1 )  jQuery 的基本选择器

  + 语法: $('选择器')

  => 可以完全按照 css 的方式来获取 , 有多少获取多少

  => 注意: 不管你用什么选择器, 获取到一定是一个 jquery 的元素集合

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

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

2 )  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)'))

3 )  jQuery 的筛选器

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

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

=> 目的: 为了 链式编程

 (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')) 

(10) parent( )

  => 获取到 父 元素

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

(11) parents( )

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

    + 逐层获取到所有的结构父级, 直到 html 为止

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

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

    + 逐层获取到结构父级中满足选择器要求的那一个元素

    console.log($('ul > span').parents('body')) 

(12) parentsUntil( ) 

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

    + 逐层获取到所有结构父级, 直到 html 为止

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

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

    + 逐层获取到所有结构父级, 直到 选择器元素 为止, 不包含选择器元素

    console.log($('ul > span').parentsUntil('html')) 

(13) siblings( ) 

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

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

(14) find( )

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

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

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

(15) index( )

  => 元素集合.index( )

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

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

---

2.  jQuery 操作元素 CSS 样式 :

+ 使用 css( ) 的方法

+ 根据传递不同的参数来做不同的事情

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

<style>
  div {
    height: 100px;
    background-color: pink;
  }
</style>

参数方式 1 :
+ 语法 : 元素集合.css('样式名')
+ 返回值 : 元素集合内第一个元素的指定样式的值
+ 不管元素的行内和非行内样式 , 都能拿的到 

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

参数方式 2 :
+ 语法 : 元素集合.css('样式名', '样式值')
+ 作用 : 给元素集合内所有的元素, 设置样式
+ 注意 : 设置带有单位样式的时候, 可以直接填写数字, 默认使用 px 作为单位 

// 2. 设置样式
$('div').css('width', 300)
$('div').css('height', 300)
$('div').css('opacity', 0.5)

 参数方式 3 :
+ 语法 : 元素集合.css({ ... })
+ 作用 : 给元素集合内所有的元素, 批量设置样式

// 3. 批量设置样式
$('div').css({
  width: 300,
  height: 400,
  backgroundColor: 'red',
  opacity: 0.6,
  float: 'right'
})

---

3.  jQuery 操作元素类名 : 

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

1. addClass('类名')
  => 语法: 元素集合.addClass('类名')
  => 作用: 给元素集合内所有元素添加类名
  $('div').addClass('box') 

2. removeClass( )
  => 语法: 元素集合.removeClass('类名')
  => 作用: 删除元素集合内的所有元素的某一个类名
  $('div').removeClass('b')  

3. toggleClass( )
  => 语法: 元素集合.toggleClass('类名')
  => 作用: 切换元素集合内所有元素的类名
  $('div').toggleClass('a')  

4. hasClass( )
  => 语法: 元素集合.hasClass('类名')
  => 作用: 判断该元素是否有某一个类名, 返回值是 布尔值
  console.log($('div').hasClass('d'))  

---

4.  jQuery 操作元素属性 : 

<div id="box" hello="world">我是 div 标签</div>

1 .  第一套 : 
        + attr( ) 和 removeAttr( )

1-1. attr( ) 获取

  => 语法: 元素集合.attr('属性名')

  => 作用: 获取元素集合内第一个元素的该属性对应的值

  => 返回值: 对应属性的值

  => 注意: 可以获取到元素标签身上书写的所有属性的值, 

  但是不能获取到 prop( ) 方法设置的自定义属性的值

1-2. attr( ) 设置

  => 语法: 元素集合.attr('属性名', 属性值)

  => 作用: 给该元素集合内所有元素设置一个属性

  => 注意: 可以设置 自定义属性, 也可以设置 原生属性

  => 设置的所有属性, 都直接响应在标签身上

1-3. removeAttr( )

  => 语法: 元素集合.removeAttr('属性名')

  => 作用: 删除元素集合内容所有元素的某一个属性

  => 注意: 可以删除任何属性, 唯独不能删除 prop( ) 设置的自定义属性

+ 注意: 一般我们不用这一套方法来操作 原生属性

+ 建议: attr( ) 和 removeAttr( ) 用来操作 自定义属性

// 1. attr() 和 removeAttr()
// 1-1. attr() 获取
console.log($('div').attr('hello'))
// 1-2. attr() 设置
$('div').attr('abc', 100)
// 1-3. removeAttr()
$('div').removeAttr('abc')

2 .  第二套
        + prop( ) 和 removeProp( )

  2-1. prop( ) 获取

    => 语法: 元素集合.prop('属性名')

    => 作用: 获取元素集合内第一个元素该属性的值

    => 注意: 只能获取元素的 原生属性, 

    不能获取自定义属性的值, 除非这个自定义属性是用 prop( ) 方法设置的

  2-2. prop( ) 设置

    => 语法: 元素集合.prop('属性名', '属性值')

    => 作用: 给元素集合内所有元素设置属性

    => 注意: 可以设置 原生属性, 也可以设置 自定义属性

    如果你设置的是 原生属性, 直接响应在标签身上,

    如果是 自定义属性, 不会响应在标签身上,

    而是存储在 jquery 获取到的元素对象中

  2-3. removeProp( )

    => 语法: 元素集合.removeProp('属性名')

    => 作用: 给元素集合内所有元素删除属性

    => 注意: 不能删除 原生属性,

    不能删除 attr( ) 设置的 自定义属性

    只能删除 prop( ) 方法设置的 自定义属性

  + 注意: 这一套方法一般不用来操作自定义属性, 一般用来操作 原生属性

  + 建议: prop( ) 和 removeProp( ) 建议用来操作 原生属性

// 2. prop() 和 removeProp()
// 2-1. prop() 获取
console.log($('div').prop('id'))
// 2-2. prop() 设置
$('div').prop('abc', 100)
// 2-3. removeProp()
$('div').removeProp('abc')

---

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)
})

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

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

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( ) 方法

 + 语法 和 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.
$('div > span').off('click')
// 3-2.
$('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( )

=> mousemove( )

=> mousemove( )

=> ...

+ 以 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 简图 : ( 上 )

---

前端 _ jQuery 之 小白版 ( 中 ) : https://blog.csdn.net/weixin_58099903/article/details/119252613