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. Hibernate - DetachedCriteria 的完整用法(转）

    现在对 Hibernate的Criteria 的用法进行总结:     Hibernate 设计了 CriteriaSpecification 作为 Criteria 的父接口,下面提供了 Crite ...

  2. notepad++的f90配置文件

    notepad++仅支持f77格式的,所以f90格式需要重新定义配置文件 传送门: http://ehc.ac/p/notepad-plus/discussion/331753/thread/8f72 ...

  3. CGI的知识点

    CGI(Common Gateway Interface)是能让webserver和CGI脚本共同处理客户的请求的协议. 它的协议定义文档是http://www.ietf.org/rfc/rfc387 ...

  4. 解决移动端页面滚动后不触发touchend事件

    解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...

  5. 怎样在QML中利用Sprite来做我们须要的动画

    在游戏中动画的设计很中要. 在QML中,它提供了丰富的animation.可是有时我们须要对图像进行变化,就像放电影一样.在今天的这篇文章中,我们将设计一个能够变化图像的动画. 我们能够通过Qt所提供 ...

  6. ZOJ3209 Treasure Map —— Danc Links 精确覆盖

    题目链接:https://vjudge.net/problem/ZOJ-3209 Treasure Map Time Limit: 2 Seconds      Memory Limit: 32768 ...

  7. Redis持久化（RDB和AOF）

    什么是Redis持久化 什么是Redis持久化,就是将内存数据保存到硬盘. Redis 持久化存储 (AOF 与 RDB 两种模式) RDB持久化 RDB 是以二进制文件,是在某个时间 点将数据写入一 ...

  8. 如何查看一个Application是32位的还是64位的？

    使用process explorer查看,找到对应的进程. 注册表的路径是Computer\HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\ 使用powershell查 ...

  9. hdu 4463 Outlets（最小生成树）

    题意:n个点修路,要求总长度最小,但是有两个点p.q必须相连 思路:完全图,prim算法的效率取决于节点数,适用于稠密图.用prim求解. p.q间距离设为0即可,最后输出时加上p.q间的距离 pri ...

  10. hdu 4544 湫湫系列故事——消灭兔子（优先队列）

    题意:n只兔子(有血量),m只箭(有伤害.花费),每只兔子只能被射一次,求射死所有兔子的最少花费. 思路:贪心,2重循环,兔子从血量高到低,箭从伤害高到低,用能射死兔子的箭中花费最小的箭射. #inc ...