jQuery

學習了jQuery感覺是真的很好用，感謝那些參與代碼撰寫的大佬們

1.1 初認識

1.1.1 入口函式

作用相當于onload事件,等dom結構渲染完畢即可執行

但又有所不同

onload 事件是等頁面檔案、外部的 js 檔案、css檔案、圖片加載完畢才執行內部代碼，

// 第一種
$(function () {   
    ...  // 內容
}) ; 

// 第二種
$(document).ready(function(){
   ...  //  內容
});

1.1.2 頂級物件$

可以用jQuery來代替，相當于原生js中的window

1.1.3 jQuery 物件和 DOM 物件

1. 用原生 JS 獲取來的物件是 DOM 物件
2. jQuery 方法獲取的元素是 jQuery 物件，
3. jQuery 物件是經過包裝的dom物件（偽陣列形式存盤）

jQuery物件才能使用jQuery方法,不能混用

1.1.4 jQuery物件和Dom物件轉換

// DOM物件轉換成jQuery物件
var box = document.getElementById('box');  // 獲取DOM物件
var jQueryObject = $(box);  // 把DOM物件轉換為 jQuery 物件

// jQuery 物件轉換為 DOM 物件兩種方法：
//  jQuery物件[索引值]
var domObject1 = $('div')[0]
// jQuery物件.get(索引值)
var domObject2 = $('div').get(0)

2.1 jQuery選擇器

2.1.1 基礎選擇器

2.1.2 層級選擇器

2.1.3 篩選選擇器

2.1.4 其他選擇器

2.2 基礎知識

2.2.1 排他思想

$(this).css(“color”,”red”);//自己變色
$(this).siblings(). css(“color”,””);//兄弟除色

2.2.2 隱式迭代

在jQuery內部會遍歷dom物件的程序叫做隱式迭代

$('div').hide(); //頁面中所有的div都會被隱藏

2.2.3 鏈式編程

$(this).css('color', 'red').sibling().css('color', ''); 

3.1 樣式操作

3.1.1 操作css

var strColor = $(this).css('color');

$(this).css(''color'', ''red'');

//引數可以是物件形式，方便設定多組樣式，屬性名和屬性值用冒號隔開， 屬性可以不用加引號
$(this).css({ "color":"white","font-size":"20px"});

一般來說通過在style中撰寫樣式，通過添加類的方式添加樣式

3.1.2 設定類名方法

// 1.添加類
$("div").addClass("current");

// 2.洗掉類
$("div").removeClass("current");

// 3.切換類
$("div").toggleClass("current");

在原生js中className會覆寫類名，在jQuery中指操作指定類名，不影響原先的類名

3.2 jQuery效果

注意：

影片或者效果一旦觸發就會執行，如果多次觸發，就造成多個影片或者效果排隊執行，

停止影片排隊：stop() ;

這樣就可以在影片執行的時候停止影片

3.2.1 顯示隱藏

• 顯示隱藏：show() / hide() / toggle() ;

關于引數

引數都可以省略，無影片直接顯示

第一個引數speed : 三種預定速度（show，normal，fast）或者是影片時長的毫秒數

第二個引數 easing：指定切換效果，默認是’swing’ 還可設為’linear’

第三個引數 fn :回呼函式，在影片完成時執行的函式

3.2.2 滑入滑出

• 滑入滑出：slideDown() / slideUp() / slideToggle() ;

3.2.3 淡入淡出

• 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

tips: fadeTo()必須要寫速度和透明度，透明度表示淡入后的最大透明度

<script>
    $(function() {
        $('button').eq(0).click(function() {
            $('div').stop().fadeIn();
        })
        $('button').eq(1).click(function() {
            $('div').stop().fadeOut();
        })
        $('button').eq(2).click(function() {
            $('div').stop().fadeToggle();
        })
        $('button').eq(3).click(function() {
            $('div').stop().fadeTo(100,.3);
        })
    })
</script>

3.2.4 自定義影片

• 自定義影片：animate() ;

第一個引數傳入更改的樣式屬性,以物件形式傳遞，注意復合屬性用駝峰命名,后面3個引數可以省略

<script>
    $(function() {
        $('button').click(function() {
            $('div').animate({
                left: 500,
                top: 300,
                opacity: .5,
                hight: 300
            })
        })
    })
</script>

注意設定top,left的時候要給div加定位，否則無效

3.2.5 事件切換

jQuery中有hover()事件，功能類似于css中的hover

hover(function,function)

傳入2個引數，第一個引數是滑鼠移入是觸發的函式，第二個是滑鼠移出時觸發的函式

只寫一個引數時，滑鼠移入移出都會觸發它

4.1 jQuery屬性操作

4.1.1 元素固有屬性值 prop()

獲取元素本身自帶的屬性,有利于對表單操作

• 表單屬性：disabled checked這類屬性操作很順暢

//獲取
prop('屬性名');

//更改
prop('屬性名','屬性值');

4.1.2 元素自定義屬性值 attr()

//獲取
attr('屬性名');

//更改
attr('屬性名','屬性值');

4.1.3 資料快取 data()

可以在指定的元素上存取資料，但不會修改DOM元素結構，頁面重繪快取清除

data('myName','ljc');//向元素添加資料

data('myName');//向元素讀取資料

4.1.4 全選按鈕

通過:checked選擇器，可以以陣列形式回傳被選中的元素

$(function() {
    $('.all').change(function() {
        $('.child').prop('checked',$('.all').prop('checked'));//全選按鈕
    })
    $('.child').change(function() {
        if($('.child:checked').length == $('.child').length) {
            $('.all').prop('checked',true);// 如果小按鈕全部被選中，全選勾上
        }else {
            $('.all').prop('checked',false);
        }
    })
})

4.2 文本屬性

4.2.1 文本內容

• 普通元素內容

這樣獲取到的會帶有標簽

可以通過傳入引數來更改內容

<div>
    <span>123</span>
</div>

<script>
    console.log($('div').html());// <span>123</span>
    $('div').html('ljc'); //div中只剩ljc
</script>

• 普通元素文本內容

只會獲取文本的內容，不會獲取標簽

• 表單的值 val()

console.log($("input").val());//獲取表單的內容
$("input").val("123");//改表單的內容

保留2位小數 toFixed(2)

4.3 元素操作

4.3.1 遍歷元素

隱式迭代是對同一類元素做同一件事情，但是要做不同事情的話還是需要使用遍歷

$('div').each(function(index, domEle) {});

• 是dom物件不是jQuery物件，需要轉換成jquery物件才能使用方法

$.each(obj,function(index,domele){})

可以用來遍歷任何物件，主要用來做資料處理，

var sum = 0;
var arr = ['red','blue','yellow'];
$('div').each(function(index, domEle) {
    //index是索引號 domEle是dom元素物件
    $(domEle).css('color', arr[index]);
    //轉化為整數，否則輸出0123，以字串來拼接
    sum += parseInt($(domEle).text());
})
console.log(sum);//6

$.each({
    name: 'ljc',
    age: 20
},function(i,ele) {
    console.log(i); // name age
    console.log(ele); // 'ljc' 20
})

4.3.2 操作元素

• 創建元素

var li = $('<li>新創建的元素</li>');

• **添加元素(**在后面添加)

$('ul').append(li);

• 添加元素(在前面添加)

$('ul').prepend(li);

• 外部添加(在前面添加)

 $('div').before(div);

• 外部添加(在后面添加)

 $('div').after(div);

• 洗掉元素

$('ul').remove();//整個ul洗掉

• 洗掉元素集合中的子節點

$('ul').empty();//相當于清空ul里的內容

• 通過html來清空

$('ul').html();

4.4 尺寸，位置操作

4.4.1 jQuery尺寸操作

• 回傳值是數字型的
• 如果引數是數字，則修改樣式
• 引數不寫單位

4.4.2 jQuery 位置操作

1. offset()設定獲取元素偏移

獲取的位置是相對于檔案的偏移坐標，與父級沒有關系

傳入的引數是一個物件

//獲取偏移量
$('div').offset()
//更改位置
$('div').offset({
      top: 200,
      left: 100
})

2. position()獲取帶有定位的偏移

獲取的位置是相對于帶有定位的父級元素

這個方法只能獲取，不能修改

$('div').position()

3. scrollTop() scrollLeft 設定元素被卷去的頭部和左側

不跟引數是獲取，跟引數是設定

5.1 jQuery 事件

5.1.1 on() 系結事件

on()系結事件的好處

1. 可以系結多個事件，多個處理事件函式

$('div').on({
    mouseover : function() {},
    click : function() {}
})
$('div').on('mouseenter mouseleave',function() {
    $(this).toggleClass('currrnt');
})//如果執行的程式相同可以采用這種方法

2. 事件委托

$('ul').on('click','li',function() {
       alert('hello world');
 })

3. 對于新創建的元素，click無法系結，但是on可以

$('div').on('click','p',function() {
    alert('別點我');
})

$('div').append($('<p>新來的</p>'))

5.1.2 off()解綁事件

• 解除全部事件

$('div').off()

• 解除特定事件

$('div').off('click')

• 解除事件委托

$('div').off('click','li')

• 只觸發一次的事件

$('div').one('click',function(){})

5.1.3 tigger()自動觸發事件

// 會觸發元素的默認行為
$("div").click();
// 會觸發元素的默認行為
$("div").trigger("click");
//不會觸發默認行為，比如自動獲取焦點
$("input").triggerHandler("focus");//不會獲取焦點

6.1 jQuery 事件物件

和原生js的事件物件基本相同

阻止默認行為 ： event.preventDefault(),return false

阻止冒泡 : event.stopPropagation()

6.1.1 拷貝物件

$.extend([deep], target, obj1)

1. [deep]，深拷貝為true，默認為false 淺拷貝
2. target要拷貝的物件
3. obj被拷貝的物件

$(function() {
    var targetObj = {
        sex : 'male'
    };
    var obj = {
        id: 1,
        name: 'andy'
    };
    $.extend(targetObj,obj);// v把obj 拷貝給 targetObj
    console.log(targetObj);// {sex: "male", id: 1, name: "andy"}
    console.log(obj); // {id: 1, name: "andy"}
})

如果傳入多個物件，則在后面的物件會覆寫前面的物件

6.1.2 多庫共存

用來解決命名沖突的問題

jQuery解決方法

1. 把$換成jQuery，jQuery('div')
2. 自定義名字， var xx = $.noConflict();

<script>
	$(function() {
  		// 讓jquery 釋放對$ 控制權 讓用自己決定
  		var ljc = jQuery.noConflict();
  		console.log(ljc("span"));
	})
</script>

7.1 jQuery 插件

1. 引入css.
2. 引入JS
3. 引入html，

還有很多東西沒有學，那就繼續加油吧！