02_选择元素
来源:互联网 发布:手机淘宝开网店图解 编辑:程序博客网 时间:2024/05/18 01:53
2.1 DOM
2.2 $()函数
2.3 CSS选择符
02.html代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title>02.html</title><link rel="stylesheet" href="02.css"><script type="text/javascript" src="jquery-1.9.1.min.js"></script><script type="text/javascript" src="02.js"></script></head><body><ul id="selected-plays"><li>Comedies<ul><li><a href="/asyoulikeit/">as you like it</a></li><li>heloskdfalsdfja</li><li>heloskdfalsdfja</li><li>heloskdfalsdfja</li></ul></li><li>Tragedies<ul><li><a href="hamlet.pdf">hamlet</a></li><li>heloskdfalsdfja</li><li>heloskdfalsdfja</li></ul></li><li>Histories<ul><li>Henry iv(<a href="mailto:henryiv@king.co.uk">email</a>)<ul><li>Part i</li><li>Part ii</li></ul></li><li><a href="http://www.henryiv.com">henry iv</a></li><li>heloskdfalsdfja</li></ul></li></ul></body></html>
2.3.1 基于列表项的级别添加样式
02.css
@CHARSET "UTF-8";.horizontal {float : left;list-style : none;margin : 10px;}
02.js
$(document).ready(function() {//'#selected-plays > li'意思为寻找selected-plays的所有子元素中的li项 $('#selected-plays > li').addClass('horizontal');});
添加后效果:
--------------------------
效果:
css:
@CHARSET "UTF-8";.horizontal {float : left;list-style : none;margin : 10px;}.sub-level {background-color : #ccc;}
js:
$(document).ready(function() {//'#selected-plays > li'意思为寻找selected-plays的所有子元素中的li项$('#selected-plays > li').addClass('horizontal');$('#selected-plays li:not(.horizontal)').addClass('sub-level');});
-----------------------------
2.3.2 属性选择符
^表示在字符串开头
$表示在字符串结尾
*表示在字符串任意位置
!表示对值取反
2.3.3 为链接添加样式
效果:
css:
@CHARSET "UTF-8";.horizontal {float : left;list-style : none;margin : 10px;}.sub-level {background-color : #ccc;}a {color : #00c;}a.mailto {background : url(../images/mail.png) no-repeat right top;padding-right : 18px;}a.pdflink {background : url(../images/pdf.png) no-repeat right top;padding-right : 18px;}a.henrylink {background-color : #fff;padding : 2px;border : 1px solid #000;}
js:
$(document).ready(function() {//'#selected-plays > li'意思为寻找selected-plays的所有子元素中的li项$('#selected-plays > li').addClass('horizontal');$('#selected-plays li:not(.horizontal)').addClass('sub-level');});//css for link$(document).ready(function() {$('a[href^="mailto:"]').addClass('mailto');$('a[href$=".pdf"]').addClass('pdflink');$('a[href^="http"][href*="henry"]').addClass('henrylink');});
2.4 自定义选择符
带有horizontal类的div的第2项:
$('div.horizontal:eq(1)')
2.4.1 每隔一行为表格添加样式
初始效果:------------------------------------------------------------------------------------------
html:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>03.html</title><link rel="stylesheet" href="03.css"><script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="03.js"></script></head><body><h2>Shankespeare's Plays</h2><table><tr><td>as you like it</td><td>comedy</td><td></td></tr><tr><td>as you like it</td><td>comedy</td><td>1911</td></tr><tr><td>as you like it</td><td>comedy</td><td>1911</td></tr><tr><td>as you like it</td><td>comedy</td><td>1911</td></tr><tr><td>as you like it</td><td>comedy</td><td>1911</td></tr><tr><td>as you like it</td><td>comedy</td><td>1911</td></tr><tr><td>as you like it</td><td>comedy</td><td>1911</td></tr></table><h2>qiao's Plays</h2><table><tr><td>as you like it</td><td>comedy</td><td></td></tr><tr><td>as you like it</td><td>comedy</td><td>1911</td></tr><tr><td>as you like it</td><td>comedy</td><td>1911</td></tr></table></body></html>
效果01:------------------------------------------------------------------------------------------
css:
@CHARSET "UTF-8";tr {background-color : #fff;}.alt {background-color : #ccc;}
js:
$(document).ready(function() {$('tr:even').addClass('alt');});
效果02:
js:
$(document).ready(function() {//对页面中所有的tr,从0开始计数//$('tr:even').addClass('alt');//对tr的子元素,从1开始计数$('tr:nth-child(odd)').addClass('alt');});
效果03:
css:
@CHARSET "UTF-8";tr {background-color : #fff;}.alt {background-color : #ccc;}.highlight {font-weight : bold;font-style : italic;}
js:
$(document).ready(function() {//对页面中所有的tr,从0开始计数//$('tr:even').addClass('alt');//对tr的子元素,从1开始计数$('tr:nth-child(odd)').addClass('alt');//为包括henry的行添加样式$('td:contains(Henry)').addClass('highlight');});
2.4.2 基于表单的选择符
:input
:button
:enabled
:disabled
:checked
:selected
2.5 DOM遍历方法
filter:
$('tr').flter(':even').addClass('alt');
2.5.1 为特定单元格添加样式
效果04:
js:
//td demo 01$(document).ready(function() {$('td:contains(Henry)').next().addClass('highlight');});
效果05:
js:
//td demo 02$(document).ready(function() {$('td:contains(Henry)').nextAll().addClass('highlight');});
效果06:
js:
//td demo 03$(document).ready(function() {//$('td:contains(Henry)').nextAll().andSelf().addClass('highlight');//or$('td:contains(Henry)').parent().children().addClass('highlight');});
2.5.2 连缀
2.6 访问DOM元素
var myTag = $('#my-element').get(0).tagName;
2.7 小结
2.8 练习
$(document).ready(function(){//给位于嵌套列表第二个层次的所有的<li>元素添加special类//$('#selected-plays > li > ul > li').addClass('special');//给位于表格第三列的所有单元格添加year类//$('tr:nth-child(3)').addClass('year'); //为表格中包含文本Tragedy的第一行添加special类//$('tr:contains("Tragedy"):eq(0)').addClass('special');//选择包含链接的所有列表项(<li>元素),为每个选中的列表项的同辈列表元素添加afterlink类//$('li:has(a)').nextAll().addClass('special');//待定//为与.pdf链接最接近的祖先元素<ul>添加tragedy类$('a[href$=".pdf"]').parent().parent().parent().find('ul:eq(0)').addClass('tragedy');});
- 02_选择元素
- 02_选择排序
- [游戏]_元素49
- 160106_根元素
- 第02章 CORE C++_控制语句_选择_循环_分支_跳出_函数_声明_形参_返回值_重载_递归
- 元素选择问题
- jQuery元素选择
- jquery 排除选择元素
- jquery选择元素....
- 元素选择问题
- jquery元素选择
- Jquery选择兄弟元素
- JQuery选择元素
- 伪元素选择一行
- JQ选择元素
- 元素属性选择
- jQuery选择元素
- DOM元素选择
- 解决 NDK 编译静态库时没反应
- 枚举解决球颜色问题
- 蛇年谈程序员发展之路
- 用php实现远程网络文件下载到服务器
- seajs打包部署工具spm的使用总结
- 02_选择元素
- android开发实战系列(20)-- 从另一个Activity中取回反馈结果
- linux 下查找文件或者内容常有命令
- Java应用程序注册到window服务
- java中接口interface的基本概念
- iOS多线程编程之NSOperation和NSOperationQueue的使用
- 操作iProperties: 学徒服务器和InventorAPI性能对比
- Linux添加/删除用户和用户组
- 单纯形的实现