jquery的一些用法
2017-02-07 21:32:09
1.想要触发某些事件的话,只要把相应的事件写入到
$(document).ready(function() {
// do stuff when DOM is ready
});
中,例如
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});其中的a是指链接,click相当于静态的onclick功能,在jquery中都把on去掉了
这里click里面接一个function就是我们要编辑的事件
2.jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。
为了测试一下这些选择器，我们来试着在我们starterkit.html中选择并修改第一个ordered list.
一开始，我们需要选择这个list本身，这个list有一个ID叫“orderedlist”，通常的javascript写法是document.getElementById("orderedlist").在jQuery中，我们这样做：
$(document).ready(function() {
$("#orderedlist").addClass("red");
});这边的red是在CSS中有定义的class,addclass可以在http://visualjquery.com/的attributesr的
class中看到,,如果要添加到子点中的话可以这样
例子采用的是ol.底下的li
$("#orderedlist > li").addClass("blue");
我们可以做得更复杂点,当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
这边的:last就是起样式切换的设置点(这些特效可以在selectors basic fiters下找到),如果把这个去掉,就会使orderedlist下的所有list都加上这个效果
后面的hover 可以在evernts的interaction helpers下找到,其事件的意思是,当鼠标经过时
与经过后产生的效果,这边hover里有两个函数,第一个表示是鼠标经过过时,添加class绿色
第二个函数表示,离开时,去除这个class效果
3.
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});这边的find做为一个指定条件,$("#orderedlist).find("li") 就像 $("#orderedlist li")一样,在这个例子中, html()用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本
.html()方法是获取对象的html代码，而.html('xxx')是设置'xxx'为对象的html代码
each()这个函数在utilities array and objec operations 下,不过它表示遍历的意思,不过这边的i我不知道怎么增加的,可能默认值是从0
开始,自动增加
4.特定的元素被选择
filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项
$("li").not("[ul]").css("border", "1px solid black");
这个代码选择了所有的li元素，然后去除了没有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li元素例外。
而这边属于not 部分也可以加个CSS如,
$("li").not("[ul]").css("border", "1px solid black").css("color","red");
5.到现在为止，选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素，比如一个FAQ的页面，答案首先会隐藏，当问题点击时，答案显示出来，jQuery代码如下：
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
这里我们用了一些链式表达法来减少代码量，而且看上去更直观更容易理解。像'#faq' 只选择了一次，利用end()方法，第一次find()方法会结束(undone)，所以我们可以接着在后面继续find('dt')，而不需要再写$('#faq').find('dt')。
在点击事件中的，我们用 $(this).next() 来找到dt下面紧接的一个dd元素，这让我们可以快速地选择在被点击问题下面的答案。
（译者Keel注：这个例子真是太酷了，FAQ中的答案可以收缩！从利用next()的思路到实现这些效果都有很多地方需要我们消化，注意 if (answer.is(':visible'))用法，注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档）
发表评论：