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);
});

转载于:https://my.oschina.net/u/1858909/blog/374183