Jquery选择器练习(二)
来源:互联网 发布:java cas是什么 编辑:程序博客网 时间:2024/05/21 19:20
Jquery的选择器非常强大,只要运用熟悉,方可对Dom操作得心应手。一些选择器和CSS伪类很相似,很容易引起混淆,需要多加练习和注意。
<!DOCTYPE html><html lang="zh-cn"><head><title>Test</title><meta charset="UTF-8" /><script src="js/jquery-1.11.1.min.js"></script><script src="js/index.js"></script><script type="text/javascript">$(document).ready(function() {initElementBgColor();});var initElementBgColor = function() {$("div.smallBox:odd").css("background", "#ccc");$("div.smallBox:even").css("background", "#ccc");$(".smallBox:first").css("background", "#ccc");$(".smallBox:last").css("background", "#ccc");$(".smallBox:nth-child(2)").css("background", "#ccc");$(".smallBox:nth-child(n+1)").css("background", "#ccc");$(".smallBox:nth-child(2n)").css("background", "#ccc");$(".smallBox:nth-child(2n+1)").css("background", "#ccc");$(".smallBox:nth-child(-3n+100)").css("background", "#ccc");$(".smallBox:gt(3)").css("background", "#ccc");$(".smallBox:lt(3)").css("background", "#ccc");$(".smallBox:eq(5)").css("background", "#ccc");$(".smallBox:not(:empty)").css("background", "#ccc");$(".smallBox:hidden").css("display", "block");$(".smallBox:not(:visible)").css("display", "block");$(".box .smallBox,:visible").css("display", "block");$(".box .smallBox p:contains(4)").css("background", "#ccc");$(".box :header").css("background", "#ccc");}</script><style type="text/css" >* {margin: 0;padding: 0;}.box {border: 1px solid;}.smallBox {width: 100px;height: 100px;border: 1px solid red;margin-left: 91px;float: left;font-size: 80px;line-height: 100px;text-align: center;}.clear {clear: both;height: 0px;overflow: hidden;}.show {display: none;}.able {visibility: hidden;}</style></head><body><div class="box"><div class="smallBox">1</div><div class="smallBox">2</div><div class="smallBox">3</div><div class="smallBox"><p>4</p></div><div class="smallBox">5</div><div class="smallBox">6</div><div class="smallBox">7</div><div class="smallBox show">8</div><div class="smallBox able">9</div><div class="clear"></div><div><h1>H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1</h1><h2>H2H2H2H2H2H2H2H2H2H2H2H2H2H2H2</h2></div></div></body></html>
0 0
- Jquery选择器练习(二)
- jQuery 练习[二] jquery 对象选择器(1)
- Jquery选择器练习(一)
- Jquery选择器练习(三)
- Jquery选择器(二)
- jQuery选择器(二)
- jQuery 选择器(二)
- jQuery选择器(二)
- jQuery练习(二)
- jquery初步(二) 选择器
- JQuery库:(二)选择器
- Jquery系列(二) 选择器
- jQuery(二)高级选择器
- jQuery的选择器(二)
- jquery学习(二)选择器
- jQuery(二)常规选择器
- jquery选择器练习
- jquery选择器练习例子
- 随机物品权重算法DEMO
- 使用动态分配和指针操作求 9 个 double 数的乘积(编译通过了,但是运行时出错,谁能帮我看看出了什么问题啊)[em08]
- MyBatis 3章 MyBatis Spring Struts2 整合应用
- 驱动之路——1.0
- UML的9种图例解析
- Jquery选择器练习(二)
- 菜鸟学SSH(十五)——简单模拟Hibernate实现原理
- 使用ajax gson增强用户体验
- Java 压缩,解压zip文件(支持中文)
- poj 1160 动态规划(一维城市建邮局)
- modelsim-察看错误命令 verror
- 华安泰2014摄影作品征集:盛夏里的青春
- ARM9 (2440A) 从启动代码到应用程序(Main) 1
- Spring AOP 完成日志记录