JQuery —— 新建、添加、添加至某元素、属性添加、单击绑定事件

本文介绍了一种使用jQuery构建分页导航栏的方法。通过解析页面信息并生成相应的HTML元素，实现首页、上一页、下一页及跳转等功能，并对当前页进行高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$("<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");
}