圖片1.png

選擇器

1.格式

$("div").css("樣式");
$(".box").css("樣式");
$("#box").css("樣式");

例如：

$("div").css({"width":"100px","height":100,"
background":"red"});（設(shè)置樣式）

2.得到樣式

$(".box").css("width")

3.語法
如果只想設(shè)置一個(gè)樣式，逗號隔開

$("選擇器").css("backgroundColor","blue");

如果想設(shè)置很多樣式，就寫JSON對象

$("選擇器").css(JSON);
$("div").css({"width":"100px","height":100,"
background":"red"})

還支持+=寫法

$("p:eq(5)").css("width","+=20px");

動(dòng)畫問題animate

jQuery內(nèi)部含有一個(gè)運(yùn)動(dòng)框架，特別牛逼！

$("選擇器").animate(終點(diǎn)JSON,動(dòng)畫時(shí)間,回調(diào)函數(shù));
$(".box").animate({"left":900},4000,function(){
alert("運(yùn)動(dòng)完成")
})；

批量添加監(jiān)聽、節(jié)點(diǎn)關(guān)系

1$(".circles ol li").mouseenter(function(){
    //自己變紅，自己的兄弟恢復(fù)為橙色
        $(this).css("background-color","red").siblings().css("background-color","orange");
});

siblings()表示兄弟節(jié)點(diǎn)

$()函數(shù)

1.原生對象問題
【注意】選擇出來的東西，是一個(gè)類數(shù)組對象，是jQuery自己的對象，這個(gè)jQuery對象后面不能跟著原生JS的語法：

$("#box").style.backgroundColor = "red";（不能實(shí)現(xiàn)）

因?yàn)?style.backgroundColor是原生JS語法，$()原則的對象是jQuery對象，不能跟著原生。
所以，如果想把jQuery對象，轉(zhuǎn)為原生JS對象，要加[0]就行了：

$("#box")[0].style.backgroundColor = "red";

2.引號問題

$("選擇器")

【注意】引號不能丟，在jQuery世界中，只有三個(gè)東西不能加引號，其他必須加引號！！！

$(this)
$(document)
$(window)

3.篩選器

$("p")          所有的p
$("p:first")    第一個(gè)p
$("p:last") 最后一個(gè)p
$("p:eq(3)")    下標(biāo)為3的p
$("p:lt(3)")    下標(biāo)小于3的p
$("p:gt(3)")    下標(biāo)大于3的p
$("p:odd")      下標(biāo)是奇數(shù)的p
$("p:even") 下標(biāo)是偶數(shù)的p

事件監(jiān)聽

jQuery顛覆了我們的行文習(xí)慣：

$(".box1").click(function(){
//點(diǎn)擊box1之后做的事情
});

事件名一律不寫on。特別的，鼠標(biāo)進(jìn)入改成了mouseenter，鼠標(biāo)離開改為了mouseleave。

jQuery實(shí)現(xiàn)

1.拖拽

實(shí)現(xiàn)拖拽要用的就是jQueryUI這個(gè)插件，這是一個(gè)官方插件，用來實(shí)現(xiàn)：

Draggable： 拖拽
Droppable： 拖放
Resizable：改變尺寸
Selectable： 可選擇
Sortable：可排序

插件的意思是，我這個(gè)插件包依賴你的
jQuery：

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

<script type="text/javascript" src="js/jquery-ui.min.js"></script>

一條語句能實(shí)現(xiàn)拖拽：

 $("div").draggable();

重要的參數(shù)，參數(shù)都以用JSON來配置

 $("div").draggable(JSON);

文檔：

  [http://api.jqueryui.com/](http://api.jqueryui.com/)

 $("p").draggable({
axis: "x",       //約束在某個(gè)軸上
containment: "parent",  //在父盒子中拖拽
grid : [100],           //步長
drag : function(event, ui){  //事件，值就是ui.position.top
console.log(ui.position.left,ui.position.top);
    }
});

窗口的卷動(dòng)事件

$(document).scroll(function()
        {
        var iTop = $(document).scrollTop();
        $("div").animate({"top":iTop+200},70);
        })