【js开发的烦恼】

 

作为一个js学习者，在平时的练习与学习中，所不能避免的一件事就是“浏览器兼容”问题。因为实在是让人头痛，所以记忆深刻。在开发中，时常要小心谨慎地测试。就在上次开发的视力app中，就有不兼容的问题，在ubuntu下用开源chrome打开app则会看到那个焦点块飞走了！！真是干瞪眼，白着急。好在有开发利器jQuery,这个集以下作用于一身的工具：

1、弥合浏览器兼容性的中间体

2、众多实用功能的API提供者

3、良好的封装体，利于扩展的平台

有了jQuery可以很方便地选取元素，修改内容，实用AJAX，以及做出非常漂亮的UI。下面一一回顾一下这周所学的jQuery知识点，当然也可以参考jQuery

 

【jquery的选择器】

 

jquery实现了一个非常方便的选择器，其形式如同CSS的选择器一般：

假设页面中有如此一段文档：

 

<form>
<input type="text" id="task">
<input type="submit" id="add_btn">
</form>
 
<ul id="task_list">
    <li>go shopping 7:00 pm</li>
    <li>send email to Mr Chen</li>
</ul>


 

那么如下代码，可以方便地选取列表中元素，然后绑定点击事件。

$('ul#task_list li').bind('click', function(){
        this. addClass();
    });

 说明： $() 是选取符号，可以选取文档对象和集合。例如$(document).ready(); $(this).addClass();

当然该符号也表示对对象进行jQuery的封装，这样就可以调用jQuery库里面的各种函数API了。

再例如下面的代码，将选取task的内容：

$('input:text').attr('value')

然后用该获取的数据赋值或者加工以备使用。可以说jQuery的选择符非常地方便。当然还有find（）、siblings（）查找兄弟节点、next（），prev（），parent（）、children（）等非常有用的API用来选取和过滤元素。还是到用时多翻几次工具书，写过几次便熟悉了。

 

【jQuery的事件绑定方法】

 

一般情况下，我们可以使用DOM的 addEventListener()，delegate()或者click()等函数为文档元素添加事件监视，但是这样做可能会不兼容（IE的可能是attachEvent() ，甚至其他浏览器还有不同的API）.而jQuery 提供了强大的事件API:

bind('事件名'，回调函数); 
$('input:submit').trigger('click');  // 这句模拟触发click事件
jQuery提供非常丰富的事件API: click() , blur(), focus(), mouseout(), mouseover(),hover(函数一，函数二), toggle(函数一，函数二)

 

【jQuery访问内容和属性】

 

jQuery要能方便地读取和修改文档的内容，这样交互起来才让用户觉得其中的体验大大超过查看静态的文档。要访问html文档中的内容可以使用如下的API：

 attr(); // 传入一个参数，获取参数名对应的属性值，可以传入名值对可以设置属性

例如 

attr('id', 'tmpID');
attr(
{title:'helloworld', 
id: 'tmpId'
});
text() // 访问该元素的文本，不含标记
html() // 访问该元素内的html内容，包含标记
append() // 在当前元素的子元素中追加，prepend()为在最首添加。例如 $('ul').prepend('<li>hello</li>');
after()  // 添加到当前元素之后
before() // 添加到当前元素之前
insertAfter() // 将选择集插入到另外一个选择集中之后
wrap() // 包装为元素 wrap('<div></div>');

 

【jQuery的CSS接口】

 

$('div').css('font-size');  // 获取div元素的文字大小css属性
outerWidth() / outerHeight()     // 获取大小 包括

 

【ajax】

 

$.get('xml文件名', 回调函数function($xml){相关操作});   // get xml文档
要传输一些数据，可以在第二个参数作为参数传输到服务器
$.getJSON() // 同上，只不过第一个参数请求的是JSON文件，而function里面也可以对JSON数据直接像对象一样操作
$.load() // 直接加载html文档，同上
$.post() // 使用post方法

使用AJAX可以异步传输数据，所谓异步传输，就是不重新加载整个页面，而是一部分内容进行修改，这样页面就可以动态响应用户的操作。例如一个上传文件功能，按下提交按钮后，则悄悄上传了文件，而不必重新加载整个页面。又如注册的时候异步检测用户名是否已经存在。 

【小结】

另外，jQuery 还有一些非常有用的扩展，例如jQuery UI 还有 移动终端开发HTML5 app的jQTouch。这些工具都很容易上手，往往调用一个API，传入几个参数就可以完成非常复杂的功能。 jQuery所提供的以上功能，能够满足我们的大部分需要，最重要的是使我们免受浏览器兼容之苦，当然以后自己编写jQuery插件的时候，也需要考虑这个问题。有了jQuery开发之后，一些功能变得简单许多，开源的库有的就是这个优点。另外我们的GTD项目，接下来的目标是配合后台PHP打开数据和界面之间的通道。

by bibodeng 2012-10-16

 

 


转载于:https://blog.51cto.com/bibodeng/1031827