`
Longmanfei
  • 浏览: 48064 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

“轻”量级“选手”JQuery(强大功能)

jQueryCSSQQJavaScriptAjax 
阅读更多

   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>

 

这是皮毛的皮毛 ，不积跬步无以至千里，不积小流无以成江河。所以我们从小事做起，就相当于正在完成一件大事。

1
顶
0
踩
分享到：
| 看图求解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    dphp, 在2分钟内极速构建超轻量级docker php全功能开发测试环境.zip

    dphp, 在2分钟内极速构建超轻量级docker php全功能开发测试环境

    jquery-dragme:一个使用 CSS3 Transforms 拖动元素的超轻量级 jQuery 插件

    一个超轻量级的 jQuery 插件，用于使用 CSS3 Transforms 拖动元素。 这个插件的目标不是替代 jQuery UI 的可拖动，而是一个最小的插件，使某些元素在页面上可拖动，即模式窗口。 用法 $ ( '.my-modal-window' ) . ...

    log4me超轻量级delphi 写日志单元源码1.0.1

    delphi 超轻量级写日志单元源码 引用本单元即可使用 一共四个方法 procedure log4error(msg: AnsiString); //写ERROR级别的日志 procedure log4info(msg: AnsiString); //写INFO级别的日志 procedure log4debug...

    超轻量级gif屏幕录像

    在功能上，"超轻量级gif屏幕录像"可能包含以下几点： 1. **录制范围选择**：用户可以选择录制整个屏幕、特定窗口或者自定义区域。 2. **帧率控制**：允许用户调整GIF的帧率，以平衡质量和文件大小。 3. **音频录制*...

    Chyrp 超轻量级开源博客引擎 v2.5 RC1

    Chyrp是一款旨在提供轻量化体验的开源博客引擎，其版本v2.5 RC1代表了这个项目在轻量级博客平台领域的最新进展。这款博客系统由PHP编程语言编写，并依赖于MySQL数据库来存储和管理内容，使得它在保证功能全面的同时...

    密码学超轻量级密码——present

    - **物联网设备**：随着物联网技术的发展，各种智能设备日益普及，而这些设备往往需要具备强大的安全功能以防止被黑客攻击或数据泄露。 #### 结论 综上所述，《密码学超轻量级密码——PRESENT》介绍了一种专为资源...

    超轻量级（约600字节）jQuery插件，可为iOS和Android上的Bootstrap3轮播启用滑动手势_JavaS.zip

    为了解决这个问题，开发人员创造了一款超轻量级的jQuery插件，专门针对Bootstrap3的轮播组件，以实现手势滑动功能。这款插件的大小约为600字节，非常小巧，却能极大地提升移动用户体验。 该插件名为"bcSwipe"，是...

    基于JS的超轻量级聊天软件源码（高仿微信）.zip

    基于JS的超轻量级聊天软件。前端：vue3.0、element plus、electron、TypeScript 实现的 PC&Web版聊天程序，主要适用于私有云项目内部聊天，企业内部管理通讯等功能，主要通讯协议websocket。支持web网页聊天实现。 ...

    超轻量级 JavaScript 横向动态菜单

    总结来说，这个超轻量级 JavaScript 横向动态菜单通过高效的JavaScript代码和精简的CSS样式，实现了轻便、快速的网页导航功能。它不仅适用于多种布局和应用场景，而且源代码开源，方便开发者进行自定义和扩展。对于...

    超轻量级、高性能C日志库--EasyLogger

    EasyLogger（https://github.com/armink/EasyLogger）是一款超轻量级...相比log4c、zlog这些知名的C日志库，EasyLogger的功能更加简单，提供给用户的接口更少，但上手会很快，更多实用功能支持以插件形式进行动态扩展。

    jQuery插件thickbox遮罩层的使用及demo演示示例.rar

    ThickBox 是用超轻量级的 jQuery 库 编写的. 压缩过 jQuery 库只15k, 未压缩过的有39k. ThickBox 的 JavaScript 代码和 CSS 文件只占12k. 所以压缩过的 jQuery 代码和 ThickBox 总共只有27k. ThickBox 能重新调整...

    thickBox 基于jquery的超轻量级插件，点击图片、登陆、等类似弹出窗口，

    `ThickBox`是一款基于jQuery的轻量级插件，用于实现点击图片、登录、以及其他各种弹出窗口功能。这个插件以其简洁高效的特点，在Web开发中被广泛使用。下面我们将详细探讨`ThickBox`的工作原理、核心功能以及如何在...

    超轻量级物联网虚拟机.zip

    总结而言，EVM作为一款超轻量级的物联网虚拟机，以其独特的设计理念和强大的功能，正在成为物联网领域的一股重要力量。它不仅解决了资源受限设备的计算需求，还为物联网应用带来了更高的灵活性和智能化程度。随着...

    超轻量级中文ocr总模型

    超轻量级中文OCR（Optical Character Recognition，光学字符识别）模型指的是在计算资源要求很低的情况下，能够对中文文本...可以使用传统机器学习算法（如支持向量机）或深度学习模型（如轻量级的卷积神经网络）...

    ios-自定义超轻量级HUD.zip

    总之，"ios-自定义超轻量级HUD.zip"提供了一个基础的框架，帮助开发者快速实现简单的加载指示或者进度反馈功能，同时保持了代码的简洁性和项目的轻量化。开发者可以根据自身需求对其进行定制和优化，以适应项目的...

    开源超轻量级CMS | 仅384 Kb大小

    超轻量级CMS | 仅384 Kb大小适用于SQLite，MSSQL，MySQL和PostgreSQL的现代，超轻量级和火箭快速内容管理系统。（php5.4+mysql）

    jQuery快捷键绑定插件jquery-shortcuts.zip

    jQuery Shortcuts 是个超轻量级的方法，使用 jQuery 来绑定快捷键（热键）。 标签：jquery

    一款超轻量级通用人脸检测模型

    标题中的“一款超轻量级通用人脸检测模型”是指一种专为高效运行设计的人脸检测算法，它在保持高精度的同时显著降低了模型的大小和计算需求。这种模型特别适合资源有限的设备，如边缘计算设备和低算力硬件，以及个人...

    JQuery替代方案

    总结来说，jQuery虽然功能强大，但现代前端开发有了更多选择。根据项目需求，开发者可以灵活选用Vanilla JavaScript、ES6新特性，或者更先进的框架如React、Vue、Angular等。同时，各种工具库如Axios、Animate.css、...

    dateformatjs一个超轻量级的JS日期处理库

    由于 `dateformat.js` 的体积小巧，它可以轻松地与其他 JavaScript 库（如 jQuery、React 或 Angular）集成，以增强日期处理功能，而不会增加太多负担。 ### 7. 开源与社区支持 `dateformat.js` 是开源的，这意味...

Magicbox
Global site tag (gtag.js) - Google Analytics