概述
前言
作为一个要一直和大前端打交道后半生的人，我觉得jQuery我还是要了解一下的，虽然现在好多开发更倾向于选择使用vue,react框架，但仍然存在一些公司使用的jQuery，毕竟它曾经也是那么的万人瞩目。jQuery最吸引人的一点就是它的兼容性，了解前端发展的铁子都知道，原来的前端开发主要是解决各种兼容性问题，而jQuery正好解决了这点，估计那时候它是真的香啊。进入正题，就我对jQuery的浅学习做一下梳理
一、jQuery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
简单理解：jquery就是一个前端库，方法库。它里面封装的一些方法供我们直接拿来使用
二、jquery 的使用
jQuery的官网可以看看一看 jQuery官网 都是英文，看不懂就提供一个中文的jQuery方法的中文网，不过瘾的话再来个jQuery之家
言归正传，要想使用jQuery，首先要下载（可以去官网下载，也可以直接百度搜索下载，都可以）然后就是再页面里面引入 jQuery.js 就行了
1.引入
我下载的版本是 jquery-1.10.2 所以引入如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="jquery-1.10.2.js"></script>
</body>
</html>
引入之后就可以使用了，jQuery 向全局暴露的接口就是 jQuery 或者 $
2.选择器
先说一下选择器，jQuery有相当强大的选择器
1.按照id获取页面元素
let element = jQuery('#box')
let element = $('#box')
2.按照类名来选择,可以获取到一组元素
let eles = jQuery('.a')
let eles = $('.a')
3.按照标签名来选择元素，可以获取到一组数据
let lis = jQuery('li')
let lis = $('li')
let eles = jQuery('ul > li')
let eles = $('ul > li')
通过选择器选中元素后，参数css选择器的返回值是伪数组
console.log($("#box"));
直接打印选择器选中id为box的div，结果就是伪数组如下图
4.还有几个特殊的选择器
$('li:first') // 找到所有 li 中的第一个
$('li:last') // 找到所有 li 中的最后一个
$('li:eq(3)') // 找到所有 li 中索引为 3 的那个
$('li:odd') // 找到所有 li 中索引为 奇数 的
$('li:even') // 找到所有 li 中索引为 偶数 的
3.筛选器
1.jQuery 的筛选器就是在选择器选择到一组元素以后，对元素进行筛选，也可以对准确的某一个元素进行判断和获取
$('li').first() //找到所有元素中的第一个
$('li').last() //找到所有元素中的最后一个
$('li:eq(3)').next() //找到某一个元素的下一个兄弟元素
$('li:eq(3)').prev() //找到某一个元素的上一个兄弟元素
$('li:eq(3)').nextAll() //找到某一个元素的后面的所有兄弟元素
$('li:eq(3)').prevAll() //找到某一个元素的前面的所有兄弟元素
$('li:eq(3)').parent() //找到某一个元素的父元素
$('li:eq(3)').parents() //找到某一个元素的所有结构父级，一直到 html
$('li').parents().find('body') // 在 li 的所有父级里面找到所有 body 标签
// 找到 div 标签下所有后代元素中所有类名为 box 的元素
$('div').find('.box')
$('div .box')
$("li").eq(4).siblings();// 所有的兄弟元素
$("ul").children() //所有的孩子元素
4.属性操作
1.给一个元素添加某个属性，prop 这个方法只能添加元素自己本身就有的属性。
// 给 div 元素添加一个 id 属性，值是 box
$('div').prop('id', 'box')
// 获取 div 的 id 属性
console.log($('div').prop('id'))
2.如果是添加的自定义属性，不会显示在标签上，但是可以使用。
// 给 div 添加一个 index 属性，值是 1
$('div').attr('index', 1)
// 获取 div 的 index 属性
console.log($('div').attr('index'))
3.移除元素的某一个属性
// 移除元素自己本身的属性
$('div').removeProp('id')
// 移除元素的自定义属性
$('div').removeAttr('index')
4.操作元素的类名
// 判断某一个元素有没有某一个 class
$('div').hasClass('box') // true 表示该元素有 box 类名，false 表示该元素没有 box 类名
// 给元素添加一个类名
$('div').addClass('box2') // 给 div 元素添加一个 box2 类名
// 移除元素的类名
$('div').removeClass('box') // 移除 div 的 box 类名
// 切换元素类名
$('div').toggleClass('box3') // 如果元素本身有这个类名就移除，本身没有就添加
5.操作元素的内容
// 给元素的 innerHTML 赋值
$('div').html('<span>hello world</span>')
// 获取元素的 innerHTML
$('div').html()
// 给元素的 innerText 赋值
$('div').text('hello world')
// 获取元素的 innerText
$('div').text()
// 给元素的 value 赋值
$('input').val('admin')
// 获取元素的 value 值
$('input').val()
// 获取元素在同辈中索引
console.log($("li").eq(1).index());;
5.操作样式
jQuery 操作元素的样式就是一个方法 css
// 给元素设置一个 css 样式
$('div').css('width', '100px')
// 获取元素的某一个样式
$('div').css('width')
// 给元素设置一组样式
$('div').css({
width: '100px',
height: '200px'
})
6.元素操作
元素的操作就是 dom CURD 操作
1.创建一个元素
var div = $('<div>aa</div>')
2.内部插入元素
// 向 div 元素中插入一个 p 元素，放在最后
$('div').append($('<p></p>'))
// 把 p 元素插入到 div 中去，放在最后
$('<p>hello</p>').appendTo($('div'))
// 向 div 元素中插入一个 p 元素，放在最前
$('div').prepend($('<p></p>'))
// 把 p 元素插入到 div 中去，放在最前
$('<p>hello</p>').prependTo($('div'))
3.外部插入元素
// 在 div 的后面插入一个元素 p
$('div').after($('<p></p>'))
// 在 div 的前面插入一个元素 p
$('div').before($('<p></p>'))
// 把 h1 元素插入到 box 元素的前面
$("<h1>留言列表</h1>").insertBefore("#box");
// 把 h1 元素插入到 bo 元素的后面
$("<h1>留言列表</h1>").insertAfter("#box");
4.替换元素
// 把 div 元素替换成 p 元素
$('div').replaceWith($('<p></p>'))
// 用 p 元素替换掉 div 元素
$('<p></p>').replaceAll($('div'))
5.删除元素
// 删除元素下的所有子节点
$('div').empty()
// 把自己从页面中移除
$('div').remove()
6.克隆元素
// 克隆一个 li 元素
// 接受两个参数
// 参数1： 自己身上的事件要不要复制 默认false，
// 参数2： 所有子节点身上的事件要不要复制
$('li').clone()
// 复制h2 添加到 body 中 第一个参数 元素本身的事件是否复制
$("h2").clone(true).appendTo("body");
7.元素尺寸
1.操作元素的宽和高
// 获取 div 元素内容位置的高，不包含 padding 和 border
$('div').height()
// 设置 div 内容位置的高为 100px
$('div').height(100)
// 获取 div 元素内容位置的宽，不包含 padding 和 border
$('div').width()
// 设置 div 内容位置的宽为 100px
$('div').width(100)
2.获取元素的内置宽和高
// 获取 div 元素内容位置的高，包含 padding 不包含 border
$('div').innerHeight()
// 获取 div 元素内容位置的宽，包含 padding 不包含 border
$('div').innerWidth()
3.获取元素的外置宽和高
// 获取 div 元素内容位置的高，包含 padding 和 border
$('div').outerHeight()
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$('div').outerHeight(true)
// 获取 div 元素内容位置的宽，包含 padding 和 border
$('div').outerWidth()
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$('div').outerWidth(true)
8.元素位置
1.元素相对页面的位置
// 获取 div 相对页面的位置
$('div').offset() // 得到的是以一个对象 { left: 值, top: 值 }
// 给 div 设置相对页面的位置
$('div').offset({ left: 100, top: 100 })
// 获取定位到一个距离页面左上角 100 100 的位置
2.元素相对于父元素的偏移量
// 获取 div 相对于父元素的偏移量（定位的值）
$('div').position()
3.获取页面卷去的高度和宽度
window.onscroll = function () {
// 获取浏览器卷去的高度
console.log($(window).scrollTop())
}
window.onscroll = function () {
// 获取浏览器卷去的宽度
console.log($(window).scrollLeft())
}
9.元素事件
1.绑定事件的方法
// 给 button 按钮绑定一个点击事件
$('button').on('click', function () {
console.log('我被点击了')
})
// 给 button 按钮绑定一个点击事件，并且携带参数
$('button').on('click', { name: 'Jack' }, function (e) {
console.log(e) // 所有的内容都再事件对象里面
console.log(e.data) // { name: 'Jack' }
})
// 事件委托的方式给 button 绑定点击事件
$('div').on('click', 'button', function () {
console.log(this) // button 按钮
})
// 事件委托的方式给 button 绑定点击事件并携带参数
$('div').on('click', 'button', { name: 'Jack' }, function (e) {
console.log(this) // button 按钮
console.log(e.data)
})
2.移除事件
// 给 button 按钮绑定一个 点击事件，执行 handler 函数
$('button').on('click', handler)
// 移除事件使用 off
$('button').off('click', handler)
3.只能执行一次的事件
// 这个事件绑定再 button 按钮身上
// 当执行过一次以后就不会再执行了
$('button').one('click', handler)
3.直接触发事件
// 当代码执行到这里的时候，会自动触发一下 button 的 click 事件
$('button').trigger('click')
4.常见的事件
click点击
// 直接给 div 绑定一个点击事件
$('div').click(function () {
console.log('我被点击了')
})
// 给 div 绑定一个点击事件并传递参数
$('div').click({ name: 'Jack' }, function (e) {
console.log(e.data)
})
dblclick 双击
// 直接给 div 绑定一个双击事件
$('div').dblclick(function () {
console.log('我被点击了')
})
// 给 div 绑定一个双击事件并传递参数
$('div').dblclick({ name: 'Jack' }, function (e) {
console.log(e.data)
})
scroll 滚动
// 直接给 div 绑定一个滚动事件
$('div').scroll(function () {
console.log('我被点击了')
})
// 给 div 绑定一个滚动事件并传递参数
$('div').scroll({ name: 'Jack' }, function (e) {
console.log(e.data)
})
hover
// 这个事件要包含两个事件处理函数
// 一个是移入的时候，一个是移出的时候触发
$('div').hover(function () {
console.log('移入的时候触发')
}, function () {
console.log('移出的时候触发')
})
10.动画
show 显示
// 给 div 绑定一个显示的动画
$('div').show() // 如果元素本身是 display none 的状态可以显示出来
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数')
//swing linear
$('div').show(1000, 'linear', function () {
console.log('显示')
})
hide 隐藏
// 给 div 绑定一个隐藏的动画
$('div').hide() // 如果元素本身是 display block 的状态可以隐藏起来
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度linear swing', '回调函数')
$('div').hide(1000, 'linear', function () {
console.log('隐藏')
})
toggle 切换
// 给 div 绑定一个切换的动画
$('div').hide() // 元素本身是显示，那么就隐藏，本身是隐藏那么就显示
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数')
$('div').toggle(1000, 'linear', function () {
console.log('动画执行完毕')
})
animate 动画
// 定义一个自定义动画
$('.show').click(function () {
$('div').animate({
width: 500,
height: 300
}, 1000, 'linear', function () {
console.log('动画运动完毕')
})
})
// 回到到顶部
$("html").animate({ scrollTop: 0 }, 500);
// 回到 product div
let top = $("#product").offset().top;
$("html").animate({ scrollTop: top }, 500);
stop停止
立刻停止动画 停止的正在执行的动画， 队列的里的动画，接着会继续执行
$('div').stop() // 就停止再当前状态
$('div').stop(true) // 就停止再当前状态，清空队列里的动画
finish完成
$('div').finish() //立刻结束动画 停止在动画结束状态
总结
只是简单的给jQuery的学习整理一个笔记，只是冰山一角，后面还是要继续学习。
最后
以上就是美满钢铁侠为你收集整理的我对 jQuery浅浅的认知前言一、jQuery二、jquery 的使用总结的全部内容，希望文章能够帮你解决我对 jQuery浅浅的认知前言一、jQuery二、jquery 的使用总结所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复