jquery獲取并修改觸發(fā)事件的DOM元素示例【基于target 屬性】

更新時間：2019年10月10日 11:28:31 作者：flysnownet

這篇文章主要介紹了jquery獲取并修改觸發(fā)事件的DOM元素,結(jié)合實(shí)例形式分析了jQuery基于target 屬性獲取到觸發(fā)該事件的dom并修改的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jquery獲取并修改觸發(fā)事件的DOM元素。分享給大家供大家參考，具體如下：

需求

當(dāng)點(diǎn)擊關(guān)注后，改變按鈕樣式并顯示取消關(guān)注，如圖

實(shí)現(xiàn)

利用jQuery的 target獲取到觸發(fā)該事件的dom,然后修改它

target 屬性

代碼：

HTML

<div class="people-desc">
<div class="people-name">{$vo['nickname']}</div>
<div class="people-state" οnclick="toFollow({$vo['follow_user_id']})">+關(guān)注</div>
</div>

function toFollow(follow_user_id) {
    console.log(event);
    var toUrl = "{:url('index/follow/toFollow')}";
    var postData = {follow_user_id:follow_user_id};
    $.post(
      toUrl,
      postData,
      function (result) {
        if(result.code == 0){
          target.outerHTML = "<div class=\"people-state active\" οnclick=\"toFollow("+follow_user_id+")\">取消關(guān)注</div>";
        }else{
          //失敗
          layer.msg(result.msg);
        }
      },"JSON");
}

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery學(xué)習(xí)總結(jié)之jQuery事件
今天總結(jié)一下jQuery事件，這是比較重要的一塊，希望本次總結(jié)能幫助到很多同我一樣的新手
2014-06-06
jQuery查找節(jié)點(diǎn)方法完整實(shí)例
這篇文章主要介紹了jQuery查找節(jié)點(diǎn)方法,結(jié)合完整實(shí)例形式分析了jQuery針對DOM節(jié)點(diǎn)屬性的相關(guān)操作技巧,需要的朋友可以參考下
2016-09-09
jQuery實(shí)現(xiàn)點(diǎn)擊滾動到指定元素上的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊滾動到指定元素上的方法,結(jié)合實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素屬性的相關(guān)相關(guān)使用技巧,需要的朋友可以參考下
2020-03-03
jQuery 跨域訪問問題解決方法
瀏覽器端跨域訪問一直是個問題, 多數(shù)研發(fā)人員對待js的態(tài)度都是好了傷疤忘了疼,所以病發(fā)的時候,時不時地都要疼上一疼.記得很久以前使用iframe 加script domain 聲明,yahoo js util 的方式解決二級域名跨域訪問的問題.
2009-12-12
jQuery基于擴(kuò)展簡單實(shí)現(xiàn)倒計時功能的方法
這篇文章主要介紹了jQuery基于擴(kuò)展簡單實(shí)現(xiàn)倒計時功能的方法,涉及jQuery擴(kuò)展與回調(diào)函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下
2016-05-05
jQuery實(shí)現(xiàn)統(tǒng)計復(fù)選框選中數(shù)量
這里給大家分享一段jQuery實(shí)現(xiàn)的統(tǒng)計復(fù)選框選中數(shù)量的代碼，非常的實(shí)用，有需要的小伙伴們請帶走！
2014-11-11
jquery的attr方法禁用表單元素禁用輸入內(nèi)容
這篇文章主要介紹了通過jquery的attr方法來禁用表單元素禁輸入內(nèi)容，示例如下，需要的朋友可以參考參考
2014-06-06
jquery.validate使用攻略第一部
好幾年不寫JS了，資料整理起來比較慢，格式也有點(diǎn)亂
2010-07-07
讓人期待的2011年度最佳 jQuery 插件分享
國外著名博客WDL發(fā)布了2011年度最佳 jQuery 插件。jQuery 自2006年發(fā)布以來，經(jīng)過五年的迅速發(fā)展，目前已是最流行和使用最廣泛的 JavaScript 框架
2012-03-03
JQuery和HTML5 Canvas實(shí)現(xiàn)彈幕效果
這篇文章主要介紹了JQuery和HTML5 Canvas兩種方法實(shí)現(xiàn)彈幕效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01