JQuery
离线文档:http://hemin.cn/jq/downloads.html
在线api:http://www.w3school.com.cn/jquery/index.asp http://hemin.cn/jq/index.html
jQuery选择什么版本 1.x? 2.x? 3.x?
目前jQuery有三个大版本:
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)
1.X大版本下,细分版本非常多,各个版本的函数都会有一定的差异。网上看到的很多教程大多是1.x版本的。jquery官方手册:http://api.jquery.com/
维护ie678是意见头疼的事情,一般我们都会额外加载一个css和js单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,电脑端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对ie678的支持。
window.load(function() {}); //当整个页面的所有资源加载完后包括图片、文件…… $(window).load(function() {}); //当页面dom元素加载完后,(当操作图片或文件时尽量使用window而不是document,因为图片加载有延迟) $(document).ready(function() {}); //这是ready的简写 $(function() {});
jQuery实现ready的原理
DOMContentLoaded 二级事件
onload 零级事件
attr 与 prop
两者本质上都是获取或设置元素的属性
但若属性值为boolean值时,尽可能使用prop,否则可能会出现错误
如:获取单选框<input type="checkbox" />是否勾选时,使用attr获取不到值,而使用prop则可以
假设未给元素添加onclick事件,自然也就无法使用e.stopPropagation()阻止冒泡,因此点击时任会冒泡
跳过冒泡解决方法:
事件:
live(type, [data], fn) 性能不好 已弃用
jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。
这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。
.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。但是当层级过深时,层层冒泡影响性能。因此出现了delegate
delegate(selector,[type],[data],fn) 不推荐使用
指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
on(events,[selector],[data],fn)(将普通绑定与delegate合并形成了) 推荐使用
find(expr|obj|ele) 适用场景:查找标签
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
map(callback) 适用场景:在多个元素中提取内容
将一组元素转换成其他数组(不论是否是元素数组)
你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立
jQuery.each(object,[callback])
通用例遍方法,可用于例遍对象和数组。
不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出each 循环可使回调函数返回 false,其它返回值将被忽略。
jQuery.load(url,[data],[callback])
载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。请查看示例。
描述:将网页的头部及底部抽取出来 为head.html footer.html
在页面加载时:
注:该方法可跟回调函数,其内部实现是通过ajax异步请求的方式,因此在使用load加载页面没有完成时是获取不到dom元素的
$("#links").load("head.html",function(){});
$.ajax jsonp例子:
//原地址:http://suggestion.baidu.com/su?wd=test&wd=a $.ajax({ type: "POST", url: "http://suggestion.baidu.com/su?", dataType: "jsonp",//采用jsonp格式 jsonp: "cb", //服务器端接收回调函数的参数 jsonpCallback: "console.log",//自定义回调函数名 data: { "wd": 'a' //传参 }, success: function success(data) { //print("success",data+"111"); } });
jqueryui 自动补全实例:
$("#searchInput").autocomplete({ source : function( request, response ) { $.ajax({ url: "http://suggestion.baidu.com?", dataType: "jsonp", jsonp: "cb", data:{"wd":request.term}, success: function( data ) { response(data.s); } }); }, select : function( event, ui ){ //console.log(ui.item.value) } });
jquery.ajax 部分参数:
$.ajax({ //默认情况下,Ajax请求方式使用GET方法 type:"get|post", //指定服务器返回的数据处理方式,默认情况下将自动根据 HTTP 包 MIME 信息来智能判断 //如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。 //这种情况下,$.ajax()不再返回一个XMLHttpRequest对象,并且也不会传递事件处理函数,比如beforeSend。 dataType:"XML|html|json|jsonp|script|text", //请求地址 url:"", //是否异步,异步:所有的操作都是并行的,完成的顺序没有前后关系 async:true, //默认情况下,请求总会被发出去,但浏览器有可能从他的缓存中调取数据。 //要禁止使用缓存的结果,可以设置cache参数为false。 cache:false, //data选项既可以包含一个查询字符串,比如 key1=value1&key2=value2 //也可以是一个映射,比如 {key1: 'value1', key2: 'value2'} //发送到服务器的数据。将自动转换为请求字符串格式。如上则转换为:&key1=value1&key2=value2 data:"", //data选项传递进来的数据是否转换成一个查询字符串 processData:"true" //当datatype:"jsonp"时有效,指定回调函数的参数名来取代默认的callback jsonp:"callback_replace", //为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。 jsonpCallback:"cb", //当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。 success:function(data,successStr){}, //error 在请求出错时调用。传入XMLHttpRequest对象,错误信息以及一个异常对象(如果有的话) // 通常 textStatus 和 errorThrown 之中,只有一个会包含信息 error :function(xhr, textStatus, errorThrown)}, //发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 //这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。 beforeSend :fucntion(xhr){ this; // 调用本次AJAX请求时传递的options参数 }, //一个额外的"{键:值}"对映射到请求一起发送。此设置被设置之前beforeSend函数被调用; //因此,消息头中的值设置可以在覆盖beforeSend函数范围内的任何设置。 headers:"", //一个mime类型用来覆盖XHR的 MIME类型。 mimeType:"", //用于响应HTTP访问认证请求的用户名 username:"", //用于响应HTTP访问认证请求的密码 password:"", //在请求成功之后调用。传入返回的数据以及"dataType"参数的值。 //并且必须返回新的数据(可能是处理过的)传递给success回调函数。 dataFilter:function(data,type){ var _data = data; return _data; }, //当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。 complete:function(xhr,textStatus){}, //一个以"{字符串:正则表达式}"配对的对象,用来确定jQuery将如何解析响应,给定其内容类型。 contents:"", //这个对象用于设置Ajax相关回调函数的上下文。如下,则success回调函数的上下文(this)为这个DOM元素 context: document.body, //让回调函数内this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数)。 //MIME发送信息至服务器时内容编码类型,默认 application/x-www-form-urlencoded contentType:, //Ajax请求是限时的,所以错误警告被捕获并处理后,可以用来提升用户体验设置请求超时时间(毫秒)。此设置将覆盖全局设置。 //请求超时这个参数通常就保留其默认值,要不就通过jQuery.ajaxSetup来全局设定,很少为特定的请求重新设置timeout选项。 timeout:"", //默认: 取决于数据类型。 //内容类型发送请求头,告诉服务器什么样的响应会接受返回。如果accepts设置需要修改,推荐在$.ajaxSetup()方法中做一次。 accepts:"", //一个数据类型对数据类型转换器的对象。每个转换器的值是一个函数,返回响应的转化值 converters: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}, //(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件, //如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。 global:true, //允许给<script>标签的请求设定一个特定的字符集,用于script或者jsonp类似的数据。 //只有当请求时dataType为"jsonp"或"script",并且type是"GET"才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。 scriptCharset:"utf-8", });