携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情
jQuery 操作文本内容
操作元素内的文本和超文本
注意: 属于 jQuery 的方法 只能 jquery 元素集合调用, 原生 DOM 不能调用
1. html()
使用方法:
1. 元素集合.html()
获取该元素的超文本内容, 以字符串的形式返回
获取的时候为了保证 html 结构只能获取第一个的元素的超文本内容
2. 元素集合.html('内容')
设置元素集合内元素的超文本内容
完全覆盖式的写入
隐式迭代: 元素集合内有多少元素, 就写入多少元素
//1. html()
// 获取
console.log($('div').html())
// 设置
$('div').html('<span>我是新来的</span>')
2. text()
使用方法:
1. 元素集合.text()
获取该元素的文本内容, 以字符串的形式返回
因为是文本内容, 不涉及 html 结构, 所以拿到的是所有元素的文本内容
以字符串的形式返回
2. 元素集合.text('内容')
设置元素集合内元素的文本内容
完全覆盖式的写入
隐式迭代: 元素集合内有多少元素, 就写入多少元素
// 2. text()
// 获取
console.log($('div').text())
// 设置
$('div').text('<span>我是新来的 span 标签</span>')
3. val()
使用方法:
1. 元素集合.val()
获取元素集合内元素的 value 值
2. 元素集合.val('内容')
设置元素集合内元素的 value 值
完全覆盖式的写入
隐式迭代: 元素集合内有多少元素, 就写入多少元素
// 3. val()
// 获取
console.log($('input').val())
// 设置
$('input').val('hello world')
jQuery 操作元素类名
1. addClass()
添加元素类名
$('div').addClass('box')\
2. removeClass()
删除元素类名
$('div').removeClass('box')\
3. hasClass()
判断有没有类名
console.log($('div').hasClass('box'))\
4. toggleClass()
切换类名
如果原先有, 就是删除
如果原先没有, 就是添加
$('div').toggleClass('box')\
jQuery 操作元素样式
css()
1-1. 语法: 元素集合.css('width')
获取元素的某一个样式的值, 不管是行内还是非行内都能获取到
console.log($('div').css('width'))\
console.log($('div').css('height'))\
console.log($('div').css('font-size'))\
1-2. 语法: 元素集合.css('样式名', '样式值')
设置元素的行内样式
隐式迭代: 元素集合内有多少元素设置多少元素
设置的时候, 单位是 px 可以不写
$('div').css('margin', 50).css('opacity', 0.5)\
1-3. 语法: 元素集合.css({ 样式名 1: 样式值 1, 样式名 2: 样式值 2, ... })
批量给元素设置行内样式
隐式迭代: 元素集合内有多少元素设置多少元素
设置的时候, 如果你需要设置的单位是 px 可以不写
$('div').css({ margin: 50, width: 700 })
jQuery 基础绑定事件
1. on()
使用方法: 元素集合.on(事件类型, 事件处理函数)
隐式迭代: 元素集合内有多少元素, 就会给多少元素绑定事件
1. on()
$('li').on('mouseover',
function () {
console.log('我被点击了')
})
jQuery 书写选项卡
- 给所有的 ul 里面的 li 绑定事件
2. 自己有类名, 所有兄弟没有类名
3. 所有的元素没有类名, 指定索引
$('ul > li').on('click', function () {
// DOM元素如果象用 jquery 的方式, 使用 $() 包起来
$(this).addClass('active').siblings().removeClass('active')
// 索引
$(this).index()
$('ol > li').removeClass('active').eq($(this).index()).addClass('active')
})
jQuery 的事件绑定
1. on()
事件绑定, 根据传递不同的参数做不同的事情
1-1. on(事件类型, 事件处理函数)
直接绑定事件, 有隐式迭代
//1-1. on(事件类型, 处理函数)
$('ul > li').on('click', function () {
console.log(this)
})
1-2. 元素结合.on(事件类型, 选择器, 事件处理函数)
事件委托的绑定
把选择器元素委托给元素集合里面的元素
注意: 选择器元素要是 元素集合 内元素的后代元素
// 1-2. on(事件类型, 选择器, 处理函数)
// 给 li 做了一个事件委托, 委托给 ul 来做
$('ul').on('click', 'li', function () {
console.log('我执行了')
// this 就是你点击的那一个元素
console.log(this)
})document.querySelector('ul').onclick = function (e) {
if (e.target.nodeName === 'LI') {
console.log('我执行了')
console.log(this)
} }
1-3. 元素集合.on(事件类型, 复杂数据类型, 事件处理函数)
给元素集合内的所有元素绑定事件
这个复杂数据类型是事件触发的时候, 传递给事件里面的参数
在事件对象里面有一个叫做 data 的成员, 就是你传递进来的参数
// 1-3. on(事件类型, 复杂数据类型, 事件处理函数)
$('li').on('click', { name: 'Jack' }, function (e) {
console.log('我执行了')
console.log(e)
})
1-4. 元素集合.on(事件类型, 选择器, 数据, 事件处理函数)
事件委托的形式, 带上传递参数
把选择器所属的事件, 委托给了元素集合内的事件
数据位置, 就是在事件触发的时候传递给事件处理函数的参数
// 1-4. on(事件类型, 选择器, 数据, 事件处理函数)
$('ul').on('click', 'li', 'hello world', function (e) {
console.log('我执行了')
console.log(e)
})
1-5. 元素集合.on({ 事件类型 1: 事件处理函数, 事件类型 2: 事件处理函数, ... })
一次性给元素绑定多种事件
没法传递参数和事件委托了
// 1-5. on({ 多个事件 })
$('li').on({
click: function () {
console.log('点击事件')
},
mouseover: function () {
console.log('移入事件') }
})
2. one()
用来绑定事件的方法
和 on() 方法的参数和使用形式一模一样
只不过绑定的事件只能执行一次
// 2. one()
$('li').one('click', function () {
console.log('我被点击了')
})
$('ul').one('click', 'li', function () {
console.log('我被点击了')
})
$('li').one('click', { name: 'Jack' },
function (e) { console.log(e)
})
$('ul').one('click', 'li', 'hello world', function (e) {
console.log(e.data)
})
// $('li').one({
click: function () {
console.log('点击事件')
},
mouseover: function () {
console.log('移入事件') }
})
3. off()
用来解除事件绑定的
使用方法:
1. 元素集合.off(事件类型)
解除元素身上该事件类型的所有事件处理函数
2. 元素集合.off(事件类型, 事件处理函数)
解除元素身上该事件类型的某一个事件处理函数
// 3-1. off(事件类型)
// 把 click 事件的所有事件处理函数全部解除
$('li').off('click')
// 3-2. off(事件类型, 事件处理函数) 把 click 事件的 handlerA 事件处理函数解除
$('li').off('click', handlerA)
4. trigger()
用 JS 代码的方式来触发事件
使用方法: 元素集合.trigger(事件类型)
$('li:first').trigger('click')\
jQuery 的事件函数
jQuery 给我们提供了一些简洁的绑定事件的方式
把一些常用事件直接封装成了函数
click()
mouseover()
这些方法可以直接使用, 带有隐式迭代
快捷绑定事件
使用方法:
1. 元素集合.事件类型(事件处理函数)
2. 元素集合.事件类型(传入事件处理函数的参数, 事件处理函数)
// 1. 绑定点击事件
$('div').on('click', function () {
console.log('点击事件触发')
})
// 使用事件函数
$('div').click({ name: 'Jack' },
function (e) { console.log('点击事件', e)
})
$('div').click(function (e) {
console.log('点击事件', e)
})
****jquery 唯一的特殊事件
hover()
一个结合了移入移出的事件
使用方法: 元素集合.hover(移入的事件处理函数, 移出的事件处理函数)
如果你只传递一个参数, 那么移入移出都触发
// 2. 特殊事件 hover
$('div').hover(
function () {
console.log('移入')
},
function () {
console.log('移出')
}
)
