jQuery基礎_1

jQuery事件的因果關係是怎麼樣的一個格式：

$("button").click(function(){ });

【正式接觸jQuery】
(1)jQuery的書寫步驟：
1.引入jQuery文件;
2.新建一對script標籤來書寫jQuery;
3.用jQuery的方式進行代碼分離;
4.按照jQuery用誰就選誰的原則去書寫代碼;
【jQuery的css修改】
alert()彈出一個警示框；彈出的信息能夠寫在小括號裏面做爲參數;
css()
1.單屬性獲取，格式css("要獲取的css屬性名稱")
2.單屬性修改，格式css("參數1","參數2")
參數1:表示要修改的css屬性名稱;
參數2:表示要修改的值;
3.多屬性修改，格式css({屬性名:"值",屬性名:"值",...})
注意:關於css複合屬性的修改；遇到複合屬性須要按照駝峯式命名法去書寫css屬性;

$("div").click(function (){
            $(this).css("width","200px");
        });

【基礎選擇器】
>表示選中指定的元素惟一的一級子代元素;
+表示選中指定元素其後緊鄰的惟一一個元素;
~表示選中指定元素後面全部的兄弟元素;

<div>
    <p></p>
    <p>123</p>
    <p></p>
    <p>456</p>
</div>

$("p~").click(function(){
            alert(123)
        });

在jQuery中全部的過濾選擇器都有一個特色，都以冒號開頭;

【過濾選擇器】
:not()在指定的元素中排除某一個元素或某一類元素;
:eq()按照指定的索引值進行過濾,(注意程序中的索引值是從0開始的);
:gt()過濾大於指定索引值的全部元素;
:lt()過濾小於指定索引值的全部元素;
(注意:不管是大於仍是小於,都是不包含本身自己的;)

<div>
    <p></p>
    <p>123</p>
    <p></p>
    <p>456</p>
</div>

$("p").eq(0).click(function(){
            alert(123)
        });

 

【內容選擇器】
:contains("text"):匹配含有text內容的元素
:empty:匹配內容爲空的元素
:has(selector):選擇包含有selector的選擇器
:parent:選擇做爲父元素的元素

<div>
    <p></p>
    <p>123</p>
    <p></p>
    <p>456</p>
</div>

$("p:parent").click(function(){
            alert(123)
        });

【篩選選擇器】
篩選選擇器中有3個巨頭選擇器,父子兄;
特色;全部的篩選選擇器都是一個函數的形勢,因此它不會寫在選擇符號的內部;
父;parent()選中當前元素的父級元素;
子;children()選中當前元素的子集元素,小括號內能夠再次傳遞參數進行更精細的篩選;
兄;sibling()選中當前元素全部的同級兄弟元素;(不包含本身)

<div>
    <p></p>
    <p>123</p>
    <p></p>
    <p>456</p>
</div>

$("p").eq(0).siblings().click(function(){
            alert(123)
        });

$(this)注意在事件當中使用

jQuery當中的動畫和事件是遵循一個叫作排隊機制的原理,也就是說若是一次觸發執行了不少動畫那麼後面的動畫不會自動替換前面的而會一直排隊等待執行;
解決方法:在執行動畫以前用stop()函來清空排隊;