原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        div {

            width: 100px;

            height: 90px;

            float: left;

            padding: 5px;

            margin: 5px;

            background-color: #EEEEEE;

        }

    </style>

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

</head>

<body>

	 <div class="aaron">

    	<p>class="aaron"</p>

    	<p>选中</p>

    </div>

     <div class="aaron">

        <p>class="aaron"</p>

        <p>选中</p>

    </div>

    <div class="imooc">

        <p>class="imooc"</p>

        <p>jQuery选中</p>

    </div>

    <div class="imooc">

        <p>class="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 = "3px solid blue";

        }

    </script>

    <script type="text/javascript">

        //通过jQuery直接传入class

        //class选择器可以选择多个元素

        $(".imooc").css("border", "3px solid red");

    </script>

</body>

</html>

　　

Jquery | 基础 | 慕课网 | 类选择器的更多相关文章

  1. Jquery | 基础 | 慕课网 | 层级选择器

    选择器中的层级选择器处理关系类型: 子元素 后代元素 兄弟元素 相邻元素 <!DOCTYPE html> <html> <head> <meta http-e ...

  2. Jquery | 基础 | 慕课网 | （*选择器）

    原生JS var elements1 = document.getElementsByTagName('*'); JQ var elements2 = $("*"); <!D ...

  3. Jquery | 基础 | 慕课网 | 元素选择器

    getElementsByTagName方法得到页面所有的<div>元素 var divs = document.getElementsByTagName('div'); 与 同样的效果, ...

  4. Jquery | 基础 | 慕课网 | 基本筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  5. CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法

    一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> ...

  6. jQuery基础学习7——层次选择器find()方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery基础学习6——基本选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery基础学习8——层次选择器next()和prev()方法

    $('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 ...

  9. jQuery基础学习8——层次选择器children()方法

    $('body > div').css("background","#bbffaa"); //和children()方法是等价的,父子关系,和parent ...

随机推荐

  1. iGrimaceVX3.0和1.44在线源手机直接安装教程

    [第一步] 先安装好三个组件设备必须是苹果越狱好后 确定6点几跟7点几的版本号才干够 首先打开cydia 选开发人员 以下 点软件源 点右上角编辑  1加入源 apt.25pp.com和IG包下载源a ...

  2. 12.怎样自学Struts2发送邮件和验证补充[视频]

    12.怎样自学Struts2发送邮件和验证补充[视频] 之前写了一篇"打算做一个视频教程探讨怎样自学计算机相关的技术",优酷上传不了,仅仅好传到百度云上: http://pan.b ...

  3. 【php】读取&quot;文件列表&quot;按时间倒序显示,并递归显示各层文件夹、!

    思路: 1.读取该php所在文件夹的文件列表,用"改动时间.文件名称"做键值对,塞入数组.对"改动时间"倒序.(貌似不能直接按时间倒序读取文件列表,此处为间接方 ...

  4. Spark学习笔记：（一）入门 glance

    参考: http://spark.apache.org/docs/latest/quick-start.html 其它资料:    http://mojijs.com/2015/04/190845/i ...

  5. GDI泄露+改EXE名

    CDC 应该是成对使用 GetDC and ReleaseDC(不用new and delete) 泄露 1.改变生产exe名称:工程->设置->连接->输出文件名:Release/ ...

  6. linux学习：进程间通信—管道

    1.进程间通信当中一种比較简单的方法是管道操作 /* ========================================================================= ...

  7. Struts2中Action接收参数

    Struts2中Action接收参数的方法主要有以下三种: Struts2中Action接收参数的方法主要有以下三种: 1.使用Action的属性接收参数:     a.定义:在Action类中定义属 ...

  8. c语言基本函数

    1. 用宏定义写出swap(x,y) #define swap(x, y) x = x + y; y = x - y; x = x - y; 2.数组a[N],存放了1至N-1个数,其中某个数重复一次 ...

  9. HDU3085 Nightmare Ⅱ —— 双向BFS + 曼哈顿距离

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3085 Nightmare Ⅱ Time Limit: 2000/1000 MS (Java/Other ...

  10. poj 2771 Guardian of Decency 解题报告

    题目链接:http://poj.org/problem?id=2771 题目意思:有一个保守的老师要带他的学生来一次短途旅行,但是他又害怕有些人会变成情侣关系,于是就想出了一个方法: 1.身高差距   ...