jQuery基礎DOM和CSS操做

$('#box').html();//獲取 html 內容
$('#box').text();//獲取文本內容，會自動清理 html 標籤
$('#box').html('<em>www.li.cc</em>');//設置 html 內容
$('#box').text('<em>www.li.cc</em>');//設置文本內容，會自動轉義 html標籤
$('#box').html($('#box').html() + '<em>www.li.cc</em>');//追加數據
$('input').val();//獲取表單內容
$('input').val('www.li.cc');//設置表單內容
$("input").val(["check1","check2", "radio1" ]);//value 值是這些的將被選定
$('div').attr('type');//獲取屬性的屬性值
$('div').attr('type', 'button');//設置屬性及屬性值
$('div').attr('title', function () {//經過匿名函數返回屬性值
return '我是域名';
});
$('div').attr('title', function (index, value) {//能夠接受兩個參數
return value + (index+1) + '，我是域名';
});
$('div').removeAttr('title'); //刪除指定的屬性
$('div').css('color');//獲取元素行內 CSS 樣式的顏色
$('div').css('color', 'red');//設置元素行內 CSS 樣式顏色爲紅色
var box = $('div').css(['color', 'height', 'width']);//獲得多個 CSS 樣式的數組對象
$('div').addClass('red');//添加一個 CSS 類
$('div').addClass('red bg');//添加多個 CSS 類
$('div').removeClass('bg');//刪除一個 CSS 類
$('div').removeClass('red bg');//刪除多個 CSS 類
$('div').width();//獲取元素的長度，返回的類型爲 number
$('div').width(500);//設置元素長度，直接傳數值，默認加 px
$('div').width('500pt');//同上，設置了 pt 單位
$('div').width(function (index, value) { //index 是索引，value 是本來值
return value - 500; //無須調整類型，直接計算
});
$('div').height();//獲取元素的高度，返回的類型爲 number
$('div').height(500);//設置元素高度，直接傳數值，默認加 px
$('div').height('500pt');//同上，設置了 pt 單位
$('div').height(function (index, value) { //index 是索引，value 是本來值
return value - 1; //無須調整類型，直接計算
});
alert($('div').width());//不包含
alert($('div').innerWidth());//包含內邊距 padding
alert($('div').outerWidth());//包含內邊距 padding+邊框 border
alert($('div').outerWidth(true));//包含內邊距 padding+邊框 border+外邊距 margin
$('strong').offset().left;//相對於視口的偏移
$('strong').position().left;//相對於父元素的偏移
$(window).scrollTop();//獲取當前滾動條的位置
$(window).scrollTop(300);//設置當前滾動條的位置

一．DOM 簡介
因爲課程是基於 JavaScript 基礎上完成的，這裏咱們不去詳細的瞭解 DOM 究竟是什麼。
只須要知道幾個基本概念：
1.D 表示的是頁面文檔 Document、O 表示對象，即一組含有獨立特性的數據集合、M
表示模型，即頁面上的元素節點和文本節點。
2.DOM 有三種形式，標準 DOM、HTML DOM、CSS DOM，大部分都進行了一系列的
封裝，在 jQuery 中並不須要深入理解它。
3.樹形結構用來表示 DOM，就很是的貼切，大部分操做都是元素節點操做，還有少部
分是文本節點操做。

二．設置元素及內容
咱們經過前面所學習的各類選擇器、過濾器來獲得咱們想要操做的元素。這個時候，我
們就能夠對這些元素進行 DOM 的操做。那麼，最經常使用的操做就是對元素內容的獲取和修改。

在常規的DOM元素中，咱們可使用 html()和 text()方法獲取內部的數據。html()方法
能夠獲取或設置 html 內容，text()能夠獲取或設置文本內容。
$('#box').html();//獲取 html 內容
$('#box').text();//獲取文本內容，會自動清理 html 標籤
$('#box').html('<em>www.li.cc</em>');//設置 html 內容
$('#box').text('<em>www.li.cc</em>');//設置文本內容，會自動轉義 html標籤

注意：當咱們使用 html()或 text()設置元素裏的內容時，會清空原來的數據。而咱們期
望可以追加數據的話，須要先獲取本來的數據。
$('#box').html($('#box').html() + '<em>www.li.cc</em>');//追加數據
若是元素是表單的話，jQuery 提供了 val()方法進行獲取或設置內部的文本數據。
$('input').val();//獲取表單內容
$('input').val('www.li.cc');//設置表單內容
若是想設置多個選項的選定狀態，好比下拉列表、單選複選框等等，能夠經過數組傳遞操做。
$("input").val(["check1","check2", "radio1" ]);//value 值是這些的將被選定

三．元素屬性操做
除了對元素內容進行設置和獲取，經過 jQuery 也能夠對元素自己的屬性進行操做，包
括獲取屬性的屬性值、設置屬性的屬性值，而且能夠刪除掉屬性。

$('div').attr('title');//獲取屬性的屬性值
$('div').attr('title', '我是域名');//設置屬性及屬性值
$('div').attr('title', function () {//經過匿名函數返回屬性值
return '我是域名';
});
$('div').attr('title', function (index, value) {//能夠接受兩個參數
return value + (index+1) + '，我是域名';
});

注意：attr()方法裏的 function() {}，能夠不傳參數。能夠只傳一個參數 index，表示當前
元素的索引(從 0 開始)。也能夠傳遞兩個參數 index、value，第二個參數表示屬性本來的值。
注意：jQuery 中不少方法均可以使用 function() {}來返回出字符串，好比 html()、text()、
val()和上一章剛學過的 is()、filter()方法。而若是又涉及到多個元素集合的話，還能夠傳遞
index 參數來獲取索引值，而且可使用第二個參數 value(並非全部方法都適合，有興趣
能夠本身逐個嘗試)。
$('div').html(function (index) { //經過匿名函數賦值，並傳遞index
return '我是' + (index+1) + '號 div';
});
$('div').html(function (index, value) { //還能夠實現追加內容
return '我是' + (index+1) + '號 div：'+value ;
});
注意：咱們也可使用 attr()來建立 id 屬性，但咱們強烈不建議這麼作。這樣會致使整
個頁面結構的混亂。固然也能夠建立class 屬性，但後面會有一個語義更好的方法來代替 attr()
方法，因此也不建議使用。
刪除指定的屬性，這個方法就不可使用匿名函數，傳遞 index 和 value 均無效。
$('div').removeAttr('title'); //刪除指定的屬性

四．元素樣式操做
元素樣式操做包括了直接設置 CSS 樣式、增長 CSS 類別、類別切換、刪除類別這幾種
操做方法。而在整個 jQuery 使用頻率上來看，CSS 樣式的操做也是極高的，因此須要重點
掌握。

$('div').css('color');//獲取元素行內 CSS 樣式的顏色
$('div').css('color', 'red');//設置元素行內 CSS 樣式顏色爲紅色
在 CSS 獲取上，咱們也能夠獲取多個 CSS 樣式，而獲取到的是一個對象數組，若是用
傳統方式進行解析須要使用 for in 遍歷。
var box = $('div').css(['color', 'height', 'width']);//獲得多個 CSS 樣式的數組對象
for (var i in box) { //逐個遍歷出來
alert(i + ':' + box[i]);
}
jQuery 提供了一個遍歷工具專門來處理這種對象數組，$.each()方法，這個方法能夠輕
鬆的遍歷對象數組。
$.each(box, function (attr, value) { //遍歷 JavaScript原生態的對象數組
alert(attr + ':' + value);
});
使用$.each()能夠遍歷原生的 JavaScript 對象數組，若是是 jQuery 對象的數組怎麼使
用.each()方法呢？
$('div').each(function (index, element) { //index 爲索引，element 爲元素 DOM
alert(index + ':' + element);
});
在須要設置多個樣式的時候，咱們能夠傳遞多個 CSS 樣式的鍵值對便可。
$('div').css({
'background-color' : '#ccc',
'color' : 'red',
'font-size' : '20px'
});
若是想設置某個元素的CSS樣式的值，但這個值須要計算咱們能夠傳遞一個匿名函數。
$('div').css('width', function (index, value) {
return (parseInt(value) - 500) + 'px';
});
除了行內 CSS 設置，咱們也能夠直接給元素添加 CSS 類，能夠添加單個或多個，而且
也能夠刪除它。
$('div').addClass('red');//添加一個 CSS 類
$('div').addClass('red bg');//添加多個 CSS 類
$('div').removeClass('bg');//刪除一個 CSS 類
$('div').removeClass('red bg');//刪除多個 CSS 類
咱們還能夠結合事件來實現 CSS 類的樣式切換功能。
$('div').click(function () {//當點擊後觸發
$(this).toggleClass('red size');//單個樣式多個樣式都可
});
.toggleClass()方法的第二個參數能夠傳入一個布爾值，true表示執行切換到 class類，false
表示執行回默認 class 類(默認的是空 class)，運用這個特性，咱們能夠設置切換的頻率。
var count = 0;
$('div').click(function () { //每點擊兩次切換一次 red
$(this).toggleClass('red', count++ % 3 == 0);
});
默認的 CSS 類切換隻能是無樣式和指定樣式之間的切換，若是想實現樣式 1 和樣式 2
之間的切換還必須本身寫一些邏輯。
$('div').click(function () {
$(this).toggleClass('red size');//一開始切換到樣式 2
if ($(this).hasClass('red')) { //判斷樣式 2 存在後
$(this).removeClass('blue'); //刪除樣式 1
} else {
$(this).toggleClass('blue'); //添加樣式 1，這裏也能夠 addClass
}
});

上面的方法較爲繁瑣，.toggleClass()方法提供了傳遞匿名函數的方式，來設置你所須要
切換的規則。
$('div').click(function () {
$(this).toggleClass(function () {
//傳遞匿名函數，返回要切換的樣式
return $(this).hasClass('red') ? 'blue' : 'red size';
});
});
注意：上面雖然一句話實現了這個功能，但仍是有一些小缺陷，由於原來的 class 類沒
有被刪除，只不過被替代了而已。因此，須要改寫一下。
$('div').click(function () {
$(this).toggleClass(function () {
if ($(this).hasClass('red')) {
$(this).removeClass('red');
return 'green';
} else {
$(this).removeClass('green');
return 'red';
}
});
});
咱們也能夠在傳遞匿名函數的模式下，增長第二個頻率參數。
var count = 0;
$('div').click(function () {
$(this).toggleClass(function () {
return $(this).hasClass('red') ? 'blue' : 'red size';
},count++ % 3 == 0);
//增長了頻率
});
對於.toggleClass()傳入匿名函數的方法，還能夠傳遞 index 索引、class 類兩個參數以及
頻率布爾值，能夠獲得當前的索引、class 類名和頻率布爾值。
var count = 0;
$('div').click(function () {
$(this).toggleClass(function (index, className, switchBool) {
alert(index + ':' + className + ':' + switchBool);
//獲得當前值
return $(this).hasClass('red') ? 'blue' : 'red size';
},count++ % 3 == 0);
});

五．CSS 方法
jQuery 不但提供了 CSS 的核心操做方法，好比.css()、.addClass()等。還封裝了一些特殊
功能的 CSS 操做方法，咱們分別來了解一下。

$('div').width();//獲取元素的長度，返回的類型爲 number
$('div').width(500);//設置元素長度，直接傳數值，默認加 px
$('div').width('500pt');//同上，設置了 pt 單位
$('div').width(function (index, value) { //index 是索引，value 是本來值
return value - 500; //無須調整類型，直接計算
});

$('div').height();//獲取元素的高度，返回的類型爲 number
$('div').height(500);//設置元素高度，直接傳數值，默認加 px
$('div').height('500pt');//同上，設置了 pt 單位
$('div').height(function (index, value) { //index 是索引，value 是本來值
return value - 1; //無須調整類型，直接計算
});

alert($('div').width());//不包含
alert($('div').innerWidth());//包含內邊距 padding
alert($('div').outerWidth());//包含內邊距 padding+邊框 border
alert($('div').outerWidth(true));//包含內邊距 padding+邊框 border+外邊距 margin

$('strong').offset().left;//相對於視口的偏移$('strong').position().left;//相對於父元素的偏移$(window).scrollTop();//獲取當前滾動條的位置$(window).scrollTop(300);//設置當前滾動條的位置