jquery 在線文檔學習

// .each 以每個匹配的元素做爲上下文來執行一個函數。
$('span[name=""]').each(function(i){
    this.innerHTML; // DOM元素顯示內容,innerHTML屬性
    $(this).text(); // jQuery對象顯示內容，text()方法
});

// .size() jQuery 對象中元素的個數
$('span[name=""]').size() // 等同於.length屬性

// .get(num) 取得其中的第幾個元素
$('span[name=""]').get(num).innerHTML // DOM元素內容，get(num)方法
$('span[name=""]')[num].innerHTML // DOM元素內容,數組訪問方法

// .reverse() 對象數組反向
$('#test').click(function(){
	
	var arrayInfo = [1,2,3];
	
	var otherArray = arrayInfo.reverse();
	for(var key in otherArray)
		alert(key + ":" + otherArray[key]);
});

// .index([selector|element]) 搜索匹配的元素，並返回相應元素的索引值，從0開始計數
$('#test').click(function(){
	alert($('div').index(document.getElementById('info')));
});

// .data() 在元素上存放數據,返回jQuery對象。只針對DOM元素使用
$('#test').click(function(){
	// 元素對象存放基本的key/value
	$('div').data("name","libo");
	// 經過key來訪問值
	alert($('div').data("name"));
	
	// 構造Json對象
	var jsonInfo = {"name":"libo","age":"26","sex":"男"};
	// 元素對象存放Json對象
	$('div').data("info",jsonInfo);
	// 訪問元素對象Json對象的值
	alert($('div').data("info").age);
});

// .removeData() 在元素上移除存放的數據
$('#test').click(function(){
	
	// div元素上增長數據
	$('div').data("name","libo");
	// 訪問元素上的數據
	alert($('div').data("name"));
	
	// 移除元素上面的數據
	$('div').removeData("name");
	// 再次訪問數據，出現"undefined"
		alert($('div').data("name"));
});

// jQuery.fn.extend 增長JQuery插件方法
$('#test').click(function(){
	$('#sex').check();
});

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

// jQuery.extend 用來在jQuery命名空間上增長新函數
$('#test').click(function(){
	
	// 構造一個Json對象
	var oldInfo = {"name":"zhangsan","age":"25","sex":"男"};
	// 構造另外一個Json對象
	var newInfo = {"name":"lisi","age":"24","sex":"男"};
	
	// 調用本身建立的函數
	var changeFlag = $.checkChange(oldInfo,newInfo);
	alert(changeFlag);

});

jQuery.extend({
	// 初期化數據和變動的數據進行比較
	checkChange : function(oldInfo,newInfo){
		var flag = false;
		for(var key in oldInfo){
			var newValue = newInfo[key];
			if(oldInfo[key] != newValue){
				flag = true;
			}
		}
		return flag;
	}
});

// .attr() 設置或返回被選元素的屬性值, .removeAttr() 刪除指定屬性  Jquery 1.0
$('#test').click(function(){
	// 爲元素增長選中屬性
	$('#checkInfo').attr('checked','checked'); //	$('#checkInfo').attr('checked',true);
	
	
	// 得到元素指定屬性
	alert($('#checkInfo').attr('checked'));
	
	// 經過函數判斷，增減屬性
	$('#checkInfo').attr('checked',function(){
		if($(this).attr('checked') != 'checked'){
			return true
		}else{
			return false;
		}
	});
});

// .prop() 獲取在匹配的元素集中的第一個元素的屬性值。 .removeProp() 用來刪除由.prop()方法設置的屬性集 jquery 1.6 
$('#test').click(function(){
	// 爲元素增長選中屬性
	$('#checkInfo').prop('checked','checked');
	
	// 得到元素指定屬性
	alert($('#checkInfo').prop('checked')); // 返回ture, 而attr方法範圍"checked";
	
	// 經過函數判斷，增減屬性
	$('#checkInfo').prop('checked',function(){
		if($(this).prop('checked')){
			return false;
		}else{
			return true;
		}
	});
	
	// 經過函數判斷，增減屬性 index爲當前元素的索引值，attr爲原先的屬性值。
	$('#checkInfo').prop('checked',function(index,attr){
		if(attr){
			return false;
		}else{
			return true;
		}
	});
});

// .addClass .removeClass .toggleClass CSS樣式操做
$('#getDiv').click(function(){
	// 爲元素添加CSS樣式
	$('#divInfo').addClass("colorInfo fontInfo");
	// 移除CSS樣式
	$('#divInfo').removeClass("colorInfo");
	
	
	var valueA = $('#valueA').val();
	var valueB = $('#valueB').val();
	
	// 根據條件表單式添加CSS樣式
	$('#divInfo').toggleClass("colorInfo",valueA - valueB == 1);
});

// .css 訪問匹配元素的樣式屬性
$('#spanInfo').click(function(){

	// 得到Class對應的值
	alert($(this).css('color'));
	
	// 設置key/value值樣式
	$(this).css({color:'red',background:'green'});
	
});

// >,+,~ 使用
$('#spanInfo').click(function(){

	// 查找指定父元素下面的子元素
	alert($('#divInfo > span').text());
	
	// 查找該元素的下一個元素
	alert($('#divInfo + span').text());
	
	// 查找該元素的下面的全部元素
	alert($('#divInfo ~ span').text())；
	
});

// .first .last 使用
$('#test').click(function(){

	// 取得該元素下面的第一個元素
	alert($('#divInfo:first').text());
	alert($('div').first().text());
	
	// 取得該元素下面的最後一個元素
	alert($('div:last').text());
	alert($('div').last().text());
});

// 篩選元素
$('#tableInfo').click(function(){
	// 篩選出沒有checked屬性的元素
	$("input:not(:checked)");
	
	// 篩選出索引爲奇數的元素
	alert($('td:even').length);
	
	// 篩選出索引爲偶數的元素
	alert($('td:odd').text());
	
	// 匹配一個給定索引值的元素
	alert($('td:eq(0)').text());
	
	// 匹配全部大於給定索引值的元素
	alert($('td:gt(0)').text());
	
	// 匹配全部小於給定索引值的元素
	alert($('td:lt(1)').text());
	
	// 匹配h1,h2,h3之類的標題元素
	alert($(':header').css('background','red'));
	
	// 觸發每個匹配元素的focus事件
	$("#textInfo:focus");
	
});

$('#spanControl').click(function(){
	// 匹配包含指定文本的元素
	alert($("span:contains('?')").text());
	
	// 匹配全部不包含子元素或者文本的空元素
	alert($('div:empty').length);
	
	// 匹配含有選擇器所在匹配的元素的元素
	alert($("div:has('span')").length);
	
	// 匹配不可見元素
	alert($('span:hidden').text());
	
	// 匹配Type爲hidden的元素
	alert($('input:hidden').val());
	
	// 匹配可見元素
	alert($('span:visible').text());
	
	// 匹配包含指定屬性的元素
	alert($('span[hidden]').text());
	
	// 匹配Name爲某個值的元素
	alert($('input[name="testHidden"]').val());
	// 匹配Name不爲某個值的元素
	alert($('input[name!="testHidden"]').val());
	// 匹配以某些值開頭的元素
	alert($('input[name^="test"]').length);
	// 匹配以某些值結尾的元素
	alert($('input[name$="Hidden"]').length);
	// 匹配包含某些值的元素
	alert($('input[name*="H"]').length);
	// 複合條件匹配查找元素
	alert($('input[value][name$="Hidden"]').val());

});


$('#test').click(function(){

	// 經過函數返回內容追加到指定元素後面
	$('div').append(function(index,value){
			return  "<span>who are you</span>";
	});
	// 把span追加到div後面
	$('span').appendTo('div');
	// 在指定元素以前添加元素
	$('div').prepend('<p>boy is friend</p>');
	// 把元素內容追加到指定元素
	$('span').prependTo('div');
	// 在指定元素以後追加內容
	$('div').after('<div>wo shi shui</div>');
	// 在指定元素以前追加內容
	$('div').before('<div>why are you so diao</div>');
	// 把全部匹配的元素插入到另外一個、指定的元素元素集合的後面
	$('p').insertAfter('div');
	// 把全部匹配的元素插入到另外一個、指定的元素元素集合的前面
	$('p').insertBefore('div');

});


$('#pGet').click(function(){

	// 克隆匹配的DOM元素而且選中這些克隆的副本
	$('.colorInfo').clone().prependTo('span');
	
	// 克隆匹配的DOM元素而且選中這些克隆的副本,true的狀況下，事件處理函數也會拷貝過去
	$('.colorInfo').clone(true).prependTo('span');
	
	// 獲取第N個元素
	alert($('p').eq(0).text());
	// 獲取第N個元素，負數的話，從1開始，從最後向上訪問
	alert($('p').eq(-1).text());
	
	// 篩選出與指定表達式匹配的元素集合
	alert($('p').filter('.colorInfo').attr('class'));
	
	// 根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合
	alert($('p').parent().is('div'));
	
	// 匹配包含指定Class樣式的子元素
	alert($('div').children('.colorInfo').text());

});

// .focus學習
var flag = $("#userName").val();

$("#userName").focus(function(){
	$(this).val(function(index,value){
		if(flag != value){
			alert("data is chaged");
		}else{
			alert("data is not chage");
		}
	});
});

//.focusout 在每個匹配元素的focusout事件中綁定一個處理函數。
$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

//.keydow 觸發每個匹配元素的keydown事件
$(window).keydown(function(event){
	switch(event.keyCode){
		case 13: // 注意：case "13" 是不對的。類型不匹配
			alert(1);
			break;
		default:
			alert(2);
	}
});

$(window).keydown(function(){
	alert(1);
});


// .keypress只在按下字符鍵的時候才觸發，按下F5之類的鍵則不觸發（但keydown、keyup能夠）
$(window).keypress(function(){
	alert(1);
});


$(window).keyup(function(){
	alert(1);
});

//.resize窗口改變大小時觸發的函數
$(window).resize(function(){
  alert("Stop it!");
});

// .scroll當頁面滾動條變化時,打出消息
$(window).scroll(function(){
	alert(1);
});

// .select 元素被選中的時候觸發的函數
$("#value").select(function(){
	alert(1);
});

// .show 顯示元素，參數爲時間，屬性，函數
$("#setDiv").click(function(){

	$("div").show(4000,function(){
		$(this).text("Animation Done!");
	});
});

// .toggle自動切換
$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

// .slideToggle 自動切換變化狀態
$("#setDiv").click(function(){

	$("div").slideToggle("slow");
});

// $.merge 對兩個數組進行合併
$('#test').click(function(){
	var arrayA = [1,2,3];
	var arrayB = [4,5,6];
	
	var sumArray = $.merge(arrayA,arrayB);
	
	for(var key in sumArray){
		alert(key + ":" + sumArray[key]);
	}
});

// $.parseJSON 接受一個JSON字符串，返回解析後的對象
$('#test').click(function(){
	var jsonInfo = '{"name":"libo"}';
	
	var strInfo = $.parseJSON(jsonInfo);
	
	alert(strInfo.name);
});

// $.type 檢測obj的數據類型
$('#test').click(function(){
	var str = 13;
	
	if(jQuery.type(str) == 'string'){
		alert(1);
	}else{
		alert(2);
	}
});

// $.isArray jQuery 1.3 新增。測試對象是否爲數組
$('#test').click(function(){
	var str = [];
	
	if($.isArray(str))
		alert(1);
	else
		alert(2);
	
});

// $.isEmptyObject jQuery 1.4 新增。測試對象是不是空對象（不包含任何屬性）
$('#test').click(function(){
	var str = [];
	
	if($.isEmptyObject(str))
		alert(1);
	else
		alert(2);
	
});

// $.isPlainObject 測試對象是不是純粹的對象（經過 "{}" 或者 "new Object" 建立的）
$('#test').click(function(){
	var str = '{}';
	
	if($.isPlainObject(str))
		alert(1);
	else
		alert(2);
	
});

// $.isNumeric 肯定它的參數是不是一個數字
$('#test').click(function(){
	var str = "";
	
	if($.isNumeric(str))
		alert(1);
	else
		alert(2);
	
});

// $.trim(str) 去掉字符串起始和結尾的空格
$('#test').click(function(){
	var str = " wo ke yi ai ni ma ";
	
	alert($.trim(str));
	
});

// $.param() 將表單元素數組或者對象序列化
$('#test').click(function(){
	var params = {"name":1680, "number":1050 };
    var str = $.param(params);
		alert(str);
});