基本选择器

基本选择器是jQuery中最常见的选择器，也是最简单的选择器，它是通过元素id，calss和标签名等来查找DOM元素，常见基本选择器分别有：

#id：根据给定的id匹配一个元素（单个元素）
.class：根据给定的类名匹配元素（元素集合）
element：根据给定的元素名匹配元素（元素集合）
*：匹配所有元素（元素集合）
selector1，selector2..：将每一个选择器匹配到的元素合并后一起返回

可以使用这些基本的选择器来完成绝大多数的工作，在开始前，我们先在html中写如下代码，后面所有的操作，都在此基础上完成。

<!DOCTYPE html>

<head>

　　<title>Document</title>

　　<style>

　　　　.import{

　　　　　　color:#fff;

　　　　　　border:2px solid #303030;

　　　　}

　　　　.blue{

　　　　　　width:200px;

　　　　　　height:150px;

　　　　}

　　</style>

</head>

<body>

　　<h2>基本选择器</h2>

　　<p>开始学习jquery</p>

　　<div class="apple">today is Saturday</div>

</body>

</html>

1、ID选择器

$(function(){
　　//ID选取
 　　$("#username").css("background-color",'lightblue');
 　　$("#username").css("color",'red');
})

通过id选择器，为id为username的元素添加了背景色和字体颜色，在JavaScript中用如下代码也可以实现相同相同。

window.onload = function(){
　　document.getElementById('username').style.color = 'red';
　　document.getElementById('username').style.backgroundColor = 'lightblue';
}

2、class选择器

$(function(){
 　　$(".apple").css('color','red');
 　　$(".apple").addClass("import blue");
 　　$(".apple").css({"font-size":"18px","font-weight":"bold","line-height":"150px"});
 })

在此需要注意的是，class类选择器和id选择器不同，得到的是元素组合，是一个伪数组，需要通过索引来获取具体的元素，在JavaScript中也可以实现上面的效果。

window.onload = function(){
    document.getElementsByClassName('apple')[0].style.color = 'blue';
    document.getElementsByClassName('apple')[0].className = 'import blue';
    document.getElementsByClassName('apple')[0].style.fontSize = '18px';
    document.getElementsByClassName('apple')[0].style.fontWeight = 'bold';
    document.getElementsByClassName('apple')[0].style.lineHeight = '150px';
}

3、元素名选择器

$(function(){
    $("p").css("border","5px solid green");
})

通过下面的JavaScript也能实现上面的效果。

 window.onload = function(){
       document.getElementsByTagName('p')[0].style.border = '5px solid green';
 }

4、通配符选择器

$(function(){
　　 $("*").css("background-color",'pink');
})

通配符选择器用来选择所有元素，在JavaScript中，有两种方式可以实现上面的效果。

Array.prototype.forEach.call(document.getElementsByTagName('*'),function(item,index,arr){
     item.style.backgroundColor = 'pink';
})
Array.prototype.forEach.call(document.all,function(item,index,arr){
     item.style.backgroundColor = 'pink';
})

5、联合选择器

$(function(){
 $("#username,.apple,p").css('background-color','orange');
        })

在JavaScript中可以通过如下方式实现上面的效果

Array.prototype.forEach.call(document.querySelectorAll('#username,.apple,p'),function(item,index,arr){
        item.style.color = 'red';
});

posted on 2018-07-28 15:40 紅葉阅读(204) 评论(0) 编辑收藏举报