JQuery笔记

最新推荐文章于 2024-07-14 10:34:53 发布

Samson

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量347

点赞数

分类专栏：学习笔记文章标签： jquery function firefox插件 input html filter

本文链接：https://blog.csdn.net/sunshuxin/article/details/5648250

版权

学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1:jQuery提供两种方式来选择html的elements。
第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；
第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。

2：
第一种方式的几个选择器例子：：
$("#orderedlist").addClass("red");
$("#orderedlist > li").addClass("blue");或$("#orderedlist li").addClass("blue");
$("#orderedlist li:last").removeClass("green");
还有大量的类似的CSS和XPath例子（更多的例子和列表查看：http://docs.jquery.com/Selectors）。

3：
每一个onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等价表示方法（译者Keel注：jQuery不喜欢onXXX，所以都改成了XXX，去掉了on）。其他的一些事件（http://docs.jquery.com/Events），如ready和hover,也提供了相应的方法。
你也可以在Visual jQuery（http://visualjquery.com/）找到全部的事件列表，在Events栏目下。

4：
用这些选择器和事件你已经可以做很多的事情了，但这里有一个更强的好东东！
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});

find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一样。each()方法迭代了所有的li，并可以在此基础上作更多的处理。大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本。

5：重置一个表单的操作：
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});
});
$("form")[0] 相当于 document.forms[0] 。

重置所有表单的操作：
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
  $("form").each(function(){
   this.reset();
  });
});
});

6:
还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。
filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项.
例子1：
$("a[name]").css("background-color","#eee");
//这个代码给所有带有name属性的链接加了一个背景色。

例子2：
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere likes '/content/gallery'
});
//你可能需要选择一个有特点href属性的链接。注：部分匹配("*=")的方式来代替完全匹配("=")：

例子3：
$("li").not("[ul]").css("border", "1px solid black");或是：
$("li").not(":has(ul)").css("border", "1px solid black");
//这个代码选择了所有的li元素，然后去除了有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li元素例外。

7:
<dl id="faq">
<dt>Question1</dt>
<dd>Answer1</dd>
<dt>Question2</dt>
<dd>Answer2</dd>
<dt>Question3</dt>
<dd>Answer3</dd>
</dl>
到现在为止，选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素，比如一个FAQ的页面，答案首先会隐藏，当问题点击时，答案显示出来，jQuery代码如下：

$('#faq').find('dd').hide().end().find('dt').click(function() {
         var answer = $(this).next();
         answer.toggle("slow");
     });
在点击事件中的，我们用 $(this).next() 来找到dt下面紧接的一个dd元素，这让我们可以快速地选择在被点击问题下面的答案。

8:
<p> SUNSHUXIN
<a id="reset" href="#">Reset!</a>
</p>

除了选择同级别的元素外，你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时，它的父级元素--也就是文章的这一段突出显示，试试这个：
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
测试效果可以看到，移到文章某段的链接时，它所在的段全用上highlight样式，移走之后又恢复原样。

9:
更多的AJAX方法可以从这里(http://docs.jquery.com/Ajax) 找到，或者看看API(http://visualjquery.com/)文档下面的AJAX filed under AJAX.

10:
很多不错的效果可以访问interface plugin collection（http://interface.eyecon.ro/）。这个站点提供了很多demos和文档。

11：关于插件（Plagin）
使用tablesorter插件(表格排序)。
<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>
然后可以这样调用:
$(document).ready(function() {
$("#large").tableSorter(); // 其中 large 是一个 table 的 ID。tableSorter()是插件定义的方法，直接调用就行。
});
关于这个插件的更多例子和文档可以在 tablesorter首页（http://motherrussia.polyester.se/jquery-plugins/tablesorter/）找到。
经常更新的插件列表可以从jQuery官方站插件栏（http://jquery.com/plugins/）找到.

12：制作自己的插件
<1>:为你的插件取一个名字,在这个例子里面我们叫它"foobar".
<2>:创建一个像这样的文件:jquery.[yourpluginname].js,比如我们创建一个jquery.foobar.js
<3>:创建一个或更多的插件方法,使用继承jQuery对象的方式,如:
jQuery.fn.foobar = function() {
  // do something
};
好了，再就可以调用它了：$("...").foobar();
一个例子：
$.fn.check = function(mode) {
var mode = mode || 'on'; // if mode is undefined, use 'on' as default
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"参数省略也是可以的,当然也可以加上"on","off", 或 "toggle",如下面的调用方法都可以:
$('input:checkbox').check();
$('input:checkbox').check('on');
$("input[type='checkbox']").check('off');
$("input[type='checkbox']").check('toggle');