jQuery Mobile和jQuery的使用简记

jQuery Mobile和jQuery的使用简记

#陈远宏 2015-5-22

一、使用jQuery Mobile和jQuery开发

jQuery Mobile的API

1、data-role

data-role="page";
 //data-*的类别

2、jQuery的开发辅助：map文件

简单说，Source map就是一个信息文件，里面存储着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发这带来了很大方便。
[jQuery的Map文件的用法]

3、SetInterval和SetTimeout

与setInterval和setTimeout不同，如果
setInterval(fn,1000)是无参数调用句柄，则
setInterval(“fn(k)”,1000)则是有参数的调用
而bind方法的原型是：bind(event,[param],fn)，fn不可以带参数。因此需要使用参数的时候，需要使用1、闭包函数调用 2、现场构筑函数调用 3、在[param]中放置参数（对象），然后在fn中使用event.data获得参数

4、jquery Mobile

两大特点：触摸屏优化、响应式设计
1、适用于触摸屏的函数
2、使用标签属性控制样式，jQueryMobile的库与Bootstrap差不多，不是一个函数工具库，而是一个样式库。
3、多次使用media query来控制响应式布局
参考资料：
[jQuery mobile]

二、实现方法

jQuery
除却最基本的个人感觉四种实用的封装以外，对自己所要使用的函数，都亲自去看一下其代码，这样就不会遇到问题就一筹莫展。

2.1 事件绑定

jQuery的事件绑定-bind()、live()、delegate()、on()
参考资料：[jQuery事件绑定]

1.71版本后bind也是使用on来实现的。on()函数的原型：

 on: function( types, selector, data, fn, /*INTERNAL*/ one )//jquery
 $.on( events [, selector ] [, data ], handler )//使用时候的参数

live是专门用于处理新增的DOM元素，使用live()方法可以将方法绑定的效果应用到已存在或者新创建的DOM元素。（1.71后使用delegate进行处理）
on/off方法：以上的事件绑定最后都是调用on方法,比起click等方法，性能优化比较明显。
而最终的js底层处理函数为：

 target.addEventListener(type, listener[, useCapture]);//非IE,useCapture为true时即为capture方式，而非冒泡
 attachEvent();//IE系列

解决问题：

• 并为其封装了对数组对象事件绑定（不用多次绑定）
• 后期生成元素需要重新绑定
• 语法繁杂

参考资料：[jQuery2.0.3源码分析 事件绑定]

2.2 动画效果

jQuery中底层：animate()

 animate: function( prop, speed, easing, callback )

参考文章：[animate简单分析]

2.3 ajax

 $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
 //data: {name:"John",location:"Boston"},
    success: function(msg){
      alert( "Data Saved: " + msg );
    }
 });

type:get\post\delete\put\update（HTTP1.1中，restful）
url：不允许跨域（除非服务器开启了CORS）
data：query string，也可以写成json的形式
success：根据promise规范的回调。
fail：根据promise规范的回调。

底层js函数为：
封装XHR：、open（type\url\data)、、send

'' //XHR创建（IE或非IE）
'' var xhr=new XMLHttpRequest();//ps:IE5\6使用ActiveXObject
'' 
'' //onReadyStateChange的函数,包括回调
'' xmlhttp.onreadystatechange=function()
''   {
''   if (xmlhttp.readyState==4 && xmlhttp.status==200)
''     {
''         document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
''     }
''   }
'' 
'' //open 和 send
'' xmlhttp.open(“GET”,”demo_get.asp",true);（readyState == 0）
'' xmlhttp.send();（readyState == 1）;//如果是post的话，在send（string）可以发送post的data；

2.4 选择器：封装queryAllSelecter

DOM的增删改查：对element和node的方法进行封装
对jQuery对象数组的操作：on和each

$的源代码实现，以及conflict解决。

 jQuery = window.jQuery = window.$ = function(selector, context) { 
 return new jQuery.fn.init(selector, context); 
 };

• 通过检测是否为nodeType或字符串
• 通过字符串判断，如果为\

 document.querySelectorAll();
 document.getElementById();

参考文章：[jQuery选择器源代码分析]

2.5 DOM操作

增删改查、遍历