先看代码,后面详细解释:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<script>
$(function(){
//选择type类型进行更改
$("input[type=text]").css("background-color","aquamarine"); //选择name属性以z开头的
$("input[name^=z]").css("background-color","aquamarine"); //选择name属性以e结尾
$("input[name$=e]").css("background-color","aquamarine"); //选择name属性中有p
$("input[name*=p]").css("background-color","aquamarine"); //选择复合器,同时符合多种条件多种
$("input[type=text][name*=n]").css("background-color","aquamarine"); }) </script>
</head>
<body>
<center>
<h3>注册页面</h3>
<hr />
<form action="" method="get">
<table border="1px">
<tr height="35px">
<td width="150px">用户名:</td>
<td width="400px">
<input type="text" name="zuname" id="uname" value="" alt="用户名" οnblur="checkName()"/>
<span id="uname_span">*用户名必须是3-5位的汉字</span>
</td>
</tr>
<tr height="35px">
<td>密码:</td>
<td>
<input type="password" name="zpwd" id="pwd" value="" alt="密码" οnblur="checkPwd()"/>
<span id="pwd_span"></span> </td>
</tr>
<tr height="35px">
<td>手机号:</td>
<td>
<input type="text" name="zphone" id="phone" value="" alt="手机号" />
<span id="phone_span"></span>
</td>
</tr>
<tr height="35px">
<td>邮箱:</td>
<td>
<input type="text" name="email" id="email" value="" alt="邮箱" οnblur="checkEmail()" />
<span id="email_span"></span>
</td>
</tr>
<tr height="35px">
<td>颜色:</td>
<td>
<input type="color" name="scolor" id="" />
</td>
</tr>
<tr height="35px">
<td>爱好:</td>
<td>
<input type="checkbox" name="fav" id="" value="1" />唱歌
<input type="checkbox" name="fav" id="" value="2" />睡觉
<input type="checkbox" name="fav" id="" value="3" />LOL<br />
<input type="checkbox" name="fav" id="" value="4" />旅游
<input type="checkbox" name="fav" id="" value="5" />高尔夫
<input type="checkbox" name="fav" id="" value="6" />篮球 </td>
</tr>
<tr height="35px">
<td>籍贯:</td>
<td>
<select name="adress" id="sel" οnchange="checkAdress()">
<option value="0">--请选择--</option>
<option value="1">河南</option>
<option value="2">湖南</option>
<option value="3">海南</option>
<option value="4">云南</option>
</select> <span id="sel_span"></span>
</td>
</tr> <tr height="35px">
<td>验证码</td>
<td>
<input type="number" name="" id="yzm" value="" οnblur="checkYZM()"/>
<span id="yzm_span"></span>
<span id="yzm2_span"></span>
</td>
</tr> <tr height="35px">
<td>个人介绍:</td>
<td>
<textarea name="intro" rows="8" cols="30"></textarea>
</td>
</tr> <tr height="35px">
<td colspan="2" align="center">
<input type="checkbox" name="" id="check" value="" οnclick="checkAgree()">是否同一本公司协议
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="submit" id="sub" value="注册" disabled="true"/>
</td>
</tr>
</table>
</form>
</center> </body>
</html>

选择type属性是text的标签:(类似于 $(":text"))

$("input[type=text]").css("background-color","aquamarine");

选择name属性以z开头的:(开头符号 ^)

$("input[name^=z]").css("background-color","aquamarine");

选择name属性以e结尾:(结尾符号 $)

$("input[name$=e]").css("background-color","aquamarine");

选择name属性中有p:(包含,含有 符号:*)

$("input[name*=p]").css("background-color","aquamarine");

选择复合器,同时符合多种条件多种:

$("input[type=text][name*=n]").css("background-color","aquamarine");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<script>
$(function(){ //获取form表单的所有表单项
var inp=$(":input").length;
//alert(inp); //获取input标签中type属性是text
$(":text").css("background-color","darkblue");
//等同于:
$("input[type=text]").css("background-color","darkblue"); //获取input标签中checked属性
var val=$("input:checked");
//alert(val.val()); //获取input标签中属性disabled
var dd=$("input:disabled");
alert(dd.val()); //获取select中有selected属性。
var val=$("select option:selected");
//alert(val.val()); }) </script>
</head>
<body>
<center>
<h3>注册页面</h3>
<hr />
<form action="" method="get">
<table border="1px">
<tr height="35px">
<td width="150px">用户名:</td>
<td width="400px">
<input type="text" name="zuname" id="uname" value="" alt="用户名" οnblur="checkName()"/>
<span id="uname_span">*用户名必须是3-5位的汉字</span>
</td>
</tr>
<tr height="35px">
<td>密码:</td>
<td>
<input type="password" name="zpwd" id="pwd" value="" alt="密码" οnblur="checkPwd()"/>
<span id="pwd_span"></span> </td>
</tr>
<tr height="35px">
<td>手机号:</td>
<td>
<input type="text" name="zphone" id="phone" value="" alt="手机号" />
<span id="phone_span"></span>
</td>
</tr>
<tr height="35px">
<td>邮箱:</td>
<td>
<input type="text" name="email" id="email" value="" alt="邮箱" οnblur="checkEmail()" />
<span id="email_span"></span>
</td>
</tr>
<tr height="35px">
<td>颜色:</td>
<td>
<input type="color" name="scolor" id="" />
</td>
</tr>
<tr height="35px">
<td>爱好:</td>
<td>
<input type="checkbox" name="fav" id="" value="0"/>唱歌
<input type="checkbox" name="fav" id="" value="1" checked="checked"/>睡觉
<input type="checkbox" name="fav" id="" value="2"/>LOL
<input type="checkbox" name="fav" id="" value="3"/>旅游
<input type="checkbox" name="fav" id="" value="4"/>高尔夫
<input type="checkbox" name="fav" id="" value="5"/>篮球 </td>
</tr>
<tr height="35px">
<td>籍贯:</td>
<td>
<select name="adress" id="sel" οnchange="checkAdress()">
<option value="0">--请选择--</option>
<option >河南</option>
<option >湖南</option>
<option selected="selected">海南</option>
<option >云南</option>
</select> <span id="sel_span"></span>
</td>
</tr> <tr height="35px">
<td>验证码</td>
<td>
<input type="number" name="" id="yzm" value="" οnblur="checkYZM()"/>
<span id="yzm_span"></span>
<span id="yzm2_span"></span>
</td>
</tr> <tr height="35px">
<td>个人介绍:</td>
<td>
<textarea name="intro" rows="8" cols="30"></textarea>
</td>
</tr> <tr height="35px">
<td colspan="2" align="center">
<input type="checkbox" name="" id="check" value="" οnclick="checkAgree()">是否同一本公司协议
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="submit" id="sub" value="注册" disabled="true"/>
</td>
</tr>
</table>
</form>
</center> </body>
</html>

获取form表单的所有表单项和   $("input")   进行区别开, $("input") 表示获取表单元素是input的。

$(":input")

获取input标签中type属性是text:

$(":text").css("background-color","darkblue");

获取input标签中checked属性:

$("input:checked");

获取input标签中属性disabled:

$("input:disabled");

获取select中有selected属性:

$("select option:selected");

jQuery中的属性选择器的更多相关文章

  1. js进阶 10-6 jquery中的属性选择器有哪些

    js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...

  2. jQuery入门(1)jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  4. js进阶 10-5 jquery中的层级选择器有哪些

    js进阶 10-5 jquery中的层级选择器有哪些 一.总结 一句话总结: 1.jquery中的层级选择器有哪些? 四种,后代,子代,兄弟,相邻兄弟 2.如何区别jquery中的层级选择器? 记住这 ...

  5. jquery中的属性和css

    jQuery中的属性用于获取或设置元素的属性 1.attr(),获取或设置所有相匹配的元素的属性值:removeAttr("attr"),移除所有相匹配的元素的属性 //html ...

  6. jQuery中的:input选择器

    jQuery中的:input选择器 jQuery中的:input选择器包含input, textarea, select 和 button这些标签. <!DOCTYPE html> < ...

  7. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  8. jQuery中的属性过滤选择器(四、五):[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等

    <!DOCTYPE html> <html> <head> <title>属性过滤选择器</title> <meta http-equ ...

  9. jQuery选择器之属性选择器Demo

    测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

随机推荐

  1. mysql用find_in_set代替like搜索提高性能

    mysql用find_in_set代替like搜索提高性能 <pre>SELECT * from mobantestinfo1 where find_in_set('33',info2); ...

  2. solr 本地搭建

      1. 运行 D:\solr-4.7.2\example --> java -jar start.jar   2. 添加插件IK D:\solr-4.7.2\example\solr-weba ...

  3. 多线程之美1一volatile

    目录 一.java内存模型 1.1.抽象结构图 1.2.概念介绍 二.volatile详解 2.1.概念 2.2.保证内存可见性 2.3.不保证原子性 2.4.有序性 一.java内存模型 1.1.抽 ...

  4. dubbo中出现can not be invoked any more

    具体错误示例如下 从错误看,是客户方发起调用时,dubbo会去检查本地的invoker instance,如果发现invoker已经是destroy status,则直接抛出上面的异常,下面先来说下平 ...

  5. js正则匹配的出链接地址

    content为需要匹配的值 var b=/<a([\s]+|[\s]+[^<>]+[\s]+)href=(\"([^<>"\']*)\"| ...

  6. BASH 编程之变量高级篇

    内部变量 • $$与$BASHPID都代表着执行程序的进程 ID,我们可以通过 echo 打印,并用 ps 指令检查得到相同的进程 ID [root@oracle ~]# echo $BASHPID ...

  7. 使用JSP脚本在页面输出九九乘法表

    <% int i,j; for(i=1;i<10;i++) { for(j=1;j<=i;j++) { out.println(i+"*"+j+"=&q ...

  8. vue开发之跨域请求,请求头not allowed by Access-Control-Allow-Headers,后端cookie session值取不到(二)

    原因:你本地的请求ajax的get和post请求:如果你的请求头内放一些可用验证数据Token的时候就会存在跨域请求这是浏览器所不允许的问题: 方案一:后台的接口请求模式都写成jsonp请求,前端去调 ...

  9. Hadoop压缩的图文教程

    近期由于Hadoop集群机器硬盘资源紧张,有需求让把 Hadoop 集群上的历史数据进行下压缩,开始从网上查找的都是关于各种压缩机制的对比,很少有关于怎么压缩的教程(我没找到..),再此特记录下本次压 ...

  10. Linux内核版本 uname命令 GNU项目 Linux发行版

    1.内核版本由linux内核社区统一编码和发布,格式如下图: major.minor.patch-build.desc 主版本号.次版本号.对次版本号的修订次数-编译次数.当前版本的特殊信息 次版本号 ...