CSS 选择器
标签选择器 | 以文档元素作为选择器 | td{ width:120px } |
ID选择器 | 以元素的ID作为选择器 | #note{
width:120px
} |
类选择器 | 以元素的class作为选择器 | .dream{ } |
群组选择器 | 多个元素 应用相同的样式 | td,p,div,a{ } |
后代选择器 | #link a{ } | |
通配符选择器 | 所有元素 | *{ } |
<p class="demo">jQuery Demo</p>
<script type="text/javascript">
$( ".demo"). click(function(){ // 给class为demo 的元素添加行为
alert("jQuery demo!");
})
</script>
<script type="text/javascript">
$( ".demo"). click(function(){ // 给class为demo 的元素添加行为
alert("jQuery demo!");
})
</script>
判断元素是否存在应该使用
if(
$("#tt").length >0){
//doing
}
基本选择器
通过元素id,class和标签名查找元素。
#id | 根据ID查找元素 | 返回单个元素 | $('#test') |
.class | 根据class查找 | 元素集合 |
$('
.test')
|
element | 根据标签 |
元素集合
|
$('
p')
|
* | 所有元素 |
元素集合
|
$('
*')
|
selector1,selector2 | 多个选择器合并 |
元素集合
|
$('
div,span,p.myclass')
|
<script type="text/javascript">
$(document).ready(function(){
//选择 id为 one 的元素
$('#btn1').click(function(){
$('#one').css("background","#bfb");
});
//选择 class 为 mini 的所有元素
$('#btn2').click(function(){
$(' .mini').css("background","#bfa");
});
//选择 元素名是 div 的所有元素
$('#btn3').click(function(){
$(' div').css("background","#bfa");
});
//选择 所有的元素
$('#btn4').click(function(){
$(' *').css("background","#bfa");
});
//选择 所有的span元素和id为two的div元素
$('#btn5').click(function(){
$(' span,#two').css("background","#bfa");
});
});
</script>
$(document).ready(function(){
//选择 id为 one 的元素
$('#btn1').click(function(){
$('#one').css("background","#bfb");
});
//选择 class 为 mini 的所有元素
$('#btn2').click(function(){
$(' .mini').css("background","#bfa");
});
//选择 元素名是 div 的所有元素
$('#btn3').click(function(){
$(' div').css("background","#bfa");
});
//选择 所有的元素
$('#btn4').click(function(){
$(' *').css("background","#bfa");
});
//选择 所有的span元素和id为two的div元素
$('#btn5').click(function(){
$(' span,#two').css("background","#bfa");
});
});
</script>
层次选择器
可以获得 后代元素,子元素,相邻元素,同辈元素
$('body div') | 获得body中的所有DIV元素 |
$('body > div') |
获得body 下一级的子DIV元素
|
$('.one + div') | 获得下一个同辈元素 |
$('#two ~ div') | 选择 id为two的元素后面的所有div兄弟元素 |
<script type="text/javascript">
$(document).ready(function(){
//选择 body内的所有div元素.
$('#btn1').click(function(){
$('body div').css("background","#bbffaa");
})
//在body内的选择 元素名是div 的子元素.
$('#btn2').click(function(){
$('body > div').css("background","#bbffaa");
})
//选择 所有class为one 的下一个div元素.
$('#btn3').click(function(){
$('.one + div').css("background","#bbffaa");
})
//选择 id为two的元素后面的所有div兄弟元素.
$('#btn4').click(function(){
$('#two ~ div').css("background","#bbffaa");
})
});
</script>
$(document).ready(function(){
//选择 body内的所有div元素.
$('#btn1').click(function(){
$('body div').css("background","#bbffaa");
})
//在body内的选择 元素名是div 的子元素.
$('#btn2').click(function(){
$('body > div').css("background","#bbffaa");
})
//选择 所有class为one 的下一个div元素.
$('#btn3').click(function(){
$('.one + div').css("background","#bbffaa");
})
//选择 id为two的元素后面的所有div兄弟元素.
$('#btn4').click(function(){
$('#two ~ div').css("background","#bbffaa");
})
});
</script>
可以用
$('.one').next('div');
代替
$('.one + div'),用
$('.one').nextALL('div')代替
$('.one ~ div')
过滤选择器,主要是通过特定的过滤规则来筛选出所需的DOM元素。
$('div:first') | 选取所有div元素中的第1个div元素 |
$('
div:last')
|
选取所有div元素中的最后1个div元素
|
$('div:not(.one)') | 选择class不为one的 所有div元素 |
$('div:even') | 选择 索引值为偶数 的div元素 |
$('div:odd') | 选择 索引值为奇数 的div元素 |
$('div:eq(3)') | 选择 索引等于 3 的元素 |
$('div:gt(3)') | 选择 索引大于 3 的元素 |
$('div:lt(3)') | 选择 索引小于 3 的元素 |
$(':header') | 选择 所有的标题元素.比如h1, h2, h3等等 |
$(':animated') | 选择 当前正在执行动画的所有元素. |
$(':focus') | 选择 当前获取焦点的所有元素. |
$('div:contains(di)') | 选取含有文本"di"的div元素. |
$('div:empty') | 选取不包含子元素(或者文本元素)的div空元素. |
$("div:has('.mini')") | 选取含有class为mini元素 的div元素 |
$('div:parent') | 选取含有子元素(或者文本元素)的div元素 |
$('div:hidden') | 选取所有不可见的元素 |
$('div:visible') | 选取所有可见的元素 |
$('div[title]') | 选取含有 属性title 的div元素 |
$('div[title=test]') | 选取 属性title值等于 test 的div元素 |
$('div[title!=test]') | 选取 属性title值不等于 test 的div元素 |
$('div[title^=te]') | 选取 属性title值 以 te 开始 的div元素 |
$('div[title$=est]') | 选取 属性title值 以 est 结束 的div元素 |
$("div[title*=es]") | 取 属性title值 含有 es 的div元素 |
$("div[id][title*=es]") | 组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有 es 的元素. |
$('div[title|="en"]') | 选取 属性title等于en或以en为前缀(该字符串后跟一个连字符'-')的元素 |
$('div[title~="uk"]') | 选取 属性title用空格分隔的值中包含字符uk的元素 |
$('div.one :nth-child(2)')
$('
div.one :nth-child(even)')
$('
div.one :nth-child(odd)')
| 选取每个父元素下的第2个子元素 |
$('div.one :first-child') | 选取每个父元素下的第一个子元素 |
$('div.one :last-child') | 选取每个父元素下的最后一个子元素 |
$('div.one :only-child') | 如果父元素下的仅仅只有一个子元素,那么选中这个子元素 |
$("#form1 input:enabled") | 对表单内 可用input 赋值操作 |
$("#form1 input:disabled") | 对表单内 不可用input 赋值操作. |
$("input:checked") | 选中的元素 |
$("select:selected") |
选中的元素
|
$("#form1 :text") | 选择表单中的单行文本框 |
$("#form1 :password") | 密码框 |
$("#form1 :radio") | 单选框 |
$("#form1 :checkbox") | 多选框 |
$("#form1 :submit") | 提交按钮 |
$("#form1 :image") | 图像按钮 |
$("#form1 :reset") | 重置按钮 |
$("#form1 :button") | 所有按钮<input type=button /> 和 <button ></button>都可以匹配 |
$("#form1 :file") | |
$("#form1 :hidden") | <input type="hidden" />和<div style="display:none">test</div>都可以匹配 |
$("form").submit(function () { return false; }); | return false;不能提交 |
转义字符
var $id_right_a = $('#id
\\.a');//jQuery对象,对特殊字符,我们转义一下
var $id_right_b = $('#id \\#b');//jQuery对象,对特殊字符,我们转义一下
var $id_right_c = $('#id \\[1 \\]'); //对特殊字符,我们转义一下
var $id_right_b = $('#id \\#b');//jQuery对象,对特殊字符,我们转义一下
var $id_right_c = $('#id \\[1 \\]'); //对特殊字符,我们转义一下