JQuery学习之旅（6）

最新推荐文章于 2024-09-03 23:41:58 发布

宝哥大数据

最新推荐文章于 2024-09-03 23:41:58 发布

阅读量348

点赞数

本文链接：https://blog.csdn.net/wuxintdrh/article/details/52050332

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

类选择器JQuery学习之旅（6）—类选择器

类选择器：通过class样式的类名获取节点
JQuery的类选择器：
获取节点集合，

$('.class');

相对于id选择器

$('#id');  //获取唯一节点

类选择器多选就是相对效率低，

在浏览器兼容情况下：
(1) javascript原生的getElementsByClassName(“类名”)；(进行循环获取)
(2) JQuery方法： $(‘.class’);
实现如下：
原生：

    <script type="text/javascript">
        var divs = document.getElementsByClassName("aaron");
        for ( var i = 0; i < divs.length; i++) {
            divs[i].style.border = "5px solid blue";
        }
    </script>

JQuery:

    <script type="text/javascript">
        $(".imooc").css("border", "5px solid red");
    </script>

在注意一下：类名属性 class=”xxx”;

<div class="aaron">
        <p>id="aaron"</p>
        <p>选中</p>
    </div>

具体代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>$(".class")</title>
<style>
    div{
        width: 100px;
        height: 90px;
        float: float;
        margin: 5px;
        padding: 5px;
        background-color: #eeeeee;
    }
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <div class="aaron">
        <p>id="aaron"</p>
        <p>选中</p>
    </div>
    <div class="aaron">
        <p>id="aaron"</p>
        <p>选中</p>
    </div>
    <div class="imooc">
        <p>id="imooc"</p>
        <p>JQuery选中</p>
    </div>
    <div class="imooc">
        <p>id="imooc"</p>
        <p>JQuery未选中</p>
    </div>

    <script type="text/javascript">
        var divs = document.getElementsByClassName("aaron");
        for ( var i = 0; i < divs.length; i++) {
            divs[i].style.border = "5px solid blue";
        }
    </script>

    <script type="text/javascript">
        $(".imooc").css("border", "5px solid red");
    </script>    

</body>
</html>