文章目录

jQuery
- jQuery入口函数
- jQuery顶级对象$
- jQuery对象和DOM对象
- - 它们的相互转换
常用API
- jQuery选择器
- 隐式迭代
- jQuery筛选选择器
- jQuery排他思想
- jQuery样式操作
- - css()方法
  - 设置类
  - - addClass()方法：添加类，不影响以前的类名
    - removeClass()方法：删除类，同样不影响
    - 切换类
- jQuery效果
- - 显示隐藏效果
  - 滑动效果
  - 停止动画
  - 淡入淡出效果
  - 自定义动画
- jQuery属性操作
- jQuery内容操作
- jQuery元素操作
- - 遍历元素
  - 创建添加删除操作
  - - 创建元素
    - 添加元素
    - 删除元素
jQuery事件
- 事件注册
- 事件处理
- 事件委托
- 解绑事件
- 自动触发事件
- 事件对象
jQuery拷贝对象
jQuery位置
- offset()
- position()方法
- scrollTop()和scrollLeft()

jQuery

官网下载

jQuery入口函数

第一种写法

// 等着页面DOM加载完毕再去执行JavaScript代码
$(document).ready(function() {})

第二种写法

// 等着页面DOM加载完毕再去执行JavaScript代码
$(function() {})

相当于原生js中的DOMContentLoaded
推荐使用第二种方式

jQuery顶级对象$

$是jQuery的别称，在代码中可以使用jQuery代替$，但我多用$

$是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery方法

jQuery对象和DOM对象

// DOM对象，使用原生js获取过来的对象
let div = document.querySelector('div')
console.dir(div)
// jQuery对象，使用jQuery获取过来的对象
let $div = $('div')
console.dir($div)
// jQuery对象只能使用jQuery方法，DOM对象只能使用原生JavaScript方法
// div.style.display = 'none'
// $div.hide()

它们的相互转换

因为原生JavaScript对象比jQuery对象更大，原生的js的一些属性和方法jQuery可能没有帮我们封装，想要使用这些方法需要把jQuery对象转换为DOM对象

DOM对象转换为jQuery对象：$(DOM对象)

// 我们已经使用原生JavaScript获取了
let div = document.querySelector('div')
// 转为jQuery对象
let $div = $(div)
console.log($div)

jQuery对象转换为DOM对象

// 使用jQuery获取了对象
let $div = $('div')
// 将jQuery对象转换为DOM对象
// 0代表索引号，从零开始
let div = $div[0]
console.log(div)

常用API

jQuery选择器

$('选择器') // 里面的选择器直接使用css选择器即可

隐式迭代

遍历内部DOM元素的过程叫做隐式迭代

// 获取4个div元素
let $div = $('div')
// console.log($div)
// 给4个div设置背景颜色为红色
// 样式方法css()
// 隐式迭代
$div.css({background: 'red',width: '120px'
})

jQuery筛选选择器

// 获取第一个ul中的小li
let $li = $('ul li:first')
// 获取ul中索引为2的小li，索引从零开始
let $li1= $('ul li:eq(2)')
// 选取ol中的奇数索引小li
let $li2= $('ol li:odd')
$li.css({background: 'red'
})
$li1.css({background: 'red'
})
$li2.css({background: 'red'
})

// 返回最近一级的父元素
let father = $('.son').parent()
console.log(father)
// 选择最近一级的子元素
let son = $('.nav').children()
console.log(son)
// 选择所有子元素，只要是子元素，参数是必选参数，不能省略
let child = $('.nav').find('*')
console.log(child)

// 选择兄弟元素，去开自己
$('ul .item').siblings().css({background: 'red'
})

jQuery排他思想

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-3.6.0.min.js" type="text/javascript"></script></head><style>/* div {width: 100px;height: 100px;background-color: blue;} */</style><body><button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button><script>// 隐式迭代$('button').click(function() {$('button').siblings('button').css({background: ''})$(this).css({background: 'red'})})</script></body>
</html>

jQuery样式操作

css()方法

// 添加一个样式
// $('div').css('height', 300)
// 添加多个样式
$('div').css({// 小驼峰命名法backgroundColor: 'red',height: 300,width: 300
})

设置类

addClass()方法：添加类，不影响以前的类名

$('div').addClass('类名')

removeClass()方法：删除类，同样不影响

$('div').removeClass('类名')

切换类

$('div').toggleClass('类名')

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-3.6.0.min.js" type="text/javascript"></script></head><style>div {width: 100px;height: 100px;background-color: blue;}.current {background-color: rebeccapurple;height: 12.5rem;width: 12.5rem;}</style><body><div class="current"></div><script>$('div').click(function() {$(this).toggleClass('current')})</script></body>
</html>

jQuery效果

jQuery给我们封装了很多动画效果，比较常见的如下：

显示隐藏效果

show(speed, easing, fn) // 显示元素

参数可以都省略，无动画直接显示
speed：‘slow’，‘normal’，'fast’或表示时长的毫秒数值
easing：用来指定切换效果，默认’swing’，可以改为’linear’
fn：回调函数

hide(speed, easing, fn) // 隐藏元素

参数可以都省略，无动画直接显示
speed：‘slow’，‘normal’，'fast’或表示时长的毫秒数值
easing：用来指定切换效果，默认’swing’，可以改为’linear’
fn：回调函数

toggle(speed, easing, fn) // 切换状态

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-3.6.0.min.js" type="text/javascript"></script></head><style>div {width: 100px;height: 100px;background-color: blue;}</style><body><button>显示</button><button>隐藏</button><button>切换</button><div></div><script>// 隐藏$('button').eq(1).click(function() {$('div').hide(1000)})// 显示$('button').eq(0).click(function() {$('div').show(1000)})// 切换$('button').eq(2).click(function() {$('div').toggle(1000)})// 一般不加参数</script></body>
</html>

滑动效果

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-3.6.0.min.js" type="text/javascript"></script></head><style>div {width: 100px;height: 100px;background-color: blue;display: none;}</style><body><button>显示</button><button>隐藏</button><button>切换</button><div></div><script>// 上滑动$('button').eq(1).click(function() {$('div').slideUp(1000)})// 下滑动$('button').eq(0).click(function() {$('div').slideDown(1000)})$('button').eq(2).click(function() {$('div').slideToggle(1000)})// 一般不加参数</script></body>
</html>

停止动画

stop()：停止其他动画，只做当前动画

淡入淡出效果

fadeTo(speed, opacity, easing, fn)

opacity：透明度，必须写，取值0-1
speed：必须写

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-3.6.0.min.js" type="text/javascript"></script></head><style>div {width: 100px;height: 100px;background-color: blue;display: none;}</style><body><button>显示</button><button>隐藏</button><button>切换</button><div></div><script>// 淡出$('button').eq(1).click(function() {$('div').fadeOut()})// 淡入$('button').eq(0).click(function() {$('div').fadeIn()})$('button').eq(2).click(function() {$('div').fadeToggle().fadeTo(1000, .5)})// 一般不加参数</script></body>
</html>

自定义动画

animate(params, speed, easing, fn)

params：想要更改的样式属性，以对象形式传递，必须写，其余参数可以省略

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-3.6.0.min.js" type="text/javascript"></script></head><style>div {position: relative;width: 100px;height: 100px;background-color: blue;}</style><body><button>动画</button><div></div><script>$('button').click(function() {$('div').animate({left: 200,top: 200,opacity: .3})})</script></body>
</html>

jQuery属性操作

prop()：设置或获取元素固有属性值

// 获取固有属性
console.log($('a').prop('href'))
// 设置固有属性
$('a').prop('title', '百度一下')

attr()：设置或获取元素自定义属性

// 获取元素自定义属性
console.log($('div').attr('index'))
// 设置元素自定义属性
$('div').attr('index', '1')

$('div').data('uname', 'andy')
console.log($('div').data('uname'))console.log($('div').data('index'))
console.log($('div').attr('data-index'))

jQuery内容操作

html()：标签也会解析

// 获取文本内容
console.log($('div').html())
// 设置文本内容
$('div').html('123')

text()：忽略标签

// 获取文本内容
console.log($('div').text())
// 设置文本内容
$('div').text('123')

val()：获取或设置表单内容的值

// 获取表单内容
console.log($("input").val())
// 设置表单内容
$('input').val('请输入数字')

jQuery元素操作

遍历元素

jQuery隐式迭代是对同一类元素做了同样操作，如果想要给同一类元素做不同的操作，就需要用到遍历

$('div').each(function(index, domEle) {})

index：每个元素的索引号
DOMElement：每个DOM对象

$('div').each(function(index, elem) {elem.style.background = 'red'elem.style.width = '100px'elem.style.height = '100px'console.log(elem)
})

$.each($('div'), function(index, elem) {})

第一个参数是索引号
第二个参数是遍历内容

$.each($('div'), function(index, elem) {console.log(elem)
})

创建添加删除操作

创建元素

// 动态创建li
let li = $('<li></li>')

添加元素

// 动态创建li
let li = $('<li></li>')
// console.log(li)
// 内部添加并且放到元素的最后面
$('ul').append(li)
// 内部添加并且放到元素的最前面
// $('ul').prepend(li)

// 动态创建div
let div = $('<div>我是后面来的</div>')
// 外部添加，添加到后面
// $('div:eq(0)').after(div)
// 外部添加，添加到前面
$('div:eq(0)').before(div)

删除元素

// 删除本身
// $('div').remove()
// 清空子元素和下面一行相等
// $('div').empty()
// 清空内容
$('div').html("")

jQuery事件

事件注册

element.事件(function() {})

$('div').click(function() {$(this).css({background: 'red'})
})

事件处理

element.on(events, selector, fn)

events：一个或多个用空格分开的事件类型
selector：元素的子元素选择器
fn：回调函数

$('div').on({mouseenter: function() {$(this).css('background', 'red')},click: function() {$(this).css('background', 'blue')}
})

事件委托

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-3.6.0.min.js" type="text/javascript"></script></head><style></style><body><ul><li></li><li></li><li></li><li></li></ul><script>$('ul').on('click', 'li', function() {alert('1')})</script></body>
</html>

解绑事件

// 第一个参数为解绑事件类型
$('div').off()

one()：绑定事件只执行一次

自动触发事件

$('div').on('click', function() {console.log('1')
})
// 自动触发事件s
// 1. 元素.事件()
$('div').click()
// 2. 元素.trigger('事件')
$('div').trigger('click')
// 3. 元素.triggerHandler('事件')
// 不会触发元素默认行为
$('div').triggerHandler('click')

事件对象

$('div').on('click', function(e) {// 事件对象console.log(e)
})

jQuery拷贝对象

$.extend(deep, target, obj)

deep：如果设置为true，为深拷贝，默认false
target：要拷贝的对象
obj：待拷贝的对象

let obj = {id: '0',
}
let obj1 = {id:'1',name: 'andy',msg: {age: 22}
}
// 把obj1拷贝给obj
// 会覆盖obj原来的数据
$.extend(obj, obj1)
obj.msg.age = 1
console.log(obj1) // 会影响

let obj = {id: '0',
}
let obj1 = {id:'1',name: 'andy',msg: {age: 22}
}
// 把obj1拷贝给obj
// 会覆盖obj原来的数据
$.extend(true, obj, obj1)
obj.msg.age = 1
console.log(obj1) // 不会影响

jQuery位置

offset()

设置或获取元素偏移

offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系，可以修改

position()方法

返回被选元素相对于带有定位父级偏移坐标，如果父级都没有定位，则以文档为准，不可以修改

scrollTop()和scrollLeft()

设置或获取元素被滚去的头部和左侧距离

JavaScript之jQuery库相关推荐

javascript的jQuery库小结（1）
去年断断续续学了html,css,js,虽然写了几个小网页,但连SQL和比较强大的jQery库都没用到,还是比较low.再不复习都生疏了,所以这段时间想总结一下知识,写一个比较漂亮的网站玩玩. 引用 ...
10个有趣的javascript和css库（2019年5月最新）
我们的使命是让您了解最新和最酷的Web开发趋势.这就是为什么我们每个月都会发布一些精选的资源,这些资源是我们偶然发现并认为值得您关注的. 1.Tessaract.js 强大的javascript(节点 ...
使用谷歌jquery库文件的理由
使用谷歌jquery库文件的理由最近看到,那些引用jquery的文件那些网站,好多是使用谷歌的库:像这样的<script type="text/javascript"src ...
15 个 JavaScript Web UI 库
新闻来源:speckboy.com 几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面.本文介绍了 ...
15 个 JavaScript Web UI 库（转）
几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面.本文介绍了 15 个非常强大的 JavaScr ...
(0004) H5开发之导入JQuery库以及使用。
1.jquery.min.js与jquery.js有什么区别? min是压缩版,去除了注释和空格,主要是生产环境中使用,不带min是带有注释和空格的,方便阅读源码. 2.哪个版本的jQuery兼容性最 ...
PathFinding.js – 综合性的 JavaScript 路径查找库
PathFinding.js 是一个综合性的 JavaScript 路径查找库.这个项目的目的是提供一个可以很容易地纳入网页游戏的路径查找库.它可以运行在 Node.js 或浏览器中.提供的在线演示展 ...
WordPress制作插件中使用wp_enqueue_script('jquery')库不起作用解决方法
这个应该不是什么新信息,但我却是现在才搞清楚. 今天又是在wordpress调用jquery,情况还是如此.无意中打开wordpress中jquery.js,然后对比code.jquery.com中的 ...
20个优秀的JavaScript 键盘事件处理库
键盘事件是 Web 开发中最常用的事件之一,通过对键盘事件的捕获和处理可以提高网站的易用性和交互体验.下面,我们向大家介绍收集的20款优秀的 JavaScript 键盘事件处理库,帮助开发人员轻松处理 ...

JavaScript之jQuery库