快捷導(dǎo)航

jquery,js簡(jiǎn)單實(shí)現(xiàn)類似Angular.js雙向綁定

更新時(shí)間：2017年01月13日 08:53:54 作者：carry~MF

本文主要介紹了jquery,js簡(jiǎn)單實(shí)現(xiàn)類似Angular.js雙向綁定的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧

剛了解了下Angular.js，發(fā)現(xiàn)Angular.js綁定數(shù)據(jù)方面非常方便，套下教程demo:

<div ng-app="myApp" ng-controller="myCtrl">
  名字: <input ng-model="name">
 <h1>你輸入了: {{name}}</h1>
</div>

我就想著，使用jq/js怎么實(shí)現(xiàn)類似的效果，后來(lái)找找，發(fā)現(xiàn)使用propertychange可以實(shí)現(xiàn)。

JQ：

<div class="wrap">
    <textarea></textarea>
    <div class="miss"></div>
 </div>

 $('textarea').on('input propertychange', function() {
   $('.miss').html($(this).val().length + "~"+$(this).val());
 });

JS:

var txt = document.querySelector("textarea"),
    msg = document.querySelector(".miss");
  //不兼容IE8 以下
  txt.addEventListener("input",function () {
    msg.innerHTML = this.value + "~"+this.value.length;
  },false)

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)列表的全選功能
本文給大家分享的是使用jquery實(shí)現(xiàn)的全選刪除插件的代碼，非常的實(shí)用，本文示例是結(jié)合的ThinkPHP,小伙伴們可以自由擴(kuò)展。
2015-03-03
用jquery實(shí)現(xiàn)點(diǎn)擊欄目背景色改變
用jquery如何實(shí)現(xiàn)點(diǎn)擊一欄目實(shí)現(xiàn)欄目變色，再點(diǎn)擊另一欄目也變色，但原來(lái)的變回原色,本文提供解決方法，需要了解的朋友可以參考下
2012-12-12
jQuery實(shí)現(xiàn)自動(dòng)滾動(dòng)到頁(yè)面頂端的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)滾動(dòng)到頁(yè)面頂端的方法,涉及jQuery針對(duì)頁(yè)面操作的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
jQuery中add實(shí)現(xiàn)同時(shí)選擇兩個(gè)id對(duì)象
jquery同時(shí)選擇兩個(gè)id對(duì)象的時(shí)候，可以用add來(lái)實(shí)現(xiàn)。
2010-10-10
用jquery等比例控制圖片寬高的具體實(shí)現(xiàn)
控制圖片寬高的方法有很多，下面為大家介紹下使用jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以學(xué)習(xí)下
2014-01-01
jQuery實(shí)現(xiàn)左右兩個(gè)列表框的內(nèi)容相互移動(dòng)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)左右兩個(gè)列表框的內(nèi)容相互移動(dòng)功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-01-01
jquery輪播的實(shí)現(xiàn)方式附完整實(shí)例
這篇文章主要介紹了jquery輪播的實(shí)現(xiàn)方式，文中分享了jQuery輪播完整實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07
js制作帶有遮罩彈出層實(shí)現(xiàn)登錄注冊(cè)表單特效代碼分享
這篇文章主要為大家詳細(xì)介紹了js制作帶有遮罩彈出層實(shí)現(xiàn)登錄注冊(cè)表單代碼特效，推薦給大家，有需要的小伙伴可以參考下。
2015-09-09
jQuery模擬超鏈接點(diǎn)擊效果代碼
本文將為大家介紹下jQuery模擬超鏈接點(diǎn)擊效果實(shí)現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助
2013-04-04
jQuery中l(wèi)ive方法的重復(fù)綁定說(shuō)明
使用jQuery的live()方法綁定事件，有時(shí)會(huì)出現(xiàn)重復(fù)綁定的情況，如，當(dāng)點(diǎn)擊一個(gè)按鈕時(shí)，此按鈕所綁定的事件會(huì)并執(zhí)行n遍
2011-10-10