JQuery使用总结
2010-05-11 18:12
239 查看
###1. filter()和find() 的用法:
首先 我们看.find()方法:
现在有一个页面,里面HTML代码为:
<div class="css">
<p class="rain">测试1</p>
</div>
<div class="rain">
<p>测试2</p>
</div>
如果我们使用find()方法:
var $find = $("div").find(".rain");
alert( $find.html() ) ;
将会输出:
测试1
如果使用filter()方法:
var $filter = $("div").filter(".rain");
alert( $filter.html() );
将会输出:
<p>测试2</p>
也许你已经看出它们的区别了。
find()会在div元素内 寻找 class为rain 的元素。
而filter()则是筛选div的class为rain的元素。
一个是对它的子集操作(find),一个是对自身集合元素筛选(filter)。
另外find()其实还可以用选择器表示:
var $select = $("div .rain");
明白他们的区别了吗?
2:
再举一个例子说明一下.
$("a").filter(".clickme").click(function() { //$("a")指的是所有标签是<a>的对象
alert("click!"); //filter(".clickme")指的是class的属性
}).end().filter(".hideme").click(function() {
$(this).hide();
});
HTML代码为:
<a class="clickme" href="">test</a>
<a class="hideme" href="">test1</a>
###2. 给所有orderedlist中的li都附加了样式"blue"。
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
###3. 当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效。
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});
###4. each()方法迭代了所有的li,大部分的方法,如addClass(), 都可以用它们自己的 each() , i从0开始。
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
###5. jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list,你想要选择所有的没有ul子元素的li元素。
这个代码选择了所有的li元素,然后去除了有ul子元素的li元素。刷新浏览器后,所有的li元素都有了一个边框,
只有ul子元素的那个li元素例外。
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");//原文为$("li").not("[ul]").css("border", "1px solid black");
});
###6.
上面代码中的[expression] 语法是从XPath而来,可以在子元素和属性(elements and attributes)上用作过滤器,比如你可能想选择所有的带有name属性的链接:
这个代码给所有带有name属性的链接加了一个背景色。
$(document).ready(function() {
$("a[name]").css("background-color","#eee");
//原文为“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符号应该去除,background方法被css方法取代
});
更常见的情况是以name来选择链接,你可能需要选择一个有特点href属性的链接,这在不同的浏览器下对href的理解可能会不一致,所以我们的部分匹配("*=")的方式来代替完全匹配("="):
$(document).ready(function() {
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
首先 我们看.find()方法:
现在有一个页面,里面HTML代码为:
<div class="css">
<p class="rain">测试1</p>
</div>
<div class="rain">
<p>测试2</p>
</div>
如果我们使用find()方法:
var $find = $("div").find(".rain");
alert( $find.html() ) ;
将会输出:
测试1
如果使用filter()方法:
var $filter = $("div").filter(".rain");
alert( $filter.html() );
将会输出:
<p>测试2</p>
也许你已经看出它们的区别了。
find()会在div元素内 寻找 class为rain 的元素。
而filter()则是筛选div的class为rain的元素。
一个是对它的子集操作(find),一个是对自身集合元素筛选(filter)。
另外find()其实还可以用选择器表示:
var $select = $("div .rain");
明白他们的区别了吗?
2:
再举一个例子说明一下.
$("a").filter(".clickme").click(function() { //$("a")指的是所有标签是<a>的对象
alert("click!"); //filter(".clickme")指的是class的属性
}).end().filter(".hideme").click(function() {
$(this).hide();
});
HTML代码为:
<a class="clickme" href="">test</a>
<a class="hideme" href="">test1</a>
###2. 给所有orderedlist中的li都附加了样式"blue"。
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
###3. 当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效。
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});
###4. each()方法迭代了所有的li,大部分的方法,如addClass(), 都可以用它们自己的 each() , i从0开始。
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
###5. jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list,你想要选择所有的没有ul子元素的li元素。
这个代码选择了所有的li元素,然后去除了有ul子元素的li元素。刷新浏览器后,所有的li元素都有了一个边框,
只有ul子元素的那个li元素例外。
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");//原文为$("li").not("[ul]").css("border", "1px solid black");
});
###6.
上面代码中的[expression] 语法是从XPath而来,可以在子元素和属性(elements and attributes)上用作过滤器,比如你可能想选择所有的带有name属性的链接:
这个代码给所有带有name属性的链接加了一个背景色。
$(document).ready(function() {
$("a[name]").css("background-color","#eee");
//原文为“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符号应该去除,background方法被css方法取代
});
更常见的情况是以name来选择链接,你可能需要选择一个有特点href属性的链接,这在不同的浏览器下对href的理解可能会不一致,所以我们的部分匹配("*=")的方式来代替完全匹配("="):
$(document).ready(function() {
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
相关文章推荐
- Jquery使用经验总结-事件篇
- jQuery使用总结
- Jquery插件Thickbox的使用总结及自定义设置
- 前端控件之Jquery datetimepicker的使用总结
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的使用方法总结
- JMJS系统总结系列----JMJS中使用到的Jquery工具(四)
- ***jQuery使用总结(原创)
- jQuery使用代码总结
- jquery使用技巧总结
- JQuery使用总结(二)——项目总结
- JQuery使用方法总结
- 使用jquery时一些小技巧的总结
- jQuery插件flexigrid使用总结
- [总结] jQuery的datatable插件 使用 问题
- jQuery使用总结 - Core jQuery 其他 4/4
- jquery.offset()使用方法总结
- JQuery Kendo UI使用技巧总结
- Jquery使用方法的一些总结
- Jquery 使用技巧总结
- jquery 使用的一些总结