jquery 选择器
1. jQuery选择器的优势：
(1) 代码更简单
(2) 支持CSS1到CSS3选择器
(3) 完善的处理机制
2. jQuery选择器的分类
（1） 基本选择器
基本选择器是jQuery中使用最多的选择器，它又元素Id、class、元素名、多个元素符组成。
（2） 层次选择器
层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。
（3） 过滤选择器
① 简单过滤选择器
过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头；简单过滤选择器是过滤选择器中使用最广泛的一种。
② 内容过滤选择器
内容过滤选择器是根据元素中的文字内容或所包含的的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。
③ 可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征来获取元素
④ 属性过滤选择器
⑤ 子元素过滤选择器
⑥ 表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。
（4） 表单选择器
eg：HTML部分代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.7.1.min.js" type="text/JavaScript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
$('#form1 input:enabled').val('这里可用的文本框变化了..');
return false;
})
$('#btn2').click(function(){
$('#form1 input:disabled').val('这里不可用的文本框变化了..');
return false;
})
function mm(){
var length=$(' input:checkbox[checked]').length;
$('p').eq(0).html('有'+length+'个被选中了');
}
mm();
$(' input:checkbox').click(mm);
$('select').mousedown(function(){
$('p').eq(0).html('被选中的有:');
})
})
</script>
</head>
<body>
<h3> 表单对象属性过滤选择器.</h3>
<form id="form1" action="#">
<button type="reset">重置所有表单元素</button>
<br /><br />
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button>
<br /><br />
<!-- 测试的元素 -->
可用元素：<input name="add" value="可用文本框" /> <br/> 不可用元素：
<input name="email" disabled="disabled" value="不可用文本框" /><br/> 可用元素： <input name="che" value="可用文本框" /><br/> 不可用元素：
<input name="name" disabled="disabled" value="不可用文本框" /><br/>
<br/> 多选框：
<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<p></p>
<br/><br/> 下拉列表1：
<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/> 下拉列表2：
<br/>
<select name="test2">
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
<p></p>
</form>
</body>
</html>
style.css部分代码如下：
p,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
p.Mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
p.hide {
display:none;
}结果截图如下：
文章最后发布于: 2018-05-14 21:59:10
相关阅读
jQuery.event.trigger()的简单解释，不bb源码。
改了个bug，发现这个东西以前不知道，搜索了一下，看到的都是长篇大论，还谈js的源码，也是醉了。 我就简单的说说这个是干啥的。 简单说：就
$("h3 i").click(function(){ $(this).parent().parent().find("ul").toggle();//无动画显示隐藏 $(this).parent().parent()
现在项目分页好多都是直接用插件，今天发现其实自己写页不难。主要是以前老师讲的时候没听。（对不起老何！哈哈）今天发布一个前端超简单
form提交禁用序列化属性为集合，希望有回调并且能很好的后续处理 直接向后端传递参数即可<!DOCTYPE html> <html lang="en"> <head>
$.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回-1;$.inArray(value,array) --val