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 ...
随机推荐
- 第一个app.总结
前记: 最近想整点外快,但是又没啥子技术,唉,学了一下android,想写点游戏啥的,,唉,可惜,美工,UI始终不行,代码也勉勉强强... 不过总的来说也是收获参半吧,也是有一些新的知识学到了嘛,至少 ...
- 重新想象 Windows 8.1 Store Apps 系列文章索引
[源码下载] [重新想象 Windows 8 Store Apps 系列文章] 重新想象 Windows 8.1 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...
- YEdit
YEdit YEdit is a YAML editor for Eclipse. See the wiki for more details Installation Use the Eclipse ...
- Apns推送中的的json格式介绍
在开发向苹果Apns推送消息服务功能,我们需要根据Apns接受的数据格式进行推送.下面接受我在进行apns推送时候总结的一点apns服务接受的Json数据格式 示例 1: 以下负载包含哦一个简单的 a ...
- 【poj 3167】Cow Patterns（字符串--KMP匹配+数据结构--树状数组）
题意:给2个数字序列 a 和 b ,问按从小到达排序后,a中的哪些子串与b的名次匹配. a 的长度 N≤100,000,b的长度 M≤25,000,数字的大小 K≤25. 解法:[思考]1.X 暴力. ...
- Delphi的几个跨平台小游戏例子。
Embarcadero开源了几个FireMonkey的小游戏,支持Windows, Android,Ios, MacOS等. 源码地址: https://github.com/EmbarcaderoP ...
- [小北De编程手记] : Lesson 08 - Selenium For C# 之 PageFactory & 团队构建
本文想跟大家分享的是Selenium对PageObject模式的支持和自动化测试团队的构建.<Selenium For C#>系列的文章写到这里已经接近尾声了,如果之前的文章你是一篇篇的读 ...
- D/A转换器
电荷:带正负电的基本粒子.电的本质是使正负电荷分开,使电荷发生移动,实质是电子的转移,并不是创造电荷.电压:单位正电荷受电场力作用从A点移动到B点所做的功.电压方向从高电位指向低点位.电压是推动电荷定 ...
- [翻译]:SQL死锁-阻塞探测
到了这篇,才是真正动手解决问题的时候,有了死锁之后就要分析死锁的原因,具体就是需要定位到具体的SQL语句上.那么如何发现产生死锁的问题本质呢?下面这篇讲的非常细了,还提到了不少实用的SQL,但对我个人 ...
- windows下redis启动报Creating Server TCP listening socket *:6379: bind: No such file or directory
解决方法: 按顺序输入如下命令就可以连接成功 # redis-cli.exe# > shutdown# > exit# redis-server.exe redis.windows.con ...