jQuery 是一个JavaScript 库,它有助于简化 JavaScript 及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同,jQuery 具有独特的基本原理 jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互.。
下面我们简但介绍一下,其中的 简单选择器 和属性的应用
/**
层次元素关系
1、祖先关系 空格符号
2、父子关系 大于符号
3、紧跟的关系 +符号
4、紧跟后的所有兄弟关系 ~符号
CSS样式
1、css("");带有一个参数是获取其属性的值
2、css("","");为其对象设置一个指定的属性和属性值
3、css(properties);把一个“名/值对”对象设置为所有匹配元素的 样式属性 {"":"","":""...};
*/
/**
简单选择器
1、:first 匹配的第一个
2、:last 匹配的最后一个
3、:lt(index) 小于某个的
4、:gt(index) 大于某个的;
5、:eq(index) 等于某个 相当于过滤器中的.eq(index)
6、:even 奇数行
7、:odd 偶数行
8、:header 匹配h1,h2 h3 等标题
9、:not 除去匹配的(剩下的)
过滤器:
.eq(index)匹配某个
属性中html代码
.html()返回整个html文本
属性的文本
.text();返回这个html代码中的文本内容 如果是多个就组合文本内容并返回
*/
/**页面载入事件处理*/
$(function(){
//获取class类别选择器JQuery对像集合中的第一个对象
alert($("#tbdy tr:first").html());
//属性:.html();取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
//获取class选择器对象集合中的最后一个对象
//属性:.text();结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
alert($(".rdc:last").text());
/** even匹配的是索引是:0 2 4 但行数是1,3 5......
:even 选择奇数行并且为其添加背景颜色为红色*/
$("tr:even").css("background","red"); //很轻松的就能实现隔行换色效果
/** :odd 选择偶数行并且为其添加背景颜色为蓝色*/
$("tr:odd").css("background","blue");
/**$("tr")取得所有的行的JQuery对象的集合
.eq(index)匹配一个给定索引值的元素的Jquery对象
.css("","")为Jquery对象添加一个样式属性和属性值
对象链式操作*/
$("tr:eq(1)").css("background","green");
$("tr").eq(1).css("background","yellow");
/**集合 List --->get(index)--->具体的对象--->具体对象的方法*/
/**取得所有行的Jquery对象集合索引值小于1的所有的tr对象样式设置为green*/
$("tr:lt(1)").css("background","green")
$("tr:gt(1)").css("background","black")
//匹配不是最后一行的样式背景颜色统一设置为红色
$("tr:not(:last)").css("background","red");
//匹配标题
alert($(":header").html());
});
<body>
<div align="center">
<div>
<h1>简单选择器的应用------过滤器</h1>
</div>
<div>
<table border="1px" cellpadding="0" cellspacing="0">
<thead>
<tr id="thed">
<th>
序号
</th>
<th>
名称
</th>
<th>
邮箱
</th>
</tr>
</thead>
<tbody id="tbdy">
<tr class="rdc">
<td>
1001
</td>
<td>
Longmanfei </td>
<td>
Longmanfei@qq.com
</td>
</tr>
<tr>
<td>
1002
</td>
<td>
l_j
</td>
<td>
Longmanfei@qq.com
</td>
</tr>
<tr class="rdc">
<td>
1003
</td>
<td>
m_j
</td>
<td>
Longmanfei@qq.com
</td>
</tr>
<tr>
<td>
1004
</td>
<td>
x_j
</td>
<td>
Longmanfei@qq.com
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
这是皮毛的皮毛 ,不积跬步无以至千里,不积小流无以成江河。所以我们从小事做起,就相当于正在完成一件大事。
分享到:
相关推荐
dphp, 在2分钟内极速构建超轻量级docker php全功能开发测试环境
一个超轻量级的 jQuery 插件,用于使用 CSS3 Transforms 拖动元素。 这个插件的目标不是替代 jQuery UI 的可拖动,而是一个最小的插件,使某些元素在页面上可拖动,即模式窗口。 用法 $ ( '.my-modal-window' ) . ...
超轻量级(约600字节)jQuery插件,可为iOS和Android上的Bootstrap3轮播启用滑动手势_JavaS.zip
delphi 超轻量级写日志单元源码 引用本单元即可使用 一共四个方法 procedure log4error(msg: AnsiString); //写ERROR级别的日志 procedure log4info(msg: AnsiString); //写INFO级别的日志 procedure log4debug...
轻量级密码present密码学超轻量级密码——present
EasyLogger(https://github.com/armink/EasyLogger)是一款超轻量级...相比log4c、zlog这些知名的C日志库,EasyLogger的功能更加简单,提供给用户的接口更少,但上手会很快,更多实用功能支持以插件形式进行动态扩展。
基于JS的超轻量级聊天软件。前端:vue3.0、element plus、electron、TypeScript 实现的 PC&Web版聊天程序,主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket。支持web网页聊天实现。 ...
ThickBox 是用超轻量级的 jQuery 库 编写的. 压缩过 jQuery 库只15k, 未压缩过的有39k. ThickBox 的 JavaScript 代码和 CSS 文件只占12k. 所以压缩过的 jQuery 代码和 ThickBox 总共只有27k. ThickBox 能重新调整...
jQuery Shortcuts 是个超轻量级的方法,使用 jQuery 来绑定快捷键(热键)。 标签:jquery
Chyrp是一个在被设计为很轻量级但保持了功能性的博客引擎。它是PHP和MySQL驱动的,(有一些Ajax的东西),使用了一个很小的模板和模块引擎。所以你可以按你的要求改造它。
超轻量级中文OCR(Optical Character Recognition,光学字符识别)模型指的是在计算资源要求很低的情况下,能够对中文文本...可以使用传统机器学习算法(如支持向量机)或深度学习模型(如轻量级的卷积神经网络)...
超轻量级 JavaScript 横向动态菜单代码 , 只有1kb,作为菜单或者图片展示都非常好用。
超轻量级CMS | 仅384 Kb大小适用于SQLite,MSSQL,MySQL和PostgreSQL的现代,超轻量级和火箭快速内容管理系统。(php5.4+mysql)
guice超轻量级依赖注入用了才知道是爽
DLProgressHUD 自定义超轻量级HUD
超轻量级JS弹层,多种动画效果,兼容到IE6
超轻量级gif屏幕录像,全免费,比屏幕专家好多了
nodejs基于excel.js实现超轻量级报表源码
发布一个超轻量级的体绘制代码包,尽管代码量非常小,目前只实现了一个基于CPU的等值面光线投射和一个基于CUDA的等值面光线投射,但这也正是它的优点,从这个代码您可以看到一个基本的体绘制引擎是如何从最底层一...
一款超轻量级通用人脸检测模型(模型文件大小仅1MB,320x240输入下计算量仅90MFlops)适用于边缘计算设备、低算力设备以及PC