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. bzoj 1030: [JSOI2007]文本生成器 (ac自己主动机上的dp)

    1030: [JSOI2007]文本生成器 Time Limit: 1 Sec  Memory Limit: 162 MB Submit: 2635  Solved: 1090 [id=1030&qu ...

  2. (27) java web的struts2框架的使用-基于表单的多文件上传

    和单个文件上传配置都是一样的,只是在action中接受参数时候,接受的是数组,不再是单个的文件. 一,action的实现: public class MutableFilesUpload extend ...

  3. 单字节的FIFO缓存（30天自制操作系统--读书笔记）

    从今天起,写一些读书笔记.最近几个月都在看<30天自制操作系统这本书>,书虽说看的是电子书,但可以花钱买的正版书,既然花费了金钱,就总得有些收获. 任何人都不能总是固步自封,想要进步就得学 ...

  4. ActiveMQ 安全认证

    修改配置文件 位置: apache-activemq-5.9.0/conf/ vi activemq.xml 在<broker xmlns="http://activemq.apach ...

  5. Android设备adb授权的原理【转】

    本文转载自:http://blog.csdn.net/zahuopuboss/article/details/50831171 http://blog.csdn.net/sowhat_ah/artic ...

  6. POJ1077 Eight —— IDA*算法

    主页面:http://www.cnblogs.com/DOLFAMINGO/p/7538588.html 代码一:像BFS那样,把棋盘数组放在结构体中. #include <iostream&g ...

  7. Oracle：sequence问题研究

    一直以来,以为sequence是不间断地持续增长的:但今天发现sequence是会跳号,这种情况发生在RAC环境下.在单实例环境下,应该不存在的. sequence截图如下: 数据库表中发生了跳号: ...

  8. UVA-10600(次小生成树)

    题意: 现在给一个图,问最小生成树和次小生成树的权值和是多少; 思路: 求最小生成树的两种方法,次小生成树是交换最小生成树的其中一条边得到的,现在得到了最小生成树,枚举不在次小生成树中的边,再求一边最 ...

  9. maven(一)创建一个maven的web项目

    一.创建项目 1.Eclipse中用Maven创建项目 上图中Next 2.继续Next 3.选maven-archetype-webapp后,next 4.填写相应的信息,Packaged是默认创建 ...

  10. 【NOIP2017Day1T1】 小凯的疑惑

    [题目链接] 点击打开链接 [算法] px + qy不能表示的最大整数为 pq - p - q 证明见这篇博客,过程很详细,推荐阅读 : https://blog.csdn.net/qwerty112 ...