jQuery选择器 CSS选择器
来源：互联网 发布：ubuntu设置ip不起作用 编辑：程序博客网 时间：2024/05/01 12:11
<html>
<head>
<title></title>
<!-- jQuery库导入 -->
<script src="jquery.js"></script>
<script type="text/javascript">
/* document.ready在页面元素加载后，但图片加载完成前 */
/* 一般将代码放入document.ready中，此时页面DOM加载完毕 */
$(document).ready(
function(){
/* 通配符选择器* 选择所有页面元素 */
$("*").css("border","1px solid #333");
/* 元素选择器+元素名 选择指定元素名的全部元素 */
$("h1").css("font-family","arial,verdana");
/* id选择器 选择指定id元素 */
$("#idSelect").css("background-color","#00cccc");
/* class选择器 选择指定class元素 */
$(".clSelect").css({'background-color':'#cc00cc','padding':'30px'});
/* 多class选择器 选择指定多class元素 */
$(".clSelect.dlSelect").css({'background-color':'#cccc00','padding':'30px'});
/* 子元素选择器 选择指定子元素 */
$("#parentDiv h2").css({'background-color':'#cccc00','padding':'30px'});
$("#parentDiv > h2").css({'background-color':'#ffffff','padding':'30px'});
$("#parentDiv + div").css({'background-color':'#ccccff','padding':'30px'});
/* 组合选择器 组合多种元素选择 */
$("#comSelect h2,#comSelect #comIdSelect,#comSelect .comClassSelect,#comSelect #comcomSelect h2").css({'background-color':'#aabbcc','padding':'30px'});
}
)
</script>
</head>
<body>
<div>
<h2>jQuery选择器：使用通配符*为所有元素添加border</h2>
</div>
<div>
<h1>jQuery选择器：元素选择器+元素名 选择指定元素名的全部元素 设置font-family</h1>
</div>
<div id="idSelect">
<h2>jQuery选择器：id选择器 选择指定id元素 设置background-color</h2>
</div>
<div class="clSelect">
<h2>jQuery选择器：class选择器 选择指定class元素 设置padding background-color</h2>
</div>
<div class="clSelect dlSelect">
<h2>jQuery选择器：多class选择器 选择指定多class元素 设置padding background-color</h2>
</div>
<div id="parentDiv">
<h2>parentDiv直接子元素 parentDiv > h2</h2>
<div><h2>parantDiv间接子元素 parentDiv h2</h2></div>
<div><h2>parantDiv间接子元素 parentDiv h2</h2></div>
</div>
<div>
<h2>parentDiv相邻div parentDiv + div</h2>
</div>
<div>
<h2>parentDiv非相邻div parentDiv + div</h2>
</div>
<div id="comSelect">
<h2>组合元素选择 元素选择</h2>
<div id="comIdSelect">组合元素选择 id选择</div>
<div class="comClassSelect">组合元素选择 class选择</div>
<div id="comcomSelect"><h2>组合元素选择 组合元素选择</h2></div>
</div>
</body>
</html>
<head>
<title></title>
<!-- jQuery库导入 -->
<script src="jquery.js"></script>
<script type="text/javascript">
/* document.ready在页面元素加载后，但图片加载完成前 */
/* 一般将代码放入document.ready中，此时页面DOM加载完毕 */
$(document).ready(
function(){
/* 通配符选择器* 选择所有页面元素 */
$("*").css("border","1px solid #333");
/* 元素选择器+元素名 选择指定元素名的全部元素 */
$("h1").css("font-family","arial,verdana");
/* id选择器 选择指定id元素 */
$("#idSelect").css("background-color","#00cccc");
/* class选择器 选择指定class元素 */
$(".clSelect").css({'background-color':'#cc00cc','padding':'30px'});
/* 多class选择器 选择指定多class元素 */
$(".clSelect.dlSelect").css({'background-color':'#cccc00','padding':'30px'});
/* 子元素选择器 选择指定子元素 */
$("#parentDiv h2").css({'background-color':'#cccc00','padding':'30px'});
$("#parentDiv > h2").css({'background-color':'#ffffff','padding':'30px'});
$("#parentDiv + div").css({'background-color':'#ccccff','padding':'30px'});
/* 组合选择器 组合多种元素选择 */
$("#comSelect h2,#comSelect #comIdSelect,#comSelect .comClassSelect,#comSelect #comcomSelect h2").css({'background-color':'#aabbcc','padding':'30px'});
}
)
</script>
</head>
<body>
<div>
<h2>jQuery选择器：使用通配符*为所有元素添加border</h2>
</div>
<div>
<h1>jQuery选择器：元素选择器+元素名 选择指定元素名的全部元素 设置font-family</h1>
</div>
<div id="idSelect">
<h2>jQuery选择器：id选择器 选择指定id元素 设置background-color</h2>
</div>
<div class="clSelect">
<h2>jQuery选择器：class选择器 选择指定class元素 设置padding background-color</h2>
</div>
<div class="clSelect dlSelect">
<h2>jQuery选择器：多class选择器 选择指定多class元素 设置padding background-color</h2>
</div>
<div id="parentDiv">
<h2>parentDiv直接子元素 parentDiv > h2</h2>
<div><h2>parantDiv间接子元素 parentDiv h2</h2></div>
<div><h2>parantDiv间接子元素 parentDiv h2</h2></div>
</div>
<div>
<h2>parentDiv相邻div parentDiv + div</h2>
</div>
<div>
<h2>parentDiv非相邻div parentDiv + div</h2>
</div>
<div id="comSelect">
<h2>组合元素选择 元素选择</h2>
<div id="comIdSelect">组合元素选择 id选择</div>
<div class="comClassSelect">组合元素选择 class选择</div>
<div id="comcomSelect"><h2>组合元素选择 组合元素选择</h2></div>
</div>
</body>
</html>
- CSS选择器，jQuery选择器
- jQuery选择器 CSS选择器
- css选择器与jquery选择器
- CSS 选择器、jQuery选择器大全
- css选择器和jquery选择器
- jquery选择器和css选择器
- JQuery选择器之CSS选择器
- jquery CSS选择器
- jquery css 选择器
- CSS/jQuery之选择器
- Jquery之CSS选择器
- jquery CSS选择器
- jquery CSS选择器笔记
- jQuery CSS选择器
- jquery css选择器
- CSS和jQuery选择器
- Jquery关于CSS选择器
- JQuery之CSS选择器
- Android学习——Mac Os X下载和编译android 4.2.2 源码
- 打印1到最大的n位数
- 在word中，填空题的下划线和内容一起如何打？（下划线要打长一些！内容短）
- 一个诡异的问题，【已解决】
- Nios II出现的问题整理与解决
- jQuery选择器 CSS选择器
- 转换数值到现金表示
- 卸载ADT
- SQL时间重合 包含 交叉
- jquery中判断input元素为空和 mysql中的编码
- 工作流管理软件之业务表单实现方法
- jQuery20种过滤器
- 【网络流第一步】Hdu 1532——Drainage Ditches
- Admob广告的添加
