本文實(shí)例講述了jQuery實(shí)現(xiàn)動(dòng)態(tài)控制頁面元素的方法。分享給大家供大家參考,具體如下:
網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于成都企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁制作,對(duì)成都橡塑保溫等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)成都網(wǎng)站營銷優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。
背景
最近做了一個(gè)小系統(tǒng),其中需要在頁面對(duì)用戶的好友進(jìn)行增刪改查。本來沒有那么復(fù)雜,用表格形式就可以相對(duì)容易的實(shí)現(xiàn)。
但是考慮到用戶的體驗(yàn)度,首先添加盡量不想用輸入,就采用將所有用戶分類顯示,然后點(diǎn)擊即可添加。
添加的用戶同時(shí)在界面顯示,顯示出用戶當(dāng)前的好友。同時(shí)點(diǎn)擊已經(jīng)添加好的好友可進(jìn)行下一部的業(yè)務(wù)操作。
當(dāng)然,刪除的操作是仿照手機(jī)端那樣,右上角有一個(gè)紅色的“x”,點(diǎn)擊該好友即可刪除。
最后界面還能退出刪除的模式,恢復(fù)正常的模式。
功能說明
1. 添加用戶:在列表中點(diǎn)擊即添加用戶,同時(shí)添加onclick事件
2. 刪除用戶:點(diǎn)擊該好友即可刪除
3. 進(jìn)入刪除模式:將界面改為刪除模式,切換onclick事件
4. 恢復(fù)正常模式:將界面改為正常模式,切換onclick事件
圖片展示

代碼
//添加用戶為自己常用好友
function Add(e) {
var friend_id = e.id;
var name = $("#" + friend_id).html();
//將要插入頁面的好友html代碼
var content = "<div id=\"friend" + friend_id + "\" class=\"case-item\" onclick=\"" + game_type + "(this)\"><div class=\"ih-item circle effect1\"><a href=\"#\"><img class=\"img_wrong\" src=\"image/wrong.png\" style=\"float: right; width: 15px; height: 15px;display:none\" /><div class=\"spinner\"></div><div class=\"img\"><h4 id=\"" + friend_id + "\">" + name + "</h4></div><div class=\"info\"><div class=\"info-back\"><h4 class=\"info-word\">" + info_word + "</h4></div></div></a></div></div>";
//向數(shù)據(jù)庫添加,通過結(jié)果來確定界面顯示
$.ajax({
url: "userlist.aspx/AddFriend",
data: "{'username':'" + $('#username').text() + "','friend_id':'" + friend_id + "'}",
type: 'Post',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
if (result.d == "true") {
$(".case-content").append(content);//數(shù)據(jù)庫添加成功,插入html代碼
}
else {
alert(result.d);
}
},
error: function (err) {
alert("未知錯(cuò)誤");
}
});
}
//刪除好友
function Delete(e) {
var friend_id = e.id;
$.ajax({
url: "userlist.aspx/DeleteFriend",
data: "{'username':'" + $('#username').text() + "','friend_id':'" + friend_id + "'}",
type: 'Post',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
if (result.d == true) {
$("#" + friend_id).remove();//在界面移除好友
}
if (result.d == false) { alert("刪除失敗"); }
},
error: function (err) {
alert("未知錯(cuò)誤");
}
});
}
//重置好友-切換到刪除模式
function ChangeToDelete() {
$(".case-item").removeAttr("onclick");//刪除onclick事件
$(".case-item").attr("onclick", "Delete(this);");//添加新的onclick事件
$(".img_wrong").css("display", "block");//使刪除圖標(biāo)可見
$(".info-word").html("刪除");//改變提示文字
}
//關(guān)閉重置-切換到正常模式
function ChangeToNormal() {
$(".case-item").removeAttr("onclick");//刪除onclick事件
$(".case-item").attr("onclick", "");//添加新的onclick事件
$(".img_wrong").css("display", "none");//使刪除圖標(biāo)不可見
$(".info-word").html(info_back);//恢復(fù)提示文字
}
小結(jié)
這次練習(xí)學(xué)到的內(nèi)容有兩點(diǎn):
1. Ajax和后臺(tái)的交互;
2. JQuery對(duì)頁面元素的屬性控制
最后想說的是,真正有個(gè)需求驅(qū)動(dòng)你的時(shí)候,你會(huì)實(shí)踐很多,學(xué)到很多。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
網(wǎng)站題目:jQuery實(shí)現(xiàn)動(dòng)態(tài)控制頁面元素的方法分析
網(wǎng)址分享:http://chinadenli.net/article12/ggjpdc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、微信小程序、商城網(wǎng)站、App設(shè)計(jì)、網(wǎng)站導(dǎo)航、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)