1. 程式人生 > >JQuery —— 新建、新增、新增至某元素、屬性新增、單擊繫結事件

JQuery —— 新建、新增、新增至某元素、屬性新增、單擊繫結事件

$("<nav></nav>"):建立元素

append:向當前元素中新增目標元素

appendTo:向目標元素中添加當前元素

addClass:向當前元素新增"class"屬性

removeClass:刪除當前元素的"class"屬性

attr:向當前元素新增自定義屬性

click:向當前元素新增繫結單擊事件

//解析顯示分頁條
function build_page_nav(result){
	$("#page_nav_area").empty();
	var pageInfo = result.extend.pageInfo;
	var navigatepageNums = pageInfo.navigatepageNums; 
	//page_nav_area
	var ul = $("<ul></ul>").addClass("pagination");
	
	//構建元素
	var filePageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#"));
	var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
	if(pageInfo.hasPreviousPage == false){
		filePageLi.addClass("disabled");
		prePageLi.addClass("disabled");
	}else{
		//為元素新增分頁事件
		filePageLi.click(function(){
			to_page(1);
		});
		prePageLi.click(function(){
			to_page(pageInfo.pageNum-1)
		});
	}
	
	var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
	var lastPageLi = $("<li></li>").append($("<a></a>").append("尾頁").attr("href","#"));
	if(pageInfo.hasNextPage == false){
		nextPageLi.addClass("disabled");
		lastPageLi.addClass("disabled");
	}else{
		nextPageLi.click(function(){
			to_page(pageInfo.pageNum+1);
		});
		lastPageLi.click(function(){
			to_page(pageInfo.pages);
		});
	}
	
	//新增首頁和前一頁的提示
	ul.append(filePageLi).append(prePageLi);
	//1,2,3遍歷給ul新增頁碼提示
	$.each(navigatepageNums,function(index,item){
		
		var numLi = $("<li></li>").append($("<a></a>").append(item));
		if(pageInfo.pageNum == item){
			numLi.addClass("active");
		}
		numLi.click(function(){
			to_page(item);
		});
		ul.append(numLi);
	});
	//新增下一頁和尾頁的提示
	ul.append(nextPageLi).append(lastPageLi);
	
	var navEle = $("<nav></nav>").append(ul);
	navEle.appendTo("#page_nav_area");
}