jQuery选择器简单例子

浏览数：37 / 时间：2015年06月09日

<%@ 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>

实现分级菜单功能