jQuery+Ajax+Bootstrap學習乾貨（二）

這裡對jQuery中的一些實際運用的例子再進行講解一下，然後再簡單的說一下關於Ajax這個方面的應用，還有一個前端框架Bootstrap的使用！！！都比較基礎，想了解的可以進行更深入的學習哦！！

jQuery的例項運用

（1）jQuery實現下拉列表選項

<title>下拉列表左右選擇</title>
<scripttype="text/javascript"src="../js/jquery-1.8.3.js"></script>
<script>
$(function(){
/*1.選中單擊去右邊*/
$("#selectOneToRight").click(function(){
$("#left option:selected").appendTo($("#right"));
});
/*2.單擊全部去右邊*/
$("#selectAllToRight").click(function(){
$("#left option").appendTo($("#right"));
});
/*3.選中雙擊去右邊*/
$("#left option").dblclick(function(){
$("#left option:selected").appendTo($("#right"));
});
});
</script>

<body>
<tableborder

="1"width="600"align="center">
<tr>
<td>
分類名稱
</td>
<td>
<inputtype="text"name="cname"value="手機數碼"/>
</td>
</tr>
<tr>
<td>
分類描述
</td>
<td>
<textareaname="cdesc"rows="4"cols="20">手機數碼類商品</textarea>
</td>
</tr>
<tr>
<td>
分類商品
</td>
<td>
<spanstyle="float: left;">
<fontcolor="green"face="宋體">已有商品</font><br/>
<selectmultiple="multiple"style="width: 100px;height: 200px;"id="left">
<option>IPhone6s</option>
<option>小米4</option>
<option>錘子T2</option>
</select>
<p><ahref="#"style="padding-left: 20px;"id="selectOneToRight">>></a></p>
<p><ahref="#"style="padding-left: 20px;"id="selectAllToRight">>>></a></p>
</span>
<spanstyle="float: right;">
<fontcolor="red"face="宋體">未有商品</font><br/>
<selectmultiple="multiple"style="width: 100px;height: 200px;"id="right">
<option>三星Note3</option>
<option>華為6s</option>
</select>
<p><ahref="#"><<</a></p

相關推薦

jQuery+Ajax+Bootstrap學習乾貨（二）

這裡對jQuery中的一些實際運用的例子再進行講解一下，然後再簡單的說一下關於Ajax這個方面的應用，還有一個前端框架Bootstrap的使用！！！都比較基礎，想了解的可以進行更深入的學習哦！！ jQuery的例項運用（1）jQuery實現下拉列表選項

Bootstrap學習筆記（二） table表格&表單

1.表格標準格式： <table> <caption>...</caption> <thead> <tr>

bootstrap 學習之（二）------ 排版

1.標題 Bootstrap 中定義了所有的 HTML 標題（h1 到 h6）的樣式。 2.內聯子標題如果需要向任何標題新增一個內聯子標題，只需要簡單地在元素兩旁新增 <small>，或者新增 .small class，這樣子您就能得到一個字號更小的顏色更

關於“自適應學習”，你不能錯過的乾貨（二）

圖片來源：pixabay本期話題：自適應評估：將測驗和評分提升到新的階段>>自適應評估的定義一直以來，測驗都被認為是檢測學生學習成果最有效的方式。因此，各學科的相關測試和測試反饋，也成為了教育教學上的重點。傳統意義上測評中，題目都是提前準備好的，所有學生在同一時間

JQuery學習筆記（二）——選擇器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-

php laravel框架學習筆記（二）數據庫操作

true 數據 mar sql show top 一行 ati del 原博客鏈接：http://www.cnblogs.com/bitch1319453/p/6810492.html mysql基本配置你可用通過配置環境變量，使用cmd進入mysql，當然還有一種東

java學習筆記（二）圖形用戶接口

star strong per getwidth cep runnable graphics s2d gb2 這個學期主要放在ACM比賽上去了，比賽結束了。不知不覺就15周了，這周就要java考試了，復習一下java吧。java的學習的目的還是讓我們學以致用，讓我們可以

數據結構學習筆記（二）線性表的順序存儲和鏈式存儲

出錯初始化 node != test span 輸入 des val 線性表：由同類型數據元素構成有序序列的線性結構　　--》表中元素的個數稱為線性表的長度　　--》沒有元素時，成為空表　　--》表起始位置稱表頭，表結束位置稱表尾順序存儲：　　 1 package

React學習小結（二）

display lin body -a 頁面 return 有時 borde size 一、組件的嵌套 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UT

Memcache 學習筆記（二）---- PHP 腳本操作 Memcache 服務器

ext status ram var_dump 介紹修改 memcache local dbn 　　 PHP 腳本操作 Memcache 服務器一、PHP腳本操作Memcache方法　　　　使用 PHP 腳本操作 Memcache，在 PHP 手冊中有詳細的介紹，我們

javascript學習筆記（二）：定義函數、調用函數、參數、返回值、局部和全局變量

兩個 cnblogs bsp 結果 value ava ase com 調用定義函數、調用函數、參數、返回值關鍵字function定義函數，格式如下： function 函數名(){ 函數體 } 調用函數、參數、返回值的規則和c語言規則類似。 1 <!DOC

神箭手爬蟲學習筆記（二）

暫存自動表達 eve doc 常用學習數據 .sh 一，可以使用神劍手已經做好的爬蟲市場直接跑，不需要自己定義爬取規則二，爬蟲市場裏沒有的網站，需要自己去定義規則來爬數據。三，爬取的數據可以先存放在神劍手，也可以放到七牛暫存。（提醒下，網站需要數據備份如果數量不

thinkphp5.0學習筆記（二）API後臺處理與命名空間

mac code 輸入 -1 pub 基礎 select() color 第一個命名空間先來看命名空間吧；命名空間是學習TP的基礎， <?php namespace app\lian\c1; class yi{ public $obj = "這是第一個

bootstrap 學習筆記（1）---介紹bootstrap和柵格系統

優先 cal 圖片應用尺寸文件中 lin png ice 　　學習前端許久，對於布置框架和響應瀏覽器用html 和javascript 寫的有點繁瑣，無意間看到這個框架，覺得挺好用的就開始學習了，但是這個框架上面有很多知識，不是所有的都要學的，故將學習筆記和覺得重點的

bootstrap 學習筆記（2）---- 排版

-i 排列分段函數 class 總結 capital src 設置 per 安裝和柵格系統學完，這篇寫的是排版手冊中排版的目錄如下圖《標題，頁面主題，內聯文本元素，對齊，改變大小寫，縮略語，地址，引用，列表》手冊中介紹那麽多，其實並不是所有的都要去看看。很多都是沒有必

MongoDB學習筆記（二）

.get 條件過濾條件 $set system.in ins version tle 不存在一、Mongodb命令說明：Mongodb命令是區分大小寫的，使用的命名規則是駝峰命名法。對於database和collection無需主動創建，在插入數據時，如果dat

bootstrap 學習筆記（5）---- 圖片和響應式工具

-h thumb ima ble resp 圓角 rim ucc spl （一）響應式圖片：在 Bootstrap 版本 3 中，通過為圖片添加 .img-responsive 類可以讓圖片支持響應式布局。其實質是為圖片設置了 max-width: 100%;、 heig

ssh環境下客戶信息管理系統學習問題（二）

2.3 根據包括 style 有用信息 org 翻譯 use 問題1：這是包沖突的問題，jar包中存在兩個沖突的包，可以看到上面的Referenced Libraries中存在asm.jar和asm-2.2.3.jar兩個包，這兩個包沖突了

設計模式學習筆記（二）設計基本原則之【單一職責原則】

code 分享開發者實際應用需要 ret ext file類 tor 單一職責原則（SRP： Single Responsibility Principle）名詞解釋： 1）職責：是指類變化的原因。 2）職責擴散：就是因為某種原因，職責P被分化為粒度更細的職責P

CSS學習筆記（二）：特性

code 背景色左移 line tex lin 安裝其中 cas 一、顏色特性 1. 前景色：color 用種方式指定前景色，3種方式分別是rgb顏色，#16進制編碼，顏色名稱： color: rgb(100,100,100); color: #ee3e80; col

jQuery+Ajax+Bootstrap學習乾貨（二）

相關推薦