jQuery中的属性选择器
先看代码,后面详细解释:
<!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中的属性选择器的更多相关文章
- js进阶 10-6 jquery中的属性选择器有哪些
js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...
- jQuery入门(1)jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- js进阶 10-5 jquery中的层级选择器有哪些
js进阶 10-5 jquery中的层级选择器有哪些 一.总结 一句话总结: 1.jquery中的层级选择器有哪些? 四种,后代,子代,兄弟,相邻兄弟 2.如何区别jquery中的层级选择器? 记住这 ...
- jquery中的属性和css
jQuery中的属性用于获取或设置元素的属性 1.attr(),获取或设置所有相匹配的元素的属性值:removeAttr("attr"),移除所有相匹配的元素的属性 //html ...
- jQuery中的:input选择器
jQuery中的:input选择器 jQuery中的:input选择器包含input, textarea, select 和 button这些标签. <!DOCTYPE html> < ...
- js进阶 11-3 jquery中css属性如何操作
js进阶 11-3 jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...
- jQuery中的属性过滤选择器(四、五):[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等
<!DOCTYPE html> <html> <head> <title>属性过滤选择器</title> <meta http-equ ...
- jQuery选择器之属性选择器Demo
测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
随机推荐
- 「每日五分钟,玩转 JVM」:GC 概览
前言 GC(Garbage Collection)是我们在学习 JVM 的过程中不可避免的一道坎,接下来,我们就来系统的学习一下 GC. 做一件事情之前,我们一定要去知道我们为什么要去做,这里不仅仅指 ...
- linux日志查找方法
grep "xxxx" *201812* | grep "xxx" | awk -F, '{if(substr($1,1,10)=="2018-12- ...
- nginx跨域解决方案
nginx跨域解决方案Access to Font at 'http://47.104.86.187/yinjiatoupiao2/iconfont/iconfont.woff' from origi ...
- 基于docker搭建Jenkins+Gitlab+Harbor+Rancher架构实现CI/CD操作
一.各个组件的功能描述: Docker 是一个开源的应用容器引擎. Jenkis 是一个开源自动化服务器. (1).负责监控gitlab代码.gitlab中配置文件的变动: (2).负责执行镜像文件的 ...
- vue ui九宫格、底部导航、新闻列表、跨域访问
一. 九宫格 九宫格:在mint-ui组件库基于vue框架 mui不是基于vue框架 只是css/js文件 (1)官方网站下载安装包 (2)copy css js fonts[字体图标] src/l ...
- Windows键盘无法调起
Windows 键盘无法调起 经常使用触摸屏幕的小伙伴肯定都遇到过屏幕键盘怎么也唤不起来(在桌面模式下,非平板模式).以下收集了一些常见的解决方案: 注:本文基于 Windows 10 v1903,其 ...
- SSE图像算法优化系列三十:GIMP中的Noise Reduction算法原理及快速实现。
GIMP源代码链接:https://gitlab.gnome.org/GNOME/gimp/-/archive/master/gimp-master.zip GEGL相关代码链接:https://gi ...
- C++中对C的扩展学习新增语法——内联函数以及函数参数
内联函数以及函数参数 内联函数 使用 inline 关键字必须和函数体放在一起. 内联函数具有内部链接属性. 内联函数会被编译器在编译阶段替换到函数调用的地方. 可以把内联函数定义写到头文件中,多个c ...
- MD5 加盐加密
一.概述 MD5(Message Digest Algorithm 5),是一种散列算法,是不可逆的,即通过md5加密之后没办法得到原文,没有解密算法. 在一般的项目中都会有登录注册功能,最简单的, ...
- SpringSecurity系列之自定义登录验证成功与失败的结果处理
一.需要自定义登录结果的场景 在我之前的文章中,做过登录验证流程的源码解析.其中比较重要的就是 当我们登录成功的时候,是由AuthenticationSuccessHandler进行登录结果处理,默认 ...