jQuery库为Web脚本编程提供了通用(跨浏览器)的抽象层,使得它几乎适用于任何脚本编程的情形。jQuery通常能为我们提供以下功能:

1.方便快捷获取DOM元素

  如果使用纯JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码,而使用jQuery只需要一行代码就足够了。例如,找到所有应用了.content class样式的div中所有的P标签,只需要下面的一行代码:

1 $('div.content').find('p');

2.动态修改页面样式

  使用jQuery我们可以动态的修改页面的CSS即使在页面呈现以后。jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。例如,找到页面所有的ul标签的第一个li子标签,然后为它们增加名为active的样式,代码如下:

1 $('ul > li:first').addClass('active');

3.动态改变DOM内容

  使用jQuery我们可以很容易地对页面DOM进行修改,例如,为ID为"container"的元素添加一个链接:

1 $('#container').append('<a href="more.html">more</a>');

4.响应用户的交互操作

  jQuery提供了截获形形色色的页面事件(比如用户单击某个链接)的适当方式,而不需要使用事件处理程序拆散HTML代码。此外,它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。

1 $('button.show-details').click(function() {
2 $('div.details').show();
3 });

上面的代码表示:为使用的.show-details样式的button元素添加一个click事件,事件就是:显示使用.details样式的DIV。

5.为页面添加动态效果

  jQuery中内置的一批淡入、擦除之类的效果,以及制作新效果的工具包,为此提供了便利。

1    $(function () {
2 $("#btnShow").click(function () {
3 $("#msubject").hide("slow");
4 });
5 });

6.统一Ajax操作

  jQuery统一了多种浏览器的Ajax操作,使得开发人员更多的专注服务器端开发。

1 function (data, type) {
2 // 对Ajax返回的原始数据进行预处理3 return data // 返回处理后的数据4 }

7.简化常见的JavaScript任务。

  除了这些完全针对文档的特性之外,jQuery也改进了对基本的JavaScript数据结构(例如迭代和数组操作等)。

1 $.each(obj, function(key, value) {
2 total += value;
3 });

使用JQuery能做什么(zz)的更多相关文章

  1. [转]Spring3 MVC + jQuery easyUI 做的ajax版本用户管理

    原文地址:http://www.iteye.com/topic/1081739 上周写了篇基于spring3.0.5 mvc 简单用户管理实例 ( http://www.iteye.com/topic ...

  2. 利用 XPath-jQuery 集锦手册在 XPath 和 jQuery 之间做选择

    利用 XPath-jQuery 集锦手册在 XPath 和 jQuery 之间做选择 利用 XPath-jQuery 集锦手册在 XPath 和 jQuery 之间做选择

  3. 利用jquery+iframe做一个ajax上传效果

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  4. 基于jQuery适合做图片类网站的特效

    分享一款基于jquery适合做图片类网站的特效.这是一款鼠标经过图片滑动弹出标题效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="c ...

  5. 用jquery ajax做的select菜单,选中的效果

    //用server端语言赋值给js变量     var departmentId = '<%=提交的值 %>', deviceId='<%=提交的值 %>'     $(fun ...

  6. 用jQuery Mobile做HTML5移动应用的三个优缺点

    JQuery Mobile 和 HTML5 的 3个优点 1. 上手迅速并支持快速迭代:在一个星期多一点的时间里,通过阅读JQuery Mobile文档以及O’Reilly出版的JQuery Mobi ...

  7. [jQuery] 自做 jQuery Plugin - Part 1

    有時候寫 jQuery 時,常會發現一些簡單的效果可以重複利用.只是每次用 Copy & Paste 大法似乎不是件好事,有沒有什麼方法可以讓我們把這些效果用到其他地方呢? 沒錯,就是用 jQ ...

  8. 使用jquery.validation+jquery.poshytip做表单验证--未完待续

    jqueryValidate的具体使用方法很多,这里就不在赘述,这一次只谈一下怎样简单的实现表单验证. 整片文章目的,通过JQvalidation按表单属性配置规则验证,并将验证结果通过poshyti ...

  9. css3+jquery+js做的翻翻乐小游戏

    主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: <div class="container& ...

随机推荐

  1. QA:Failed to deploy artifacts from/to snapshots XX Failed to transfer file Return code is: 405, ReasonPhrase:Method Not Allowed.

    QA: Failed to deploy artifacts from/to snapshots XX Failed to transfer file Return code is: 405, Rea ...

  2. javascripts 实习自动提交表单 onsubmit

    html: <form id="formwb" onsubmit="return setPassword();"> <script> d ...

  3. mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案

    本人开发项目时,在从一个服务器导出数据库到另一服务器时,存储过程中,报Incorrect DECIMAL value: '0' for column '' at row -1错误. 原因: 存储过程中 ...

  4. .NET 分页

    .net分页 1.存储过程create procedure 存储过程名( @pageIndex int,                         //第几页 @pageSize int     ...

  5. shell读取文件每一行的方式

    1.使用read命令读取一行数据 while read myline do echo "LINE:"$myline done < datafile.txt 2.使用read命 ...

  6. Java之美[从菜鸟到高手演变]之JVM内存管理及垃圾回收

    很多Java面试的时候,都会问到有关Java垃圾回收的问题,提到垃圾回收肯定要涉及到JVM内存管理机制,Java语言的执行效率一直被C.C++程序员所嘲笑,其实,事实就是这样,Java在执行效率方面确 ...

  7. Java语言中的基本词汇

    1.标识符包.类.方法.参数和变量的名称.大小写字母.数字._和$符号的组合,不以数字开始,不能使关键字,不能包括分隔符和换行.(严格区分大小写,最大长度255个字符) 2.字面量  某种类型的值(具 ...

  8. MIT jos 6.828 Fall 2014 训练记录(lab 1)

    注: 源代码参见我的github:https://github.com/YaoZengzeng/jos Part 1: PC Bootstrap +------------------+ <- ...

  9. selenium获取html的表格单元格数据

    获取网页的表格的某个单元格的值,思路: 1.获取表格 2.获取表格的所有行 3.根据某一行获取该行的所有列 4.根据某一列获得该行该列的单元格值 根据以上思路,可以知道,只需要行.列就可以得到单元格的 ...

  10. Linux (二) vi

    1  步骤 1)  vi  test.txt 进入一般模式 2)   i    进入编辑模式,输入内容 3)  Esc 回到一般模式 4)  :wq 存储后退出 2  编辑模式 [i] 光标处插入, ...