某某茶叶有限公司欢迎您!
金沙棋牌在线 > 服务器&运维 > jQuery表单域选择器用法分析

jQuery表单域选择器用法分析

时间:2019-12-04 22:22

本文实例分析了jQuery表单域选择器用法。分享给大家供大家参考。具体如下:

jQuery表单域选择器用法分析

 这篇文章主要介绍了jQuery表单域选择器用法,实例分析了常见的表单元素选择器的使用技巧,并给出了一个完整的实例总结,需要的朋友可以参考下

 

 

本文实例分析了jQuery表单域选择器用法。分享给大家供大家参考。具体如下:

表单域是指网页中的input,textarea, select和button元素。

  1. :input选择器

代码如下:

$(":input")

 

  1. :text选择器

代码如下:

$(":text")

 

  1. :password选择器

代码如下:

$(":password")

 

  1. :radio选择器

代码如下:

$(":radio")

 

  1. :checkbox选择器

代码如下:

$(":checkbox")

 

  1. :file选择器

代码如下:

$(":file")

 

  1. :image选择器

代码如下:

$(":image")

 

  1. :hidden选择器

代码如下:

$(":hidden") 用于选择所有不可见元素(css display 属性值为none)以及隐藏域(<input type="hidden">)

 

  1. :submit选择器

代码如下:

$(":submit")

 

  1. :reset选择器

代码如下:

$(":reset")

 

简单实例:

 

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单域选择器</title>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":text").attr("value", "文本框");
$(":password").attr("value", "密码框");
$(":radio:eq(0)").attr("checked", "true");
$(":checkbox").attr("checked", "true");
$(":image").attr("src", "ICO.ICO");
金沙棋牌在线,$(":file").css("width", "200px");
$(":hidden").attr("value", "已保存的值");
$("select").css("background", "#FCF"); //注意没有冒号
$(":submit").attr("id", "btn1");
$(":reset").attr("name", "btn");
$("textarea").attr("value", "文本域"); //注意没有冒号
});
</script>
</head>

<body>
<table width="730" height="145" border="1">
<tr>
<td width="113" height="23">文本框</td>
<td width="209"><input type="text"/></td>
<td width="93">密码框</td>
<td width="287"><input type="password" /></td>
</tr>
<tr>
<td height="24">单选按钮</td>
<td><input type="radio" /><input type="radio" /></td>
<td>复选框</td>
<td><input type="checkbox" /><input type="checkbox" /></td>
</tr>
<tr>
<td height="36">图像</td>
<td><input type="image" /></td>
<td>文件域</td>
<td><input type="file" /></td>
</tr>
<tr>
<td height="23">隐藏域</td>
<td><input type="hidden" />(不可见)</td>
<td>下拉列表</td>
<td><select><option>选项一</option><option>选项二</option><option>选项三</option></select></td>
</tr>
<tr>
<td height="25">提交按钮</td>
<td><input type="submit" /></td>
<td>重置按钮</td>
<td><input type="reset" /></td>
</tr>
<tr>
<td valign="top">文本区域:</td>
<td colspan="3"><textarea cols="70" rows="3"></textarea></td>
</tr>
</table>
</body>
</html>

 

效果图如下所示:

金沙棋牌在线 1

希望本文所述对大家的jQuery程序设计有所帮助。

这篇文章主要介绍了jQuery表单域选择器用法,实例分析了常见的表单元素选择器的使用技巧,并给出了一个完整的...

  1. :button Selector 1. jQuery 2. 选择所有元素和类型为按钮的元素

  2. :checkbox Selector 1. jQuery 2. 选择所有元素和类型为复选框的元素

  3. :checked Selector 1. jQuery 2. 选择所有有勾选的元素

  4. :disabled Selector 1. jQuery 2. 选择所有被禁用的元素

  5. :enabled Selector 1. jQuery 2. 选择所有未被禁用的元素

  6. :file Selector 1. jQuery 2. 选择所有文件类型为file的元素

  7. :focus Selector 1. jQuery 2. 选择当前获取焦点的元素

  8. :image Selector 1. jQuery 2. 选择所有图像类型的元素

  9. input Selector 1. jQuery 2. 选择所有input,textarea,select和button元素

  10. :password Selector 1. jQuery 2. 选择所有文件类型密码的元素

  11. :radio Selector 1. jQuery 2. 选择所有类型为单选框的元素

  12. :submit Selector 1. jQuery 2. 选择所有类型为提交的元素

表单域是指网页中的input,textarea, select和button元素。

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • EXCEL中的文本内容大多怎么设置自动换行?
  • 基于jQuery图片元素网格布局插件,jquery网格布
  • 九款酷炫基于jquery实现的应用及源码,九款
  • JQuery中DOM加载与事件执行实例分析,jquerydo
  • JQuery中DOM事件绑定用法详解,jquerydom
  • JQuery中DOM事件合成用法实例分析,jquerydom

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

例 :var input = $.addClass// 选择所有为button的表单 然后添加样式marked

  1. :input选择器复制代码 代码如下:$

  2. :text选择器复制代码 代码如下:$

  3. :password选择器复制代码 代码如下:$

  4. :radio选择器复制代码 代码如下:$

  5. :checkbox选择器复制代码 代码如下:$

  6. :file选择器复制代码 代码如下:$

  7. :image选择器复制代码 代码如下:$

  8. :hidden选择器复制代码 代码如下:$用于选择所有不可见元素以及隐藏域()

  9. :submit选择器复制代码 代码如下:$

  10. :reset选择器复制代码 代码如下:$

帮客评论

${//&#21033;&#29992;:contains&#33719;&#21462;&#21253;&#21547;&#25351;&#23450;&#20869;&#23481;&#30340;&#32452;&#20214;,&#31579;&#36873;&#25991;&#26412;&#20869;&#23481;&#20013;&#21253;&#21547;is&#21333;&#35789;&#30340;&#32452;&#20214;//$").css("border" , "1px solid red");//&#33719;&#21462;&#25317;&#26377;&#21517;&#20026;input&#21518;&#20195;&#33410;&#28857;&#30340;&#26631;&#31614;//$.css("border" , "1px solid red");//&#21033;&#29992;&#23618;&#21472;&#36873;&#25321;&#22120;&#19982;has()&#36873;&#25321;&#22120;&#26368;&#22823;&#30340;&#19981;&#21516;&#26102;,&#23618;&#21472;&#36873;&#25321;&#22120;&#36873;&#20013;&#30340;&#26159;input&#32452;&#20214;,&#32780;&#19978;&#38754;&#30340;has&#21017;&#36873;&#20013;&#30340;&#26159;&#25317;&#26377;input&#32452;&#20214;&#30340;div&#32452;&#20214;//$.css("border" , "1px solid red");//&#21033;&#29992;:parent&#36873;&#25321;&#22120;&#33719;&#21462;&#25152;&#26377;&#38750;&#31354;&#20803;&#32032;//$.css("border" , "1px solid red");//&#21033;&#29992;:empty &#26469;&#33719;&#21462;&#25152;&#26377;&#31354;&#20803;&#32032;//$.css("border" , "1px solid red");//&#21033;&#29992;:input&#33719;&#21462;&#34920;&#21333;&#25152;&#26377;&#20803;&#32032;,:&#20043;&#21069;&#20160;&#20040;&#37117;&#19981;&#20889;&#40664;&#35748;&#23601;&#26159;*&#26597;&#35810;&#25152;&#26377;//$.css("border" , "1px solid red");//$.css;//$("input,select,button").css("border" , "1px solid red");//&#33719;&#21462;&#25152;&#26377;&#25353;&#38062;//$(":button , :submit , :reset").css("border" , "1px solid red");//&#21033;&#29992;:disabled&#33719;&#21462;&#19981;&#21487;&#29992;&#30340;&#34920;&#21333;&#20803;&#32032;//$.css("border" , "1px solid red");//&#19979;&#38754;&#36825;&#21477;&#35805;&#19982;&#20043;&#31561;&#20215;//$("*[disabled='disabled']").css("border" , "1px solid red");//&#33719;&#21462;&#34987;&#36873;&#20013;&#30340;&#21333;&#36873;&#26694;&#25110;&#22797;&#36873;&#26694;//$.css;$("*[checked='checked']").css("border" , "1px solid red");})

复制代码 代码如下:

以上就是本次介绍的关于jQuery表单选择器的知识点全部内容,感谢大家的阅读和对脚本之家的支持。

表单域选择器

文本框