1、jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。

2、jQuery 入口函數：$( document ) . ready(function( ){ } );可以簡寫為$(function(){})

css樣式：

（1）單個樣式：$("p").css("background-color","yellow");

（2）多個樣式：$("p").css({"background-color":"yellow","font-size":"200%"});

3、選擇器

（1）基本選擇器

----------------id選擇器：#id $("#lastname") id="lastname" 的元素

----------------.class $(".intro") 所有 class="intro" 的元素

-----------------$("*") 所有元素

-----------------$(‘span,#two‘); //組合選擇器，選擇span元素和id為two的元素-

-----------------$(this) 選擇當前的html元素

<div id="a">曹操</div>
<div id="b">孫權</div>
<div id="c">劉備</div>
<div class="san">三國演義</div>
<p>劉備</p>
<p>關羽</p>
<p>張飛</p>
<button onclick="aa()">點擊</button>
<div id="1111">
<p>我是三結義</p>
</div>
<div id="2222">
<p>我是西遊記</p>
</div>
<input type="text" id="3333" value="紅樓夢" />

<script type="text/javascript">
$(function(){
/*元素選擇器*/
$("p").css("color","red")/*p元素*/
});
$("div").css("color","blue");/*div元素*/
$("#a,#b,#c").css("background-color","yellow");/*id元素*/
$(".san").css("font-size","25px");/*class元素*/

（2）層次選擇器（我們可以把文檔中的所有的節點節點之間的關系，用傳統的家族關系來描述，可以把文檔樹當作一個家譜，那麽節點與節點直接就會存在父子，兄弟，祖孫的關系了。）

------後代元素、子元素、相鄰元素和兄弟元素

$(‘body>div‘).css(‘background‘,‘pink‘); //選擇body裏面的div子元素

$(‘body div‘).css(‘background‘,‘yellow‘); //選擇body裏面所有的div元素

$(‘.one+div‘).css(‘background‘,‘black‘); //選擇class為one的下一個兄弟元素（可以用$(‘.one‘).next(‘div‘)代替）

$(‘#two~div‘).css(‘background‘,‘grey‘); //選擇id為two的元素的後面所有的div兄弟元素。前提是具有相同的父元素（可以用$(‘#two‘).nextAll(‘div‘)代替）

$(‘#two‘).siblings(‘div‘):選取#two所有同輩的div元素，無論前後位置

（3）過濾選擇器

$("p:first")--------------第一個P元素

$("p:last")--------------最後一個p元素

$("tr:even")-----------所有偶數<tr>元素

$("tr:odd")-------------所有奇數tr元素

：eq(index)------$("ul li：eq(3) ")----------------列表中第4 個元素-------------index是從0開始

-------------:gt(no) $("ul li:gt(3)") 列出 index 大於 3 的元素
-------------:lt(no) $("ul li:lt(3)") 列出 index 小於 3 的元素

-------------:header $(":header") 所有標題元素 <h1> - <h6>
--------------:animated 所有正在執行動畫的元素
-------------:contains(text) $("div:contains(‘W3School‘)") 包含指定字符串的所有元素
-------------:hidden $("p:hidden") 所有隱藏的 <p> 元素
--------------:visible $("table:visible") 所有可見的表格
---------------[attribute] $("[href]") 所有帶有 href 屬性的元素
---------------[attribute=value] $("[href=‘#‘]") 所有 href 屬性的值等於 "#" 的元素
---------------[attribute!=value] $("[href!=‘#‘]") 所有 href 屬性的值不等於 "#" 的元素
---------------[attribute$=value] $("[href$=‘.jpg‘]") 所有 href 屬性的值包含以 ".jpg" 結尾的元素

（4）表單選擇器

:input $(":input") 所有 <input> 元素
:text $("input:text") 所有 type="text" 的 <input> 元素
:password $("input:password") 所有 type="password" 的 <input> 元素
:radio $("input:radio") 所有 type="radio" 的 <input> 元素
:checkbox $("input:checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $("input:submit") 所有 type="submit" 的 <input> 元素
:reset $("input:reset") 所有 type="reset" 的 <input> 元素
:button $("input:button") 所有 type="button" 的 <input> 元素
:image $("input:image") 所有 type="image" 的 <input> 元素
:file $("input:file") 所有 type="file" 的 <input> 元素
:not(selector) $("input:not(:empty)") 所有不為空的 input 元素

4、對內容的操作

（1）獲得內容

text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值

例如：

《body》

<div id="1111">
<p>我是三結義</p>
</div>
<div id="2222">
<p>我是西遊記</p>
</div>
<input type="text" id="3333" value="紅樓夢" />
</body>

<script type="text/javascript">

function aa(){
alert($("#1111").html());//獲取元素內容
alert($("#2222").text());//獲取文本內容
alert($("#3333").val());//獲取values內容
}

</script>

（2）設置內容

《body》

<div id="1111">
<p>我是三結義</p>
</div>
<div id="2222">
<p>我是西遊記</p>
</div>
<input type="text" id="3333" value="紅樓夢" />
</body>

<script type="text/javascript">

function aa(){
$("#1111").html("我是新三結義");//獲取元素內容
$("#2222").text("我是新西遊記");//獲取文本內容
$("#3333").val("我是新紅樓夢");//獲取values內容
}

</scrip>

5、對元素的操作

(1)添加新html內容

append() - 在被選元素的內部結尾插入內容

prepend() - 在被選元素的內部開頭插入內容

after() - 在被選元素外部之後插入內容

before() - 在被選元素外部之前插入內容

例如：

$("#1111").append("中的關羽")
$("#2222").prepend("孫悟空")
$("#3333").after("賈寶玉")
$("#1111").before("桃園")

（2）刪除元素

remove() - 刪除被選元素（及其子元素）

empty() - 從被選元素中刪除其子元素

例如：

6、對屬性的操作

（1）獲取屬性

-------------------attr() 方法用於獲取屬性值。

例如：

<button id="4444" href="http://www.baidu.com">百度</button>

$("button:last").click(function(){
alert($("#4444").attr("href"));
});

（2）設置屬性

---------------添加新屬性

attr("屬性名","屬性值") 方法也用於設置屬性值。

<p><a href="http://www.baidu.com.cn" class="baidu">baidu.com.cn</a></p>
<p><a href="http://www.baidu.com.cn" class="baidu">baidu.com.cn</a></p>
<p><a href="http://www.baidu.com.cn" class="baidu">baidu.com.cn</a></p>
<button>改變 href 值</button>

$(document).ready(function(){
$("button").click(function(){
$(".baidu").html(function(i,origValue){
//回調函數中i是當前被選元素的下標，origValue是原來的文本
return i+","+origValue + "/images";
});
});
});

（3）刪除屬性

removeAttr() 從所有匹配的元素中移除指定的屬性。

7、class類操作

addClass() 向匹配的元素添加指定的類名。
hasClass() 檢查匹配的元素是否擁有指定的類。

removeClass() 從所有匹配的元素中刪除全部或者指定的類。
toggleClass() 從匹配的元素中添加或刪除一個類。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="public/jquery-3.3.1/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .f2{
                color: red;
            }
        </style>
    </head>
    <body>
        <button >點擊</button>
    <div class="aa">
        今天周六，很好
    </div>
    </body>
</html>
<script type="text/javascript">

    $("button").click(function(){
        $(".aa").addClass("f2");
    })

</script>

點擊後

$("button").click(function(){
alert($("div").hasClass("f2"));
})

8、尺寸

height()設置或返回元素的高度（不包括內邊距、邊框或外邊距）

width()設置或返回元素的寬度（不包括內邊距、邊框或外邊距）

$("#box").height("500px").width("500px");

jquery 知識整理