jQuery选择器简单例子
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery_5.aspx.cs" Inherits="Web_jQuery.jQuery_5" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var item = document.getElementById("tb");
var tbody = item.getElementsByTagName("tbody")[0];
var trs = tbody.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
if (i % 2 == 0) {
trs[i].style.backgroundColor = "red";
}
}
});
</script>
<title></title>
</head>
<body>
<table id="tb">
<tbody>
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</tbody>
</table>
</body>
</html>
根据表格id获取表格
在表格内获取<tbody>元素
tbody内获取<tr>元素
循环每个tr元素
对<tr>元素的索引值除以2，然后根据奇偶数设置表格背景颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
var arrays = new Array();
var items = document.getElementsByName("check") for (i = 0; i < items.length; i++) {
if (items[i].checked) {
arrays.push(items[i].value);
}
}
alert("选中的个数:" + arrays.length);
}
});
</script>
<title></title>
</head>
<body>
<input type="checkbox" value="1" name = "check" checked="checked" />
<input type="checkbox" value="2" name = "check" />
<input type="checkbox" value="3" name = "check" checked="checked" />
<input type="button" value="选择的个数" id="btn" />
</body>
</html>
新建一个空数组
获取name为“check”的多选框
循环判断多选框是否被选中，如果被选中则添加到数组中
获取输出按钮，然后为按钮添加 onclick 事件，则输出数组的长度则输出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".level1>a").click(function () {
$(this).addClass("current")
.next().show()
.parent().siblings().children("a").removeClass("current")
.next().hide();
return false;
})
});
</script>
<title>链式导航</title>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#none">衬衫</a>
<ul class="level2">
<li><a href="#none">短袖衬衫</a></li>
<li><a href="#none">长袖衬衫</a></li>
<li><a href="#none">长袖T恤</a></li>
<li><a href="#none">短袖T恤</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">卫衣</a>
<ul class="level2">
<li><a href="#none">开襟卫衣</a></li>
<li><a href="#none">套头卫衣</a></li>
<li><a href="#none">运动卫衣</a></li>
<li><a href="#none">童装卫衣</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">裤子</a>
<ul class="level2">
<li><a href="#none">短裤</a></li>
<li><a href="#none">休闲裤</a></li>
<li><a href="#none">牛仔裤</a></li>
<li><a href="#none">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
实现分级菜单功能
jQuery选择器简单例子的更多相关文章
- jQuery选择器，外加例子讲解
jQuery选择器的优势: (1) 代码更简单(2) 支持CSS1到CSS3选择器(3) 完善的处理机制 jQuery选择器的分类 (1) 基本选择器 基本选择器是jQuery中使用最多的选择器,它又 ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jQuery 选择器 （基础恶补之三)+Ajax
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector). ...
- jQuery 选择器 （基础恶补)
jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
- jQuery选择器和选取方法
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮 ...
- jQuery选择器大全(48个代码片段+21幅图演示)
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编 ...
- jQuery选择器总结 转
jQuery选择器总结 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 3 ...
随机推荐
- 【C#进阶系列】08 方法
实例构造与引用类型 之前的章节其实已经写过了引用类型的构造过程: 首先当然是,在堆中,为引用类型的实例对象分配内存,然后初始化对象的附加字段(即类型对象指针和同步块索引). 这个时候为对象分配的内存都 ...
- wpf 查找页面的所有TextBox
private void EnumVisual(Visual myVisual) { for (int i = 0; i < VisualTreeHelper.GetChildrenCount( ...
- [moka同学笔记]yii2.0表单的使用
1.创建model /biaodan.php <?php /** * Created by PhpStorm. * User: moka同学 * Date: 2016/08/05 * Tim ...
- [ERROR] Plugin 'InnoDB' init function returned error
今天一大早到公司,计划把开发环境的mysql升级到5.7.15,干净关闭系统后,把目录从5.6指向到5.7,一切正常,重新指向5.6启动时,报下列错误: 2016-10-31 08:13:14 869 ...
- ADO.NET 完整的修改和删除
namespace 完整修改{ class Program { static void Main(string[] args) { bool has = false; Console.Write(&q ...
- SharePoint 2013 新功能探索 之 标注控件
SharePoint 2013 引入了新的UI,同时也跟进了网络潮流,把应用最广泛的标注控件也引入到了SharePoint,先看两个应用 以上是两个开发当中经常会用到,下面就介绍一下如何开发相同 ...
- 向java的main()传入大量参数
项目中有一些用java写成的可执行的工具,需要调用者传入大量的参数.最开始,我使用的是最传统的方式,直接一个传入参数数组,于是有如下这么壮观的代码: public static void main(S ...
- javascript --- Ajax基础
神马是Ajax? Ajax即‘Asynchronous javascript and XML’(异步javascript和XML),也就是所谓的无刷新页面读取技术. http请求 首先要了解http请 ...
- Win7 64位下sql server链接oracle的方法
继上一次mysql同步sql server后,这一次需要将Oracle同步到sql server上来,方案相似,只是在sql server链接oracle的时候费了很多时间. 一.测试环境 本方案实现 ...
- AVL树详解
AVL树 参考了:http://www.cppblog.com/cxiaojia/archive/2012/08/20/187776.html 修改了其中的错误,代码实现并亲自验证过. 平衡二叉树(B ...