jQuery选择器

聆听蘭

2017-05-01

关注关注

jQuery选择器允许对 HTML 元素组或单个元素进行操作

已经存在的之外，它还有一些自定义的选择器

jQuery 中所有选择器都以美元符号开头 $()$('#tt')获取的永远是对象

选择器分为基本选择器层次选择器过滤选择器和表单选择器

基本选择器是jQuery中最常用的选择器也是最简单的选择器可以通过元素ID class和标签名等来查找

DOM元素每个id名称只能用一次在一个网页中class允许重复使用

#id 根据给的id匹配一个元素
.class 根据类名匹配元素
element 很具元素名匹配元素
*  匹配所有元素

id选择器（指定id元素）

将id="one"的元素背景色设置为黑色。（id选择器返单个元素）

$(document).ready(function () {
        $('#one').css('background', '#000');
    });

 class选择器（遍历css类元素）

将class="cube"的元素背景色设为黑色

$(document).ready(function () {
        $('.cube').css('background', '#000');
    });

 element选择器（遍历html元素）

将p元素的文字大小设置为12px

$(document).ready(function () {
        $('p').css('font-size', '12px');
    });

 * 选择器（遍历所有元素）

$(document).ready(function () {
        // 遍历form下的所有元素，将字体颜色设置为红色
        $('form *').css('color', '#FF0000');
    });

层次选择器可以通过DOM元素之间的层次关系来获取特定的元素
过滤选择器通过特定的过滤规则筛选吃所需的DOM元素选择器以：开头

:first 选取第一个元素
:last x选取最后一个元素

表单选择器可以获取到表单的某个或某类型的元素

利用元素选择器举例子

点击按钮button元素p消失

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>高帆</title> 
<script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>一个标题</h2>
<p>一个段落。</p>
<p>一个段落。</p>
<button>点我</button>
</body>
</html>

/*click 事件
当点击元素时，会发生 click 事件*/

聆听蘭

0 关注 0 粉丝 0 动态

关注关注

安科网

jQuery选择器

聆听蘭

聆听蘭

聆听蘭