通過jQuery的比較來認識AngularJS

2021-09-24 17:34:01 字數 957 閱讀 9120

這一章主要是通過幾個例子分別通過jquery和angularjs來達到效果。主要通過思維轉換來進一步了解angularjs框架設計背後的思想。

首先來看乙個簡單例子,大家可以直接複製貼上**,檢視效果

1.輸入框輸入值 2.下面h1標籤馬上有顯示

下面是jquery**

lang="en"> charset="utf-8"> 輸入測試

下面來看一下angularjs的**

注意上面兩點理論,我們來看一下稍微複雜點的例子,做乙個簡單的購物車.依據angularjs主要關心的是資料的這個特點,我們首先來編寫angularjs相關**,具體效果如下:

ng-controller="cartcontroller" class="panel panel-primary"> class="panel-heading text-center">你的購物車

class="panle-body">

class="table table-bordered table-hover"> ng-repeat="item in items"> class="text-center">ng-bind="item.title">

class="text-center"> type="text" ng-model="item.quantity" class="form-control">

class="text-center">

class="text-center">

type="button" class="btn btn-primary" ng-click="del($index)"> 刪除

colspan="4" class="text-center">總計

jquery通過mouseover來模擬click

今天偶然遇到乙個問題,想通過乙個mouseover操作來模擬click的效果。其實這件事情對於jquery來說並不是乙個難的處理。只是有段時間沒有玩jquery,一些方法快忘掉了 簡單記錄一下吧,方便自己以後溫故。這裡主要採用.hover 方法來實現。code如下 btw,將jquery中.hove...

Jquery通過Ajax方式來提交Form表單

今天剛好看到jquery的ajax提交資料到伺服器的方法,原文是 儲存資料到伺服器,成功時顯示資訊。jquery ajax 後來我就想了一下,我要提交form表單有沒有辦法呢?但是我不可能每個fom的input都寫一次var demo divname val 的.後來,今天我看到乙個方法,就是.ma...

Jquery通過Ajax方式來提交Form表單

今天剛好看到jquery的ajax提交資料到伺服器的方法,原文是 儲存資料到伺服器,成功時顯示資訊。jquery ajax 後來我就想了一下,我要提交form表單有沒有辦法呢?但是我不可能每個fom的input都寫一次var demo divname val 的.後來,今天我看到乙個方法,就是.ma...