概念:封装了很多 原生js 操作 的库
优点:
- 强大的选择器机制
- 优质的隐式迭代 - 隐藏的遍历
- 无所不能的链式编程
特有的筛选器:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
- 获取第一个元素
$('ul li:first')
- 获取最后一个元素
$('ul li:last')
- 获取 偶数下标 的元素
$('ul li:even')
- 获取 奇数下标 的元素
$('ul li:odd ')
- 获取 指定下标 的元素
$('ul li:eq(1)')
- 获取 大于 指定下标 的元素
$('ul li:gt(1)')
- 获取 小于 指定下标 的元素
$('ul li:gt(1)')
表单专用的筛选器
- 获取所有 表单元素
$(':input')
[表单元素包括:input、button、textarea、select] - 获取所有 文本框
$(':text')
- 获取所有 密码框
$(':password')
- 获取所有 单选框
$(':radio')
- 获取所有 复选框
$(':checkbox')
- 获取所有 提交按钮
$(':submit')
- 获取所有 图片框
$(':imgage')
- 获取所有 文件按钮
$(':flie')
- 获取所有 普通按钮
$(':button')
[包括:type为button的input 和普通botton] - 获取所有 不在页面中的 标签
$(':hidden')
[一般包括如:head
meta
title
script
option
] - 获取所有 被禁用的表单元素
$(':disabled')
- 获取所有 可用的表单元素
$(':enabled')
- 获取所有 被'选中的'表单元素
$(':checked ')
- 获取 被选中的
option
$(':selected')
[注意返回的是伪数组 按需求联合[0].innerText
使用]
筛选器方法
- 获取所有 子标签
jq伪数组.children()
- 获取 第一个子标签
jq伪数组.first()
- 获取 最后一个子标签
jq伪数组.last()
- 获取所有 兄弟标签
jq伪数组.siblings()
[不包括自身 无视上下关系一并获取] - 获取 上一个兄弟标签
jq伪数组.prev()
- 获取 前面所有兄弟标签
jq伪数组.prevAll()
- 获取 下一个兄弟标签
jq伪数组.next()
- 获取 后面所有兄弟标签
jq伪数组.nextAll()
- 获取 父标签
jq伪数组.parent()
- 获取所有 祖宗标签
jq伪数组.parents()
[直至html
] - 获取 指定下标的标签
jq伪数组.eq(index)
- 获取 父标签中 选择器指定的后代
jq伪数组.find(选择器)
jquery元素与dom元素
jquery元素 不能使用 dom元素的方法 反之同理
- dom元素转jquery元素
$(dom元素)
- jqurey元素 '转' dom元素
jq伪数组[0]
[因为jq元素都是伪数组 所以通过下标可以直接提取为dom元素]
事件绑定
- 普通绑定
在jquery中 事件类型都被封装成了方法 事件函数要作为方法的回调函数使用
jq元素.事件类型(function(){})
[事件函数中this
仍指向当前 事件源(dom元素)]
[jquery没有封装input
、load
事件] - on绑定 [多用于事件委托]
jq元素.on(参1,参2,参3,参4)
[参1 必选项 事件类型]
[参2 可选项 事件委托 的对象(选择器)]
[相对原事件委托 可更精准的 限定 'target']
[参3 可选项 传递的数据]
[传入的数据 会添加在事件对象.data
中]
[参4 必选项 事件函数]
阻止默认行为 阻止事件冒泡
return false
[在jq中 return false
既可以阻止默认行为 也可以阻止事件冒泡]
[在jq中 cancelBubble
不能阻止事件冒泡]
[在jq中 stopPropagation
能照常阻止事件冒泡]
事件解绑
jq元素.off('参1',参2)
[参1 - 必选项 事件类型]
[参2 - 可选项 事件函数]
[会同时解除 所有 同 事件类型 的事件]
[若参二填写的是事件函数名 则只会解除该事件 不会解除所有]
事件触发
-
自动触发事件
jq元素.trigger('事件类型')
-
只能触发一次事件
jq元素.one('事件类型',事件函数)
[不能触发指定单一事件函数 会触发所有同事件类型的事件]
其他事件
-
替代
window.onload
的快速写法:
$(function(){})
-
当dom元素加载完成后执行的事件:
$(document).ready(function(){})
[相对window.onload
加载全部资源后执行 效率更高]
其他方法
-
在jq中获取滚动距离
$('document').scrollTop()
-
移入移出事件的合并
$('选择器').hover(移入事件函数,移出事件函数)
-
遍历js元素(伪数组)
js元素.each(function(i,v){})
[参数 i - 当前遍历元素的下标]
[参数 v - 当前遍历dom元素] -
获取当前标签在父标签中的下标
js元素.index()
属性操作
-
设置属性
jq元素.attr('属性名','属性值')
[对同一元素多次设置时 是添加 而不会覆盖] -
获取属性值
jq元素.attr('属性名')
-
删除属性
jq元素.removeAttr('属性名')
-
针对属性值为 布尔值 的属性操作
jq元素.prop('属性名',布尔值)
[如checked
disabled
] -
获取布尔属性值
jq元素.prop('属性名')
(行内)样式操作
-
设置单一样式
jq元素.css('属性','属性值')
-
设置多个样式
jq元素.css({键:'值',键:'值'...})
[批量设置样式时 键的引号可加可不加] -
获取样式
jq元素.css('属性')
[调用css
方法时 会返回调用对象 如$(this).css()
返回$(this)
]
类名操作
-
添加类名
js元素.addClass('类名')
-
删除类名
js元素.removeClass('类名')
-
替换类名
js元素.toggleClass('类名')
[类开关 存在则 删除 不存在则 添加] -
判断类名
js元素.hasClass('类名')
[返回 布尔值]
内容操作
-
类innerText
jq元素.text()
-
类innerHtml
jq元素.html()
节点操作
-
创建标签
$('完整的标签字符串')
[如$(<div class='box'>盒子</div>)
] -
插入标签
2.1 在 父标签 末尾 添加
父-jq元素.apend(子-jq元素)
2.2 在 父标签 末尾 添加
子-jq元素.apendTo(父-jq元素)
2.3 在 父标签 开头 添加
父-jq元素.prepend(子-jq元素)
2.4 在 父标签 开头 添加
子-jq元素.prependTo(父-jq元素)
2.5 添加 下一个 兄弟标签
参考-jq元素.after(新-jq元素)
2.6 添加 下一个 兄弟标签
新-jq元素.insertAfter(参考-jq元素)
2.7 添加 上一个 兄弟标签
参考-jq元素.before(新-jq元素)
2.8 添加 上一个 兄弟标签
新-jq元素.insertBefore(参考-jq元素)
-
替换标签
新-jq元素.replaceAll(旧-jq元素)
旧-jq元素.replaceWith(新-jq元素)
-
删除标签
jq元素.empty()
[保留当前标签 清空内容]
jq元素.remove()
[包括自己删除] -
复制标签
jq元素.clone(参1,参2)
[默认复制 标签内部内容]
[参1 可选项 布尔值 是否复制大盒子事件 默认值:false]
[参2 可选项 布尔值 是否复制内容的事件 默认值跟随参1]
[若参1为false 则无视参2 只能false]
元素大小
-
获取大小
1.1 获取 不包含padding
的大小
jq元素.width()
jq元素.height()
1.2 获取 包含padding
不包含border
的大小
jq元素.innerWidth()
jq元素.innerHeight()
1.3 获取 包含border
不包含margin
的大小
jq元素.outerWidth()
jq元素.outerHeight()
1.4 获取 包含margin
的大小
jq元素.outerWidth(true)
jq元素.outerHeight(true)
-
设置大小
jq元素.width(num)
jq元素.height(num)
[不包含padding
]
[在使用box-sizing:border-box
时 行内样式中的width
和height
会自动加上border``padding
的数值]
元素位置
- 获取位置
1.1 获取相对于 浏览器 的 绝对位置
jq元素.offset()
[返回一个对象]
1.2 获取相对于 最近的 设置过定位的 祖宗标签的 相对位置
jq元素.position()
- 设置位置
jq元素-offset({left:num,top:num})
[不需要px单位]
基本动画
-
display
+height
+left
+opacity
式显示、隐藏
1.1 显示
jq元素.show(参1,参2,参3)
1.2 隐藏
jq元素.hide(参1,参2,参3)
1.3 切换
jq-元素.toggle(参1,参2参3)
[参1 可选项 动画执行时长(ms)]
[num/关键字]
[slow(600)
normal(400)默认值
fast(200)
]
[参2 可选项 运动方式]
[linear 匀速 默认值
swing 慢快慢
]
[参3 可选项 运动结束后执行的回调函数] -
卷帘式显示、隐藏
2.1 显示
jq元素.slideDown()
2.2 隐藏
jq元素.slideUp()
2.3 切换
jq元素.slideToggle()
[参数123同上] -
透明度显示隐藏
3.1 显示
jq元素.fadeIn()
3.2 隐藏
jq元素.fadeOut()
3.3 切换
jq元素.fadeToggle()
[参数123同上]
3.4 运动到指定透明度
jq元素.fadeTo(毫秒数,目标透明度,速度方式,回调函数)
-
自定义动画
jq元素.animate({键值对},毫秒数,速度方式,回调函数)
[优点:可以通过回调函数 进行连续动画]
[或直接使用链式编程 实现连续动画] -
停止动画
jq元素.stop(参1,,参2)
[参1 可选项 布尔值 默认值为false
将 当前动画 停止 而不是所有(后续)动画]
[true
停止所有动画 包括未执行的后续动画]
[参2 可选项 布尔值 是否停留在当前动画的 结束位置 默认值为false
]
同 结束所有动画 并停留在最终位置:
jq元素.finish()
Ajax
-
发送
get
请求
$.get(参1,参2,参3,参4)
[参1 必选项 地址]
[参2 可选项 携带的参数]
[格式 可以是 键值对&键值对 也可以是 对象>键值对]
[参3 可选项 请求成功后的回调函数]
[参4 可选项 请求回来的数据格式]
[常用格式:text | json | xml
] -
发送
post
请求
$post(参1,参2,参3,参4)
[语法同get
] - 发送
Ajax
请求
$.ajax({
url: 地址,
method: 请求方法, - 默认get
async: 是否异步,
success: 成功的回调,
error: 失败的回调,
dataType: 数据格式, - 省略了会默认会自动调整
data: 携带的参数
})