TIPS
前端jQuery学习笔记
# 核心全局函数
$(jQuery), 选择元素: $('?'), 此函数可以传递多种参数, 返回 jq对象
两个参数
selector: 用来查找的字符串
selector规则
- css选择器
- 原生DOM
- function
- 空值
- 其他值
context: 作为待查找的 DOM 元素集, 文档或 jQuery 对象
例: $('li[attr="xxx"]') 所有li中含有这个属性的li( $= 以什么结尾 ^= 以什么开始 != 不是什么)
# 选择元素相关方法
.get(index) // 从$选择的一堆元素中拿出原生的元素, 无参数时选择所有
.eq() // 根据索引选择其中某个标签, 并且可以 通过end() 回退操作
.find() // 查找元素, 传参和 $ 大同小异
.filter() // 过滤已经选择的元素, 可以传function自定义条件
.not() // filter的反向选择
.has() // 选中符合要求的元素, 是否带有什么
.is() // 是否是什么, 返回Boolean值
.add() // 集中操作 把多个元素选择出来一起操作
.end() // 回退操作
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 取值相关方法
.html() // 取值只能取第一个, 赋值每一个都会操作(可以放函数方法, 函数的返回值为所赋的值)
.text() // 取值赋值都是全部操作, 其他操作和html一样
.size() // 返回长度, 和length一样
.addClass() // 添加类名
.removeClass() // 删除类名, 默认全删, 多个空格分开, 顺序无影响
.hasClass() // 判断时候含有某个类名, 返回true或false
.css() // 访问匹配元素的样式属性 css('width','100px') | css({width:'100px';})
toggleClass() //自动判断时候含有该class属性, 有的话删除 , 没有就添加
.attr() // 取值和赋值, 主要操作自定义属性 相当于通过attribute来进行属性更改
.prop() // 取值和赋值 特性才能映射, 非特性不能映射, 赋值特性会显示在行间,
// 自定义属性不能显示, 但是还是存在 相当于通过点来进行属性更改(不能操作自定义属性) div.id = 'test'
removeAttr() // 可以删除属性
removeProp() // 只能删除自定义属性
.val() // 获取表单相关元素的value值(只取第一个) 只能赋值带有value特性的表单元素,
// 其他的赋值不会显示 input改变输入框的值, 行间的值不会改变
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
TIPS
- 固有属性(特性):
idclasstitlehrefsrcalttypevalue可以通过DOM.value来获取 - 新增属性, 自定义的属性: js中使用
getAttribute和setAttribute来操作
attr 和 prop 区别: jQuery认为 attribute 的 checked selected disabled 就是表示该属性初始状态的值, property 的 checked selected disabled 就是表示该属性实时状态的值( true 或 false )
attr 获取未设置的属性 均返回 undefined, prop 获取未设置的特性返回空, 自定义属性则返回 undefined
尽量邂免直接添加行间样式, 因为其权重过高, 不利于响应式布局, 破坏了 css3 + html5 优雅的解决方案
# jQuery对象增删改查
.next() // 下一个兄弟元素节点, 加参数下一个是符合要求的才选择
.prev() // 上一个兄弟节点, 用法同next
.prevAll() // 前面所有的(都可以加限制条件)
.nextAll() // 后面所有的
.prevUntil() // 前面的直到某个为止, 可添两个参数, 第一个表示到哪里停止, 第二个表示选择哪种元素
.nextUntil() // 后面的直到某个为止(与prevUntil相同)
.siblings() // 操作所有的兄弟节点
.parent() // 直接的上一级父级
.parents() // 不添参数获取所有父级, 加参数可限制
.offsetParent() // 获取最近有定位的父级
.closest() // 从自己开始往上找最近的符合过滤条件的父级, 必须传参
.slice() // 两个参数, 左闭右开的截取一段索引值的元素
.insertBefore() // 插入一个元素在哪个之后和哪个之前
.before() // 把一个元素设置在一个元素之后, 第二个参数必须传jQuery对象(after和insertAfter用法一样)
.appendTo() // 把一个元素添加到某个元素的最后面, 剪切操作
.append() // 在某个元素的最后面添加一个jQuery元素
.prependTo() // 把一个元素添加到某个元素的最前面, 剪切操作
.prepend() // 在某个元素的最前面添加一个jQuery元素
.remove() // 剪切删除元素, 事件被删除
.detach() // 同样是剪切删除, 但是依然保留事件
.wrap() // 添加一个父级来包裹元素, 可以传字符串 函数或者已有的dom元素(复制不是剪切)
.wrapInner() // 给元素内部加一层包裹的元素
.wrapAll() // 给选择的元素加一个统一的父级包裹, 只能操作同一级, 不同级则把所有的移动到和第一个元素同级
.unWrap() // 删掉直接父级
.clone() // 克隆一个元素包括它的属性, 参数传true时可以克隆事件, 但不是添加true就能克隆所有的东西
.data() // 数据的存储, 存的什么类型的值, 取出来就是什么
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 事件绑定
.on() // 四个参数: type selector data handle, 允许只有类型和处理函数
.one() // 用法和on一样, 但是绑定的事件只执行一次
.off() // 解除事件绑定, 默认解除所有, 参数可传事件类型和处理函数
.trigger() // 传值: 事件类型 数组(这个值传到事件处理函数中) 自动触发系统事件和自定义事件
.hover() // 传两个函数, 相当于绑定onmouseenter和onmouseleave两个事件
.click/keydown/mouseenter... // 可以直接使用 鼠标滑轮事件 mousewheel
1
2
3
4
5
6
2
3
4
5
6
# 事件对象
e.pageX
e.clienX
e.which
e.button
e.preventDefault()
e.stopPropagation()
// 通过返回 return false 兼容阻止事件冒泡 和 默认事件
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 动画相关方法
.hide() // 隐藏
.show() // 实现从隐藏到展示的效果, 必须是隐藏的, 还原成设置的, display格式或者默认的
.toggle() // 隐藏和展示的切换, 参数: null或(duration(变化的时间长短), easing(变化的方式), callback(回调函数))
.fadeIn() // 渐变显示
.fadeOut() // 渐变隐藏
.fadeToggle() // 淡入淡出的切换
.fadeTo() // 淡入淡出到某个透明度(才有四个参数), 参数: null或(duration, [opacity], easing, callback)
.slideDown() // 卷出
.slideUp() // 卷入
.slideToggle() // 卷出卷入的切换(类似卷帘门), 参数: null或(duration, easing, callback)
.animate() // 参数: (target duration easing callback)
.stop() // 不传参数则会阻止当前的运动, 进行下一个运动, 传true则停止一切运动,
// 传true true 则停止当前运动并瞬间移动到目标点
.finish() // 直接到达最终的目标点 参数: 停止动画队列中的名称
.delay() // 延迟多少时间
jQuery.fx.off = true // 禁用过渡动画
// jQuery easing plugin插件, 动画过渡效果
.queue() // 添加队列(数组)
.dequeue() // 出队(先进先出)
.clearQueue() // 清除队列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 位置坐标图形大小相关方法
.offset() // 取值和赋值top和left, 只考虑相对于文档的距离, 得到的是对象
.position() // 只能取值top和left, 相对于最近有定位的父级, 如果没有有定位的父级则相对于文档定位
// $(window). + .scrollTop() .scrollLeft() 纵向和横向滚动条(可取可赋)
// 获取的都是content区域值
.width()
.height()
// 获取的是content+padding
.innerWidth()
.innerHeiht()
// 获取的是content+padding+border, 如果参数传true则还要加上margin
.outerWidth()
.outerWidth()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 遍历索引相关方法
.each() // 循环操作获取的每一个元素
.index() // 返回在相同的兄弟元素中的索引值
.children() // 选中某个标签的所有子元素
// 筛选
odd/even/first/last/eq // 奇数/偶数/第一个/最后一个/eq(num)自定义第几个
prev/prevAll/next/nextAll/sibIings // 前一个兄弟元素/前面全部兄弟元素/下一个/下面全部兄弟元素/获取所有兄弟元素
filter/not/is/slice/map/has // 选择包含元素的/选择不包含元素的/判断时候含有特定属性/选择索引值
// 查找
children/find/end/add/andBack
offsetParent/parent/parents/closest
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# jQuery工具方法
$.type() // 判断数据类型(到底是什么, 区别于原生的typeof)
$.isArray()
$.isFunction()
$.isWindow()
$.trim() // 消除首位的空格
$.proxy() // 改变this指向 第一个值是需要改变的方法, 第二个是改变this的目标, 需要一个新的参数来接收
$.noConfig() // 防止冲突
$.each() // 循环map...
$.parseJSON() // 严格json字符串转换成对象-原生JSON,parse()
$.makeArray() // 类数组转换成数组, 可传两个参数, 拼接成第二个参数的形式
// 扩展方法
// 浅层克隆 后面的克隆到前面第一个的, 没有的属性新增, 有的就覆盖, 引用值覆盖且会互相影响(索引一样)
// 深层克隆 引用值会被覆盖但不互相影响
$.extend() // 插件扩展(工具方法)
$.fn.extend() // 插件扩展(实例方法)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 其他方法
// $.ajax()基本使用
$.ajax({
url:'', //资源地址
type:'', //请求方式
data:{}, //参数 信息
success: //请求成功后的处理函数
error: //请求失败后的处理函数
complete: 请求完成后的处理函数, 最后执行
context: //改变函数上下文
timeout: //请求时间限制
asyne : //true or false 是否异步
dataType: 'jsonp'
})
$.callbacks()
// 回调处理函数(参数once表示值执行一次, 参数memory表示回调具有记忆功能,
// fire过后再add的函数也可以执行, 参数unique重复的只执行一次,
// 参数stopOnFalse是在某个函数中添加return false则后面的回调就不会执行),
// .add()把函数放在回调这个框里
// .fire() 执行回调
$.deferred()
// 异步, 延迟对象, 更高级的callback,
// 成功: done()注册 .resolve()调用
// 失败: fail()注册 .reject()调用
// 正在进行: .progress()注册 .notify()调用
// 成功或者失败后就不会执行了, progress会继续直到得到结果
// .promise()严格地返回注册函数
// .then()
// 1. 简化注册的写法, 三个函数分别是done fail progress
// 2. 连续调用, 第一个then后的返回值传到下一个then里
$.when()
// 可传一到过个延迟对象, 返回值是promise对象, 传入的延迟对象全成功才会执行后面的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
TIPS
获取样式
IE中使用的是 obj.currentStyle 方法, 而FF是用的是 getComputedStyle 方法
function getStyle (obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr]
}
// 第二个参数是指定一个要匹配的伪元素的字符串, 必须对普通元素省略或者为null
return window.getComputedStyle(obj, false)[attr]
}
1
2
3
4
5
6
7
2
3
4
5
6
7