目录
认识 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('移出了') } )
持续更新中 Loading ...? (#^_^#)?