JQuery、Ajax基础语法
JQuery
- 选择器
- 基本
#id
选择所有id为id的元素,一般id唯一.class
选择所有class为class的元素,多class的元素,符合其中一个即可*
选择所有元素selector1,selector2,selectorN
返回多个选择器的结果集,OR关系
- 层级
form input
选择form
下所有input
元素parent > child
选择parent下的所有匹配子元素,不包括子元素的子元素prev + next
匹配所有紧接在 prev 元素后的* next 元素*prev ~ siblings
匹配 prev 元素之后的所有兄弟 siblings 元素
- 基本筛选器
:first
获取第一个元素:not(selector)
选择非匹配的元素,即除selector以外的元素:even
匹配所有索引值为偶数的元素:odd
匹配所有索引值为奇数的元素:eq(index)
匹配索引等于index的元素, 索引从0开始:gt(index)
匹配索引大于index的元素:last()
匹配最后一个元素:lt(index)
匹配索引小于index的元素:header
匹配h1,h2之类的标题元素:animated
匹配正在执行动画的元素:focus
匹配当前获取焦点的元素。:root
选择该文档的根元素。一般都是<html>
元素:target
选择由文档URI的格式化识别码表示的目标元素。如果文档的URI包含一个格式化的标识符,或hash(哈希), 然后:target选择器将匹配ID和标识符相匹配的元素。 例如,给定的URIhttp://example.com/#foo
,$( "p:target" )
,将选择<p id="foo">
元素。
- 内容
:contains(text)
匹配包含给定文本的元素:empty
匹配所有不包含子元素或者文本的空元素:has(selector)
匹配含有选择器所匹配的元素的元素:parent
匹配含有子元素或者文本的元素
- 可见性
:hidden
匹配所有不可见元素,或者type为hidden的元素:visible
匹配所有可见元素
- 属性
[attribute]
匹配包含给定属性的元素[attribute=value]
匹配给定的属性是某个特定值的元素[attribute!=value]
等价于:not([attribute=value])
匹配所有不含有指定的属性,或者属性不等于特定值的元素。[attribute^=value]
匹配给定的属性是以某些值开始的元素[attribute$=value]
匹配给定的属性是以某些值结尾的元素[attribute*=value]
匹配给定的属性包含某些值的元素[selector1][selector2][selectorN]
复合属性选择器,需要同时满足多个条件时使用。AND关系
- 子元素
:first-child
等价:nth-child(1)
匹配所给选择器的第一个子元素,:first
只匹配第一个元素,这个可以匹配符合条件的所有元素的第一个子元素:first-of-type
等价:nth-of-type(1)
匹配的是某父元素下相同类型子元素中的第一个:last-child
匹配最后一个子元素,:last
只匹配最后一个元素,而此选择符将为每个父元素匹配最后一个子元素:last-of-type
匹配的是某父元素下相同类型子元素中的最后一个:nth-child(index|odd|even|formula)
匹配其父元素下的第N个子或奇偶元素,索引从1开始:nth-last-child(index|even|odd|formula)
匹配其父元素下最后一个元素 索引从1开始:nth-last-of-type(index|even|odd|formula)
选择的所有他们的父级元素的第index个子元素,计数从最后一个元素到第一个。nth-of-type(n|even|odd|formula)
选择同属于一个父元素之下,并且标签名相同的子元素中的第index个:only-child
如果某个元素是父元素中唯一的子元素,那将会被匹配:only-of-type
选择所有没有兄弟元素,且具有相同的元素名称的元素。
- 表单
:input
匹配所有 input, textarea, select 和 button 元素:text
查询所有文本框:password
匹配所有密码框:radio
匹配所有单选按钮:checkbox
匹配所有复选框:submit
匹配所有提交按钮:image
匹配所有图像域:reset
匹配所有重置按钮:button
匹配所有按钮:file
匹配所有文件域
- 表单对象属性
:enabled
匹配所有可用元素:disabled
匹配所有不可用元素:checked
匹配所有选中的被选中元素(复选框、单选框等,select中的option),对于select元素来说,获取选中推荐使用:selected
:selected
匹配所有选中的option元素
- 混淆选择器
$.escapeSelector(selector)
转义CSS选择器中有特殊意义的字符或字符串,比如带#的class
- 基本
- 核心
jQuery(callback)
$(document).ready()的简写。each(callback)
以每一个匹配的元素作为上下文来执行一个函数。return 跳出循环length
jQuery 对象中元素的个数。等价于size()
已废弃selector
返回传给jQuery()的原始选择器。get([index])
取得其中一个匹配的元素。从0开始,返回的是DOM对象,类似的有eq(index)
,返回的是jQuery对象。index([selector|element])
搜索匹配的元素,并返回相应元素的索引值,从0开始计数。找不着返回-1data([key],[value])
$.data("#a")
取id为a的元素值$.data("#a", 1)
为id为a的元素赋值为1$.removeData("#a")
删除id为a的元素的值
jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。jQuery.extend(object)
扩展jQuery对象本身。用来在jQuery命名空间上增加新函数
- 工具
jQuery.each(object, [callback])
通用遍历方法,可用于遍历对象和数组。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。return false
退出循环jQuery.grep(array, callback, [invert])
使用过滤函数过滤数组元素。必须返回 true 以保留元素或 false 以删除元素。jQuery.makeArray(obj)
将类数组对象转换为数组对象。jQuery.map(arr|obj,callback)
将一个数组中的元素转换到另一个数组中。jQuery.inArray(value,array,[fromIndex])
查找元素在数组中的位置jQuery.toArray()
把jQuery集合中所有DOM元素恢复成一个数组。jQuery.merge(first,second)
合并两个数组,返回的结果会修改第一个数组的内容jQuery.unique(array)
删除数组中重复元素。 3.0以上版本已被弃用jQuery.uniqueSort(array)
通过搜索的数组对象,排序数组,并移除任何重复的节点jQuery.parseXML(data)
解析字符串到XML文件jQuery.contains(container,contained)
一个DOM节点是否包含另一个DOM节点。jQuery.type(obj)
检测obj的数据类型。jQuery.trim(str)
去掉字符串起始和结尾的空格。jQuery.param(obj,[traditional])
将表单元素数组或者对象序列化。是.serialize()的核心方法。
- 效果
show([speed,[easing],[fn]])
显示隐藏的匹配元素。hide([speed,[easing],[fn]])
隐藏匹配元素。toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。slideDown([speed],[easing],[fn])
通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。slideUp([speed,[easing],[fn]])
通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。slideToggle([speed],[easing],[fn])
通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。fadeIn([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。fadeOut([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。fadeTo([[speed],opacity,[easing],[fn]])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。fadeToggle([speed,[easing],[fn]])
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。animate(params,[speed],[easing],[fn])
用于创建自定义动画的函数stop([clearQueue],[jumpToEnd])
停止所有在指定元素上正在运行的动画。delay(duration,[queueName])
设置一个延时来推迟执行队列中之后的项目。finish( [queue ] )
停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。jQuery.fx.off
关闭页面上所有的动画。
- 事件和对象
event.pageX
鼠标相对于文档的左边缘的位置。event.pageY
鼠标相对于文档的右边缘的位置。event.timeStamp
这个属性返回事件触发时距离1970年1月1日的毫秒数。
- 回调函数
callbacks.add(callbacks)
回调列表中添加一个回调或回调的集合。callbacks.disable()
禁用回调列表中的回调callbacks.empty()
从列表中删除所有的回调.callbacks.fire()
用于传入指定的参数调用所有的回调。callbacks.remove(callbacks)
删除回调或回调回调列表的集合。
- 文档处理
replaceWith(content|fn)
将所有匹配的元素替换成指定的HTML或DOM元素。移动到目标位置来替换,而不是复制一份来替换。detach()
移除被选元素,会保留 jQuery 对象中的匹配的元素- closest和parents的主要区别是:
- 前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;
- 前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;
- 前者返回0或1个元素,后者可能包含0个,1个,或者多个元素
ajax
jQuery.ajax(url,[settings])
- url 请求地址
- settings 选项,皆可选
- accepts 请求的数据类型
- async 默认true 异步请求 false 同步请求
- beforeSend(XHR) 请求之前的操作,比如禁用submit按钮防止多次提交等
- cache 默认true 缓存该页面
- complete(XHR, TS) 请求完成后回调函数 (请求成功或失败之后均调用)。
- contentType 默认: “application/x-www-form-urlencoded”发送信息至服务器时内容编码类型。
- context 设置Ajax相关回调函数的上下文
- crossDomain 默认: 同域请求为false
- data 发送到服务器的数据。
- dataType 预期服务器返回的数据类型。
- error (默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。
- global (默认: true) 是否触发全局 AJAX 事件
- headers 默认 Default: {},此设置被设置之前beforeSend函数被调用;因此,消息头中的值设置可以在覆盖beforeSend函数范围内的任何设置。
- ifModified (默认: false) 仅在服务器数据改变时获取新数据。
- isLocal 默认: 取决于当前的位置协议
- jsonp 在一个jsonp请求中重写回调函数的名字。
- jsonpCallback 为jsonp请求指定一个回调函数名。
- mimeType 一个mime类型用来覆盖XHR的 MIME类型。
- password 用于响应HTTP访问认证请求的密码
- statusCode 默认: {}一组数值的HTTP代码和函数对象,当响应时调用了相应的代码。
- success(data, textStatus, jqXHR) 请求成功后的回调函数。
- traditional 用传统的方式来序列化数据,则设置为true,可传递对象
- timeout 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
- type (默认: “GET”) 请求方式 (“POST” 或 “GET”),PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
- url (默认: 当前页地址) 发送请求的地址。
- username 用于响应HTTP访问认证请求的用户名
jQuery.load(url, [data], [callback])
载入远程 HTML 文件代码并插入至 DOM 中。- url:待装入 HTML 网页网址。
- data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
- callback:载入成功时回调函数。
jQuery.get(url, [data], [callback], [type])
- url:待载入页面的URL地址
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
- type:返回内容格式,xml, html, script, json, text, _default。
jQuery.getJSON(url, [data], [callback])
- url:发送请求地址。
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
jQuery.post(url, [data], [callback], [type])
- url:发送请求地址。
- data:待发送 Key/value 参数。
- callback:发送成功时回调函数。
- type:返回内容格式,xml, html, script, json, text, _default。
serialize()
序列表表格内容为字符串。$("form").serialize()
serializeArray()
序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。即JSON对象而非JSON字符串。
JQuery、Ajax基础语法相关推荐
- jQuery与JS的区别,以及jQuery的基础语法
*在使用jQuery时,要在页面最上端加上 <script src="../jquery-1.11.2.min.js"></script> 看一下js与jQ ...
- java ajax教程_Jquery ajax基础教程
jQuery的Ajax带来了无需刷新的web页面革命.这里就详细介绍一下jQuery所涉及到的Ajax操作.(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7) 1.基于请求加载文件数 ...
- Ajax和JSON-学习笔记03【JSON_基础语法】
Java后端 学习路线 笔记汇总表[黑马程序员] Ajax和JSON-学习笔记01[原生JS方式实现Ajax] Ajax和JSON-学习笔记02[JQuery方式实现Ajax] Ajax和JSON-学 ...
- 学习笔记 之 JQuery 基础语法
jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...
- javaWeb基础六:JQuery—Ajax异步请求
JQuery 之 Ajax 异步请求 1.1 Ajax简介 1.1.1 不使用Ajax存在的问题 在发送请求得到响应时,我们常常只需要刷新网页局部的数据,而不是整个网页的资源(在网页资源过大时,效率会 ...
- 【jQuery教科书】从jQuery语法到jQuery ajax的每一个知识点(学习总结)
文章目录 @[toc] 一.jQuery概述 1.1 什么是jQuery? 1.2 jQuery的版本须知 1.3 jQuery的功能作用 1.4 为什么要使用jQuery? 1.5 jQueryAP ...
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...
- ajax 更新页面变量,[Django 1.5] jQuery/Ajax 在Django使用 ,如何更新模板里里变量
最近希望实现一个页面局部刷新的功能,于是开始查阅ajax资料.幸好现在ajax很多功能都封装在jQuery这个库里面,我们可以很方便去调用.通过学习几个简单的小例子,可以实现简单的前端代码更新,还有重 ...
- 03-1.JavaScript基础语法略写/模版字符串
基础语法 参考前端基础之JavaScript - Q1mi - 博客园 略写原因 由于后续主要用jQuery编写,jQuery简化编程.大概了解JavaScript语法即可. jQuery是一个轻量级 ...
最新文章
- [转]单点登录原理与简单实现
- 关于量子计算机 (3)
- python爬虫流程-Python:爬虫处理流程及网页解析
- ubuntu/debian/centos/rhel使用镜像源一键安装gitlab-ce服务
- (转)Elasticsearch 聚合查询、桶聚合、管道聚合及复合查询
- 什么事数据科学_如果您想进入数据科学,则必须知道的7件事
- 汇编中各寄存器的作用(16位CPU14个,32位CPU16个)和 x86汇编指令集大全(带注释)
- Windows服务简单实例
- 解决移动端视频层级最高的问题,修改video属性
- vs code 开发企业级python_入股不亏!VS Code中最好用的Python扩展插件
- kali字典WiFi
- java游戏走到边缘_java-3D对象相遇的边缘和毛刺不均匀
- 正则表达式应用(日期正则表达式)
- 问题解决 之 转成PDF后Visio图中虚线看不清
- 对数用计算机,如何使用计算器计算对数
- 基于hexo搭建github的个人静态博客
- 【Day27 文献泛读】物体位置与空间关系的心理表征
- 图片加载框架之UIL
- 关于前端后台管理系统总结
- Mybatis 查询 List作为参数查询 条件中有多个参数,foreach in 查询
热门文章
- 用c设计一个函数 输入一段股票价格数据 使用均线算法返回一个值来表示股票未来涨跌趋势...
- 上海市长宁区委统战部一行到访深兰科技调研
- 物理学专业英语(词汇整理)--------07
- mysql a左外连接b b左外连接c_数据库中的 内连接,外连接(左连接,左外连接,右连接,右外连接),全连接,交叉连接...
- Oracle概念及常用语句(一)
- 分布式与微服务系列 - Dubbo
- IOS成长之路-调用照相机和相册功能
- [转摘]太极拳精义述真
- ubuntu 18.04 单系统u盘装机 简明流程
- 规则引擎 开源产品_开源公司产品经理的规则