使用JQuery能做什么(zz)

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 });

来源: http://blog.csdn.net/jiary5201314/article/details/38311809

来自为知笔记(Wiz)

时间: 2024-10-13 00:20:15

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

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

分享一款基于jquery适合做图片类网站的特效.这是一款鼠标经过图片滑动弹出标题效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="common"> <ul> <li class="listbox mr20"> <div class="listimg"> <a href="/"><img src="im

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

//用server端语言赋值给js变量 var departmentId = '<%=提交的值 %>', deviceId='<%=提交的值 %>' $(function () { $.ajax({ url: "deJson.action", type: 'POST', dataType: 'JSON', timeout: 5000, //error: function() {alert('载入数据异常,请重试!');}, success: function (

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

主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: 1 <div class="container"> 2 <div class="side"> 3 4 <div class="front"> 5 <!-- 正面 --> 6 </div> 7 8 <div class="back&qu

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

在过去大约一个月的时间里,我一直在使用JQuery Mobile为一个健身培训网站开发基于HTML5的手机/平板前端应用.我之前曾经写过Android和iOS应用程序(分别用Java和Objective-C),因此只要编写一段基础代码就可以在主流平台上运行并能够快速地用HTML和JavaScript迭代,这样的许诺十分诱人. JQuery Mobile & HTML5 使用HTML5和JavaSript构建一个手机应用,你需要写很多JavaScript代码.然而,带有触摸屏的设备的UI控制和处理

[jQuery] 自做 jQuery Plugin - Part 1

有時候寫 jQuery 時,常會發現一些簡單的效果可以重複利用.只是每次用 Copy & Paste 大法似乎不是件好事,有沒有什麼方法可以讓我們把這些效果用到其他地方呢? 沒錯,就是用 jQuery 的 Plugin 機制. 不過 jQuery 的 Plugin 機制好像很難懂?其實一點也不.以下我用最簡單的方式來為大家解說如何自製一個簡單的 Plugin . 當然在此之前,你得先瞭解 JavaScript 的 class . object . variables scope 還有 anony

jquery weui做的三级联动

1.引入 <link rel="stylesheet" href="/static/mobile/css/weui.min.css"> <link rel="stylesheet" href="/static/mobile/css/jquery-weui.css"> <link rel="stylesheet" href="/static/mobile/css/sty

jquery+bootstrap做一个开关(互斥选择)

知识点:js中的return 不能使js程序停止或者跳出执行,会继续往下执行.要想让js程序停止或者跳出 可以用 return false 就可以了. 代码: <!---------------------------------------------html----------------------------------------------------------------------------------> <!DOCTYPE html><html lang

使用jQuery方法做任务左右栏移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开