【学习】JQUERY选择器初探（入门级）

闲来无事，自己写了个JS插件，需求就是动态NEW一个表单，表括表单中的一些INPUT元素，都是传参定义出来的。（跟EXT的思路是很像的。）

表单做好后，最后当然是要提交啦，在提交的时候需要做一些验证，思路有好几种，我用了一种最简单的思路。如下：

插件在表单元素定义时传参如下：

var input = {type : 'input',id: 'trdate',value : '',name : 'trdate',isnull : 'false', };

这样传参后，页面上的input对应的就是：

<input id="trdate" class="form-control" type="text" name="trdate" value="" isnull="false">

此时，我给INPUT表单自定义了一个属性isnull，用来标记是否可以为空，如果isnull="false"，那表明不能为空。

所以在表单提交的时候，我们要对isnull进行验证。
--------------------------------------------------------

具体DEMO如下：

比如我们已经在页面中new出一个form对象，JSP的代码如下：

<form id="ajaxform" action="xxx">
    <input type="text" isnull="false" id="trdate" name="trdate" value=""/>
    <input type="text" isnull="false" id="name" name="name" value=""/>
    <input type="hidden" id="realname" name="realname" value=""/>
    <input type="button" onclick="submitform('ajaxform');"/>
</form>

<script type="text/javascript">
submitform(formid){
//验证以及提交表单
}
</script>

我的需求就是：若不根据input的id去取input元素，现只有一个已知ID，那就是formid，怎么去取input呢？

我第一次写的代码如下：

submitform(formid){
var inputs = $("#"+formid);
for(var i = 0;i<inputs.length;i++){
	var inputhtml = inputs[i];//打印出来的是：Object HTMLInputElement元素
	if(inputhtml.getAttribute("type") == "hidden"){
		continue;
	}
	if(inputhtml.getAttribute("isnull") == "false"){
		var input = $("#" + inputhtml.getAttribute("id"));
		if(input.val() == ""){
			alert(msg_isnotnull);
			return;
			break;
		}
	}
}
$("#"+formid).submit();
}

思路比较直接：
1、根据form，找到form对象下的所有input表单，不管type为text还是hidden
2、排除掉不需要验计的hidden表单
3、取得isnull为false的表单，取得value的值，若为空，则不让提交表单。

注：JS的Object HTMLInputElement元素，可查API：[url]http://krook.org/jsdom/HTMLInputElement.html [/url]

input的getAttribute方法，可以取出表单的各种属性，如id,type,name,value
这里，特别要注意下value；取出来的是我们页面上定义的value值，而不是我们实时输入的value值，比如我们用idinput.getAttribute("value")，取出来的永远是个空字符串。
实时输入的value值可通过$("#"+idinput.getAttribute("id")).val()取得。即先取得INPUT对象，再用JQUERY的val()方法取。


研究了JQUERY选择器后，第二次优化如下：

submitform(formid){
$.each(form.find("input[isnull='false']"), function(i,val){ 
	if(val.value == ""){
		alert(msg_isnotnull);
		return;
		return false;
	}   
});  
$("#"+formid).submit();
}

此次，代码清晰多了，可见JQUERY的简洁与实用。
1、form.find("input[isnull='false']"表示取得form下isnull为false的所有表单
2、jquery的each()方法的运用：$.each($("input:hidden"), function(i,val){ })

注：
jquery each循环,要实现break和continue的功能：
break----用return false;
continue --用return ture;

---------------------------------------
jQuery 参考手册 - 选择器：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
JS dom 参考手册：http://krook.org/jsdom/HTMLInputElement.html

评论

1 楼 hu3625067 2013-12-11  

写的很棒