日期:2014-05-16  浏览次数:20328 次

JS框架JQuery初步测试

感觉JQuery比较重要的还是他的选择器, 可以根据ID,标签,元素的层级,相邻关系,以及内容等等各种方式进行元素的查找,还可以对元素添加动态效果。功能还是比较强大。我还下载试用了一个JQuery插件,可以对表格进行排序。

?

下面我测试的代码:

?

?

jQuery(document).ready(function() {
	// do something here
	$("a").click(function(){alert('haha');});   //对所有的a标签点击后弹出警告框。
	$("#orderedlist li").addClass("red");      //给id为orderedlist 的li子标签添加red样式
	$("form[@id]").addClass("red");            //含有id属性的form元素添加red样式
	$("a[@href*=bott]").next().addClass("red");  //连接中含有 bott 的a标签的下一个节点添加red样式
	$("a[@href*=bott]").next().fadeOut("slow");   //...................淡淡消失效果。。
	$("a").bind("click",function(){return false;});   //给a标签邦定click的处理函数
	$("a[@href*=bott]").next().slideToggle("slow"); // 向上滑动消失。
	$.post("test.asp", {rating: "wuwuao"}, function(xml) {   //Ajax测试
			// format result
			/*
			var result = [
				"Thanks for rating, current average: ",
				$("average", xml).text(),
				", number of votes: ",
				$("count", xml).text()
			];
			*/
			// output result
			$("#rating").html(xml);
		} );
	$("table").tablesorter(); 
	$("#large").addClass("tablesorter");     //给表格添加按照字段排序的功能 , 需要引入 JS  <script src="jquery.tablesorter.js" type="text/javascript"></script>
	//还要引入 CSS 样式  <link rel="stylesheet" href="blue/style.css" type="text/css" id="" media="print, projection, screen" />
	//选中 id 为 form 的第一个input标签
	$("#form input:first").val("red");
});

?

?