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 ...
随机推荐
- 重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker
[源码下载] 重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker 作者:webabcd 介绍重新想象 Windows 8.1 ...
- MySQL SQL模式匹配
MySQL提供标准的SQL模式匹配,SQL模式匹配允许你使用“_”匹配任何单个字符,而“%”匹配任意数目字符(包括零字符).. 关于SQL模式匹配:http://dev.mysql.com/doc/r ...
- 最小化安装centos7下配置网络
虚拟机操作系统:centos7.0 命令行模式 1.首先明确centos7在最小化安装完是不支持上网的,相应的查看网络以及修改网络参数是不能使用的,最常见的就是我们常用的ifconfig. 2.找到网 ...
- winform(多窗体、菜单和工具栏)
一.多窗体 1.哪个是主窗体 利用From1的button将From2打开 private void button1_Click(object sender, EventArgs e) { Form2 ...
- 链接错误——无法解析的外部符号 ConvertStringToBST
今天做COM组件时,编译之后,出现了一个数个编译错误:error LNK2019: 无法解析的外部符号 "wchar_t * __stdcall _com_util::ConvertStri ...
- 复杂领域的Cynefin模型和Stacey模型
最近好奇“复杂系统”,收集了点资料,本文关于Cynefin模型和Stacey模型.图文转自互联网后稍做修改. Cynefin模型提供一个从因果关系复杂情度来分析当前情况而作决定的框架,提出有五个领域: ...
- Ubuntu14.04下安装Hadoop2.5.1 （单机模式）
本文地址:http://www.cnblogs.com/archimedes/p/hadoop-standalone-mode.html,转载请注明源地址. 欢迎关注我的个人博客:www.wuyudo ...
- 【转】Visual Studio 非常实用的调试技巧
下面有从浅入深的6个问题,您可以尝试回答一下 一个如下的语句for (int i = 0; i < 10; i++){if (i == 5)j = 5;},什么都写在一行,你怎么在j=5前面插入 ...
- 【改】IOS-百度地图API用点生成线路、导航、自定义标注 2013年11月更新
IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽IOS百度地图开发POISearch搜索附近停车场,附近加油站IOS百度地图视角跳到用户当前位置IOS百度地图开发实时路况IOS开发百 ...
- 设计模式-01-MVC
概述 Model-View-Controller(MVC),即模型-视图-控制器. MVC将软件系统分成三大部分:Model,View,Controller,三个部分通过某种机制通信 M.V.C的职能 ...