当前位置: 代码迷 >> Web前端 >> jquery(beginner)-初学JQUERY
  详细解决方案

jquery(beginner)-初学JQUERY

热度:518   发布时间:2012-10-26 10:30:59.0
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,上面也有例子说明

?

  相关解决方案