getElementsByTagName方法得到页面所有的<div>元素

var divs = document.getElementsByTagName('div');

与

同样的效果，$("p")选取所有的<p>元素，通过css方法直接赋予样式

$("p")

　　

<!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">

    //通过原生方法处理

    //获取到所有的节点标记名为div的元素

    //给每一个div加上蓝色的边框

    var divs = document.getElementsByTagName('div');

    for (var i = 0; i < divs.length; i++) {

        divs[i].style.border = "3px solid blue";

    }

    </script>

    <script type="text/javascript">

    //通过jQuery直接传入标签名p

    //标签是可以多个的，所以得到的同样也是一个合集

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

    </script>

</body>

　　

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

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

    原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较: <!DOCTYPE html> <html> <head> < ...

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

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

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

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

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

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

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

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

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

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

  7. jQuery选择器之子元素选择器

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

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

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

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

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

随机推荐

  1. 关于MP4视频拖动的原理与分析（一）

    本来想说说关于mp4和一些常见视频文件格式方面的历史. 如今想想没啥必要.毕竟本文是在讲关于mp4点播拖动方面的技术细节. 绪论,前言神马的显得有点多余. 说起MP4.不得不提"Digita ...

  2. 高仿美团iOS版，版本5.7

    高仿美团iOS版,版本:5.7 iOS技术交流群:112365317 github链接:https://github.com/lookingstars/meituan 假设你认为不错.欢迎star 哦 ...

  3. appium第一个安卓自动化工程

    转自:https://university.utest.com/how-to-set-up-your-first-android-automation-project-with-appium/ App ...

  4. Html.Partial

    老革命永远都在遇上各种似是而非的老问题. 这次,是这个Html.Partial,分部页. Html.Partial与Html.Action有啥区别呢?区别就是,Html.Partial只有一个视图,而 ...

  5. 2016/06/16 phpexcel

      程序部分   require_once './phpexcel/PHPExcel.php';   // 首先创建一个新的对象  PHPExcel object $objPHPExcel = new ...

  6. VUE 之 JS指令

    1.v-text的用法: 2.v-html 3.v-for 4.v-if , v-else if ,v-else v-if 每次生成都只有一个标签,即符合条件的标签. 5.v-show v-show ...

  7. C++设计模式之State模式

    这里有两个例子: 1.https://www.cnblogs.com/wanggary/archive/2011/04/21/2024117.html 2.https://www.cnblogs.co ...

  8. EOS智能合约为何选择Web Assembly(wasm)

    比特币的程序非常简单,由解锁脚本和锁定脚本构成.以太坊有智能合约,有图灵完备的虚拟机EVM,但是指令也相对简单,且自成一套.这两种程序本质上都是脚本程序,即由程序翻译指令并执行,而不是由本地机器CPU ...

  9. CentOS设置代理

      假设我们要设置代理为 IP:PORT1.网页上网网页上网设置代理很简单,在firefox浏览器下 Edit-->>Preferences-->>Advanced--> ...

  10. bzoj1087互不侵犯King——状压DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1087 水题... 然而犯了两个致命小错误,调了好半天...详见注释. 代码如下: #incl ...