学习JQuery
1. 重要基础
- 简写加载函数，事情必须在DOM加载之后，否则无法绑定对象
$(document).ready()
$(function(){}); //推荐缩写- 使用包括 JQuery 库外语法类似的 JavaScript 库时，注意命名冲突
Jquery.noConflict()
var
$$
= JQuery; //换成
$$
调用Jquery函数2. 基础选择器
(选择器使用css1，css2的全部选择器语法，以及部分css3语法。)
- 对 id 元素使用选择器: 默认对第一个元素外的其他元素"失明"，返回第一个对象。
- 调用属性 .length 或函数 .size() 查看对象集合的数量
- 获取对象集合里的元素 .get(0) 或加下标 [0]
- 群组选择器: 逗号列举
$("label, #text, .blue")- 后代选择器
＄("#nav h4 span")
$("#nav").find("h4").find("span")- 子代选择器(只能是直接的父子关系)
＄("#nav > span")
$("#nav").children("span")- 获取 span 的下一个同级兄弟元素 p
$("div span + p")
$("div span").next()- 获取 span 以下的所有同级兄弟元素 p
$("div span ~ p")
$("div span").nextAll("p")- 同级向上(向下)选取元素，直到找到 label 元素为止(不包括 label 元素)
.prevUntil("label") //向上
.nextUntil("label") //向下- 寻找同级兄弟
.siblings("input")
.prevAll() 加上 .nextAll()3. 过滤选择器
- 第一个(最后一个)元素
:first
:last- 排除满足条件的元素
.not(.blue)- 奇(偶)序元素
:odd
:even- 等于/大于/小于
:eq(2)
:gt(3)
:lt(5)- 标题元素(h1 ~ h6)
:header- 正在执行动画的元素
:animated- 正被聚焦的元素
:focus- 包含指定文本的元素
:contains(".com")- 不包含文本或者无子元素的元素
:empty- 包含文本或子元素的元素
:parent- 具有指定类的元素
:has(".blue")- 不可见(可见)的元素
:hidden
:visible- 每个父元素的第一个(最后一个)子元素
:first-child
:last-child- 只有一个子元素的元素
:only-child- 每个指定子元素的元素
:nth-child(odd)- 匹配的元素
.is(".bule")
.hasClass("blue")
.filter(".blue")
.slice(1, 4) //第二个到第四个元素4. 表单选择器
- 选择指定元素
:input
:button- 选择不同类型的input元素
:text
:password
:radio
:checkbox
:submit
:reset
:image
:button
:file
:hidden- 选择不同属性的元素
:enabled
:disabled
:checked
:selected5. 基本 DOM 操作
- 获取(设置)元素html内容
.html() //加参数则设置- 获取(设置)元素文本内容
.text() //加参数则设置- 获取(设置)表单元素内容
.val() //加参数则设置- 获取(设置)元素属性值
.attr() //加参数则设置
.attr({A: a, B: b}) //设置多个参数- 获取(设置)css样式
.css() //加参数则设置，多参数设置同上- 添加css样式
.addClass("blue")
.addClass("blue red green")- 移除css样式
.removeClass("blue") //移除多个类同上- 切换css样式
.toggleClass("blue") //切换多个类同上
.toggleClass(function(){}, [rate]) //自定义切换规则，第二个为可选参数频率- 获取(设置)高度(宽度)
.height() //加参数则设置
.width() //加参数则设置
.height(function(object, value){}) //object指定元素、value指定元素的高度- 获取内外边框高度宽度
.innerWidth()
.innerHeight()
.outerWidth() //包括边框和内边距
.outerHeight() //同上
.outerWidth(true) //同上并包括外边框
.outerHeight(true) //同上- 相对偏移
.offset() //相对于视口
.position() //相对于父元素- 滚动条相关(获取/设置)
.scrollTop() //垂直
.scrollLeft() //水平6. DOM节点操作
- 元素内部前面插入节点
.prepend(html) //插入节点html
.prepend(function(new, parent)) //向parent元素内部前面插入节点new
.prependTo(target) //将元素移至指定元素target- 元素内部后面插入节点
.append(html)
.append(function(new, parent){})
.appendTo(target)- 元素外部前面插入节点
.before()
.before(function(new, parent){})
.insertBefore(target)- 元素外部后面插入节点
.after()
.after(function(new, parent){})
.insertAfter(target)- 包裹节点
.wrap(target) //参数可为html内容或者对象节点
.wrap(function(target){})
.unwrap() //解除一层包裹 - 批量包裹
.wrapAll(parent) //被元素parent包裹
.wrapInner(parent) //包裹元素parent的子元素- 复制节点
.clone(true) //加上true表示同时复制绑定事件、不加则只复制元素和内容- 删除节点
.remove(‘p’) //可选参数- 保留事件行为的删除
.detach()- 删除节点内容
.empty()- 替换节点
.replaceWith('span')
.replaceAll('p')7. 基本事件
(以下函数均含匿名函数)
- 点击、双击
.click()
.dbclick()- 点击弹起瞬间、弹起后
.mouseup()
.mousedown()- 鼠标穿出入触发(包括子元素)
.mouseenter()
.mouseleave()- 鼠标穿出入触发(不包括子元素)
.mouseover()
.mouseout()- 鼠标移动
.mousemove()- 键盘按下弹起瞬间、弹起后
.keyup()
.keydown()
.keypress()- 焦点激活与丢失
.focus()
.blur()
.focusin()
.focusout()- 其他事件
.select() //文本选定
.change() //值被改变
.submit //表单提交
.scroll() //滚动条拖动
.unload() //卸载本页面
.hover(fun1, [fun2]) //鼠标移入(移出)8. 事件对象
(function(event){})
- 页面坐标(属性)
pageX //相对于页面
pageY
screenX //相对于显示屏
screenY
clientX //相对于视口
clientY9. 高级事件
- 模拟用户行为
.trigger("click", [param1, param2])
.trigger("click", [{paramA1 : a, paramA2 : b}, {paramB1, paramB2}])- 绑定(解绑)事件
.on("click dbclick", [function(){}])
.off("click")- 仅触发一次事件
.one() //用法同.on10. 动画
- 显示/隐藏
.show() //可选参数持续时间，如3000表示3秒，或者“slow”
.hide() //添加第二参数闭包函数则动画完毕后执行- 自定义动画
.animate({'top': '+=88px', 'height': '200px'}, 'slow')- 队列动画
.queue([function([next]){ ......; [next()[]}])
.dequeue() //两个函数都是执行下一个函数- 上下卷动
.slideUp()
.slideDown()
.slidToggle()- 动画操作
.delay()
.stop()- 动画属性
.fx.interval //运行帧数
.fx.off = ture //关闭动画效果11. AJAX
.load()
- 第一个参数：目的 url 或者带选择器的 url (可带get的参数)
- 第二个参数：不为空则为post方式
- 第三个参数：闭包函数（返回数据，状态，XMLHttpRequest对象）
.get()
.post()
.AJAX() //底层函数
(以下为传入参数的属性)
- url
- type
- timeout
- data
- dataType
- beforeSend
- complete
- success
- error
- global
- cache
- content
- contentType
- async
- processData
- dataFilter
- ifModified
- jsonp
- username
- password
- scriptCharset
- xhr
- traditional
$.ajaxStart()
$.ajaxStop()
$.ajaxError()
$.ajaxSuccess()
$.ajaxComplete()
$.ajaxSend()
$.ajaxSetup() //请求默认值来初始化参数
$('form').serialize() //获取表单所有值
$('form').serializeArray() //返回键值对的Json对象
12. 工具函數
- 除去字符串两边空格
$.trim(str)- 遍历数组(对象)
$.each(arr, function(index, value){})- 数据筛选
$.grep(arr, function(element, index){})- 修改数据
$.map(arr, function(element, index){})- 合并数组
$.merge(arr1, arr2)6.测试类型函数
$.isArray(obj)
$.isFunction(obj)
$.isEmptyObject(obj)
$.isPlainObject(obj) //纯粹对象
$.isNumeric(data)
$.isWindow(data) //window对象
$.contains(obj) //包含其他节点- 判断类型函数
$.type(data)- 将对象键值对转换为URL字符串键值对
$.param(obj)- 调用内部函数
$.proxy(obj, 'objFunc') //返回obj对象里的objFunc函数13. 插件
1.Validate.js
(jquery.validata.js 、 jquery.validate.messages_zh.js)
- 相关代码
$('form').validate()- 必填项
class = “required”- 邮箱
class = "email"- 不得少于两位
minlength = "2"- 网址
class = "url"2. 自动完成插件 (jquery.autocomplete.js 、 jquery-migrate-1.2.1.js)
var name = ['John', 'Jack', 'Tom', 'Kitty'];
$('form input[name=name]').autocomplete(name, {minChars: 0}) //0表示不需要输入一个字符即可显示所有备选数据3. 自定义插件
分类
- 封装对象方法的插件
- 封装全局函数的插件
- 选择器插件
插件规范
- 名字: jquery.[name].js
- 局部对象附加 jquery.fn 对象上，全局函数附加在 jquery 上
- 插件内部，this 指向的是当前的局部对象
- 可以通过 this.each 来遍历所有元素
- 所有的方法或插件，必须用分号结尾，避免出现问题
- 插件应该返回的是 JQuery 对象，以保证可链式连缀
- 避免插件内部使用 $ ，如果要使用，请传递 JQuery 进去
