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

jQuery小例子-1

 
阅读更多

开始学习jQuery了,准备在博客上记录下来,就当做备忘!

表格隔行换色

 

HTML代码

<html>
  <head>
    <title>jQuery学习 第一部分</title>
    <style type="text/css">
    table{
    	border-collapse:collapse;
    	border-color: #7c7b81;
    }
    .odd{
    	background-color: #CFD0D4;
    }
    </style>
  </head>
  
  <body>
  <table id="userTable" align="center" border="1">
  	<thead>
  		<tr>
	  		<th>序号</th>
	  		<th>用户名</th>
	  		<th>角色</th>
	  		<th>创建日期</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>1</td>
  			<td>admin</td>
  			<td>系统管理员</td>
  			<td>2010-09-08</td>
  		</tr>
  		<tr>
  			<td>1</td>
  			<td>admin</td>
  			<td>系统管理员</td>
  			<td>2010-09-08</td>
  		</tr>
  		<tr>
  			<td>1</td>
  			<td>admin</td>
  			<td>系统管理员</td>
  			<td>2010-09-08</td>
  		</tr>
  		<tr>
  			<td>1</td>
  			<td>admin</td>
  			<td>系统管理员</td>
  			<td>2010-09-08</td>
  		</tr>
  		<tr>
  			<td>1</td>
  			<td>admin</td>
  			<td>系统管理员</td>
  			<td>2010-09-08</td>
  		</tr>
  	</tbody>
  </table>
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
	$("#userTable tbody tr:odd").addClass("odd");
  });
  </script>
  </body>
</html>

 

效果截图:


jQuery之表格隔行换色

  • 大小: 22.7 KB
0
0
分享到:
评论

相关推荐

    jquery-ui-1.11.2日期控件datepicker

    最新jquery-ui-1.11.2日期控件,官网下载内涵图片和自己添加的中文辅助jquery-ui-timepicker-zh-CN.js,经过本人测试绝对可以用,不知道怎么用的百度上找个例子即可,需要导入的包 ${ctx}/plugins/jquery-ui-1.11.2/...

    jQuery-File-Upload的例子

    《jQuery-File-Upload插件深度解析与应用实践》 jQuery-File-Upload是一款功能强大的JavaScript文件上传组件,它提供了一种优雅的方式来处理文件上传,支持多文件选择、进度条显示、图片预览等特性,使得文件上传变...

    jquery-weui-build例子

    1. **DOM操作**:jQuery 提供了简单易用的API来操作DOM(文档对象模型),如选择元素、添加/删除类、插入/移除元素等,大大简化了JavaScript中的DOM操作。 2. **事件处理**:jQuery 的事件处理函数如 `.on()` 和 `....

    Jquery.jqprint-0.3.js

    《jQuery.jqprint-0.3.js:轻松实现网页打印功能》 在Web开发中,打印功能是一项不可或缺的用户交互需求。为了满足这种需求,jQuery库提供了一个名为jqPrint的插件——jQuery.jqprint-0.3.js,它允许开发者方便地将...

    angular和jquery例子--IntegralUI-Studio-Web-TRIAL

    在"angular和jquery例子--IntegralUI-Studio-Web-TRIAL"这个压缩包中,我们可能会找到如何将这两者结合使用或在不同场景下选择使用它们的示例。 Angular 框架提供了强大的数据绑定和依赖注入机制,使得开发者可以更...

    jquery-ui-1.12.1.custom_jqueryui_

    1. **js** 文件夹:存放jQuery UI的JavaScript库文件,如`jquery-ui.min.js`,这是主要的库文件,包含了所有组件的代码。 2. **css** 文件夹:包含主题样式表,如`themes/base/jquery-ui.css`,用于定义组件的外观。...

    jquery.jqprint-0.3

    在这个例子中,我们创建了一个ID为`printableArea`的div,里面包含了需要打印的内容。当用户点击ID为`printBtn`的按钮时,`jqprint()`函数会被调用,使得`printableArea`内的内容被发送到打印机。 jqPrint插件的...

    jquery-ui-1.10.4.custom

    在这个例子中,首先引入了jQuery UI的主题样式表,接着引入了jQuery库和自定义的jQuery UI JavaScript文件。然后,通过jQuery的$(function(){})结构在页面加载完成后执行代码,找到id为"dialog"的元素,并将其转换为...

    JQuery-flip-Demo

    综上所述,jQuery-flip-Demo是一个学习和实践jQuery动态翻转效果的好例子。掌握这些知识点后,你可以将这种交互式设计应用于各种项目中,提升用户体验。通过深入研究并实践flipDemo中的代码,你将能够熟练地运用...

    jQuery-Waterwheel-Carousel-图片左右滚动切换特效

    在这个例子中,我们设置了轮播两侧显示 3 个图片,切换速度为 500 毫秒,并启用了自动播放和导航箭头。这些参数可以根据实际需求灵活调整。 值得注意的是,jQuery Waterwheel Carousel 还支持响应式设计,这意味着...

    jQuery-Validation-Engine-master

    &lt;script src="https://code.jquery.com/jquery-1.x.min.js"&gt;&lt;/script&gt; &lt;!-- 替换为对应的jQuery版本 --&gt; &lt;script src="path/to/jquery.validationEngine-en.js"&gt; &lt;script src="path/to/jquery.validationEngine....

    jquery-validation-1.8.1里面有很多例子

    1. 自动绑定:jQuery Validation插件可以自动与表单元素绑定,检测用户输入,无需编写额外的事件监听器。 2. 错误消息:自定义错误消息,提供友好的用户反馈。 3. 规则库:内置了多种验证规则,如必需字段(required...

    jquery-easyui-1.2.1

    9. **demo** - 这个目录下有各种组件的演示代码,通过查看和学习这些例子,开发者可以快速理解和掌握如何使用EasyUI。 使用jQuery EasyUI 1.2.1,开发者可以轻松实现如下的功能: - 数据表格:显示和操作大量数据,...

    jquery.jqprint-0.3.rar

    1. **选择性打印**:jqPrint允许开发者通过jQuery选择器来指定要打印的内容,这样用户就可以只打印感兴趣的部分,而非整个网页。 2. **样式兼容**:jqPrint会尝试将原始页面的CSS样式复制到iframe中,确保打印内容...

    jQuery-autoComplete-1.8.22代码例子

    1. 引入jQuery库和jQuery-autoComplete插件的JavaScript文件。 2. 配置输入框元素,设置数据源和插件选项。 3. 初始化插件,通常在DOM加载完成后执行。 4. 调整CSS样式,使自动补全结果符合设计需求。 通过阅读和...

    jquery-easyui-EDT-1.4.2-中文文档

    在 `jquery-easyui-EDT-1.4.2-build1` 文件中,可能包含了这些必要的资源文件。 5. **各种样式**:EasyUI 支持多种预设的样式主题,开发者可以根据项目需求选择合适的主题,或者自定义自己的样式。这使得应用能够...

    jquery-ui-1.11官网最新版

    1. **组件**: jQuery UI 提供了一系列可复用的组件,如日期选择器(Datepicker)、对话框(Dialog)、滑块(Slider)、排序列表(Sortable)、堆叠(Accordion)和标签(Tabs)。这些组件能够帮助开发者快速构建交互...

    jQuery多选下拉框插件

    在这个例子中,`#mySelect`是被转换的多选下拉框,当文档加载完成后,通过jQuery的`$(document).ready`事件初始化插件。 **五、进一步探索** `jquery.multi-select.js`插件的压缩包文件包括`index.html`、`readme....

    jquery-tmpl-master.zip

    这个例子展示了如何根据isPublished属性的值决定是否显示“已发布”或“未发布”。 三、模板的使用 使用jQuery-Tmpl,首先需要将模板嵌入到HTML中,通常用`&lt;script type="text/x-jquery-tmpl"&gt;`标记包裹。然后,...

    JQuery移动层---简单型

    这个例子可能包括了页面结构、导航和组件的使用,是学习和理解 jQuery Mobile 基础功能的好起点。 总的来说,jQuery Mobile 提供了一个强大的框架,让开发者能够快速地构建功能齐全的移动 Web 应用。通过熟练掌握其...

Global site tag (gtag.js) - Google Analytics