jQuery的簡單用法（jQuery的簡介，選擇器，屬性和css,文檔處理）
一、jQuery簡介
1.1. JS庫
JavaScript 庫封裝了很多預定義的對象和實用函數。能幫助使用者建立有高難度交互客戶端頁面, 並且兼容各大瀏覽器。
1.2. 當前流行的 JavaScript 庫有：
① jQuery ，最流行
② EXT JS，2.0開始收費
③ Prototype，對js擴展，框架開發。
④ Dojo
⑤ Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。基於jQuery 一個UI工具
⑥ VUE
⑦ Layui
⑧ easyui
1.3. jQuery介紹
JQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，
還兼容各種瀏覽器，jQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。
1.4. 優點
- 開源免費
- 核心理念是write less,do more(寫得更少,做得更多)
- 輕量級 ：源碼1.11.js大小是286kb，壓縮1.11.min.js大小是94.1k。、
- 兼容性好
- jQuery的語法設計可以使開發者更加便捷
- 例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能
- jQuery能夠使用戶的html頁面保持代碼和html內容分離
- 不用再在html裏面插入一堆js來調用命令了，只需要定義id即可
- 文檔說明很全
1.5. 使用jquery的步驟
Step1:把jquery庫引入工程中
Step2：<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
Step3:使用jquery
1.6. jQuery基本語法
jquery入口：註意：一個頁面可以有多個，建議只寫一個。
$(document).ready(function(){
//頁面元素加載完畢執行
});
// js
window.onload=function(){};
簡寫：
$(function(){
});
等價：
jQuery(function(){});
jQuery對象和dom對象轉換
|
$(function(){
//jquery對象 約定變量名前加上$符號 var $divObj = $("#mydiv");
//把jquery對象轉為dom對象 var divObj = $divObj.get(0); //divObj.html(‘hhhh ‘); divObj = $divObj[0]; //document.getElementById("mydiv"); divObj.innerHTML =‘hello‘; //js中的dom對象 轉成 jquery中的對象 var divObj2 = document.getElementById("mydiv");
//轉化為jquery對象 var $divObj2 = $(divObj2);
$divObj2.html("hehehheheheheeh");
}); |
二、選擇器【重要】
2.1基本選擇器【重要】 跟css中的選擇器對應
#id ， id選擇器，<xxx id=""> 通過id值獲得元素
element，標簽選擇器，<xxx> 通過標簽名獲得元素
.class ，類選擇器，<xxx class=""> 通過class值獲得元素。註意：使用點開頭
s1,s2,... 並集選擇器，將多個選擇器的結果添加一個數組中。
* 所有
2.2層級
A B ，獲得A元素內部所有的B後代元素。（爺孫）
A > B ，獲得A元素內部所有的B子元素。（父子）
A + B ，獲得A元素後第一個兄弟並且為B。（兄弟）
A ~ B ，獲得A元素後面的所有的兄弟B。（兄弟）
2.3基本過濾
過濾選擇器格式 “：關鍵字”
:first , 第一個
:last ,最後一個
:eq(index) ，獲得指定索引
:gt(index) 大於
:lt(index) 小於
:even 偶數，從 0 開始計數。例如：查找表格的1、3、5...行（即索引值0、2、4...）
:odd 奇數
:not(selector) 去除所有與給定選擇器匹配的元素
2.4.內容過濾
:empty 當前元素是否為空（是否有標簽體--子元素、文本）
:has(...) 當前元素，是否含有指定的子元素
:parent 匹配含有子元素或者文本的元素
:contains( text ) 標簽體是否含有指定的文本
2.5可見性過濾[掌握]
:hidden 隱藏。特指 <xxx style="display:none;">
:visible 可見（默認）
2.6屬性【掌握】
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]
[屬性名] 獲得指定的屬性名的元素
[屬性名=值] 獲得屬性名 等於 指定值的 的元素【1】
[屬性名!=值] 獲得屬性名 不等於 指定值的 的元素
[as1][as2][as3].... 復合選擇器，多個條件同時成立
2.7子元素過濾
:nth-child(index) ，獲得第幾個孩子，從1開始。
:first-child ， 獲得第一個孩子
:last-child ， 獲得最後孩子
:only-child ， 獲得獨生子
2.8表單過濾
:input 所有的表單元素。（<input> / <select> / <textarea> / <button>）
:text 文本框<input type="text">
:password 密碼框<input type=" password ">
:radio 單選<input type="radio">
:checkbox 復選框<input type="checkbox">
:submit 提交按鈕<input type="submit">
:image 圖片按鈕<input type="image" src="">
:reset 重置按鈕<input type="reset">
:file 文件上傳<input type="file">
:hidden 隱藏域<input type="hidden"> ,還可以獲得<xxx style="display:none">
其他值：<br> <option> ,存在瀏覽器兼容問題
:button 所有普通按鈕。 <button > 或 <input type="button">
2.9表單對象屬性過濾【掌握】
:enabled 可用
:disabled 不可用。<xxx disabled="disabled"> 或<xxx disabled=""> 或 <xxx disabled>
:checked 選中（單選框radio、復選框 checkbox）
:selected 選擇（下拉列表 select option）
三、屬性和CSS
3.1. 屬性【掌握】 操作標簽的屬性
attr(name) 獲得指定屬性名的值 val() attr(“value”);
attr(key ,val ) 給一個指定屬性名設置值
attr(prop ) 給多個屬性名設置值。參數：prop json數據
{k : v , k : v , .....}
{key:值,key2:值2} json數據
removeAttr(name) 移除指定屬性
3.2. CSS類
addClass("my") 追加一個類
removeClass("my") 將指定類移除
toggleClass("my") 如果有my將移除，如果沒有將添加。
3.3. HTML代碼/文本/值【掌握】
val() 獲得value的值
val(text) 設置value的值
html() 獲得html代碼，含有標簽
html(...) 設置html代碼，如果有標簽，將進行解析。
text() 獲得文本值，將標簽進行過濾
text(...) 設置文本值，如果有標簽，將被轉義 --> < < & & > <
3.4. CSS
<xxx style="key:value; key:value; ">
css(name) 獲得指定名稱的css值
css(name ,value) 設置一對值
css(prop) 設置一組值 參數為json 賦多個樣式
3.5. 位置
offset() 獲得坐標 ， 返回JSON對象，{"top":200, "left" : 100}
offset(...) 設置坐標。例如：$(this).offset({"top":0 , "left" : 0})
scrollTop() 垂直滾動條 滾過的距離
scrollLeft() 水平滾動條 滾過的距離
3.6. 尺寸
height([...]) 獲得 或 設置 高度
width([...])獲得 或 設置 寬度
四、文檔處理
4.1. 內部插入【掌握】
A.append(B) 將B插入到A的內部後面（之後的串聯操作，操作A）
<A>
<C><C>
<B></B>
<A>
A.html(B); <A><B></B></A>
A.prepend(B) 將B插入到A的內部元素前面
<A>
<B></B>
<C></C>
<A>
4.2. 外部插入【掌握】
A.after(B) , 將B插入到A後面（同級）
<A></A>
<B></B>
A.before(B) ，將B插入到A前面
4.3. 刪除[掌握]
empty() 清空標簽體
remove() 刪除當前對象。如果之後再使用，元素本身保留，綁定事件 或 綁定數據 都會被移除
detach() 刪除當前對象。如果之後再使用，元素本身保留，綁定事件 或 綁定數據 都保留
4.4. 復制
clone() 克隆
even ：指示事件處理函數是否會被復制。V1.5以上版本默認值是：false
jQuery的簡單用法（jQuery的簡介，選擇器，屬性和css,文檔處理）