JQuery的几种常用代码

JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。这是网上给出的介绍。
JQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。经过今天的学习，我深刻体验到了JQuery的这种宗旨的含义。
今天将之前的登录注册的页面里脚本全部用JQuery实现了一遍，发现代码少了好多，使用起来也是非常方便的。
1.三种基本选择器：
id选择器：$("#id")
元素选择器：$("元素")
类选择器：$(".class")

2.焦点和焦点离开事物

在不使用jquery时，会在Html代码中需要执行触发事件的地方加上onclick或者onblur来分别监测鼠标的操作来执行相应操作，例如：

	<input type="text" name="username" id="username" οnfοcus="reminder1(this)" οnblur="reminder(this)" value="请输入账号">
		
	function reminder(inputObj){
		if(inputObj.value==""){
			inputObj.value="请输入账号";
		}
	}

	function reminder1(inputObj){
		if(inputObj.value=="请输入账号"){
			inputObj.value="";
		}
	}

在使用jquery时，我们不需要在Html中加入监测代码，只需要在脚本中为需要执行操作的代码绑定事务即可，具体实现如下：

	$("#username").blur(function(){
		//alert($("input[name=username]").val());
		if($("input[name=username]").val()==""){
			$("input[name=username]").val("请输入账号");
		}
	});

	$("#username").click(function(){
		//alert($("input[name=username]").val());
		if($("input[name=username]").val()=="请输入账号"){
			$("input[name=username]").val("");
		}
	});

其中。click和blur方法就是分别执行点击和焦点离开的函数。其实jquery可以和java类比，基本的语法是很相似的，

3.$("#id").html()和 $("#id").text()的区别
$("#id").html()和$("#id").text()都是取id为某个值时的相关内容，但是它们是不一样的。
$("#id").text()是返回元素的文本内容。
$("#id").html()是返回元素的内容，并没有标签。
它们也可以对内容进行设置。
$("#id").text("<font>Hello world</font>");
$("#id").html("<font>Hello world</font>");
text设置后的内容是文本内容，所以会显示<font>Hello world</font>，但是html会将字符串插入元素中，浏览器并不会显示<font>,最终显示的是Hello World。

4.全选与反选
在不使用jquery时，代码如下：

	function selectAll(a,b){
	var checkvideolist=document.getElementsByName(a);

	if(document.getElementById(b).checked){
		for(var i=0;i<checkvideolist.length;i++){
			checkvideolist[i].checked=1;
		}
	}else{
		for(var j=0;j<checkvideolist.length;j++){
			checkvideolist[j].checked=0;
		}
	}
	}

在使用jquery时，代码如下:

	$("#selectall").click(function(){
		//alert($("#selectall").prop("checked"));
		$("input[name=video]").each(function(){
			//alert($(this).prop("checked"));

			$(this).prop("checked",$("#selectall").prop("checked"));
		});
	});

	$("#selectall1").click(function(){
		//alert($("#selectall").prop("checked"));
		$("input[name=sport]").each(function(){
			//alert($(this).prop("checked"));

			$(this).prop("checked",$("#selectall1").prop("checked"));
		});
	});

其中$("input[name=sport]")取的是标签input中name=sport的jquery对象;
$("#selectall").prop("checked")获得的是checkbox或者radio的选中状态，返回值类型为true或者false;
prop还可以设置选中状态：$("#selectall").prop("checked",true)
each是对获得的所有对象进行相应函数操作，可以替代for循环使用。

5.表单的提交方式
在不使用jquery时，表单提交按钮上也会有一个onclick监测来提交表单。但是用jquery完全可以像下面代码这样写：

	$("form").submit(function(e){
		var usernameJQ = $("#username");
		var pwdJQ = $("#pwd");
		var repwdJQ = $("#repwd");
		var sex1JQ = $("#sex1");
		var sex2JQ = $("#sex2");
		var agreementJQ = $("#agreement");
			
		if (!isPassword($("input[name=pwd]").val())) {
			e.preventDefault();
		}
		flush();
		if(usernameJQ.val() == ""|| usernameJQ.val()=="请输入账号" ){
			$("#usererror").html('<font style="color:red;font-size:10px"><b> 账号不能为空</b></font>');
			e.preventDefault();
		}
		if(pwdJQ.val() == ""){
			$("#pwderror").html('<font style="color:red;font-size:10px"><b> 密码不能为空</b></font>');
			e.preventDefault();
		}else if(pwdJQ.val() != repwdJQ.val()){
			$("#repwderror").html('<font style="color:red;font-size:10px"><b> 两次输入密码不一致</b></font>');
			e.preventDefault();
		}

		if(!sex1JQ.prop("checked") && !sex2JQ.prop("checked")){
			$("#sexerror").html('<font style="color:red;font-size:10px"><b>   请选择性别</b></font>');
			e.preventDefault();
		}
		
		if(!agreementJQ.prop("checked")){
			$("#agreementerror").html('<font style="color:red;font-size:10px"><b> 请阅读注册协议</b></font>');
			e.preventDefault();
		}
	});

大概意思就是:

	$("form").submit(function(e){			
		if (!isPassword($("input[name=pwd]").val())) {
			e.preventDefault();
		}
	});

直接获取到form的jquery对象调用submit函数执行函数体，e.preventDefault()是用来处理出现错误时不进行提交。
其中的$("input[name=pwd]").val()获取的是对象的值，对去表单中的文本框就可以这样获取，同样它的设置方法和上面的html以及text一样，都是 $("input[name=pwd]").val("Hello World")。


今天我也是体验到了万事开头难的道理，刚开始无从下手，经过耐心的步骤分析和查找，慢慢的发现其实内部原理很简单，而且jquery使用起来方便了很多。