首页 > 代码库 > jQuery选择器简单例子
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=http://www.mamicode.com/"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选择器简单例子
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。