jquery 常用操作整理 基础入门篇

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。
　　jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
　　它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
　　jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
　　jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
　　jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
　　Jquery是继prototype之后又一个优秀的Javascrīpt框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像ruby.实际上我比较喜欢java（少接触Ruby 罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。
一，找到你了！
　　还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的：
　　代码


代码如下:

　　var someElement = $("#myId");

　　看起来比其他两个框架的要多了一个#，好，看看下面的用法：
　　代码


代码如下:

　　$("div p"); // (1)
　　$("div.container"); // (2)
　　$("div #msg"); // (3)
　　$("table a",context); // (4)

　　在prototype里看过这样的写法吗？第一行代码得到所有标签下的P元素。第二行代码得到class 为container的元素,第三行代码得到标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。
　　如果你熟悉CSS，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。
二，Jquery对象？
　　jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）：
　　代码


代码如下:

　　var a = $("#cid");
　　var b = $("hello");
　　var c = document.createElement("table");
　　var tb = $©;

三，代替body标签的onload
　　这个惯例，也许是除了$()之外，用得最多的地方了。下面一段代码：
　　代码


代码如下:

　　$(document).ready(function(){
　　alert("hello");
　　});(1)
　　<body onload="alert('hello');">（2）

　　上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即$(document).ready (fn)可以在一个页面中重复出现，而不会冲突。基本上Jqeury的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起 来，在初始化时不会发生冲突。
　　不管怎么说，这个惯例可以分离javascrīpt与HTML。推荐使用。
四，事件机制
　　我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascrīpt代码与html代码分离，保持HTML的清洁，还可以很轻松地绑定事件，甚至你可以不知道“事件”这个名词。
　　代码


代码如下:

　　$(document).ready(function(){
　　$("#clear").click(function(){
　　alert("i am about to clear the table");
　　});
　　$("form[0]").submit(validate);
　　});
　　function validate(){
　　//do some form validation
　　}

五，同一函数实现set
　　代码


代码如下:

　　$("#msg").html();
　　$("#msg").html("hello");

　　上面两行代码，调用了同样的函数。但结果却差别很大。
　　第一行是返回指定元素的HTML值，第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。
六，ajax
　　这是一个ajax横行的时代。多少人，了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常
　　代码


代码如下:

　　$.get("search.do",{id:1},rend);
　　function rend(xml){
　　alert(xml);
　　} (1)
　　$.post("search.do",{id:1},rend);
　　function rend(xml){
　　alert(xml);
　　} (2)
　　$("#msg").ajaxStart(function(){
　　this.html("正在加载。。。。");
　　});(3)
　　$("#msg").ajaxSuccess(function(){
　　this.html("加载完成！");
　　});(4)

　　这些都是较常用的方法，get和post用法一样。第一个参数是异步请求的url，第二个为参数，第三个回调方法。
　　3，4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然，jquery的AJAX相关的函数不仅是这些，有兴趣可以去研究再多。
七，渐入淡出
　　代码


代码如下:

　　$("#msg").fadeIn("fast");
　　$("#msg").fadeOut("slow");

　　没错，上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条，用jquery就那么简单。两个函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。
八，plugin
　　这也是一个插件的时代。
　　jquery插件给我的感觉清一色的清洁，简单。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好，很精彩的插件。
　　写得很烂。可能大家看不出jquery的好处。嗯，光听是没用的，试用一下吧。你会发觉很有趣。
　　暂时告一段落吧。待有新的发现再来分享。
　　加一些Jquery的资源：
　　http://www.visualjquery.com/index.xml 很好的API查询站点
　　http://jquery.com/demo/thickbox/ 知道lightBox吧，看看Jquery是怎样实现相同的东西
　　http://jquery.com/plugins/ 很多牛的插件。
　　http://15daysofjquery.com/jquery 的15天教程
　　http://jquery.org.cn/visual/cn/index.xml //不错的JQUERY 中文学习 推荐
　　jquery来源
　　jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。
　　jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
　　它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
　　jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
　　jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
　　jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
　　jQuery的最新release版本是1.3.2。
　　官方下载地址为：http://code.google.com/p/jqueryjs/downloads/list
　　微软的visual studio 2008 sp1支持对jquery的动态提示，只要在代码页导入对应的vsdoc脚本就可以

赞 (0)

相关推荐

  • 基于jquery封装的一个js分页

    复制代码 代码如下: (function ($) { var PageFunc = function PageFunc() { } $.PageFunc = function (Total, PageSize, curPageNum, FunUrl) { if (PageSize == "" || PageSize == null || PageSize == undefined) { PageSize = 10; } if (curPageNum == "" ||

  • Jquery封装tab自动切换效果的具体实现

    今天我这边网速真是太慢了,打开一个网页要等待很久,但是还是想写篇文章----tab自动切换 因为工作中经常会碰到这样的问题 所以写博客也是总结下 最重要的是能分享下 及以后碰到类似的可以参考下! 当然这是我用Jquery来封装的 页面可以调用多次 调用方式                new tabSlider(obj,count); obj指容器最外层ID,count指有多个li 当然要引用我这个js的话 一定要按照我结构来写!下面的是我的HTML一些结构如下: 复制代码 代码如下: <di

  • jQuery常用操作方法及常用函数总结

    一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName("") $("#ID") //取单个控件document.getElementById("") $("div #ID") //取某个控件中 控件 $("#ID #ID") // 通过控件ID取其中的控件 $(

  • 分享jQuery封装好的一些常用操作

    1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 $(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($('input.text

  • jquery数组封装使用方法分享(jquery数组遍历)

    $.each(array, [callback]) 遍历 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 使用方法如下: 复制代码 代码如

  • jquery 常用操作方法

    操作下拉列表 添加选项列表 $(this).get(0).options.add(new Option(text,value)); 清空列表 $(this).get(0).options.length=0; 删除指定索引的选项 $(this).get(0).remove(index); 设定需要选中项的值 $(this).get(0).value=value; 获取当前选中选项的文本 $(this).get(0).options[index].text; 批量修改CSS $(this).css(

  • JQuery 常用操作代码

    //遍历option和添加.移除option function changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[@name=ISHIPTYPE] option").each(function(){ if($(this).val() == 111){ $(thi

  • 对Jquery中的ajax再封装,简化操作示例

    复制代码 代码如下: <!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>    <title>jQueryAja

  • jquery常用操作小结

    页面load方法 $().ready(function() { }) div隐藏操作 // div是否隐藏 function isHideMenu(){ return $("#menuContent").is(":hidden") } // 隐藏div mainFrameset.hide(); // 显示div mainFrameset.show(); 获取对象 //通过id获得 $("#menuContent"); //通过class获得 $(

  • jquery 常用操作整理 基础入门篇

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情. 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, S

  • java基础之数组常用操作总结(必看篇)

    java基础之数组常用操作总结(必看篇)

    常用的对数组进行的操作 1.求数组中最大值,最小值 思路:假设下标为0的元素是最大值,遍历数组,依次跟max进行比较,如果有元素比这个max还大,则把这个值赋给max.最小值同样 public class TestArray{ public static void main(String[] args){ int[] arr={23,45,234,576,34,87,34,12,67}; int max=arr[0]; int min=arr[0]; for(int i=0;i<arr.leng

  • jQuery 常用代码集锦(必看篇)

    1. 选择或者不选页面上全部复选框 var tog = false; // or true if they are checked on load $('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog; }); 2. 取得鼠标的X和Y坐标 $(document).mousemove(function(e){ $(document).ready(func

  • C++基础入门篇之强制转换

    引言 假设有基类 A,包含了虚函数 func1,以及有派生类 B,继承于类 A,派生类 B 中实现了函数 func1.此时可以用 A 类型的指针指向 B 类型的对象,并用 A 类型的指针调用 B 类型对象中的函数 func1.这时,就形成了多态.包含虚函数的类 A,我们也称为多态类. 由于派生类 B 完整包含了 基类 A 的所有定义,将 B 类型的指针转换为 A 类型的指针总是安全的. 而将 A 类型的指针强制转换为 B 类型的指针时,如果 A 类型指针指向的对象确实为 B 类型的对象,那么转换

  • 零基础入门篇之Linux及Arm-Linux程序开发笔记

    零基础入门篇之Linux及Arm-Linux程序开发笔记

    前言:本文记录了自己从一个完全不懂Linux的人如何一步步学会Linux程序开发的过程.当然也希望本文能够达到它的目的,让那些和我一样没有任何基础的人也能快速入门Linux程序开发. 一.Arm-Linux程序开发平台简要介绍 Arm-Linux程序的开发并不像我们以前接触的Windows程序开发那样,关于平台的搭建就繁琐很多,所以在正式进入程序开发之前先对这种开发模式进行简要介绍,让一个即使没有任何Linux开发经验的程序员也能够看懂后面的内容. 1.1程序开发所需系统及开发语言 开发arm-

  • iOS开发中UIImageView控件的常用操作整理

    iOS开发中UIImageView控件的常用操作整理

    UIImageView,顾名思义,是用来放置图片的.使用Interface Builder设计界面时,当然可以直接将控件拖进去并设置相关属性,这就不说了,这里讲的是用代码. 1.创建一个UIImageView: 创建一个UIImageView对象有五种方法: 复制代码 代码如下: UIImageView *imageView1 = [[UIImageView alloc] init]; UIImageView *imageView2 = [[UIImageView alloc] initWith

  • 教大家8天学通MongoDB——第一天 基础入门篇

    教大家8天学通MongoDB——第一天 基础入门篇

    关于mongodb的好处,优点之类的这里就不说了,唯一要讲的一点就是mongodb中有三元素:数据库,集合,文档,其中"集合" 就是对应关系数据库中的"表","文档"对应"行". 一: 下载 上MongoDB官网 ,我们发现有32bit和64bit,这个就要看你系统了,不过这里有两点注意: ①:根据业界规则,偶数为"稳定版"(如:1.6.X,1.8.X),奇数为"开发版"(如:1.7.X

  • Java基础入门篇——While循环

    循环结构分两大类,一类是当型,一类是直到型. 当型: 当布尔值表达式条件为True时,反复执行某语句,当布尔表达式的值为False时才停止循环,例如:while 与 for循环. 直到型: 先执行某语句,在判断布尔表达式,如果为true,再执行某语句,如此反复,直到布尔表达式条件为false时才停止循环,例如do - while循环. 语法结构: while (布尔表达式) { 循环体; } 一.循环结构语句 1.在我们实际生活中经常会把同一件事情重复做好几次.例如:潮汕人喜欢喝茶,只要在喝茶的

随机推荐