学习JQUERY一篇好文章

最新推荐文章于 2024-07-11 20:52:59 发布

aiouwen521

最新推荐文章于 2024-07-11 20:52:59 发布

阅读量456

点赞数

文章标签： jquery function button input class ajax

本文链接：https://blog.csdn.net/aiouwen521/article/details/5853126

版权

http://www.beautycss.org/edu/js/2009-02-11/24.html

这篇指南包括了 hello jquery、基本的selector、event、ajax、FX、以及一些插件。tsABeautyCss.org - 前端教程网

tips：当你看到这篇文章时最好在第一时间看完，不要放到收藏夹里等待将来的某天再翻出来看，往往这一天不会到来。tsABeautyCss.org - 前端教程网

其实在我之前已经有人翻译了这篇文章，但是我觉得翻译得有点粗糙，不易阅读，因此又重新翻译了一下，对我自己也又温习了一下jquery。

OK！出发了

Setup
Hello jQuery
Find me: Using selectors and events //定位
Rate me: Using Ajax //投票
Animate me: Using Effects //动画
Sort me: Using the tablesorter plugin //排序
Plug me: Writing your own plugins //插件
Next steps

Setup（安装）

下载地址：http://docs.jquery.com/Downloading_jQuery
得到jquery.js后，将其包含到目标文件就可以了，就像这样

程序代码

$(document).ready(function() {
// do stuff when DOM is ready
});

当dom都加载完后执行里面的语句，类似于window.onload。
那么载入完成后，我们来做些事情。
程序代码

$(document).ready(function() {
   $("a").click(function() {
     alert("Hello jQuery!");
   });
});

当点击任何一个链接时，都会弹出一个框，里面是什么内容，就不用我说了吧。
我们来品品这几句话，首先是”$()”，这个可以当作一个选择器，里面可以是tagName，比如例子中的”a”，还可以是什么，我们下面再说。
然后是一个click方法，相当于在每一个链接里都加了一句”οnclick=…”，从这里可以看出jQuery的一个很大的优点就是代码和结构分离。

Find me（定位）
我想很多人喜欢jQuery，很大一部分是她方便的定位，也正是这一特性，使得代码和结构分离。
jQuery有两种方法来定位。一种是CSS和XPath，通过传递一个字符串给选择器$，比如’$(”div > ul a”)’；另一种使用了一些methods，比如find。
先来看看第一个：
程序代码

$(document).ready(function() {
$("#orderedlist").addClass("red");
});

注意到了$函数的参数里有一个”#”，这个表示以id来定位，所以这句话将定位到id为orderedlist的dom，然后有一个addClass方法，顾名思义，就是添加一个class，class的名字是red。
下面我们再来添加一些方法给这个元素的下级。
程序代码

$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});

这将选择所有id为orderedlist的li元素，并给它们添加一个blue class。
接着，我们来点复杂的，当鼠标移到上面时addClass，移走时removeClass，但只作用于最后一个li元素。
程序代码

$(document).ready(function() {
   $("#orderedlist li:last").hover(function() {
     $(this).addClass("green");
   },function(){
     $(this).removeClass("green");
   });
});

再来品一品这段代码，我觉得这段代码里最关键的就是这个”,”，这个逗号免去了再写一遍$(”#orderedlist li:last”)的麻烦。this指代的是当前所选的dom。

js中的onxxxx，在jquery中都有相对应的，比如onChange，onSubmit等等。

有了上面的这些已经能做许多事了，再来看看上面说的第二种方法
程序代码

$(document).ready(function() {
   $("#orderedlist").find("li").each(function(i) {
     $(this).append( " BAM! " + i );
   });
});

出现了find方法，这句话的意思还是比较好理解的，定位到id为orderedlist的dom，找到所有的li元素，每一个都添加一个默认函数。
append方法是添加一些文字到所选的dom，所以这些文字会出现在dom的末尾。

如果要在提交form成功后，清空form
程序代码

$(document).ready(function() {
   // use this to reset a single form
   $("#reset").click(function() {
     $("#form").reset();
   });
});

当点击reset后，通过调用reset方法，id为form的表单将会被重置。

如果要使所有的表单都清空，则只需去掉form前面的”#”即可。

如果要从dom中选取一组相似的元素，可以使用filter() 和 not()，filter将只选取符合表达式的元素。而not则正相反。
程序代码

$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});

这段代码的意思是选取所有的li元素（但该li不能包含ul子元素），给它们加上边框。
css方法，前面是属性，后面是值（这只是用法之一）。

更进一步，如果我们要选取所有包含name属性的链接，则可以使用下面这段代码。
程序代码

$(document).ready(function() {
$("a[@name]").background("#eee");
});

很简单吧，通过@指定就行了，如果要指定name为jquery的链接，也很方便，a[@name=jquery]就OK啦。
如果只匹配部分，只需将=改为*=，比如要找到所有包含jquery的name，（匹配jquery plugin、jquery home 等等）a[@name*=jquery]

可以选择parent，比如这段代码
程序代码

$(document).ready(function(){
   $("a").hover(function(){
     $(this).parents("p").addClass("highlight");
   },function(){
     $(this).parents("p").removeClass("highlight");
   });
});

顺便说一句，$(document).ready(callback) 可以缩写成 $(callback)

使用 ajax
这里不使用原来的例子，因为我觉得不是那么容易明白，所以用了jquery官方的例子，edit in place

url：http://docs.jquery.com/Tutorials:Edit_in_Place_with_Ajax

示范1
浏览者能够在他所看的页面的相应位置点击编辑，而无需打开新页面。

demo1：http://15daysofjquery.com/examples/jqueryEditInPlace/divEdit.php
程序代码

$(document).ready(function(){
setClickable();
});

当页面载入完成后，激活setClickable函数。
程序代码

function setClickable() {
$('#editInPlace').click(function(){ ... });
}

这个应该就不用说了吧，设置id为editInPlace的dom的click事件。
程序代码

var textarea = '<div><textarea rows="10" cols="60">' + $(this).html() + '</textarea>';
var button = '<div><input type="button" value="SAVE" class="saveButton" /> or <input type="button" value="CANCEL" class="cancelButton"/></div></div>';
var revert = $(this).html();

这个对应上面的省略号，也就是函数体。分别定义了3个变量，textarea是用来生成编辑框的，$(this).html指代的是原来该dom的内容。button用来生成保存和取消按钮。revert用来相应取消事件。

然后是
程序代码

$(this).after(textarea+button).remove();

after的作用就是在目标dom的后面加上相应的内容，remove就是移去目标内容，所以这里有两步，先是加上编辑框和按钮，然后移去之前的内容。
程序代码

$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});

为两个按钮定义click事件。
程序代码

.mouseover(function() {
   $(this).addClass("editable");
})
.mouseout(function() {
   $(this).removeClass("editable");
});

定义鼠标移入和移走事件。

接着定义saveChanges函数
程序代码

function saveChanges(obj, cancel) { ... }

如果cancle是false的话，那就意味着要保存编辑后的内容
程序代码

if (!cancel) {
   var t = $(obj).parent().siblings(0).val();
   // ...
}

parent()对应的是input外面的div，siblings对应的是相邻的dom，0指的是前面的dom，也就是
程序代码

接下来该来点关键的了
程序代码

$.post("test2.php",{content: t},function(txt){
alert(txt);
});

jquery的ajax方法，.post表示以post方式提交，第一个参数是目标页面，在这里就是”test2.php”，第二个参数是提交的内容，最后是回调函数。txt是服务端传递过来的参数。
程序代码

else {
var t = cancel;
}

如果cancle不为false的话，就执行revert()方法。
程序代码

$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove() ;

移走textarea和button，恢复原状。
最后再调用setClickable方法就可以了，所有的js
程序代码

$(document).ready(function(){
setClickable();
});

function setClickable() {
$('#editInPlace').click(function() {
var textarea = '<div><textarea rows="10" cols="60">'+$(this).html()+'</textarea>';
var button = '<div><input type="button" value="SAVE" class="saveButton" /> or <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
var revert = $(this).html();
$(this).after(textarea+button).remove();
$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});
})
.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
});
};

function saveChanges(obj, cancel) {
if(!cancel) {
var t = $(obj).parent().siblings(0).val();
$.post("test2.php",{
content: t
},function(txt){
alert( txt);
});
}
else {
var t = cancel;
}
if(t=='') t='(click to add text)';
$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove();
setClickable();
}

动画效果
使用show()和hide()方法就能完成简单的动画效果
程序代码

$(document).ready(function(){
   $("a").toggle(function(){
     $(".stuff").hide('slow');
   },function(){
     $(".stuff").show('fast');
   });
});

toggle方法对应点击事件，当点击目标dom时，轮流执行函数。所以上面这段代码的意思是当点击链接时，class名为stuff的dom出现和隐藏的效果交替。

可以通过animate()函数来创建复杂的动画效果。
程序代码

$(document).ready(function(){
   $("a").toggle(function(){
     $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
   },function(){
     $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
   });
});

jquery有一个非常好的插件 interface plugin ，通过它可以创建更多更炫的效果，浏览地址：http://interface.eyecon.ro/

排序：tablesorter 插件
tablesorter 插件可以在客户端排序表格的数据，插件下载地址：http://motherrussia.polyester.se/jquery-plugins/tablesorter/

在载入这个插件的后，可以这么调用它
程序代码

$(document).ready(function(){
$("#large").tableSorter();
})

点击表头，表格的数据就会进行相应的排序
程序代码

$(document).ready(function() {
   $("#large").tableSorter({
     // Class names for striping supplied as a array.
     stripingRowClass: ['odd','even'],
     // Stripe rows on tableSorter init
     stripeRowsOnStartUp: true
   });
});

tablesorter的官方网站可以查看示例和使用方法，浏览地址：http://motherrussia.polyester.se/jquery-plugins/tablesorter/

编写自己的插件
只要照着下面的方法做，那么编写一个插件也是很简单的。
插件名称
给插件命名，这里以”foobar”为例，创建一个jquery.[pluginName].js，比如jquery.foobar.js
添加一个客户端方法
程序代码

jQuery.fn.foobar = function() {
// do something
};

之后就可以这么调用了
程序代码

$(...).foobar();

默认设置
程序代码

jQuery.fn.foobar = function(options) {
   var settings = jQuery.extend({
     value: 5, name: "pete", bar: 655
   }, options);
};

可以直接调用，也可以自己添加参数
程序代码

$("...").foobar({ value: 123, bar: 9 });

说明文档
如果开放自己的插件，那么应该有一个说明文档再配上实例。有了这些基本的概念之后，我们就来写一个小插件

多选框插件

如果将jquery用于form，那么碰到radio和checkboxes时，可能会这么处理
程序代码

$("input[@type='checkbox']").each(function() {
   this.checked = true;
   this.checked = false; // or, to uncheck
   this.checked = !this.checked; // or, to toggle
});

如果嫌麻烦的话，可以写个插件来处理each
程序代码

jQuery.fn.check = function() {
   return this.each(function() {
     this.checked = true;
   });
};

现在就可以这么使用这个插件了
程序代码

$("input[@type='checkbox']").check();

当然也可以为uncheck() 和 toggleCheck()写个插件，但在这里我们作为参数选项来达到这个目的。
程序代码

jQuery.fn.check = function(mode) {
   // if mode is undefined, use 'on' as default
   var mode = mode || 'on';

   return this.each(function() {
     switch(mode) {
       case 'on':
         this.checked = true;
         break;
       case 'off':
         this.checked = false;
         break;
       case 'toggle':
         this.checked = !this.checked;
         break;
     }
   });
};

这样默认就是on，调用的话，就可以这样
程序代码

$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');

可选设置
程序代码

jQuery.fn.rateMe = function(options) {
   // instead of selecting a static container with
   // $("#rating"), we now use the jQuery context
   var container = this;

   var settings = jQuery.extend({
     url: "rate.php"
     // put more defaults here
   }, options);

   // ... rest of the code ...

   // if possible, return "this" to not break the chain
   return this;
});

调用的时候
程序代码

$(...).rateMe({ url: "test.php" });

下一步
如果想更加熟悉或者开发js项目，可以考虑一下firefox的firebug插件

aiouwen521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习JQUERY一篇好文章

<br />http://www.beautycss.org/edu/js/2009-02-11/24.html<br /> <br />这篇指南包括了 hello jquery、基本的selector、event、ajax、FX、以及一些插件。tsABeautyCss.org - 前端教程网<br />tips：当你看到这篇文章时最好在第一时间看完，不要放到收藏夹里等待将来的某天再翻出来看，往往这一天不会到来。tsABeautyCss.org - 前端教程网<br />其实在我之前已经有人翻译了这篇文章，
复制链接

扫一扫