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. J2SE核心开发实战（二）——字符串与包装类

    字符串与包装类 一.实验简单介绍 在本章.我们将学习一些用于处理字符串的API以及包装类的相关知识. 本章知识点 字符串API 包装类及其应用 二.认识字符串类 1. 什么是字符串类 Java字符串类 ...

  2. C开发人员眼中的SICP学习

    谈谈自己看SICP的一些体会 第一章  构造过程抽象 这一章事实上和C语言全然等价, 不打算深入学习LISP的能够高速略过. 思想上没有太多新的东西. 这一章最核心的价值就是以下3句话, 理解了这一章 ...

  3. 翻译：A Tutorial on the Device Tree (Zynq) -- Part III

    A Tutorial on the Device Tree (Zynq) -- Part III 定义外设 可能你读本文是为了给你的设备写一个Linux驱动,在这方面要推荐著名的<Linux D ...

  4. DRF 之 路由组件

    组件路由的步骤 1.先要导入DefaultRouter from rest_framework.routers import DefaultRouter 2.实例化DeaultRouter对象 rou ...

  5. HBase协处理器同步二级索引到Solr

    一. 背景二. 什么是HBase的协处理器三. HBase协处理器同步数据到Solr四. 添加协处理器五. 测试六. 协处理器动态加载 一. 背景 在实际生产中,HBase往往不能满足多维度分析,我们 ...

  6. python 目录下的__init__.py

    1 一个目录要成为一个package必须有__init__.py文件 The __init__.py files are required to make Python treat the direc ...

  7. ivy

    ivy https://ant.apache.org/ivy/ Apache Ivy™ is a popular dependency manager focusing on flexibility ...

  8. Android开发之开机自动启动应用

    package com.raycloud.wolf.autostart; import android.content.BroadcastReceiver; import android.conten ...

  9. 百度语音识别开放平台SDK用法

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zpf8861/article/details/30229039 百度Android语音识别SDK分在 ...

  10. Linux Linker

    文章原文:http://zhidao.baidu.com/link?url=U2Mtcc6BKi4vuQ1MO8U6s9gNm4y9Epphz03veA2lVpRWMozyVdj0PYvw1ZU9qj ...