JQuery、Ajax基础语法

JQuery

选择器
1. 基本
  1. #id 选择所有id为id的元素，一般id唯一
  2. .class 选择所有class为class的元素，多class的元素，符合其中一个即可
  3. * 选择所有元素
  4. selector1,selector2,selectorN 返回多个选择器的结果集，OR关系
2. 层级
  1. form input 选择form下所有input元素
  2. parent > child 选择parent下的所有匹配子元素，不包括子元素的子元素
  3. prev + next 匹配所有紧接在 prev 元素后的* next 元素*
  4. prev ~ siblings匹配 prev 元素之后的所有兄弟 siblings 元素
3. 基本筛选器
  1. :first 获取第一个元素
  2. :not(selector)选择非匹配的元素，即除selector以外的元素
  3. :even 匹配所有索引值为偶数的元素
  4. :odd 匹配所有索引值为奇数的元素
  5. :eq(index) 匹配索引等于index的元素，索引从0开始
  6. :gt(index) 匹配索引大于index的元素
  7. :last() 匹配最后一个元素
  8. :lt(index) 匹配索引小于index的元素
  9. :header 匹配h1,h2之类的标题元素
  10. :animated 匹配正在执行动画的元素
  11. :focus 匹配当前获取焦点的元素。
  12. :root 选择该文档的根元素。一般都是<html>元素
  13. :target 选择由文档URI的格式化识别码表示的目标元素。如果文档的URI包含一个格式化的标识符，或hash（哈希），然后:target选择器将匹配ID和标识符相匹配的元素。例如，给定的URI http://example.com/#foo， $( "p:target" )，将选择<p id="foo">元素。
4. 内容
  1. :contains(text) 匹配包含给定文本的元素
  2. :empty 匹配所有不包含子元素或者文本的空元素
  3. :has(selector) 匹配含有选择器所匹配的元素的元素
  4. :parent 匹配含有子元素或者文本的元素
5. 可见性
  1. :hidden 匹配所有不可见元素，或者type为hidden的元素
  2. :visible 匹配所有可见元素
6. 属性
  1. [attribute]匹配包含给定属性的元素
  2. [attribute=value] 匹配给定的属性是某个特定值的元素
  3. [attribute!=value] 等价于:not([attribute=value]) 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
  4. [attribute^=value] 匹配给定的属性是以某些值开始的元素
  5. [attribute$=value] 匹配给定的属性是以某些值结尾的元素
  6. [attribute*=value] 匹配给定的属性包含某些值的元素
  7. [selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用。AND关系
7. 子元素
  1. :first-child 等价:nth-child(1)匹配所给选择器的第一个子元素，:first只匹配第一个元素，这个可以匹配符合条件的所有元素的第一个子元素
  2. :first-of-type 等价:nth-of-type(1)匹配的是某父元素下相同类型子元素中的第一个
  3. :last-child 匹配最后一个子元素，:last只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素
  4. :last-of-type匹配的是某父元素下相同类型子元素中的最后一个
  5. :nth-child(index|odd|even|formula) 匹配其父元素下的第N个子或奇偶元素,索引从1开始
  6. :nth-last-child(index|even|odd|formula)匹配其父元素下最后一个元素索引从1开始
  7. :nth-last-of-type(index|even|odd|formula)选择的所有他们的父级元素的第index个子元素，计数从最后一个元素到第一个。
  8. nth-of-type(n|even|odd|formula) 选择同属于一个父元素之下，并且标签名相同的子元素中的第index个
  9. :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
  10. :only-of-type选择所有没有兄弟元素，且具有相同的元素名称的元素。
8. 表单
  1. :input 匹配所有 input, textarea, select 和 button 元素
  2. :text 查询所有文本框
  3. :password 匹配所有密码框
  4. :radio 匹配所有单选按钮
  5. :checkbox 匹配所有复选框
  6. :submit 匹配所有提交按钮
  7. :image 匹配所有图像域
  8. :reset 匹配所有重置按钮
  9. :button 匹配所有按钮
  10. :file 匹配所有文件域
9. 表单对象属性
  1. :enabled 匹配所有可用元素
  2. :disabled 匹配所有不可用元素
  3. :checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
  4. :selected 匹配所有选中的option元素
10. 混淆选择器
  1. $.escapeSelector(selector) 转义CSS选择器中有特殊意义的字符或字符串，比如带#的class
核心
1. jQuery(callback) $(document).ready()的简写。
2. each(callback) 以每一个匹配的元素作为上下文来执行一个函数。return 跳出循环
3. length jQuery 对象中元素的个数。等价于size()已废弃
4. selector 返回传给jQuery()的原始选择器。
5. get([index]) 取得其中一个匹配的元素。从0开始，返回的是DOM对象，类似的有eq(index),返回的是jQuery对象。
6. index([selector|element]) 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。找不着返回-1
7. data([key],[value])
  1. $.data("#a") 取id为a的元素值
  2. $.data("#a", 1) 为id为a的元素赋值为1
  3. $.removeData("#a") 删除id为a的元素的值
8. jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
9. jQuery.extend(object) 扩展jQuery对象本身。用来在jQuery命名空间上增加新函数
工具
1. jQuery.each(object, [callback]) 通用遍历方法，可用于遍历对象和数组。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。return false 退出循环
2. jQuery.grep(array, callback, [invert]) 使用过滤函数过滤数组元素。必须返回 true 以保留元素或 false 以删除元素。
3. jQuery.makeArray(obj) 将类数组对象转换为数组对象。
4. jQuery.map(arr|obj,callback) 将一个数组中的元素转换到另一个数组中。
5. jQuery.inArray(value,array,[fromIndex]) 查找元素在数组中的位置
6. jQuery.toArray() 把jQuery集合中所有DOM元素恢复成一个数组。
7. jQuery.merge(first,second) 合并两个数组，返回的结果会修改第一个数组的内容
8. jQuery.unique(array) 删除数组中重复元素。 3.0以上版本已被弃用
9. jQuery.uniqueSort(array) 通过搜索的数组对象，排序数组，并移除任何重复的节点
10. jQuery.parseXML(data) 解析字符串到XML文件
11. jQuery.contains(container,contained) 一个DOM节点是否包含另一个DOM节点。
12. jQuery.type(obj) 检测obj的数据类型。
13. jQuery.trim(str) 去掉字符串起始和结尾的空格。
14. jQuery.param(obj,[traditional]) 将表单元素数组或者对象序列化。是.serialize()的核心方法。
效果
1. show([speed,[easing],[fn]]) 显示隐藏的匹配元素。
2. hide([speed,[easing],[fn]]) 隐藏匹配元素。
3. toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
4. slideDown([speed],[easing],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
5. slideUp([speed,[easing],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
6. slideToggle([speed],[easing],[fn]) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
7. fadeIn([speed],[easing],[fn]) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
8. fadeOut([speed],[easing],[fn]) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
9. fadeTo([[speed],opacity,[easing],[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
10. fadeToggle([speed,[easing],[fn]]) 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
11. animate(params,[speed],[easing],[fn]) 用于创建自定义动画的函数
12. stop([clearQueue],[jumpToEnd]) 停止所有在指定元素上正在运行的动画。
13. delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目。
14. finish( [queue ] ) 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
15. jQuery.fx.off 关闭页面上所有的动画。
事件和对象
1. event.pageX 鼠标相对于文档的左边缘的位置。
2. event.pageY 鼠标相对于文档的右边缘的位置。
3. event.timeStamp 这个属性返回事件触发时距离1970年1月1日的毫秒数。
回调函数
1. callbacks.add(callbacks) 回调列表中添加一个回调或回调的集合。
2. callbacks.disable() 禁用回调列表中的回调
3. callbacks.empty() 从列表中删除所有的回调.
4. callbacks.fire() 用于传入指定的参数调用所有的回调。
5. callbacks.remove(callbacks)删除回调或回调回调列表的集合。
文档处理
1. replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素。移动到目标位置来替换，而不是复制一份来替换。
2. detach() 移除被选元素，会保留 jQuery 对象中的匹配的元素
3. closest和parents的主要区别是：
  1. 前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
  2. 前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
  3. 前者返回0或1个元素，后者可能包含0个，1个，或者多个元素

ajax

jQuery.ajax(url,[settings])
1. url 请求地址
2. settings 选项，皆可选
  1. accepts 请求的数据类型
  2. async 默认true 异步请求 false 同步请求
  3. beforeSend(XHR) 请求之前的操作，比如禁用submit按钮防止多次提交等
  4. cache 默认true 缓存该页面
  5. complete(XHR, TS) 请求完成后回调函数 (请求成功或失败之后均调用)。
  6. contentType 默认: “application/x-www-form-urlencoded”发送信息至服务器时内容编码类型。
  7. context 设置Ajax相关回调函数的上下文
  8. crossDomain 默认：同域请求为false
  9. data 发送到服务器的数据。
  10. dataType 预期服务器返回的数据类型。
  11. error (默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。
  12. global (默认: true) 是否触发全局 AJAX 事件
  13. headers 默认 Default: {}，此设置被设置之前beforeSend函数被调用;因此，消息头中的值设置可以在覆盖beforeSend函数范围内的任何设置。
  14. ifModified (默认: false) 仅在服务器数据改变时获取新数据。
  15. isLocal 默认: 取决于当前的位置协议
  16. jsonp 在一个jsonp请求中重写回调函数的名字。
  17. jsonpCallback 为jsonp请求指定一个回调函数名。
  18. mimeType 一个mime类型用来覆盖XHR的 MIME类型。
  19. password 用于响应HTTP访问认证请求的密码
  20. statusCode 默认: {}一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。
  21. success(data, textStatus, jqXHR) 请求成功后的回调函数。
  22. traditional 用传统的方式来序列化数据，则设置为true，可传递对象
  23. timeout 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
  24. type (默认: “GET”) 请求方式 (“POST” 或 “GET”)，PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
  25. url (默认: 当前页地址) 发送请求的地址。
  26. username 用于响应HTTP访问认证请求的用户名
jQuery.load(url, [data], [callback]) 载入远程 HTML 文件代码并插入至 DOM 中。
1. url:待装入 HTML 网页网址。
2. data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
3. callback:载入成功时回调函数。
jQuery.get(url, [data], [callback], [type])
1. url:待载入页面的URL地址
2. data:待发送 Key/value 参数。
3. callback:载入成功时回调函数。
4. type:返回内容格式，xml, html, script, json, text, _default。
jQuery.getJSON(url, [data], [callback])
1. url:发送请求地址。
2. data:待发送 Key/value 参数。
3. callback:载入成功时回调函数。
jQuery.post(url, [data], [callback], [type])
1. url:发送请求地址。
2. data:待发送 Key/value 参数。
3. callback:发送成功时回调函数。
4. type:返回内容格式，xml, html, script, json, text, _default。
serialize() 序列表表格内容为字符串。$("form").serialize()
serializeArray() 序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。即JSON对象而非JSON字符串。

JQuery、Ajax基础语法

JQuery

ajax

猜你喜欢