jQuery一些基本内容(一)

2019-11-17

什么是 jQuery

jQuery 是一个兼容多浏览器的 js 库，核心理念是”write less,do more”
j 代表 javascript,Query 就是查询的意思，这样理解来也通俗易懂，jQuery 是免费并且开源的。它可以简化查询 DOM 对象，处理事件，制作动画，处理 Ajax 交互过程。

简单来说，就是当初的原生 js 并不太好用，就有程序员把原生 js 封装了一下，就有了 jQuery。
所以 jQuery 中的大部分语法都可以参照原生 JS，就是用了一些封装的方法实现了一些原生 JS 中比较复杂的功能。
现在 jQuery 的流行程度已经大不如前，部分网站还在使用一些老版本的 jQuery 库还是因为老版本的 jQuery 兼容低版本的 ie 浏览其更加方便，jQuery 的官网已经更新到了 3.4 多的版本，现版本的 jQuery 已经完全不兼容低版本的 ie 浏览器了。

jQuery 的使用

使用 jQuery 的话，引入就可以了，可以下载官方文档，也可以直接引入接口

1
2
3

<script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
#或者
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

引入官方文档的话，最好引入压缩过的，例如带 min 后缀的，一是文件更小，加载快，一是代码经过加密。(都开源了，加密不加密没区别吧。。)

jQuery 选择器

选择器是 jQuery 最核心的内容，大大简化了对 DOM 的查询操作。
css1-css3 的选择器都可以当做$函数的参数。

$('#box')    # ID选择器
$('.box')    # 类名选择器
$('div')     # 标签选择器
$('*')       # 通配符选择器
$('div,p,a') # 群组选择器
$('#box p')  # 后代选择器

此处的$在jQuery的官方文档中就是封装的jQuery函数，即为把$替换成 jQuery 的作用是相同的，但是$写起来更加方便。
$函数的作用在原生 JS 中就相当于是 document.querySlectorAll()
所以$函数返回的一直是一个数组。通过下标可以获得其中的元素。
可以通过打印来对比：

1 2	console.log($('#box')); console.log($('#box')[0]);

jQuery 操作 DOM 属性

操作属性

设置被选中元素的属性值

1	$('.box').attr('name','test1') #为类名为box的全部元素设置name属性，属性值为test1

返回被选中元素的属性值

1	$('.box').attr('name') #返回第一个类名为box的元素的name属性的值

此处设置属性的值是为所有元素设置，而获取只能获取到第一个元素的。
从所有匹配到的元素中删除该属性

1	$('.box').removeAttr('name') #删除类名为box的所有元素的name属性

操作 class

操作类名：

$('.box').addClass('item')    # 为所有匹配到的元素添加指定的class名

$('.box').removeClass('item') # 从所有匹配到的元素中删除指定的class名

$('.box').toggleClass('item') # 如果存在就删除，如果不存在就添加

多次添加 class 名不会覆盖，而是会累加，同名的不会累加

操作 css

jQuery 中的方法：

1
2
3

$('.box').css('width',100)   # 将类名为box的所有元素的宽度设置为100

$('.box').css('width')       # 获取第一个类名为box的元素的宽度的值

操作内容

jQuery 中的方法：

$('.box').html()      # 获取元素的html内容
$('.box').html('aaa') # 设置元素的html内容

$('.box').text()      # 获取元素的text内容
$('.box').text('aaa') # 设置元素的text内容

$('.box').val()       # 获取输入框的内容
$('.box').val('aaa')  # 设置输入框的内容

操作尺寸

jQuery 中的方法：

1	$('.box').

height([val])：取得匹配元素当前计算的高度值（px）。
width([val])：取得第一个匹配元素当前计算的宽度值（px）。
innerHeight()：获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
innerWidth()：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
outerHeight()：获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。
outerWidth()：获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。

offset([coordinates])：获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。方法只对可见元素有效。
position()：获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

jQuery 动画

show([speed, [easing], [callback]])：显示隐藏的匹配元素。
hide([speed, [easing], [callback]])：隐藏显示的元素。
toggle([speed, [easing], [callback]])：如果元素是可见的，切换为隐藏的，如果元素是隐藏的，切换为可见的。
speed：三种预定速度的字符串（slow、normal、fast）或者动画时长的毫秒数值。
easing：指定切换效果，默认是 swing，可用 linear。
callback：在动画完成时执行的函数，每个元素执行一次。
运动过程中：改变 width、height、margin、padding、opacity 属性值。

slideDown([speed, [easing], [callback]])：通过高度变化（向下增大）来动态的显示所有匹配的元素，显示完成后可选的触发一个回调函数。
slideUp([speed, [easing], [callback]])：通过高度变化（向上减小）来动态的隐藏所有匹配的元素，隐藏完成后可选的触发一个回调函数。
slideToggle([speed, [easing], [callback]])：通过高度变化来切换所有匹配元素的可见性，切换完成后可选的触发一个回调函数。
speed：三种预定速度的字符串（slow、normal、fast）或者动画时长的毫秒数值。
easing：指定切换效果，默认是 swing，可用 linear。
callback：在动画完成时执行的函数，每个元素执行一次。
运动过程中：改变 height、margin-top、margin-bottom、padding-top、padding-bottom 属性值。

fadeIn([speed, [easing], [callback]])：通过不透明度的变化来实现所有匹配元素的淡入效果，动画完成后可选的触发一个回调函数。
fadeOut([speed, [easing], [callback]])：通过不透明度的变化来实现所有匹配元素的淡出效果，动画完成后可选的触发一个回调函数。
fadeTo([speed, opacity, [easing], [callback]])：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，动画完成后可选的触发一个回调函数。opacity：一个 0 到 1 之间表示透明度的数字。
fadeToggle([speed, [easing], [callback]])：通过不透明度的变化来开关所有匹配元素的淡入淡出效果，动画完成后可选的触发一个回调函数。
speed：三种预定速度的字符串（slow、normal、fast）或者动画时长的毫秒数值。
easing：指定切换效果，默认是 swing，可用 linear。
callback：在动画完成时执行的函数，每个元素执行一次。
注：fadeIn、fadeout、fadeToggle，运动过程中修改 opacity 属性值，最终只修改 display 属性值。而 fadeTo 只修改 opacity 属性值。

animate(params, [speed], [easing], [fn])：用于创建自定义动画的函数。
params：一组包含作为动画属性和终值的样式属性和及其值的集合。
speed：三种预定速度的字符串（slow、normal、fast）或者动画时长的毫秒数值。
easing：指定切换效果，默认是 swing，可用 linear。
fn：在动画完成时执行的函数，每个元素执行一次。

stop(clearQueue, [jumpToEnd])：停止所有在指定元素上正在运行的动画。
如果 clearQueue 没有设置为 true，并且队列中有等待执行的动画，他们将马上执行。
clearQueue：如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。调用 stop()的时候，队列中的下一个动画开始。如果 clearQueue 参数为 true，那么在队列中的动画其余被删除并永远不会被执行。
jumpToEnd：当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值。

delay(duration)：设置一个延时来推迟执行队列中之后的项目。
duration：延迟时间，单位：毫秒。

本文作者：人模人样的搬砖老段
本文链接：jQuery 的一些基本内容（一）
如有错误，请及时评论或者知乎私信或者 B 站私信哦~