原生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. mtk机型的一次救砖经历

    在recovery里清除了data,cache,system三个分区,没有刷机,重启到bootloader,准备另刷recovery. 有急事走开了,回来时发现手机黑屏,无论什么组合键都没反应,以为是 ...

  2. [网页游戏开发]Morn组件赋值

    在讲解List之前,我们先介绍一下Morn组件赋值功能 默认属性赋值 界面逻辑开发过程中,经常会涉及到动态更改UI属性,比如: 界面有一个按钮,一个多选框和一个文本,分别命名为myButton,myC ...

  3. scrollTo(String text) and scrollToExact(String text) method of Android Driver not working

    Using the scrollTo(String text) and scrollToExact(String text) method of Android Driver. However the ...

  4. Spark 学习笔记：（四）MLlib基础

    MLlib:Machine Learning Library.主要内容包括: 数据类型 统计工具 summary statistics correlations stratified sampling ...

  5. Struts2的工作原理（图解）详解

    Struts2的工作原理 上图来源于Struts2官方站点,是Struts 2 的整体结构. 一个请求在Struts2框架中的处理大概分为以下几个步骤(可查看源码:https://github.com ...

  6. 使用C++11的thread取代QThread

    因为在做的工程项目里使用了Qt,而实际上不涉及到屏幕显示,工程代码里使用了QThread,且没有使用Qt核心的信号与槽,为了以后移植准备使用更加通用的C++11 stl中的thread取代QThrea ...

  7. LIS n^2&nlogn模板

    LIS nlogn模板 http://acm.hdu.edu.cn/showproblem.php?pid=1950 #include <iostream> #include <st ...

  8. caioj1462: 【EXKMP】回文串

    不得不说这是一道好题(前排膜拜灯教授),其实这道题如果不说是EXKMP,很容易就想到Manacher(好像也可以这样做) 回到这道题,这样只有一个字符串,还要求回文?立刻想到了将这个串和它的反串跑EX ...

  9. 通过Oracle sql developer从sqlserver迁移数据到oracle

    通过Oracle sql developer工具从sqlserver迁移数据到oracle 序言 一般情况下,sqlserver数据迁移到oracle,我们可以使用ODI来进行.但ODI的安装.配置. ...

  10. Watir: 当出现错误提示AutoItX3.dll 没有注册的时候，该怎么处理？

    对于Ruby 1.8版本,以管理员身份运行命令行窗口,输入Regsvr32 AutoItX3.dll路径即可.对于1.9 版本,路径与1.8版本是不同的,我们可以进入Ruby安装目录下,搜索AutoI ...