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#引用C++代码
现在在Windows下的应用程序开发,VS.Net占据了绝大多数的份额.因此很多以前搞VC++开发的人都转向用更强大的VS.Net.在这种情况下,有很多开发人员就面临了如何在C#中使用C++开发好的类 ...
lavarel框架中如何使用ajax提交表单
开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加在网上看了很多的解决方式,我是用下面这种方法解决的: ...
javascript url几种编码方式
1.escape() 不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值.比如“春节”的返回结果是%u6625%u8282,escape()不对"+"编码主要 ...
[moka学习笔记]yii2.0数据库查询的多种方法（未完待整理）
方法一:(使用model) $modelCommunityMail = CommunityMail::find()->where(['com_id'=>$id])->all(); 方 ...
通过OpenSSL来生成二进制格式证书文件（pfx和cer）
1.生成RSA字符串私钥 genrsa -out private-rsa.key 2.由1中私钥导出*.cer二进制公钥文件 req -new -x509 -key private-rsa.key - ...
[mysql] timestamp自动更新和初始化
1.概述在我们设计表的时候,考虑将行数据的创建时间和最后更新时间记录下来是很好的实践.尤其是可能需要做数据同步或者对数据新鲜度有要求的表.举些应用场景,更新距上次更新超过2小时的行数据,或者是将一个 ...
【GOF23设计模式】外观模式
来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_外观模式.公司注册流程.迪米特法则 package com.test.facade; public interface 工 ...
Android启示录——开始Android旅途
为了明年可以开始进行android程序开发,开始从零开始学习android,仅以此代表第一步开始(*^_^*),开始搭建环境…… 1. 软件下载 http://developer.android.co ...
关于C#中Environment.OSVersion判断操作系统及Win10上的问题
我们都知道在C#中可以通过Environment.OSVersion来判断当前操作系统,下面是操作系统和主次版本的对应关系: 操作系统主版本.次版本 Windows 10 10.0* Windows ...
盒模型结构——3D盒模型

jQuery选择器简单例子

jQuery选择器简单例子的更多相关文章

随机推荐

热门专题