选择器(selector) 以及 事件(event)
?
?????
????
$(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); });
??
?
这段话的意义是,当页面载入完毕,jquery能加载所有的dom元素,并且选择了一个a标签,封装成jquery object (jquery对象),然后调用jquery object 的click方法,触发了所提供的alert方法。
?? ?addclass 方法
?
?
$(document).ready(function() { $("#orderedlist").addClass("red"); });
?
这段话的意思是,把css中的id选择器封装为jquery对象,并且调用addclass方法来加载class为red的css
?
?? ?find和each方法
?
$(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).html( $(this).html() + " BAM! " + i ); }); });
?这段话的意思是,用FIND找到所有的li标签,然后迭代每一个li,然后完成函数中的操作。
?这里第一个HTML()是获取HTML,而html()是赋值
?
???not和filter方法
?? :has()
?
$(document).ready(function() { $("li").not(":has(ul)").css("border", "1px solid black"); });
?
这段话的意思是,过滤所有的li,把li中不含ul标签的全部加在一个css
not():
filter():
2个方法的区别在于2者正好相反。如果本列,filter就是把含ul标签的加一个css
?
?? end方法
?? slideUp
?? slideDown
?? :visible
?
$(document).ready(function() { $('#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')。
?
hover 方法
?
?
$(document).ready(function() { $("a").hover(function() { $(this).parents("p").addClass("highlight"); }, function() { $(this).parents("p").removeClass("highlight"); }); });
?
highlight是core.css中定义的样式,你也可以改变它,注意这里有第二个function()这是hover方法的特点,请在API文档中查阅hover,上面也有例子说明
?