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

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

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

剛了解了下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)類似的效果，后來找找，發(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)

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

您可能感興趣的文章:

相關(guān)文章

jQuery選擇器特殊字符與屬性空格問題
這篇文章主要介紹了jQuery選擇器特殊字符與屬性空格問題。通過選擇器中含有特殊符號的注意事項和選擇器中含有空格的注意事項詳細(xì)介紹了解決問題的辦法,需要的朋友可以參考下
2017-08-08
jQuery實(shí)現(xiàn)網(wǎng)頁頂部固定導(dǎo)航效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)網(wǎng)頁頂部固定導(dǎo)航效果代碼,涉及jQuery響應(yīng)scroll事件動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下
2015-12-12
jquery實(shí)現(xiàn)簡單Tab切換菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單Tab切換菜單效果的相關(guān)資料,需要的朋友可以參考下
2016-06-06
jquery分割字符串的方法
這篇文章主要介紹了jquery分割字符串的方法,涉及jQuery中使用split方法進(jìn)行字符串分割的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
JQuery 確定css方框模型（盒模型Box Model）
做過前臺設(shè)置的都知道css存在兩種盒模型，W3C標(biāo)準(zhǔn)的方框模型和IE瀏覽器的方框模型。除IE以外的大多數(shù)瀏覽器只支持W3C方框模型。IE瀏覽器能夠根據(jù)頁面的呈現(xiàn)模式的定義而是用對性的方框模式。已用哪中呈現(xiàn)的模式取決于頁面上的DOCTYPE的聲明。
2010-01-01
jQuery+jqmodal彈出窗口實(shí)現(xiàn)代碼分明
jQuery+jqmodal彈出窗口的制作方法，需要的朋友可以參考下。
2010-06-06
jQuery實(shí)現(xiàn)帶動畫效果的多級下拉菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶動畫效果的多級下拉菜單代碼,可實(shí)現(xiàn)點(diǎn)擊漸隱漸顯效果,涉及jQuery頁面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
jquery簡單實(shí)現(xiàn)滾動條下拉DIV固定在頭部不動
滾動條下拉DIV固定在頭部不動效果，想必很多的朋友都有見到過吧，下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下
2013-11-11
jquery自定義函數(shù)的多種方法
在jquery中自定義函數(shù)你會嗎？今天抽時間寫了幾個，個人感覺還不錯，喜歡的朋友可以了解下
2014-01-01
jQuery樣式操作方法整理介紹
這篇文章主要介紹了jQuery樣式操作方法，并通過實(shí)際案例更淺顯的理解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-10-10