目錄
JQuery
JQuery選擇器
jquery對象常用函數
JQuery的樣式函數
JQuery基本篩選選擇器（熟悉）
JQuery内容篩選器（了解）
JQuery可見性篩選選擇器（了解）
JQuery表單篩選選擇器（了解）
JQuery屬性篩選選擇器（了解）
JQuery對象常用函數
樣式函數 css
修改與擷取 元素的屬性值
擷取設定class屬性值
輸入框的value屬性值擷取 (了解)
設定與擷取文本内容
JQuery擷取盒模型的寬度高度
JQuery顯示與隐藏函數
JQuery動畫
JQuery事件
事件 綁定與解除
事件函數（熟悉）
組合事件函數（熟悉）
JQuery動态綁定事件函數
JQuery文檔函數
文檔查找函數
文檔篩選查找函數（了解）
JQuery工具函數
周遊Jquery對象
周遊數組
數組去重
數組合并
去除字元串前後的空格
H5中的JS常用操作
地理位置
本地存儲
WebSocket
插件
放大鏡插件
表單驗證
消息提示插件
Echarts(JS的)
自定義插件
BootStrap
線上CDN
簡介
使用步驟
預設頁面的排版變化
标題标簽樣式
内聯文本樣式
文本對齊方式
大小寫文本
清單樣式
代碼塊樣式
前景後景色（掌握）
表格樣式
文字圖示樣式
按鈕樣式
按鈕尺寸樣式
激活&禁用 (可用于按鈕等元件)
表單樣式 (input輸入框的樣式)
block 塊樣式
響應式 内聯輸入框
組合輸入框
輸入框校驗狀态
輸入框尺寸
響應式
栅格系統
栅格容器
栅格中的行與列
固定栅格容器
栅格偏移
栅格移動
栅格嵌套
下拉菜單
下拉菜單的樣式調整
分裂式下拉菜單
巨幕
導航
基本導航
橫向充滿容器的導航
橫向膠囊導航
垂直膠囊導航
在導航中加入下菜單
内容切換導航
附加導航
導覽列
基本導覽列
向導覽列中加入内容
向導覽列中加入其它内容
固定導覽列
靜态導航
分頁标簽
多頁分頁标簽
上下翻頁标簽
警告框
栅格系統縮略圖問題
特殊按鈕
開關按鈕
單選與多選按鈕
折疊面闆
圖檔輪播元件
ID選擇器 var $obj = $("#id值"); 類選擇器 var $obj = $(".class值"); 元素名稱選擇器 var $obj = $("元素名稱");
<code>例子</code>
淡入淡出效果: 元素淡入: $obj.fadeIn(毫秒數值); 元素淡出: $obj.fadeOut(毫秒數值);
<code>格式</code>
$obj.css(JSON對象)
格式：
$(選擇器1:first) : 選擇選擇器1中的第一個元素 $(選擇器1:last) : 選擇選擇器1中的最後一個元素 $(選擇器1:eq(下标)) : 選擇選擇器1中的指定下标的元素 $(選擇器1:gt(下标)) : 選擇選擇器1中的大于指定下标的元素 $(選擇器1:lt(下标)) : 選擇選擇器1中的小于指定下标的元素 $(選擇器1:even) : 選擇選擇器1中的偶數下标的元素 $(選擇器1:odd) : 選擇選擇器1中的奇數下标的元素 $(選擇器1:not(選擇器2)) : 從選擇器1中 排除符合選擇器2 條件的元素 !
篩選内容是否包含 格式: $("選擇器:contains('包含的文本')"); 從選擇器所選擇的元素中, 篩選出包含指定文本的元素 ! 篩選内容為空 格式: $("選擇器:empty"); 從選擇器所選擇的元素中, 篩選出不存在文本内容的元素 !
$("選擇器:visible"); 從選擇器中篩選出可見的元素 $("選擇器:hidden"); 從選擇器中篩選出不可見的元素 不可見的元素: 寬度/高度為0 display:none input的type屬性為hidden
篩選的是 input 标簽的 type屬性值 $("選擇器1:type屬性值"); //從選擇器1的結果中, 篩選比對type屬性的input
篩選屬性存在 格式: $("選擇器1[屬性名]"); 案例: 将所有帶有title屬性的img标簽, 樣式修改為寬度 200px; $("img[title]").css({"width":"200px"}); 篩選屬性比對某值 $("選擇器1[屬性名='值']"); 将所有帶有title屬性的img标簽,且title值為hahah, 樣式修改為寬度 200px; $("img[title='hahaha']").css({"width":"200px"}); 篩選屬性不比對某值 $("選擇器1[屬性名!='值']"); 将所有帶有title屬性的img标簽,且title值不為hahah, 樣式修改為寬度 200px; $("img[title!='hahah']").css({"width":"200px"});
格式
格式1. 一次指定單個樣式 $obj.css("樣式鍵","樣式值"); 格式2. 一次指定一組樣式: $obj.css(JSON對象);
在JS中，通過dom對象 修改元素的屬性值的方式為：
對象.屬性名 = 值；
在JQuery中，通過attr函數 設定與擷取屬性值：
格式1： 設定屬性值： $obj.attr("屬性名":"屬性值"); 擷取屬性值： var 屬性值 = $obj.attr("屬性名"); 格式2: 設定一組屬性值： $obj.attr(JSON對象); 注意: 在Jquery中, 通過attr函數 無法正确的操作: class屬性 / value屬性 / 文本内容
添加class $obj.addClass("值"); 删除class $obj.removeClass("值"); 替換class $obj.toggleClass("值"); //如果值存在, 則删除 ! 不存在則添加
通過attr函數 可以擷取value屬性值, 但是得到的永遠都是初始值 ! Jquery提供了一個用于擷取與設定value屬性值的函數 擷取: var value = $obj.val(); 設定: $obj.val(值);
在JS中, 通過dom對象的innerHTML屬性 來擷取與修改 元素的文本内容 ! 在Jquery 中 , 擷取内容: var text = $obj.html();//擷取元素文檔内容 格式2. var text = $obj.text();//擷取元素文本内容 html() 與 text() 的差別: text函數 擷取内容時,會忽略标簽部分 html函數 擷取内容時, 會攜帶标簽部分 在Jquery中 指定文本内容: $obj.html(内容);
<code>例如</code>
<code>result</code>
擷取寬度: var width = $obj.width(); 擷取寬度+左右内邊距的寬度 var width = $obj.innerWidth(); 擷取寬度+左右内邊距的寬度+左右邊框寬度 var width = $obj.outerWidth(); 擷取寬度+左右内邊距的寬度+左右邊框寬度+左右外邊距寬度 var width = $obj.outerWidth(true); 擷取高度: var height = $obj.height(); 擷取高度+上下内邊距的高度 var height = $obj.innerHeight(); 擷取高度+上下内邊距的高度+上下邊框高度 var height = $obj.outerHeight(); 擷取高度+上下内邊距的高度+上下邊框高度+上下外邊距高度 var height = $obj.outerHeight(true);
基本顯示隐藏效果
顯示：$obj.show();
隐藏：$obj.hide();
切換：$obj.toggle();
左上折疊 淡入淡出顯示隐藏效果
顯示：$obj.show(毫秒數);
隐藏：$obj.hide(毫秒數);
切換：$obj.toggle(毫秒數);
上下折疊顯示隐藏效果(圖檔需要有固定的寬度)
顯示 : $obj.slideDown(持續時間 毫秒);
隐藏 : $obj.slideUp(持續時間 毫秒);
切換 : $obj.slideToggle(持續時間 毫秒);
淡入淡出顯示隐藏效果
顯示 : $obj.fadeIn(持續時間 毫秒);
隐藏 : $obj.fadeOut(持續時間 毫秒);
這後面的例子有網就能正常跑出來，特殊情況除外
<code>顯示隐藏 淡入淡出 的效果</code>
<code>上下折疊</code>
<code>淡入淡出</code>
$obj.animate(style,time,[function]); 參數1. style : 是一個JSON格式的參數, 用于描述動畫最終的樣式 ! 參數2. time : 表示從目前樣式, 過渡到參數1樣式 所需的毫秒時間值 參數3. 可選參數 , function類型, 在動畫執行完畢時 自動調用 !
注意: 通過綁定添加的事件, 是可以疊加的 ! 添加的事件無論是否産生了疊加 , 一次解綁 全部解除 ! 綁定事件 $obj.bind("事件類型",函數); 解綁事件 $obj.unbind("事件類型"); 模拟觸發事件 $obj.trigger("事件類型");
通過jquery, 調用事件函數 傳遞function 完成事件邏輯的處理 ! $obj.事件類型(function); 常用事件函數: click(fn)/click() 點選 dblclick(fn)/dblclick() 輕按兩下 blur(fn)/blur() 失去焦點 focus(fn)/focus() 擷取焦點 change(fn)/change() 元素狀态改變 keydown(fn)/keydown() 鍵盤按下 keyup(fn)/keyup() 鍵盤彈起 mouseover(fn)/mouseover() 滑鼠移入 mouseout(fn)/mouseout() 滑鼠移出 submit(fn)/submit() 表單送出
hover(in,out) 移入，移出 in : 當光标移出時 觸發的函數 out : 當光标移入時 觸發的函數
給未來元素 綁定事件 (給未來添加的元素, 提前指定事件函數) $祖先元素.on("事件類型","選擇器",處理函數); 給指定的祖先元素内 , 符合選擇器條件的未來元素 指定處理事件的函數 !
建立元素 var $obj = $("html元素字元串");
添加元素 向指定的父元素内部 追加 新的子元素 格式: $父元素.append(新元素); 向指定的父元素内部 前置 新的子元素 格式; $父元素.prepend(新元素); 向指定的元素後, 添加新的兄弟元素 格式: $obj.after(新元素); 向指定的元素前, 添加新的兄弟元素 格式: $obj.before(新元素); 删除元素 格式: $obj.remove() // 删除調用remove函數的元素 清空元素 格式: $obj.empty() // 清空調用empty函數的元素 克隆元素 忽略事件 克隆 var $新的對象 = $原對象.clone(); 攜帶事件 克隆 var $新的對象 = $原對象.clone(true);
根據一個已經得到的JQuery對象，查找與其相關的元素的JQuery對象。
查找比對選擇器的子元素 $obj.children("選擇器"); 查找比對選擇器的後代元素 $obj.find("選擇器"); 擷取下一個兄弟元素 $obj.next(); 擷取上一個兄弟元素 $obj.prev(); 擷取父元素 $obj.parent(); 查找比對選擇器的祖先元素 $obj.parents("選擇器");
從一個Jquery對象中, 篩選出需要的部分: var $x = $obj.eq(下标) : 擷取指定下标處的Jquery對象 var dom = $obj.get(下标) : 擷取指定下标處的dom對象 var $x = \(obj.first() : 傳回\)obj中第一個元素的jquery 對象 var $x = \(obj.last() : 傳回\)obj中最後一個元素的jquery對象 $obj.is(選擇器) : 是否滿足選擇器條件 var $x = $obj.not(選擇器): 篩選出不滿足選擇器條件的jquery對象
格式: $obj.each(function(){ //this 指的是 每一次周遊的元素的dom對象 });
$.each(數組,function(i,value){ //i : 表示循環周遊的下标 //value: 表示循環周遊時數組每個下标的資料 });
$.unique(數組名);
$.merge(數組1,數組2); 作用: 将數組2的内容, 追加到數組1中! 此操作不影響數組2中的資料 !
var 新字元串 = $.trim(原字元串); 此操作 沒有對原字元串進行改變 . 傳回值為新的去除空格的字元串 !
<code>eg</code>
共有兩種存儲資料的方式：
通過 localStorage 對象，存儲資料！
存儲資料時，理論上資料是永久存儲的！ 除非人為操作，如清理垃圾
通過 sessionStorage 對象，存儲資料！
當會話結束時，資料自動清除！（浏覽器關閉時）
注意: 上述兩個對象, 操作的方式完全一緻. 存儲鍵值對, 鍵與值都是字元串 !
常用函數: 存儲資料: 格式1. 對象.setItem(key,value); 格式2. 對象.key=值; 取出資料: 格式1. var value = 對象.getItem(key); 格式2. var value = 對象.key; 删除單個資料: 對象.removeItem(key); 清空所有資料: 對象.clear(); 根據存儲的順序, 取出資料的key //函數名稱為key ,得到的是鍵值對的鍵 var k = 對象.key(下标);
我們學習的不是如何使用某一個插件 , 重點是: 如何使用所有的插件 !
步驟: 引入Jquery.js檔案 引入插件的js檔案 在網頁中 編寫一個img标簽 , img的src屬性指向小圖檔 在script塊中, 通過JSON 描述放大鏡規格: var json = { imgSrc:"大圖檔路徑", lensShape:"放大鏡形狀",//圓形circle 方形square lensSize:數值,//放大鏡大小, 值為數字表示px borderColor:"十六進制顔色值",//表示放大鏡邊框顔色 borderRadius:數值//值為數字,表示邊框的圓角,是px ,不能使用百分比 //如果形狀為方形 圓角等于放大鏡大小的一半,則效果也是圓形的! } 在網頁加載完畢後, 通過上述img标簽的jquery對象 , 綁定放大鏡插件 并指定放大鏡的規格JSON對象 $(function(){ $("#x").mlens(json);
校驗規則:
使用步驟(格式1):
使用步驟(格式2):
普通消息提示 $.growl({"title":"提示的标題","message":"提示的内容"}); 提醒消息提示 $.growl.notice({"title":"提示的标題","message":"提示的内容"}); 警告消息提示 $.growl.warning({"title":"提示的标題","message":"提示的内容"}); 錯誤消息提示 $.growl.error({"title":"提示的标題","message":"提示的内容"});
使用步驟: 引入插件的JS檔案 在網頁中 加入一個div标簽, 用于繪制圖形 ! 此div必須擁有id屬性值 ,以及寬度和高度樣式 !
在網頁加載完畢時, 通過echarts的init函數傳入上述的div的dom對象, 完成圖表對象的建立
編寫步驟: 将設計好的視覺樣式, 先通過html檔案 編寫出來 将上述設計好的元素的樣式,全部修改為内聯樣式 (元素的style屬性中) 将上述設計好的插件效果, 轉換為JS中的字元串形式 通過編寫函數, 向網頁中 動态的添加上述的字元串代碼 !
Bootstrap 是由 Twitter 公司(全球最大的微網誌)的兩名技術工程師研發的是一個基于HTML、CSS、JavaScript 的開源架構。 該架構代碼簡潔、視覺優美，可用于快速、簡單地建構基于 PC 及移動端裝置的 Web 頁面需求。
下載下傳用于生産環境的 架構檔案包 - css檔案夾 - fonts檔案夾 - js檔案夾
将上述的三個檔案夾, 解壓并複制到項目的webContent目錄下 将jquery.js檔案, 複制到js檔案夾下 在使用架構的位置 , 引入如下三個檔案: bootstrap的核心樣式檔案 - jquery架構 - bootstrap的核心腳本檔案
所有文字預設為 14px line-height 行高設定為了20px p标簽取消了上外邊距 , 指定了下外邊距為10px(二分之一行高) 文本顔色 為 #333
可以通過标題标簽編寫标題 , 也可以通過class=h1 -- h6 來完成标題的編寫 !
class: text-left : 文本居左 text-center : 文本居中 text-right : 文本居右
text-lowercase : 小寫 text-uppercase : 大寫 text-capitalize : 首字母大寫
list-unstyled : 取消前置文字或圖示 以及 将清單左側内邊距設定為0 list-inline : 橫向排列 , 取消了前置的文字和圖示
前景色(文本顔色) class text-muted : 柔和灰 text-success : 成功綠 text-info : 資訊藍 text-primary : 主要藍 text-warning : 警告黃 text-danger : 危險紅 後景色(背景顔色) class (部分後景色會修改前景色) : bg-success : 成功綠 bg-info : 資訊藍 bg-primary : 主要藍 bg-warning : 警告黃 bg-danger : 危險紅
基本表格樣式： class : table 條紋表格樣式： class : table table-striped 帶有邊框的表格樣式： class : table table-bordered 滑鼠懸停顯示激活樣式： class : table table-hover 給tr單獨指定顔色值： class: active : 激活樣式 success : 成功綠 info : 資訊藍 warning : 警告黃 danger : 危險紅 sr-only : 隐藏不顯示
給如下的html标簽, 添加按鈕樣式class, 可以完成按鈕樣式的編寫 : span标簽 (推薦) button标簽 input标簽 type屬性為 button/submit/reset ... a标簽 class 效果 btn 基本按鈕效果 (需配合其他背景顔色 使用) btn btn-default 預設按鈕效果 btn btn-primary 主要藍按鈕樣式 btn btn-success 成功綠按鈕樣式 btn btn-info 資訊藍按鈕樣式 btn btn-warning 警告黃按鈕樣式 btn btn-danger 危險紅按鈕樣式 btn btn-link 超連結按鈕樣式
class: 效果 btn-lg 大按鈕 btn-sm 小按鈕 btn-xs 小小按鈕 btn-block 塊按鈕 (常用于手機網頁的編寫 , 獨占一行)
class 效果 active 激活樣式 disabled 禁用樣式
給表單的input标簽 通過bootstrap修改樣式時, input标簽必須是指定了type屬性的 ! 如果使用文本輸入框, 必須指定type=text
獨占一行的輸入框 (可以應用到submit按鈕上) class : form-control
當螢幕的寬度小于768px時, 自動切換為 适用手機的輸入框效果 ! 組合class: form标簽 : form-inline input标簽 : form-control
用于将一組元素 組合為一個輸入框 (可以給輸入框添加前置與後置的内容) 1 給form表單标簽 添加class="form-group" 2 給表單中的每一個輸入框 ,添加父元素div,div的class=input-group , 此div是組合輸入框的容器 ! 3 給輸入框添加前一個兄弟元素 或 後一個兄弟元素div , 并指定class=input-group-addon
實作步驟: 給輸入框 添加父元素div 當輸入框滿足特定條件時 , 給輸入框的父div 添加class: has-error : 輸入錯誤 紅 has-success : 輸入成功 綠 has-warning : 輸入警告 黃
input标簽class: input-lg : 大輸入框 input-sm : 小輸入框 也可以給組合輸入框 修改尺寸 , 給輸入框的父div添加class: form-group-lg : 大組合輸入框 form-group-sm : 小組合輸入框
栅格系統: 指的是bootstrap所提供的一套用于響應式 以及 移動裝置優先的 流式栅格布局!
共分為 兩種栅格容器:
在栅格中, 需要将内容編寫到 栅格行中 通過建立div , 指定class=row來實作 栅格行的建立 . 一個栅格行中 等分為12分, 超出部分自動換行 !
超小螢幕<768px 992px>小螢幕≥768 1200px>中等螢幕≥992px 大螢幕≥1200px 固定寬度: auto 750px 970px 1170px 類字首 : col-xs- col-sm- col-md- col-lg- 每一列的寬度: auto 大約62px 大約81px 大約97px
類字首-offset-數字: 偏移值
向左移動 類字首-pull-數字 向右移動 類字首-push-數字 移動後的元素是覆寫顯示的
栅格中每一個占有固定份數的元素内部, 也可以當作栅格容器行來使用
設定菜單向上觸發 将外層div設定為 class="dropup" 設定菜單項在螢幕的右側 ul标簽添加class="dropdown-menu-right" 設定彈出菜單的标題 給ul内部前置一個新的li ,li的内容是文本 , 指定li的class="dropdown-header" 在多個菜單選項之間, 添加分割線 每一個分割線都是一個li , class="divider" 設定某選項為 禁用 設定禁用選項li的class="disabled" 設定菜單 預設顯示 在最外層的div中指定class="dropdown open"
按鈕組合 - 分裂式下拉菜單
1 編寫一個下拉菜單(按鈕僅包含一個箭頭) 2 修改下拉菜單的 外層div的class="btn-group" 3 在菜單最外層的div中, 前置一個按鈕即可
1. 編寫一個ul , 指定class="nav" 2. ul中添加一個個的li , li中包含一個個的超連結
1. 編寫一個ul , 指定class="nav nav-tabs nav-justified"
1. 編寫一個ul , 指定class="nav nav-pills"
1. 編寫一個ul , 指定class="nav nav-pills nav-stacked"
将導航的某一個選項, 更改為下拉菜單的樣式 ! 我們在編寫導航時, 是ul包含li 在編寫下拉菜單時, 最外層的父元素 是 div li與div都是塊元素 ! 總結: 在導航中加入下拉菜單的方式, 就是将導航中的一個li 當作下拉菜單的div來編寫! 注意: 下拉菜單中的按鈕 , 不再使用span标簽 , 而是使用超連結标簽, 并取消按鈕樣式 !
建立一個普通的導航 在導航ul的下面 ,添加一個兄弟元素div , 指定div的class="tab-content" 在上述建立的div中 , 加入一個個的子div , 每一個子div 作為一個被切換的内容 這個div必須有id , class值必須設定為tab-pane fade , 預設選中項的class值為: tab-pane fade in active 導航中每一個超連結 , 添加屬性: data-toggle="tab" 導航中每一個超連結 ,都需要添加連結位址 , 連結位址為#第二步子div的id 給導航中預設選中的li選項 ,設定class=active
通過栅格系統, 實作左右兩個div的分割, 2:10 左側div 用于編寫附加導航 , 需指定id屬性值 右側div 用于編寫内容 在左側的div中, 加入普通的垂直導航 給導航的ul标簽 添加屬性: data-spy="affix" 在右側div中, 與導航選項關聯的位置, 添加元素, 并指定id ! 修改左側div中的每一個導航項的超連結, 連接配接到指定的内容的#id 修改body , 綁定導航到網頁上 給body添加屬性: data-spy="scroll" data-target="#左側div的id" 給導航中預設的選項li , 設定class="active"
一般用于網頁頂部 與 底部的導航菜單 ! 編寫一個nav标簽 指定class="navbar navbar-default" 向nav标簽中, 加入ul标簽 ,class="nav navbar-nav" 向ul标簽中 加入一個個的li , li的内容是超連結
取消了導覽列的圓角 ! 根據設定的不同, 固定在網頁頂部 或 底部 頂部: 添加nav标簽的class="navbar-fixed-top" 底部: 添加nav标簽的class="navbar-fixed-bottom"
僅僅是取消了導覽列的圓角 添加nav标簽的class="navbar-static-top"
編寫一個ul标簽 , 指定class="pagination" 給ul添加一個個的li标簽, li中的内容是一個個的超連結, 每一個li 表示一個翻頁的按鈕 !
1 編寫一個ul标簽 , 指定class="pager" 2 個ul添加兩個子标簽li (li中是超連結) 第一個li 是上一頁 第二個li 是下一頁 3 可選 : 上一頁居左 : 給li添加class="previous" 下一頁居右 : 給li添加class="next"
在網頁中, 添加警告框 ,顯示時占用網頁空間的, 可以被使用者關閉 ,關閉後不占用網頁空間 !
給普通的按鈕樣式, 添加屬性: data-toggle="button"
單選使用步驟: 正常編寫一組單選框 (input标簽 type="radio") 給一組單選框中的 每一個input标簽添加父元素span , 并給span指定任意按鈕樣式 ! 通過給一組按鈕樣式的span 添加父元素div , 來實作按鈕組! div的class="btn-group" 屬性: data-toggle="buttons"
<code>多選和單選一樣，隻有radio變成了checkbox</code>
建立一個div ,用作被折疊的内容div ! 指定class="collapse" ,需指定id屬性值 在div前, 建立一個按鈕, 用于點選展開面闆 屬性: data-toggle="collapse" data-target="#内容div的id"
本文來自部落格園，作者：chn-tiancx，轉載請注明原文連結：https://www.cnblogs.com/tiancx/p/15359169.html