JQuery小结

　　Jquery是流行已久的前端开发中必须掌握的框架（程序库）。

　　在前端开发中，常见操作无非就是选择对象和操作对象，JQuery提供了相当便利的语法。

　　1、dom对象、JQuery对象

        dom对象:通过JavaScript获取的对象，无返回null。         JQuery对象:通过JQuery获取的对象，无则返回空。 　　2、dom对象和JQuery对象的转换

　　dom对象转JQuery对象

		var checkboxArray=document.getElementsByName("motto");//dom对象
		// var jqueryMotto=jQuery(checkboxArray);//转换为JQuery对象

　　JQuery对象转dom对象

		var jqueryMotto=$(checkboxArray);JQuery对象
		//⑴、将JQuery对象转换为dom对象
		var checkbox000=jqueryMotto[0];
		//⑵、通过遍历将JQuery对象转换为dom对象
		$(jqueryMotto).each(function(){
			if(this.id=='demo1'){ this.checked="checked"; }
		});
		//⑶、通过for循环将JQuery对象转换为dom对象
		for(var i=0;idiv"));//输出#txl下的所有div子元素（3个）
		console.log($("#title ~div"));//输出#title的同辈div元素（2个）
		console.log($("#PSP +div"));//输出#PSP的相邻div元素（1个）,注意：必须相邻而且不能隔着其他元素
		//⑶表单选择
		$(":radio")[2].checked=true;//通过表单进行选择，元素可以有:input、:text、:checkbox、:radio、:password、:submit、:image、:button、:file(文件域)、reset(重置)
		//3、操作
		//⑴获取属性
		console.log($("input[type='checkbox']")[1].checked);//输出checked属性
		var checkboxList=$("input[type='checkbox']");
		checkboxList.each(function(index,el){
			console.log( $(el).prop('checked') );//输出checked属性
			console.log( $(el).attr('id') );//输出id属性
		});		
		//⑵设置属性
		//固有的属性使用attr和prop都可以
		//自定义属性使用attr
		//true和false的属性使用prop(返回true和false)
		$("#demo4").prop("checked",false);//设置属性
		$("#demo2").attr("data","123");//设置自定义属性
		console.log($("#demo2").attr("data"));//输出自定义属性		
		//⑶获取和设置样式
		console.log( $("#student5").attr("style") ) ;//输出style样式
		$("#student5").css("background","#ccc");//设置属性
		$("#student5").css("font-size","18px");//设置属性
		$("#student1").css( {"background":"#999","font-size":"15px","font-family":"楷体","color":"#d70008"} );//设置属性		
		$("#student3").addClass("focusRowColorSet");//增加样式名称(原来的样式仍然存在)
		$("#focusID").attr("class","focusRowColorSet");//设置行的属性(替换掉原来的)
		$("#student3").removeClass("focusRowColorSet");//去除样式
		//⑷设置和获取内容
		console.log($("#focusID").html());//输出(非表单)元素的html内容
		console.log($("#xm").html());//输出(非表单)元素的html内容		
		$("#xm").html("
姓名
");//设置		
		console.log($("#xb").text());//输出(非表单)元素的text内容		
		$("#xb").text("性别");//设置
		console.log($("#student2").val()) ;//获取表单域的值
		$("#student2").val("小小宋");//设置表单域的值
		//事件
		//页面元素.bind("事件名1 事件名2 事件名3",function(){}),为一个页面元素绑定同一个函数
		//页面元素.bind("事件名1,function(){}).bind("事件名2,function(){}),为一个页面元素绑定多个事件及函数，链式写法
		//页面元素.bind( {"事件名1:function(){}),"事件名2":function(){},"事件名3":function(){} }),为一个页面元素绑定多个事件及函数
		$("#demo2").bind("click",function(){
			console.log("点击了demo2");
		});//绑定了点击事件：
		// document.getElementById("demo2").onclick=function(){
		// 	console.log("点选了demo2");
		// }
		$("#demo3").click(function(){
			console.log("点击了demo3");
		});//绑定了点击事件：
		
		$("#student4").bind({
			"click":function(){
				console.log("点击student4");
			},
			"mouseout":function(){
				console.log("移出student4");
			}
		})
	
	

　　结果图：