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 ...
随机推荐
- iOS多线程编程(四)------ GCD(Grand Central Dispatch)
一.简单介绍 是基于C语言开发的一套多线程开发机制.也是眼下苹果官方推荐的多线程开发方法.用起来也最简单.仅仅是它基于C语言开发,并不像NSOperation是面向对象的开发.而是全然面向过程的.假设 ...
- 获取Wifi密码,不知道是不是真的
package com.example.wifipassword; import java.util.List; import android.app.Activity; import android ...
- OOP思想又一随笔
现有类再有对象, 类:对现实世界事物的抽象表示,包括事物的状态信息(成员变量)和行为信息(成员方法).我们要让我们的计算机程序设计更有意思,也更有逻辑性,则我们的程序中对事物的描叙就必须符合真实情况, ...
- SpringInAction4笔记——装配
重点:常用的上下文环境 AnnotationConfigApplicationContext ClassPathXmlApplicationContext FileSystemXmlApplicati ...
- easyui tree的简单使用
Tree 数据转换 所有节点都包含以下属性: id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data text: 显示的节点文本 ...
- react Native 踩坑记录
应用 1 安卓打包 经验 解决方案 ,官方 解决方案 2 调试 用 React-Native-Debugger 教程 3 微信分享和登录 使用 react-native-wechat 地址 设计 ...
- ios常用到的第三方库
在iOS开发中不可避免的会用到一些第三方类库,它们提供了很多实用的功能,使我们的开发变得更有效率:同时,也可以从它们的源代码中学习到很多有用的东西. Reachability 检测网络连接 用来检查网 ...
- 各种DP总结
一.数位DP 1.含有或不含某个数“xx”: HDU3555 Bomb HDU2089 不要62 2.满足某些条件,如能整除某个数,或者数位上保持某种特性: HDU3652 B-number Code ...
- 逻辑运算符,if、swtch语句(java基础知识三)
1.逻辑运算符的基本用法 * A:逻辑运算符有哪些 &(逻辑与) |(逻辑或) !(逻辑非) ^(逻辑异或) &&(短路与) ||(短路或) * 注意事项: * a:逻辑运算符 ...
- Parameter 'username' not found. Available parameters are [1, 0, param1, param2]
只要把dao层的***Mapper.java代码的参数加上@param 才可以 修改前的代码 public User selectLogin(String username,String passwo ...