JQuery —— 新建、新增、新增至某元素、屬性新增、單擊繫結事件
阿新 • • 發佈:2019-02-01
$("<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"); }