jquery(beginner)--初学JQUERY

选择器(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，上面也有例子说明