jquery常用的一些案例

一:多选框的全选与全不选
1.遍历:使用each();

	$("#checkallbox").click(function(){
		var isChecked = this.checked;
		//使用对象访问的方式进行遍历，语法：$().each(function(){})
		$("input[name='hobby']").each(function(){
			this.checked = isChecked;
		});
	});

2.遍历:使用$.each()

	$("#checkallbox").click(function(){
		var isChecked = this.checked;
		//使用工具类遍历方式，语法：$.each(array，function(i,j){})  
		//其中array代表被遍历的对象，i代表角标，j代表遍历后的dom对象。
		$.each($("input[name='hobby']"), function(i,j) {
			j.checked = isChecked;
		});
	});

3.添加属性:prop()

	$("#checkallbox").click(function(){
		//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
		$("input[name='hobby']").prop("checked",this.checked);
	});

二:二级联动问题

$(function(){
	//2.创建二维数组用于存储省份和城市
	var cities = new Array();
	cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
	cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
	cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
	cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
	
	$("#province").change(function(){
		//10.清除第二个下拉列表的内容
		$("#city").empty();
		//$("#city option").remove();
		//1.获取用户选择的省份
		var val = this.value;
		//3.遍历二维数组中省份
		$.each(cities,function(i,obj){
			//4.判断用户选择的省份和遍历的省份
			if(val==i){
				//5.遍历该省份下的所有城市
				$.each(cities[i],function(j,obj2){
					//6.创建城市文本节点
					//var textNode = document.createTextNode(obj2);
					//7.创建option元素节点
					var op = document.createElement("option");
					//8.将城市文本节点添加到option元素节点中
					//$(op).append(textNode);
					//$(op).append(obj2);	向option元素末尾追加内容
					$(op).html(obj2);	设置option元素内部的html文本内容
					$(op).val(obj2);	//设置option元素的value值
					//9.将option元素节点追加到第二个下拉列表中取
					$(op).appendTo($("#city"));
					
					//原生js写法  ------------------------------------ 
					//创建节点
					var opt = document.createElement("option");
					//为节点设置HTML内容
					opt.innerHTML = pcities[i];
					//在sel2中末尾追加指定的节点
					sel2.appendChild(opt);
				});
			}
		});
	});
});
//-------------------------------------------------
<select id="province">
	<option>--请选择--</option>
	<option value="0">湖北</option>
	<option value="1">湖南</option>
	<option value="2">河北</option>
	<option value="3">河南</option>
</select>
<select id="city"></select>

三:下拉列表左右选择

/*1.选中单击去右边*/
$("#selectOneToRight").click(function(){
	$("#left option:selected").appendTo($("#right"));
});
/*2.单击全部去右边*/
$("#selectAllToRight").click(function(){
	$("#left option").appendTo($("#right"));
});
/*3.选中双击去右边*/
$("#left").dblclick(function(){		//这里是下拉选被双击时触发,不是后代元素#left option被双击时触发
	$("#left option:selected").appendTo($("#right"));
});
/*1.选中单击去左边*/
$("#selectOneToLeft").click(function(){
	$("#right option:selected").appendTo($("#left"));
});
/*2.单击全部去左边*/
$("#selectAllToLeft").click(function(){
	$("#right option").appendTo($("#left"));
});
/*3.选中双击去左边*/		
$("#right").dblclick(function(){	//这里是下拉选被双击时触发,不是后代元素#left option被双击时触发
	$("#right option:selected").appendTo($("#left"));
});
//------------------------------------------------------------------
<select multiple="multiple" id="left">
	<option>IPhone6s</option>
	<option>小米4</option>
	<option>锤子T2</option>
</select>
<a href="#" id="selectOneToRight">&gt;&gt;</a> <a href="#" id="selectAllToRight">&gt;&gt;&gt;</a>
----------------------------------------
<select multiple="multiple" id="right">
	<option>三星Note3</option>
	<option>华为6s</option>
</select>
<a href="#" id="selectOneToLeft">&lt;&lt;</a> <a href="#" id="selectAllToLeft">&lt;&lt;&lt;</a>