JavaQuery选择器
1、基本选择器
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title>基本选择器</title> | |
<style type="text/css"> | |
#box { | |
background-color: #FFF; | |
border: 2px solid #000; | |
padding: 5px; | |
} | |
</style> | |
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
<script type="text/javascript"> | |
$(function() { | |
$("#btn1").click(function() {//触发不同的效果按钮点击事件 | |
//标签选择器,获取<h3>元素并为其添加背景颜色 | |
//$("h3").css({"background":"red"}); | |
//类选择器,获取并设置所有class为title的元素的背景颜色 | |
//$(".title").css({"background":"red"}); | |
//ID选择器,获取并设置id为box的元素的背景颜色 | |
//$("#box").css({"background":"red"}); | |
//并集选择器,获取并设置所有<h2>、<dt>、class为title的元素的背景颜色 | |
//$("h2,dt,.title").css({"background":"red"}); | |
//交集选择器,获取并设置所有class为title的<h2>元素的背景颜色 | |
//$("h2.title").css({"background":"red"}); | |
//全局选择器,改变所有元素的字体颜色 | |
$("*").css({"background":"red"}); | |
}) | |
}); | |
</script> | |
<body> | |
<input type="button" id="btn1" value="显示效果" /> | |
<div id="box"> | |
id为box的div | |
<h2 class="title">class为title的h2</h2> | |
<h3 class="title">class为title的h3</h3> | |
<h3>热门排行</h3> | |
<dl> | |
<dt> | |
<img src="data:images/case_1.gif" width="93" height="99" alt="斗地主" /> | |
</dt> | |
<dd class="title">斗地主</dd> | |
<dd>休闲游戏</dd> | |
<dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd> | |
</dl> | |
</div> | |
</body> | |
</html> |
2、层次选择器
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title>层次选择器</title> | |
<style type="text/css"> | |
* { | |
margin: 0; | |
padding: 0; | |
line-height: 30px; | |
} | |
body { | |
margin: 10px; | |
} | |
#menu { | |
border: 2px solid #03C; | |
padding: 10px; | |
} | |
a { | |
text-decoration: none; | |
margin-right: 5px; | |
} | |
span { | |
font-weight: bold; | |
padding: 3px; | |
} | |
h2 { | |
margin: 10px 0; | |
cursor: pointer; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="menu"> | |
<h2 title="点击看效果">全部旅游产品分类</h2> | |
<dl> | |
<dt> | |
北京周边旅游<span>特价</span> | |
</dt> | |
<dd> | |
<a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a> | |
</dd> | |
</dl> | |
<dl> | |
<dt>景点门票</dt> | |
<dd> | |
<a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a> | |
</dd> | |
<dd> | |
<a href="#">山水</a> <a href="#">双休</a> | |
</dd> | |
</dl> | |
<span>更多分类</span> | |
</div> | |
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
<script type="text/javascript"> | |
$(document).ready(function() { | |
$("h2").click(function() {//点击h2标题时触发的事件 | |
//后代选择器,获取并设置#menu下的<span>元素的背景颜色 | |
//$("#menu span").css({"background":"red"}); | |
//子选择器,获取并设置#menu下的子元素<span>的背景颜色 | |
//$("#menu>span").css({"background":"red"}); | |
//相邻选择器,获取并设置紧接在<h2>元素后的<dl>元素的背景颜色 | |
//$("h2+dl").css({"background":"red"}); | |
//同辈选择器,获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色 | |
$("h2~dl").css({"background":"red"}); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
3、属性选择器
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title>属性选择器</title> | |
<style type="text/css"> | |
#box { | |
background-color: #FFF; | |
border: 2px solid #000; | |
padding: 5px; | |
} | |
h2 { | |
cursor: pointer; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="box"> | |
<h2 class="odds" title="cartoonlist">动画列表</h2> | |
<ul> | |
<li class="odds" title="kn_jp">名侦探柯南</li> | |
<li class="evens" title="hy_jp">火影忍者</li> | |
<li class="odds" title="ss_jp">死神</li> | |
<li class="evens" title="yj_jp">妖精的尾巴</li> | |
<li class="odds" title="yh_jp">银魂</li> | |
<li class="evens" title="hm_da">黑猫警长</li> | |
<li class="odds" title="xl_ds">仙履奇缘</li> | |
</ul> | |
</div> | |
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
<script type="text/javascript"> | |
$(function() { | |
$("h2").click(function() { | |
//改变含有title属性的<h2>元素的背景颜色 | |
//$("h2[title]").css({"background":"red"}); | |
//改变class属性的值为odds的元素的背景颜色 | |
// $("[class='odds']").css({"background":"red"}); | |
//改变id属性的值不为box的元素的背景颜色 | |
//$("[id!='box']").css({"background":"red"}); | |
//改变title属性的值中以h开头的元素的背景颜色 | |
//$("[title^='h']").css({"background":"red"}); | |
//改变title属性的值中以jp结尾的元素的背景颜色 | |
//$("[title$='jp']").css({"background":"red"}); | |
//改变title属性的值中含有s的元素的背景颜色 | |
//$("[title*='s']").css({"background":"red"}); | |
//改变包含class属性,且title属性的值中含有y的<li>元素的背景颜色 | |
$("li[class][title*='y']").css({"background":"red"}); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
4、基本过滤选择器
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title>基本过滤选择器</title> | |
</head> | |
<body> | |
获取焦点:<input type="text"> | |
<h1>h1网络小说</h1> | |
<h2>h2网络小说</h2> | |
<h3>h3网络小说</h3> | |
<h4>h4网络小说</h4> | |
<ul> | |
<li>王妃不好当</li> | |
<li>致命交易</li> | |
<li class="three">迦兰寺</li> | |
<li>逆天之宠</li> | |
<li>交错时光的爱恋</li> | |
<li>张震鬼故事</li> | |
<li>第一次亲密接触</li> | |
</ul> | |
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
<script type="text/javascript"> | |
$(function() { | |
$("h2").click(function(){ | |
//改变第1个<li>元素的背景颜色 | |
//$("li:first").css({"color":"red"}); | |
//改变最后一个<li>元素的背景颜色 | |
//$("li:last").css({"color":"red"}); | |
//改变class不为three的<li>元素的背景颜色 | |
//$("li:not(.three)").css({"color":"red"}); | |
//改变索引值为偶数的<li>元素的背景颜色 | |
//$("li:even").css({"color":"red"}); | |
//改变索引值为奇数的<li>元素的背景颜色 | |
//$("li:odd").css({"color":"red"}); | |
//改变索引值等于1的<li>元素的背景颜色 | |
//$("li:eq(1)").css({"color":"red"}); | |
//改变索引值大于1的<li>元素的背景颜色 | |
// $("li:gt(1)").css({"color":"red"}); | |
//改变索引值小于1的<li>元素的背景颜色 | |
//$("li:lt(1)").css({"color":"red"}); | |
//改变所有标题元素,例如<h1>,<h2>,<h3>……这些元素的背景颜色 | |
//$(":header").css({"color":"red"}); | |
}); | |
//改变当前获取焦点的元素的背景颜色 | |
$("input").click(function(){ | |
//让获取焦点的元素改变背景色 | |
alert("是否获取焦点:"+$(this).is(":focus")); | |
$(":focus").css({"background":"red"}); | |
}) | |
}); | |
</script> | |
</body> | |
</html> |
5、可见性过滤器
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title>可见性过滤器</title> | |
</head> | |
<body> | |
<button id="show">show</button> | |
<button id="hide">hide</button> | |
<div>显示1</div> | |
<div>显示2</div> | |
<div style="display:none">显示3</div> | |
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
<script type="text/javascript"> | |
$(function() { | |
//点击show按钮触发的事件 | |
$("#show").click(function(){ | |
$(":hidden").show(); | |
}); | |
//点击hide触发的事件 | |
$("#hide").click(function(){ | |
$("div:visible").hide(); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
JavaQuery选择器的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
- 05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- CSS 选择器及各样式引用方式
Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...
- jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- jq选择器基础
Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...
- 微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒计时)
转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...
随机推荐
- <!DOCTYPE>是干嘛用的?— html文档类型
一.啥是文档类型? 在网站开发中一定遇到过这样几种html文档 <!DOCTYPE> 是啥? Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也 ...
- 1.phpcms 伪静态
location / { if (!-f $request_filename){ rewrite (.*) /index.php; } rewrite ^/caipu-([-]+)-([-]+)-([ ...
- ECMAScript 6中的var,let,const
var的变量提升 console.log(a); //输出undefined ; 他的实际执行顺序是: var a: console.log(a); a= 这就是var的变量提升 const命令的用法 ...
- C++ Primer 5th 第19章 特殊工具与技术
C++是一种通用型语言,其设计者希望它能处理各种各样的问题,因此除了一些能适用于所有问题的语言特性,还有一些适用于特定问题的特性. 控制内存分配 某些程序对内存分配有着特殊的需求,它们不适合使用标准的 ...
- linux中set、unset、export、env、declare,readonly的区别以及用法
set命令显示当前shell的变量,包括当前用户的变量; env命令显示当前用户的变量; export命令显示当前导出成用户变量的shell变量. 每个shell有自己特有 ...
- 【bzoj题解】题解传送门
如题,题解传送门: 1001 1008 1012
- HTTP::Request 用 add-content 添加 POST参数
sub MAIN($cmd) { use HTTP::UserAgent; my $r = HTTP::Request.new(); $r.uri: 'http://localhost/a.php'; ...
- Java Dom对XML的解析和修改操作
与Dom4J和JDom对XML的操作类似,JDK提供的JavaDom解析器用起来一样方便,在解析XML方面Java DOM甚至更甚前两者一筹!其不足之处在于对XML的增删改比较繁琐,特开篇介绍... ...
- js如何查看元素类型
<script type="text/javascript"> //定义变量temp var temp = Object.prototype.toString.appl ...
- 002_curl及postman专题
一. 步骤 1: 下载cURL工具 使用您的Windows机器从cURL web站点下载最新版本的cURL: (1) 通常情况下,多数的Windows用户可以从官网下载页面http://curl.ha ...