jQuery基础学习6——基本选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2-4</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 引入jQuery -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="lib/assist.js" type="text/javascript"></script> <script type="text/javascript">
$(document).ready(function(){
//选择 id为 one 的元素
$('#btn1').click(function(){
$('#one').css("background","#bfa");
}); //选择 class 为 mini 的所有元素
$('#btn2').click(function(){
$('.mini').css("background","#bfa");
}); //选择 元素名是 div 的所有元素
$('#btn3').click(function(){
$('div').css("background","#bfa");
}); //选择 所有的元素
$('#btn4').click(function(){
$('*').css("background","#bfa");
}); //选择 所有的span元素和id为two的div元素
$('#btn5').click(function(){
$('span,#two').css("background","#bfa");
});
});
</script>
</head>
<body> <button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3> <!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1"/>
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
<input type="button" value="选择 所有的元素." id="btn4"/>
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> <br /><br /> <!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div> <div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div> <div style="display:none;" class="none">
style的display为"none"的div
</div> <div class="hide">class为"hide"的div</div> <div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div> <span id="mover">正在执行动画的span元素.</span> </body>
</html>
- $('#one').css("background","#bfa"); 改变id为one的元素的背景色。
- $('.mini').css("background","#bfa"); 改变class为mini的所有元素的背景色
- $('div').css("background","#bfa"); 改变元素名是<div>的所有元素的背景色
- $('*').css("background","#bfa"); 改变所有元素的背景色
- $('span,#two').css("background","#bfa"); 改变所有的<span>元素和id为two的元素的背景色
jQuery基础学习6——基本选择器的更多相关文章
- jQuery基础学习7——层次选择器find()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery基础学习8——层次选择器next()和prev()方法
$('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 ...
- jQuery基础学习8——层次选择器children()方法
$('body > div').css("background","#bbffaa"); //和children()方法是等价的,父子关系,和parent ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
- jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
- 【总结整理】JQuery基础学习---样式篇
进入官方网站获取最新的版本 http://jquery.com/download/ 中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScr ...
- 【jQuery基础学习】09 jQuery与前端（这章很水）
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- Jquery | 基础 | 慕课网 | 类选择器
原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较: <!DOCTYPE html> <html> <head> < ...
随机推荐
- 1709. Penguin-Avia（并查集）
1709 简单题 并查集找下就行 #include <iostream> #include<cstdio> #include<cstring> #include&l ...
- bzoj1043
每次做计算几何题都要做好久 考虑每个圆对答案的贡献,也就是每个圆被后面圆覆盖还有多少 可以把覆盖当成盖住一段弧度,看最后有多少没被覆盖 这就相当于线段覆盖问题了, 推推公式,算极角然后排序即可 md, ...
- bzoj3983
显然我们得到这样几个结论 1.每次攻击对方一定是攻击最大的 2.自己合并也是合并最大和次大的 我们只要穷举下一开始是攻击还是合并,之后就是能攻击先攻击否则就合并 ..] of int64; var a ...
- iOS开发：插件记录
进入沙盒的插件 https://github.com/TongeJie/ZLGotoSandboxPlugin 图片提示的插件 https://github.com/ksuther/KSImageNa ...
- 为初学者写ORM，ORM的原理及测试案例
提纲 一.什么是ORM.二.反射以及Attribute在ORM中的应用.三.创建一个数据库表和表对应的实体model.四.实体model如何映射出数据库表.五.组合ORM映射生成insert语句.六. ...
- Asp.Net MVC Filter权限过滤使用说明
相信对权限过滤大家都不陌生,用户要访问一个页面时,先对其权限进行判断并进行相应的处理动作. mvc中是如何实现权限验证的? mvc中是根据路由配置来请求控制器类中的一个方法 在mvc框架中为程序员提供 ...
- asp.net读excle的数据类型不统一取出空值问题
如果表格里某列全是数字或是字符没问题,但如果混合了全是数字和部分字符就会有部分读取为空连接EXCEL方式如下 string strConn = "Provider=Microsoft.Jet ...
- crtbegin_dynamic.o: No such file: No such file or directory
/homesec/android2/zhangbin/053work3/hi050src/HiSTBAndroidV400R001C00SPC050B012/prebuilt/linux-x86/to ...
- Java [Leetcode 168]Excel Sheet Column Title
题目描述: Given a positive integer, return its corresponding column title as appear in an Excel sheet. F ...
- RTP/RTCP(一)-H264关于RTP协议的实现
H264关于RTP协议的实现2010-07-22 13:35完整的C/S架构的基于RTP/RTCP的H．264视频传输方案.此方案中,在服务器端和客户端分别进行了功能模块设计.服务器端:RTP封装模块 ...