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. HDOJ_1000

    #include int main() { int i, j; while(scanf("%d%d", &i, &j) == 2) printf("%d\ ...

  2. ID--HANDLE--HWND三者之间的互相转换

    利用PreTranslateMessage,响应按钮控件的按下(WM_LBUTTONDOWN)和松开(WM_LBUTTONUP)   VC的button控制只有两个事件,一个是单击事件,一个事双击事件 ...

  3. vc6.0的一些快捷键

    1.检测程序中的括号是否匹配    把光标移动到需要检测的括号(如大括号{}.方括号[].圆括号()和尖括号<>)前面,键入快捷键“Ctrl+]”.如果括号匹配正确,光标就跳到匹配的括号处 ...

  4. POJ 1183 反正切函数的应用(数学代换,基本不等式)

    题目链接:http://poj.org/problem?id=1183 这道题关键在于数学式子的推导,由题目有1/a=(1/b+1/c)/(1-1/(b*c))---------->a=(b*c ...

  5. 设计模式学习笔记——Observer观察者模式

    观察者模式里面有两个东西:观察者(Observer)和目标(Subject).当目标发生变化的时候,观察者随之起舞,也作出相应的变化.此为观察者模式. 这是怎么做到的?主要是目标里面存有一份观察者的名 ...

  6. node封装mysql模块

    node是基于异步的,因此在进行数据库查询操作的通常是通过回调来操作查询结果.但是在有了es7的async/await,基本不再需要回调了,所以本篇是基于async/await对mysql进行一次操作 ...

  7. css hack (ie6-ie9+)

    IE6 css hack: 1. *html Selector {} /* Selector 表示 css选择器 下同 */ 2. Selector { _property: value; } /* ...

  8. mysql优化-------Myisam与innodb引擎,索引文件的区别

    Myisam与innodb引擎,索引文件的区别: innodb的次索引指向对主键的引用. myisam的次索引和主索引都指向物理行. myisam一行一行的插入,会产生一行一行的文件,磁盘上有数据文件 ...

  9. Java数据库操作类演示

    只在mysql上测试过,不知道算不算好使​1. [代码][Java]代码     package org.load.demo; import java.io.IOException;import ja ...

  10. html5--6-44信纸设计

    html5--6-44信纸设计 实例 <!doctype html> <html> <head> <meta charset="utf-8" ...