jquery 选择器

Posted 2020-10-17 今夜无风

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>
默认校验规则：
序号 规则 描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7 number:true 必须输入合法的数字（负数，小数）。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。
12 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。
13 minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min: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: "请选择两个主题"
}
})
});