jQuery 基础使用与入门

我是Sam9029，一个前端
‍‍恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！

视频：https://www.bilibili.com/video/BV1W54y1J7Ed?p=69&spm_id_from=pageDriver

笔记：https://blog.csdn.net/DDDHL_/article/details/122463255

一个类库

对 DOM 操作进行封装

1选择器

console.log($);
console.log(jquery);

//注意 . 和 # 使用时，用没用，老是搞忘记
$('选择器') 
$('div')
$('.class')
$('#id')
$('li:nth-child(2)')

/*  */
//属性选择器！
$('[name=xxxx]:checked').val()
$('element[name=xxxx]:checked').val()

---

2筛选器

用法：选择器.筛选器

$('选择器').筛选器名称()

---

3操作文本内容

3.1 html() 等价于原生 JS 的 innerHTML

// 获取
$('div').html()
// 设置
$('div').html('你要设置的内容')
// 可以识别并解析 html 结构字符串
$('div').html('
hello world
')

3.2 text() 等价于原生 JS 的 innerText

// 获取
$('div').text()
// 设置  不可以解析
$('div').text('hello world')

3.3 val() 等价于原生 JS 中 value

// 获取
$('input').val()
// 设置
$('input').val('你要设置的内容')

---

4操作元素类名

4.1 addClass() 新增类名

$('div').addClass('要添加的类名')

4.2 removeClass() 删除类名

$('div').removeClass('要删除的类名')

4.3 toggleClass() 切换类名

本身有这个类名，那就是删除，如果本身没有这个类名，那就是添加

// 假设div中有a b c d 三个类名
var btn = document.querySelector('button')
btn.onclick = function(){
    $('div').toggleClass('box')
}
// 点击一次，添加box到class中，点击第二次，删除box

---

5操作元素样式

5.1 css()

获取

//设置，注意：样式单位是 px 时，可以省略 px

// 获取，可以获取行内和非行内样式。
// 元素集合.css(你要获取的样式名称)
$('div').css('width')     //获取div的宽

//设置，注意：样式单位是 px 时，可以省略 px
//元素集合.css(样式名，样式值)
$('div').css('width', '300px')    //设置div宽为300px
$('div').css('width', 300)

设置

可以使用 css 批量设置样式

// 元素集合.css({ 所有要设置的样式 })
$('div').css({
    width:260,
    height:320,
    'background-color':'purple'
})

---

6操作元素属性

注意四个方法的使用条件

arrt() removeAttr() prop() removeProp()

6.1 arrt()

// 一般用于操作元素的自定义属性。直接出现在元素的标签里

// 获取自定义属性hello
$('div').attr('hello')
// 设置自定义属性hello
$('div').attr('hello',100)
$('div').attr('id','container')

6.2 removeAttr()

// 删除自定义属性hello
$('div').removeAttr('hello')

3.prop()

// 操作元素原生属性时，会直接出现在元素标签里
// 操作自定义属性时，不会直接出现在元素标签里，会响应在元素对象上
// console.log()输出来看一下就知道了！！
// 注意：prop()不能获取元素标签上原有的自定义属性，只能获取prop()自己设定的自定义属性

// 获取原生和自定义属性
$('div').prop('id')
$('div').prop('hello')
// 设置原生和自定义属性
$('div').prop('id') = 1 
$('div').prop('hello') = 100

4.removeProp()

// 不能删除原有的自定义属性和原生属性，只能删除prop()设定的自定义属性
$('div').prop('hello') = 100
$('div').removeProp('hello')

---

7 获取元素尺寸

1.width()、height() // 获取内容区域的尺寸

2.innerWidth()、innerHeight() // 获取内容和 padding 区域尺寸

3.outerWidth()、outerHeight() // 获取内容、padding 和 border 区域尺寸

4.outerWidth(true)、outerHeight(true) // 获取内容、padding 、border 和 margin 尺寸

1.width()、height()

// 获取内容区域的尺寸

$('div').width()     		// 300
$('div').height()			// 300

2.innerWidth()、innerHeight()

// 获取内容和 padding 区域尺寸

$('div').innerWidth()		// 340
$('div').innerHeight()		// 340

3.outerWidth()、outerHeight()

// 获取内容、padding 和 border 区域尺寸

$('div').outerWidth()		// 380
$('div').outerHeight()		// 380

4.outerWidth(true)、outerHeight(true)

// 获取内容、padding 、border 和 margin 尺寸

// 假设设定margin为20px
$('div').outerWidth(true)		// 420
$('div').outerHeight(true)		// 420

---

8 操作元素偏移量

注意 offset() position() 获取元素信息位置参考物不一样

1.offset()

// ⭐⭐获取元素相对于页面左上角的坐标位置
// 返回值是对象数据类型 {top:xx,left:xx}
$('div').offset()

2.position()

// ⭐⭐获取元素定位的位置
// 返回值是对象数据类型 {top:xx,left:xx}
// ⭐注意：如果定位设置的是right，bottom，会自动转成top,left
$('div').position()

---

9 绑定事件

on() one() hover 常用事件函数click()，mouseover()，mouseout()，change()

1.on()

1-1 基础绑定事件

// 语法：元素集合.on('事件类型','事件处理函数')
$('div').on('click',function(){ console.log('点击div') })

1-2 事件委托绑定事件

// 语法：元素集合.on('事件类型',选择器,事件处理函数)
// 把事件绑定给 div 元素，当你在 div 内的 p 元素触发事件时，执行事件处理函数
// 相对于把 p 元素的事件委托给 div 元素来绑定
$('div').on('click','p',function(){ console.log('点击p') })

1-3 批量绑定事件

// 语法：元素集合.on({事件类型1:处理函数, 事件类型2:处理函数})
// 注意：不能进行事件委托了
$('div').on({
    click: function(){ console.log('鼠标点击') };
    mouseover: function(){ console.log('鼠标移入') };
    mouseout: function(){ console.log('鼠标移出') };
})

2.one()

⭐one() 与 on() 绑定事件的方式一样，区别就是 one() 只能执行一次

2-1 基础绑定事件

$('div').one('click', function(){ console.log('只触发一次') })

2-2 事件委托

$('div').one('click','p', function(){ console.log('只触发一次') })

2-2 批量绑定事件

$('div').one({
    click: function(){ console.log('鼠标点击，只触发一次') }
    mouseover: function(){ console.log('鼠标移入，只触发一次') }
    mouseout: function(){ console.log('鼠标移出，只触发一次') }
})

3.⭐hover()

jQuery 里面一个特殊的事件

// 语法：元素集合.hover(移入时触发'鼠标移入'的函数,移出时触发'鼠标移出'的函数)
$('div').hover(
	function (){ console.log('鼠标移入') }
    function (){ console.log('鼠标移出') }
)

// ⭐只传一个函数时，会在移入移出都触发这个函数
$('div').hover(
	function (){ console.log('鼠标移入') }
)

4.常用事件函数

jQuery 把我们最常用的一些事件，单独做成了事件函数

我们通过调用这些事件函数，来达到绑定事件的效果如 click()，mouseover()，mouseout()，change() …

$('div').click(function(){ console.log('鼠标点击') })
$('div').mouseover(function(){ console.log('鼠标移进') })
$('div').mouseout(function(){ console.log('鼠标移开') })
$('input').change(function(){ console.log('aaa') })

---

10. jQuery事件解绑

off() 事件解绑

1-1 解绑全部事件处理函数

// 准备事件处理函数
function A() { console.log('A事件处理函数') }
function B() { console.log('B事件处理函数') }
function C() { console.log('C事件处理函数') }
// 给 div 元素绑定事件,,写法没有错，不用怀疑
$('div')
	.click(A)
	.click(B)
	.click(C)

// 事件解绑 语法：元素集合.off(事件类型)
// 把 div 的 click 事件对应的所有事件处理函数全部移除
$('div').off('click')

1-2 解绑指定事件处理函数

// 语法：元素集合.off(事件类型,要解绑的事件处理函数)
// 会把 div 的 click 事件对应的 B 事件处理函数移除
$('div').off('click',B)

---

11. jQuery事件触发

trigger() 事件触发

// 语法：元素集合.trigger(事件类型)
// 触发 div 元素的 click 事件处理函数
$('div').trigger('click')

// 其他用法--每隔1000秒触发一次
setInterval(function (){
    $('div').trigger('click')
},1000)

---

我是Sam9029，一个前端

文章若有错误，敬请指正

‍‍恭喜你，都看到这了，求收藏，求评论，求一个大大的赞！不过分吧

Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主