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. 当电视沦为“情怀”，5G能不能拯救它？(zz)

    文|佘凯文 来源|智能相对论(aixdlun) 现阶段,智能家居行业极度期待5G的到来,甚至超过手机.行业对于颠覆性的升级的欲望极其强烈,纵观整个智能家居行业,除了像智能音箱外的偶尔单品能够“引爆”市 ...

  2. 各种加载效果，适合做加载loading动画效果 Eclipse版

    Animation.rar 链接: http://pan.baidu.com/s/1c0QkOz2 密码: kd57

  3. Spring官方文档翻译——15.1 介绍Spring Web MVC框架

    Part V. The Web 文档的这一部分介绍了Spring框架对展现层的支持(尤其是基于web的展现层) Spring拥有自己的web框架--Spring Web MVC.在前两章中会有介绍. ...

  4. Highmaps的天津地图数据JSON格式

    Highmaps的天津地图数据JSON格式 Highmaps的天津地图数据JSON格式 下载链接: http://pan.baidu.com/s/1eQgxECU password: tjmj 天津地 ...

  5. 在vs2005中添加lib库的方法

    方法一:在用到lib的地方加上  //强烈推荐这种方法.#pragma    comment(lib,"libname.lib") 方法二:     点击菜单命令 “项目/属性”, ...

  6. Class.forName("java.lang.String")的作用？

    返回字节码: 返回的方式有2种: 第一种是这个类的字节码已经加载到内存里面来了,现在想要取到它的字节码,我直接找到那份字节码把他返回: 第二种是我去得到这个类的字节码,结果在虚拟机里面还没有这个类的字 ...

  7. iframe 框架中 父子界面的JS调用

    子界面调用父界面 window.parent.hello(); 父界面调用子界面 window.frmaes[i].hello();

  8. Java中数组复制的几种方式以及数组合并

    1.Object.clone() 简单直接,只能对源数组完整地复制 2.Arrays.copyOf(T[] original, int newLength) 可以只复制源数组中部分元素,但复制的起始位 ...

  9. mysql 中varchar（50）最多能存多少个汉字

    首先要确定mysql版本4.0版本以下,varchar(50),指的是50字节,如果存放UTF8汉字时,只能存16个(每个汉字3字节) 5.0版本以上,varchar(50),指的是50字符,无论存放 ...

  10. 禅道——Linux服务器部署禅道

    前言 2019年6月14日 22:01:24 看看时间我知道,我离猝死依然不远~ 禅道是什么 | 禅道是专业的研发项目管理软件 禅道的官网 | https://www.zentao.net/ 禅道开源 ...