Jquery | 基础 | 慕课网 | 元素选择器
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 | 基础 | 慕课网 | 元素选择器的更多相关文章
- Jquery | 基础 | 慕课网 | 类选择器
原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较: <!DOCTYPE html> <html> <head> < ...
- Jquery | 基础 | 慕课网 | 层级选择器
选择器中的层级选择器处理关系类型: 子元素 后代元素 兄弟元素 相邻元素 <!DOCTYPE html> <html> <head> <meta http-e ...
- Jquery | 基础 | 慕课网 | (*选择器)
原生JS var elements1 = document.getElementsByTagName('*'); JQ var elements2 = $("*"); <!D ...
- Jquery | 基础 | 慕课网 | 基本筛选选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- jQuery基础学习7——层次选择器find()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery基础学习6——基本选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery选择器之子元素选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- jQuery基础学习8——层次选择器next()和prev()方法
$('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 ...
- jQuery基础学习8——层次选择器children()方法
$('body > div').css("background","#bbffaa"); //和children()方法是等价的,父子关系,和parent ...
随机推荐
- [WF4.0 实战] 事件驱动应用
看到题目或许非常多人都会疑问,为什么要使用事件监听呢? 眼下的认识: 1,使用事件监听能够将工作流的结点返回值返回到client 2,能够实现等待与重新启动,相当于之前的WaitActivity创建B ...
- Comparable 和 Comparator的理解
对Comparable 的解释 Comparable是一个排序接口 此接口给实现类提供了一个排序的方法,此接口有且只有一个方法 public int compareTo(T o); compareTo ...
- thinkphp getField( )和field( )
thinkphp getField( )和field( ) 做数据库查询的时候,比较经常用到这两个,总是查手册,记不住,现在把它总结下,希望以后用的时候不查手册了. 不管是用select 查询数据 ...
- [rabbitmq-discuss] Exactly Once Delivery
[rabbitmq-discuss] Exactly Once Delivery http://lists.rabbitmq.com/pipermail/rabbitmq-discuss/2010-A ...
- DataSnap Mobile Client Tutorial
One of my customers was having some difficulty following the DataSnap tutorial which can be found he ...
- CentOS 7 安装jdk9
1.下载jdk9 http://download.oracle.com/otn-pub/java/jdk/9.0.4+11/c2514751926b4512b076cc82f959763f/jdk-9 ...
- html5--6-52 动画效果-过渡
html5--6-52 动画效果-过渡 实例 @charset="UTF-8"; div{ width: 300px; height: 150px; margin: 30px; f ...
- UIDynamic 基础
一.简单介绍 1.什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟和仿真现实生活中的物理现象 如:重力.弹性碰撞 ...
- VC++静态连接库
目录 第1章静态连接库 1 1.1 同名函数的选择 1 1.2 模块合并 2 1.2.1 模块替换 4 1.3 内联函数 4 第1章静态连接库 静态连接库与动态连接库一样 ...
- 【USACO】 奶牛政坛
[题目链接] 点击打开链接 [算法] tarjan算法求LCA [代码] #include<bits/stdc++.h> #define MAXN 200010 #pragma GOC o ...