JQuery快速入門

1.JQuery簡介

    JQuery是一個JS庫，別人使用JS寫了很多功能給我們用，主要集中在以下幾點：
        1.簡化找標簽，改樣式等操作語法
        2.增加了動畫的操作方法
        3.解決了相關屬性的兼容性寫法



2.JQuery語法

1.找標簽

    $(‘#box‘)  id選擇器
    $(‘.box‘)  類選擇器
    $(‘div‘)   標簽選擇器
    $(‘.box li) 後代選擇器
    $(‘.box > a‘)  子代選擇器
    $(‘.box, .one‘) 並集選擇器
    
    選擇器篩選
    $(
 
‘.box li:first‘)  第一個li
    $(‘.box li:last‘)   最後一個li
    $(‘.box li:eq(2)‘)  第3個li(索引從0開始)
    $(‘.box li:gt(3)‘)  索引大於3的li
    $(‘.box li:lt(3)‘)  索引小於3的li
    $(‘.box li:even‘)   偶數li  (因為索引從0開始，所以顯示相反)
    $(‘.box li:odd‘)   奇數li
    //表單篩選
    $(‘.box input:text‘)   input中是text的標簽
    $(‘.box input:radio‘)   input中是radio的標簽
    $(
 
‘.box input:checkbox‘)   input中被選中的標簽
    
    //方法找標簽
    $(‘.box li‘).eq(0)   第一個li
    $(‘.box li‘).first() 第一個li
    $(‘.box li‘).last()  最後一個li
    
    $(‘.box‘).parent()      父元素
    $(‘.box‘).children(條件) 所有子元素
    $(‘.box‘).siblings(條件) 所有兄弟元素
    $(‘.box‘).find(條件)     在box中查找某個元素
    $(‘.box‘).next()        下一個元素
    $(
 
‘.box‘).nextAll()     下面所有的元素
    $(‘.box‘).prev()        上一個元素
    $(‘.box‘).prevAll()     上面所有元素



2.加事件

    標簽.click(function(){});
    標簽.mouseover()
    標簽.mouseout()
    標簽.hover()
    其他類似
    
    標簽.on(事件類型，回調函數);
    $(‘.box‘).on(‘click‘,function(){});



3.改樣式和內容屬性

    //內容操作
    標簽.html()   修改內容
    標簽.val()    修改表單的value值
    標簽.text()   修改文字內容
    
    //樣式操作
    標簽.css(‘屬性名‘,‘屬性值‘);
    標簽.css({屬性名:屬性值,屬性名:屬性值});
    
    //類的操作
    標簽.addClass(‘current‘) 
    標簽.removeClass(‘current‘)  
    標簽.toggleClass(‘current‘)
    標簽.hasClass(‘current‘)  
    
    
    //自定義屬性操作
    標簽.attr(‘屬性名‘，‘屬性值‘);
    標簽.removeAttr(‘屬性名‘);
    標簽.prop(‘屬性名‘，‘屬性值‘);  
    
    註意： prop方法用於獲取類似於checked這種標簽獨有的屬性，Jquery未封裝



4.加動畫

    //顯示隱藏
    show()
    hide()
    toggle()
    
    //上拉下拉
    slideDown()
    slideUp()
    slideToggle()
    
    //淡入淡出
    fadeIn()
    fadeOut()
    fadeTo()
    fadeToggle()
    
    //自定義動畫
    animate({},時間)  //註意參數寫法很多，都帶引號總沒錯  
    stop()      停止動畫
    delay()     延遲動畫



5.節點操作

    empty()  清空
    remove()  移除
    clone()   克隆
    replace() 替換
    
    after()  標簽之後插入
    before() 標簽之前插入
    
    append()  標簽內最後追加內容
    appendTo() 將某個標簽添加到父標簽中

7.位置大小獲取

    //獲取left值和top值
    標簽.offset().left
    標簽.offset().top
    
    //獲取滾動距離
    標簽.scrollTop()
    標簽.scrollLeft()
    
    //獲取寬高
    標簽.width()
    標簽.height()
    
    
    



6.其他

    //阻止冒泡
    e.stopPropagation()
    
    //獲取坐標
    e.pageX
    e.pageY
    
    //獲取標簽索引
    標簽.index();  
    
    //遍歷
    each()
    
    //入口函數
    $(function(){});
    
    
    //當前元素
    $(this)

DOM對象和JQ對象互轉

1.將DOM對象使用$() 包裹即可轉換為JQuery對象，然後使用Jquery的方法
?
//btnObj就是DOM對象
var btnObj= document.getElementById("btn");
btnObj.onclick=function () {
    this.style.backgroundColor="red";
};
//DOM對象轉jQuery對象,只需要把DOM對象放在$(dom對象)--->jQuery對象
$(btnObj).click(function () {
    $(this).css("backgroundColor","red");
});
?
$(this)  表示當前標簽
$(btnObj) 表示將dom的btn轉換為jq對象，這樣就可以用到jq的方法

2.JQ對象轉換為DOM對象的方法
    $(btnObj).get(0);---->DOM對象
    $(btnObj)[0];----->DOM對象
------------------------------------------
var btnObj=document.getElementById("btn");//DOM對象
var obj= $(btnObj).get(0);//DOM對象
obj.onclick=function () {
  this.style.backgroundColor="green";
};
?
var btnObj=document.getElementById("btn");//DOM對象
var obj= $(btnObj)[0];//DOM對象
obj.onclick=function () {
    this.style.backgroundColor="green";
};

JQuery常見的內容方法

.html()  類似於innerHTML
.text()  類似於innerText
.val()   類似於input的value屬性
?
註意： 括號中寫一個參數表示設置值，什麽都不寫表示獲取值。
?
.css()   類似於給標簽添加樣式

類操作

addClass(‘current‘)     //添加類
removeClass(‘current‘)  //移除類
toggleClass(‘current)    //開關類 
hasClass(‘current‘)     //是否有某個類，返回true和false
?
//可以添加多個類
addClass(‘current‘).addClass(‘bd‘);
addClass(‘current bd‘);
//註意添加類名前面沒有點。

常見動畫方法

show()  顯示
hide()  隱藏   本質上還是display:block和none
slideUp() 上滑
slideDown() 下滑
slideToggle()  上下滑
fadeIn()  淡入
fadeOut() 淡出
fadeToggle() 淡入淡出
fadeTo(事件，透明度)    透明度動畫
?
?
參數1： 
    1.可以寫毫秒，1000毫秒
    2.可以寫字符串 slow normal fast
$("#dv").hide(1000);
$("#dv").show("fast");
?
參數2： 是一個回調函數，可以在動畫執行後觸發
?
$(‘#dv‘).hide(1000,function(){
    alert(‘動畫結束了‘)；
})

animate動畫方法

animate(屬性，時間，回調函數);
屬性的變化和時間是必須的，回調函數可以沒有。
?
animate({"屬性名"："屬性值"},1000)
註意： animate屬性不能修改非數值效果，例如顏色。
?
stop()   動畫停止函數（內部原理停止上一個定時器）；
建議: 在每次添加動畫之前都加上stop(),直接顯示隱藏動畫除外

元素創建

直接使用$(‘標簽‘) 就可以創建一個標簽對象。
append()  追加元素
prepend() 插入某個元素前面
?
after()  在後面添加元素
before() 在前面添加元素
?
appendTo()  把當前標簽添加到其他標簽中去
?

//創建元素
var aObj=$("<a href=‘http://www.baidu.com‘>百度"+i+"</a>");
//把元素添加到div中
$("#dv").append(aObj);//把超鏈接追加到div中
?
//把元素插入到某個元素的前面
$("#dv").prepend(aObj);
//把元素添加到當前元素的後面(兄弟元素來添加)
$("#dv").after(aObj);
//把元素添加到當前元素的前面(兄弟元素來添加)
$("#dv").before(aObj);

註意：append追加元素，可以把已經存在的元素移除，類似於剪切效果

清空內容和克隆節點

html(‘‘) //清空內容
empty()  //清空內容
remove()  移除元素
?
clone()  克隆元素
?
children() 子元素

自定義屬性

attr()  設置和獲取自定義屬性
設置自定義屬性
attr(‘ss‘,‘1‘);
獲取自定義屬性
attr(‘ss‘)
註意： attr不能獲得多選框的選中值checked屬性
?
prop()  //該方法可以獲取多選框的checked屬性

復選框選中屬性操作

//復選框選中案例
//獲取選中狀態
 var flag=$("#ck").prop("checked");
if(flag){
    //選中了
    $("#ck").prop("checked",false);
}else{
    //沒有選中
    $("#ck").prop("checked",true);
}

設置和獲取元素寬高

width()   //獲取和設置寬度
height()  //獲取和設置高度
$("#dv").css("width")   //獲取寬度，返回字符串 100px，可以使用parsetInt轉換為數字
?
$(‘#dv‘).width(100);    //直接設置元素寬度為100，不需要帶px
?
總結： 通過css設置和獲取寬高，需要帶px單位，使用width()方法可以不用帶px單位。
?

獲取元素的位置操作

offset() 方法可以獲得 left和top值，都是數字，不帶單位
offset().left  //left值
offset().top
?
?
//獲取left和top的值--->都是數字類型
console.log($("#dv").offset().left);
console.log($("#dv").offset().top);
?
//設置left和top值
$("#dv").offset({"left":200,"top":200});

13.頁面滾動距離

scrollLeft()  滾動出去的左邊距離
scrollTop()   滾動出去的頂部距離
?
$(document).click(function () {
    //獲取的滾動出去的距離----->數字類型
    console.log($(this).scrollLeft()+"===="+$(this).scrollTop());
});

綁定事件

bind() 事件綁定 類似於JS中的addEventListener
?
普通添加事件：
    $(‘#btn‘).click();
?
添加多個監聽事件
$(‘#btn‘).bind({"click"：回調函數},{"mouseover"：回調函數});
?
//可以同時添加多個事件，但是事件執行函數是一樣的
$(‘#btn‘).bind("mouseover mouseout",function(){});

delegate(標簽,事件類型，回調函數)  //給某個元素的子元素添加事件

on()  父元素調用為子元素添加事件
on(事件類型，標簽，回調函數);
?
兩種用法：
    1.兩個參數： 事件名稱 回調函數
    2.三個參數: 事件名稱 添加事件元素，回調函數

總結：
    bind:
         綁定多個事件
         參數:{"事件的類型":事件處理函數,....}
    delegate
         參數:父級元素.delegate("子級元素","事件類型",事件處理函數)
    on
         參數:父級元素.on("事件類型","子級元素",事件處理函數);
?
建議：在手機上或者動態添加的事件推薦使用on來添加

解綁事件

on()  off()
bind()  unbind()
delegate()  undelegate()
?
//建議： 事件綁定和解綁，不要混著使用，普通的click方法可以使用off解綁

註意： 如果是通過父級元素添加事件，那麽父級元素解綁事件，子級元素事件也會消失。

 //第一個按鈕通過on的方式綁定點擊事件
$("#btn1").on("click",function () {
    alert("我被點了");
});
//第二個按鈕把第一個按鈕的點擊事件解綁
$("#btn2").on("click",function () {
    //off()參數:要解綁的事件的名字
    $("#btn1").off("click");//解綁事件
});

 //第一個按鈕bind綁定事件
$("#btn1").bind("click",function () {
    alert("我又被點了");
});
//第二個按鈕unbind解綁事件
$("#btn2").bind("click",function () {
    $("#btn1").unbind("click");//解綁事件的方法
});

//點擊第一個按鈕為div中p綁定點擊事件
$("#btn1").click(function () {
    $("#dv").delegate("p","click",function () {
        alert("我被點了");
    });
});
//點擊第二個按鈕為div中p解除綁定事件
$("#btn2").click(function () {
    $("#dv").undelegate("p","click");//解綁
});

事件對象

e.delegateTarget----->div--->誰在替元素綁定的事件--div
e.currentTarget----->input--->真正是誰綁定的事件
e.target---->input----觸發的事件

鏈式編程原理

鏈式編程原理： 內部返回了return this當前對象；
?
註意： 有些方法傳入了參數，才能返回對象，如果是直接獲取屬性的值，返回的是內容，就不是對象了。

function Student(name) {
    this.name=name;
    this.sayHi=function (name) {
        if(name){
            console.log("俺是"+name);
            return this;
        }else{
            console.log("我的名字叫"+this.name);
        }
        //console.log("我的名字叫"+this.name);
        // return this;//把當前對象返回
    };
    this.eat=function () {
        console.log("我就是喜歡吃大蒜+榴蓮+臭豆腐");
    };
}
var stu=new Student("小明");
stu.sayHi().eat();
?

1.評分案例

 $(".comment>li").mouseover(function () {
     $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
 }).mouseout(function () {
     $(".comment").find("li").text("☆");
     $(".comment>li[index=1]").text("★").prevAll("li").text("★")
 }).click(function () {
     $(this).attr("index","1").siblings("li").removeAttr("index");
 });

jquery快速入門