jQuery 选择器
选择器实例选取
*$("*")选取所有元素
#id$("#lastname")选取id=lastname的元素
.class$(".classA")选取class=classA的元素
.class,.class... ????$(".classA,.classB")选取class=classA或者class=classB的元素
element$("p")选取所有的<p>元素
el1,el2,el3...$("div,h1,p")选取所有的<div>,<h1>,<p>元素
:first$("p:first")选取第一个<p>元素
:last $("p:last")选取最后一个<p>元素
:even$("tr:even")选取偶数行<tr>元素
:odd ??$("tr:odd")选取奇数行<tr>元素
:first-child$("p:first-child")选取属于其父元素的第一个子元素的所有 <p> 元素。选择属于其父元素的首个子元素的每个 <p> 元素
:first-of-type$("p:first-of-type")选取属于其父元素的第一个<p>元素的所有<p>元素
:last-child $("p:last-child")选取属于其父元素的最后一个子元素的每个<p>元素
:last-of-type$("p:last-of-type") ???选取属于其父元素的最后一个子元素的所有<p>元素
:nth-child(n)$("p:nth-child(2)")选取属于其父元素的第二个子元素的所有<p>元素,一个div是一个父节点,父节点是很多的
:nth-last-child(n)$("p:nth-last-child(n)")选取属于其父元素的第一个子元素的所有<p>元素,从最后一个节点开始计数
:only-child $("p:only-child")选取属于其父元素的唯一子元素的所有<p>元素,每一个块都有一个父类,找只有唯一子元素的父类
:only-of-type$("p:only-of-type")选取属于其父元素的特定类型的唯一子元素的所有<p>元素
:parent>child$("div>p")div元素的直接子元素的所有p元素
:parent descendant$("div p")<div>元素后代的所有<p>元素
:element+next$("div+p")每个<div>元素相邻的下一个p元素,中间不能有相邻
:element~siblings$("div~p")<div>元素同级别的(同胞)<p>元素
:eq(index)$("ul li:eq(2)")列表中的第3个元素
:gt(no)$("ul li:gt(2)")列举index大于3的元素
:lt(no) $("ul li:lt(2)")列举index小于3的元素
:not(element)$("input:not(:empty))所有不为空的元素
:header$(":header")所有的标题header
:animated$(":animated")所有的动画元素
:focus$(":focus")当前具有焦点的元素
:contains(text)$(":contains(‘hello‘))文本中具有hello字符的元素
:has(selector)$("p:has(span)")包含有<span>在其内的<p>元素,最终要返回的是<p>元素,前提是它要包含有<span>标签
:empty$(":empty")所有的空元素
:parent$(":parent")所有是另一个元素的父元素的元素,即具有子元素的的元素
:hidden$("p:hidden")所有隐藏的<p>元素
:visible$("table:visible")所有可见的表格
:root$(":root")文档的根元素
:lang(language)$(":lang(de)")选取以de开头的language属性的元素
元素属性值的操作
[attribute]$("[id]")选取带有指定属性的某个元素,选带有id属性的元素
[attribute=value]$("[id=‘deng‘]")选取id=deng的这个元素
[attribute!=value]$("[id!=‘deng‘]")选取id不等于deng的这个元素
[attribute$=value]$("[href$=‘.jpg‘]")选取href元素并且以.jpg结尾的元素
[attribute|=value]$("[title|=‘Tomorrow‘]")所有带有 title 属性且值等于 ‘Tomorrow‘ 或者以 ‘Tomorrow‘ 后跟连接符作为开头的字符串
<p title="Tomorrow-link" lang="en-us">Tomorrow link</p>
<p title="Tomorrow" lang="en-us">Tomorrow</p>
[attribute^=value]$("[title^=‘Tomorrow‘]")所有带有title属性且值以Tomorrow开头的元素
[attribute~=value]$("[title~=‘Tomorrow‘]")所有带有title属性且值包含有单词Tomorrow的元素
[attribute*=value] $("[title*=‘Tomorrow‘]")所有带有title属性且值包含有字符串Tomorrow的元素
input的操作:
:input$(":input")所有的input元素
:text$(":text")所有带有type=text的input元素
:password$(":password")所有带有type=password的input元素
:radio$(":radio")所有带有type=radio的input元素
:checkbox$(":checkbox")所有带哟type=checkbox的input元素
:submit$(":submit")所有带有type=submit的input元素
:reset$(":reset")所有带有type=reset的input元素
:button$(":button")所有带有type=button的input元素
:image$(":image")所有带有type=image的input元素
:file$(":file")所有带有type=file的input元素
:enabled$(":enabled")所有启用的 input 元素
:disabled$(":disabled")所有禁用的 input 元素
:selected$(":selected")所有选定的 input 元素
:checked$(":checked")所有选中的 input 元素
jQuery Validate插件为表单提供了强大的验证功能,让客户端表单变得简单,提供了大量的定制选项,满足应用程序的不同需求
导入js库<script src="../jquery.validate.js></script>
默认校验规则:
序号规则描述
1required:true必须输入的字段。
2remote:"check.php"使用 ajax 方法调用 check.php 验证输入值。
3email:true必须输入正确格式的电子邮件。
4url:true必须输入正确格式的网址。
5date:true必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6dateISO:true必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7number:true必须输入合法的数字(负数,小数)。
8digits:true必须输入整数。
9creditcard:必须输入合法的信用卡号。
10equalTo:"#field"输入值必须和 #field 相同。
11accept:输入拥有合法后缀名的字符串(上传文件的后缀)。
12maxlength:5输入长度最多是 5 的字符串(汉字算一个字符)。
13minlength:10输入长度最小是 10 的字符串(汉字算一个字符)。
14rangelength:[5,10]输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15range:[5,10]输入值必须介于 5 和 10 之间。
16max:5输入值不能大于 5。
17min:10输入值不能小于 10。
在css中for规定,label与哪个表单元素绑定,就是同表单控件相关联
显示的将文本‘Social Security Number:‘与表单的社会安全号码的控件联系起来,他的for属性值和控件的id是一样的
<label for=‘SSN‘>Social Security Number:</label>
<input type=‘text‘ name=‘sosenuname‘ id=‘SSN‘/>
<fieldset>可以将表单内的元素进行分组,浏览器会以特殊的方式展现他们,有特殊的边界或者3D效果。将表单内容的一部分打包,生成一组相关表单的字段
<textarea> 标签定义多行的文本输入控件
1.将校验规则写到控件中
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
???submitHandler: function() {
?????alert("提交事件!");
???}
});
$().ready(function() {
???$("#commentForm").validate();
});
</script>
<form class="cmxform" id="commentForm" method="get" action="">
?<fieldset>
???<legend>输入您的名字,邮箱,URL,备注。</legend>
???<p>
?????<label for="cname">Name (必需, 最小两个字母)</label>
?????<input id="cname" name="name" minlength="2" type="text" required>
???</p>
???<p>
?????<label for="cemail">E-Mail (必需)</label>
?????<input id="cemail" type="email" name="email" required>
???</p>
???<p>
?????<label for="curl">URL (可选)</label>
?????<input id="curl" type="url" name="url">
???</p>
???<p>
?????<label for="ccomment">备注 (必需)</label>
?????<textarea id="ccomment" name="comment" required></textarea>
???</p>
???<p>
?????<input class="submit" type="submit" value="Submit">
???</p>
?</fieldset>
</form>
2.将校验规则写道js代码中
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
?$("#signupForm").validate({
???rules: {
?????firstname: "required",
?????lastname: "required",
?????username: {
???????required: true,
???????minlength: 2
?????},
?????password: {
???????required: true,
???????minlength: 5
?????},
?????confirm_password: {
???????required: true,
???????minlength: 5,
???????equalTo: "#password"
?????},
?????email: {
???????required: true,
???????email: true
?????},
?????topic: {
???????required: "#newsletter:checked",
???????minlength: 2
?????},
?????agree: "required"
???},
???messages: {
?????firstname: "请输入您的名字",
?????lastname: "请输入您的姓氏",
?????username: {
???????required: "请输入用户名",
???????minlength: "用户名必需由两个字母组成"
?????},
?????password: {
???????required: "请输入密码",
???????minlength: "密码长度不能小于 5 个字母"
?????},
?????confirm_password: {
???????required: "请输入密码",
???????minlength: "密码长度不能小于 5 个字母",
???????equalTo: "两次密码输入不一致"
?????},
?????email: "请输入一个正确的邮箱",
?????agree: "请接受我们的声明",
?????topic: "请选择两个主题"
????}
???})
});
jquery 选择器
原文地址:http://www.cnblogs.com/demo-deng/p/8000246.html