Jquery的常用例子

网上找了很久都没有找到，验证单选 radio 中的一个input id=“yes” 是否被选择，于是自己写了个：如下

注释：1.obj为 JQuery对象，$(this)调用此validateIschecked  方法即可，然后传入obj : $("#yes")

//radio ischecked

$.fn.validateIschecked = function(obj){

var flag = obj.attr(‘checked‘);

/*alert(flag);*/

if(flag == "checked"){

/*alert("true");*/

return true;

}else{

/*alert("false");*/

return false;

}

};

下面的例子是我自己写的验证非空，长度校验，和正则表达式校验：

//is empty

$.fn.validateEmpty = function(obj) {

if (obj.val().trim() == "") {

return false;

} else {

return true;

}

};

// 长度校验

$.fn.validateLength = function(obj, n, m) {

var l = obj.val().trim().length;

if (l <= m && l >= n) {

return true;

} else {

return false;

}

};

//common validate reqular expression

function validateRegular(obj1, obj2, language, n, m){

var reg1 = /^[\u4e00-\u9fa5A-Za-z0-9\s{2,}.()]{1,40}$/;

var reg2 = /^[A-Za-z0-9\s{2,}.()]{1,40}$/;

if($(obj1).validateEmpty($(obj1))){

if ($(obj1).validateLength($(obj1), n, m)) {

if (language == "cn") {

/*alert("sss");*/

if ($(obj1).val().match(reg1)) {

/*alert("sss");*/

$(obj2).html("");

} else {

$(obj2).html("can only be chinese a-z A-Z 0-9 . () space !");

}

} else if(language == "en"){

if ($(obj1).val().match(reg2)) {

/*alert("sss");*/

$(obj2).html("");

} else {

$(obj2).html("can only be a-z A-Z 0-9 . () space !");

}

}else{

alert("js input error !");

}

} else {

$(obj2).html(n + "-" + m + " length !");

}

}else{

$(obj2).html("");

}

};

常用Jquery验证：

// 验证车牌号

$.fn.validatePlateNo = function(obj) {

var reg = /^[\u4e00-\u9fa5]{1}[a-zA-Z]{1}[0-9a-zA-Z]{5}$/;

if (obj.val().trim().length == 0 || !obj.val().match(reg)) {

return false;

} else {

return true;

}

};

// 验证身份证号

$.fn.validateIdcardno = function(obj) {

if (checkIDCard(obj.val())) {

return true;

} else {

return false;

}

};

// 只能是汉子

$.fn.validateIdeograph = function(obj) {

var reg = /^[\u4e00-\u9fa5]{2,5}$/;

if (obj.val().trim().length == 0 || !obj.val().match(reg)) {

return false;

} else {

return true;

}

};

// 非法字符校验

$.fn.validateIllegalMark = function(obj) {

var reg = /^[0-9a-zA-Z]+$/;

if (obj.val().match(reg)) {

return true;

} else {

return false;

}

};

// 手机号

$.fn.validateMobile = function(obj) {

var num = obj.val();

var reg = /^((\(\d{3}\))|(\d{3}\-))?13\d{9}|14[57]\d{8}|15\d{9}|18\d{9}$/;

if (num.length != 11 || !num.match(reg)) {

return false;

} else {

return true;

}

};

// 电话号码

$.fn.validateTelephone = function(obj) {

var reg = /^((0\d{2,3})-)(\d{7,8})$/;

if (obj.val().length == 0 || obj.val().match(reg)) {

return true;

} else {

return false;

}

};

// QQ

$.fn.validateQQ = function(obj) {

var reg = /^[0-9]{2,15}$/;

if (obj.val().length == 0 || obj.val().match(reg)) {

return true;

} else {

return false;

}

};

// Email

$.fn.validateMail = function(obj) {

var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

if (obj.val().length == 0 || obj.val().match(reg)) {

return true;

} else {

return false;

}

};

// 不含特殊字符

$.fn.validateVenderName = function(obj) {

var reg = /^[\u4e00-\u9fa5A-Za-z0-9]{2,40}$/gi;

if (obj.val().match(reg)) {

return true;

} else {

return false;

}

};

获取选中的值

获取一组radio被选中项的值

var item = $(‘input[@name=items][@checked]‘).val();

获取select被选中项的文本

var item = $("select[@name=items] option[@selected]").text();

select下拉框的第二个元素为当前选中值

$(‘#select_id‘)[0].selectedIndex = 1;

radio单选组的第二个元素为当前选中值

$(‘input[@name=items]‘).get(1).checked = true;

$("input[@type=radio][@checked]").val();

获取值：

文本框，文本区域：

$("#txt").attr("value")；

$("#txt").val();

多选框checkbox：

$("#checkbox_id").attr("value")；

下拉框select：

$(‘#sel‘).val();

控制表单元素：

文本框，文本区域：

$("#txt").attr("value",‘‘);//清空内容

$("#txt").attr("value",‘11‘);//填充内容

多选框checkbox：

$("#chk1").attr("checked",‘‘);//不打勾

$("#chk2").attr("checked",true);//打勾

if($("#chk1").attr(‘checked‘)==undefined) //判断是否已经打勾 checked  undefined 这是JQ1.6后出现的

单选组radio：

$("input[@type=radio]").attr("checked",‘2‘);//设置value=2的项目为当前选中项

下拉框select：

$("#sel").attr("value",‘-sel3‘);//设置value=-sel3的项目为当前选中项

$("<optionvalue=‘1‘>1111</option><optionvalue=‘2‘>2222</option>").appendTo("#sel")//添加下拉框的option

$("#sel").empty()；//清空下拉框

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

在Jquery中,用$("#id")来获得页面的input元素,其相当于document.getElementById("element")但是,该获取的是一个Jquery对象,而不是一个dom element对象.value是dom element对象的属性.所以,使用$("#id").value不能取到值；

取值的方法如下:

取值：

val = $("#id")[0].value;

$("#id")[0].value = "new value";

赋值：

$("#id")[0].value = "new value";

或者$("#id").val("new value");

val = $("#id").attr("value");

jquery input text radio check select 操作

[xhtml] view
plaincopy

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <mce:script src="jquery-starterkit/lib/jquery-1.3.2.min.js" mce_src="jquery-starterkit/lib/jquery-1.3.2.min.js" type="text/javascript"></mce:script>  
  7. </head>  
  8. <body>  
  9. <input type="text" id="dd" name="dd" value="dds"/>dd  
  10. <input name="rr" id="rr" type="radio" value="34" />ff  
  11. <input name="rr" id="rr2" type="radio" value="4" />55  
  12. <input name="ff" type="checkbox" value="aa" />jgdg  
  13. <input name="ff" type="checkbox" value="gd" />jgdg  
  14. <select name="ss" id="ss" size="1">  
  15. <option value=""></option>  
  16. <option value="8">d</option>  
  17. <option value="2">g</option>  
  18. </select>  
  19. <br/>  
  20. <input type="button" id="button" value="按钮一" />  
  21. <input type="button" id="jj" value="按钮二" />  
  22. <br/>  
  23. <div id="ssd">fgfooHello</div>  
  24. </body>  
  25. <mce:script language="javascript" type="text/javascript"><!--  
  26. $(function(){  
  27.            $("#button").click(function(){  
  28.                       
  29.                                          
  30. //获取值  
  31. //alert( $(‘#dd‘).val());//type=text  
  32. // alert($(‘input[name=rr][checked]‘).val());//type=radio  
  33. // alert($(‘input[name=ff][checked]‘).val());//type=checkbox  
  34. // alert($("select[name=ss] option[selected]").val());//select 相等于alert($("#ss option[selected]").val());  
  35.                                       
  36. //获取文本  
  37. //alert($("select[name=ss] option[selected]").text());//select  
  38.                                       
  39. //控制  
  40. /*// Disable #dd 禁用  
  41. $("#dd").attr("disabled","disabled");  
  42. // Enable #dd 解禁  
  43. $("#jj").removeAttr("disabled");*/  
  44.   
  45. // $(‘input[name=rr]‘).get(0).checked = true;//第一个radio被选中  
  46. //alert($("input[type=radio][value=34]").attr("checked",‘checked‘));//value=34的radio被选中  
  47.                                       
  48. //alert($("input[type=checkbox][value=gd]").attr("checked",‘checked‘));//value=gd的checkbox被选中  
  49. //$(‘input[name=ff]‘).get(1).checked = true;//第一个check被选中  
  50.                                       
  51.                                       
  52.                                       
  53. /*//根据option的text选中option  
  54. count=$("#ss").find("option").length;  
  55. for(var i=0;i<count;i++)   
  56. {             
  57. if($("#ss").get(0).options[i].text == ‘d‘)   
  58. {   
  59.     $("#ss").get(0).options[i].selected = true;   
  60.            
  61.      break;   
  62. }   
  63. } */  
  64.           
  65. //$("<option value=‘1‘>1111</option><option value=‘25‘>22s22</option>").appendTo("#ss");//增加option  
  66. //$("#ss option[value=8]").remove("");//除去 <option value=‘8‘>d</option>  
  67.           
  68. //$("#ss").attr("value",‘2‘);//选中option                              
  69. //$(‘#ss‘)[0].selectedIndex = 1;//选中option  
  70.                   
  71. //$("#ss").empty();//清空全部option  
  72.               
  73. /*//替换文本  
  74. var $thirdLink = $("#ssd");  
  75. var linkText = $thirdLink.text().replace(‘foo‘,‘bar‘);  
  76. $thirdLink.text(linkText); */  
  77.     });         
  78. });  
  79. // --></mce:script>  
  80. </html>  

Jquery的常用例子

时间： 2024-10-11 11:05:17

Jquery的常用例子的相关文章

jquery datatable 常用例子

在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTable简介 (1)构造函数           DataTable()   不带参数初始化DataTable 类的新实例.           DataTable(string tableName)  用指定的表名初始化DataTable 类的新实例.           DataTable(string

jquery datatable 常用例子及函数等

在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTable简介 (1)构造函数            DataTable()   不带参数初始化DataTable 类的新实例.            DataTable(string tableName)  用指定的表名初始化DataTable 类的新实例.            DataTable(stri

Jquery工作常用实例--ajaxStart与ajaxStop(ajaxComplete)

Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函数,这个函数将在事件发生时被调用. 使用这些方法的每一步是获取一个页面元素的引用.然后就可以在这个元素上调用ajaxStart()和ajaxStop()方法. 使用语法: ("#loading").ajaxStart(function(){  $(this).show(); //callb

jquery mobile常用的data-role类型介绍

转自原文 jquery mobile常用的data-role类型介绍 data-role参数表: page        页面容器,其内部的mobile元素将会继承这个容器上所设置的属性 header     页面标题容器,这个容器内部可以包含文字.返回按钮.功能按钮等元素 footer       页面页脚容器,这个容器内部也可以包含文字.返回按钮.功能按钮等元素 content     页面内容容器,这是一个很宽容的容器,内部可以包含标准的html元素和jQueryMobile元素 cont

jQuery的常用操作

梳理一下jQuery的常用操作 jQuery隐藏显示对象 id为test的元素的display修改成了"none",即隐藏了id为test的元素:$('#test').css('display','none') 或 $('#test').style.display="none" 我们经常用到的是切换一个元素的隐藏与现实,下面给出代码: var show = $('#test').css('display');//获取id为test的元素的display的值$('#t

android开发最常用例子整理----(1)自定义按钮实现

android开发最常用例子整理----(1)自定义按钮实现 一.Activity MainActivity.java源码: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }

jquery的常用操作（操作html页面的Dom对象的元素）

一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法) //第一种写法: $(document).ready(function() { // 执行体 }); //第二种写法 $(function() { //执行体 }); 二:用jquery获取dom对象,判断该对象是否有内容的两种方法(有返回true,没有返回false) jqObj.text().trim() var jqObj = $(this); if(jqObj.text().tr

!!! jquery mobile常用代码

Jquery MOBILE: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jq

Jquery的常用使用方法

1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项$('input:checkbox').each(function() {        if ($(this).attr('che