本贴写一些自己在使用jQuery中的一些技巧。关于jQuery的一些基础语法,这里就不做介绍了,这里只是总结一下我在使用jQuery的一些心得和技巧,抛砖引玉,希望jQuery的粉丝们也来分享一下你们的技巧哈。。
这样一种情况,从数据库循环取出一些数据,每一条数据会生成一些单选框、复选框或文本框之类的表单元素。这样就形成了一整张表单,现在我们要对这一张表单进行验证,必须选择,或必须输入等等。在没有jQuery之前,很容易想到会将这些表单元素命名为诸如 txtName+Id ,其中Id为不重复的标识符,然后验证的时候循环、使用getElementById来获取其表单元素。。
而现在,jQuery中 $(".class")这个筛选规则将为我们带来巨大的方便。
思路:在循环生成表单时,不使用Id,而使用Class,每一条数据使用一个div包裹起来,并给这个div设置一个class,例如我们设为 <div class="formItem">其他表单元素</div>。在验证表单的时候,使用$(".formItem")获取每一条数据生成的表单,这样有多少条数据,这里$(".formItem")就可以得到多少个jQuery对象,然后使用 each()函数分别验证这些对象中的表单元素。
实例效果请参考网站:http://www.ibay24.de/ 的购物流程
在项目中,有这样一个需求,将单选框改替换为按钮,而按钮又要具备单选框的特性,也就是说,以前有一组单选框来实现单选功能,现在要使用按钮来实现这些单选框的功能。初想,觉得还是挺麻烦的。你有什么好的思路吗?
我的思路是,以前的单选框保留,仅仅在每个单项框的前面(或后面)紧跟一个按钮,然后给这个按钮添加一个单击事件,使得点击按钮的同时,触发该按钮后面的那个单选框。最后在把我们的所有单选框隐藏起来就OK了。这里需要用到 next()函数,另外为了使得点击按钮后,按钮也出现一定的样式变化,还需要使用到 addClass()、和removeClass()函数。
实例效果请参考网站:http://www.ibay24.de 的购物流程中选择货运方式。
思维扩展,利用自定义图片,我们可以制作出具有我们自己风格的、更加漂亮的单选框,复选框,select框、或者其他表单元素。
1、对于元素个数不确定的表单的验证
这样一种情况,从数据库循环取出一些数据,每一条数据会生成一些单选框、复选框或文本框之类的表单元素。这样就形成了一整张表单,现在我们要对这一张表单进行验证,必须选择,或必须输入等等。在没有jQuery之前,很容易想到会将这些表单元素命名为诸如 txtName+Id ,其中Id为不重复的标识符,然后验证的时候循环、使用getElementById来获取其表单元素。。
而现在,jQuery中 $(".class")这个筛选规则将为我们带来巨大的方便。
思路:在循环生成表单时,不使用Id,而使用Class,每一条数据使用一个div包裹起来,并给这个div设置一个class,例如我们设为 <div class="formItem">其他表单元素</div>。在验证表单的时候,使用$(".formItem")获取每一条数据生成的表单,这样有多少条数据,这里$(".formItem")就可以得到多少个jQuery对象,然后使用 each()函数分别验证这些对象中的表单元素。
实例效果请参考网站:http://www.ibay24.de/ 的购物流程
2、替代
在项目中,有这样一个需求,将单选框改替换为按钮,而按钮又要具备单选框的特性,也就是说,以前有一组单选框来实现单选功能,现在要使用按钮来实现这些单选框的功能。初想,觉得还是挺麻烦的。你有什么好的思路吗?
我的思路是,以前的单选框保留,仅仅在每个单项框的前面(或后面)紧跟一个按钮,然后给这个按钮添加一个单击事件,使得点击按钮的同时,触发该按钮后面的那个单选框。最后在把我们的所有单选框隐藏起来就OK了。这里需要用到 next()函数,另外为了使得点击按钮后,按钮也出现一定的样式变化,还需要使用到 addClass()、和removeClass()函数。
实例效果请参考网站:http://www.ibay24.de 的购物流程中选择货运方式。
思维扩展,利用自定义图片,我们可以制作出具有我们自己风格的、更加漂亮的单选框,复选框,select框、或者其他表单元素。