<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="../Scripts/jquery-1.7.1.min.js"></script>

    <link href="../Themes/default.css" rel="stylesheet" />

    <script type="text/javascript">

        $(document).ready(function () {//文档加载完后执行，这句必须写，否则将会不执行

            $(".level1>a").click(function () {

                //$(this).addClass("current")

                //    .next().show()

                //.parent().siblings().children("a").removeClass("current")

                //.next().hide();

                $(this).next().show()//当前元素的下一级元素显示ul

                    .parent().siblings()//当前元素的父类元素的兄弟元素li

                    .children().next().hide();//父级元素的儿子元素的下一级元素

                return false;

            });

            $("#cr").click(function () {

                if ($(this).is(":checked")) {

                    alert("感谢你注册我们的网站！");

                }

            });

        });

        //$(".demo").click(function () {//这样写根本不会运行，要运行必须写在ready（）里面，或者写在body里面

        //    alert("jQuery Demo！");

        //});

        function demo() {

            alert("点击我!");

        };

    </script>

</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>

        <!--  <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>

    <div>

        <input type="checkbox" id="cr" /><label for="cr">我已经阅读了上面制度.</label>

        <p class="demo">jQuery Demo</p>

        <script type="text/javascript">

            $(".demo").click(function () {

                alert("jQuery Demo！");

            });

        </script>

        <p class="demo" onclick="demo();">点击我</p>

        <div id="tt">test</div>

        <script type="text/javascript">

            $('#tt').css("color", "red");//可以修改属性.attr可以修改特性

        </script>

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

        <input type="checkbox" value="" name="check" checked="checked" />

        <input type="checkbox" value="" name="check" />

        <input type="checkbox" value="" name="check" checked="checked" />

        <input type="button" value="你选中的个数" id="btn" />

        <script type="text/javascript">

            //第一种方法

            //window.onload = function () {//页面所有元素加载完毕

            //    var btn = document.getElementById("btn");  //获取id为btn的元素(button)

            //    btn.onclick = function () {                   //给元素添加onclick事件

            //        var arrays = new Array();              //创建一个数组对象

            //        var items = document.getElementsByName("check");  //获取name为check的一组元素(checkbox)

            //        for (i = 0; i < items.length; i++) {  //循环这组数据

            //            if (items[i].checked) {      //判断是否选中

            //                arrays.push(items[i].value);  //把符合条件的 添加到数组中. push()是javascript数组中的方法.

            //            }

            //        }

            //        alert("选中的个数为：" + arrays.length);

            //    }

            //}

            //第二种方法

            $("#btn").click(function () {

                var items = $("input[name='check']:checked");

                var array = [];

                //array = eval(items);

                $('input:checkbox:checked').each(function () {

                    array.push($(this).val());

                });

                alert("选中的个数为：" + items.length+array[]);

            })

        </script>

        <form>

            <label>Name:</label>

            <input name="name" />

            <p>

                <label>Newsletter:</label>

                <input name="newsletter" />

                <input name="newsletter" />

            </p>

            <input name="newsletter" />

        </form>

        <script type="text/javascript">

            var tid = $("form > input");

            var i = tid;

        </script>

        <input name="none" />

    </div>

</body>

</html>

初级jQuery的使用的更多相关文章

  1. jquery接触初级----jquery 选择器

    css 选择器主要有:元素选择器,ID选择器,类选择器,群组选择器,后代选择器,普通配符选择器等,通过css选择,我们可以很方便的给元素添加样式,使网页看起来更加好看 jquery 选择器也有相似的功 ...

  2. jquery接触初级----jquery 对象和Dom对象

    1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...

  3. jQuery 知识体系

    jQuery基础知识一 jQuery之知识二-选择器 [jQuery知识]jQuery之知识三-过滤器 [jQuery知识]jQuery之知识四-DOM和CSS操作 [jQuery知识]jQuery之 ...

  4. (转)[jQuery]使用jQuery.Validate进行客户端验证（初级篇）——不使用微软验证控件的理由

    以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...

  5. jquery初级接触-----链式操作

    设置一个初级菜单,点击显示本级菜单下的项目,被点击的同级其它菜单收起 html 代码: <!DOCTYPE html> <html lang="en"> & ...

  6. [jQuery]使用jQuery.Validate进行客户端验证（初级篇）

    以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...

  7. jQuery初级篇（一）

    知识说明: jQuery库是一个javascript库文件,它比起javascript来,写的更少,但做得更多,下面便对刚开始学习jQuery,一些基础知识整理出来,供后期翻阅. 一.      jQ ...

  8. JavaScript初级教程（Jquery）

    序,学习前端页面编程技术,JS是不得不学的一门技术,目前JS不仅可以作为前端编程语言,在服务器端也有了一定发展,例如NodeJS.废话不多书,本篇博客主要介绍JS作为前端语言,怎样获得和改变HTML标 ...

  9. jquery选择器从认识到使用初级篇

    1.   .class 选择器 ---一种通过元素类别属性查找元素 调用格式: $(".class") ----其中参数表示元素的css类别名称(类选择器)<input cl ...

随机推荐

  1. [Arduino] Leonardo 中文介绍

    以下内容均翻译自arduino.cc,水平有限,如有错误请大家指正. 概述Arduino Leonardo是基于ATmega32u4一个微控制器板.它有20个数字输入/输出引脚(其中7个可用于PWM输 ...

  2. jQuery的deferred对象详解（一）

    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...

  3. Python中的内置函数

    2.1 Built-in Functions The Python interpreter has a number of functions built into it that are alway ...

  4. python 打包exe注意的问题

    教程百度.谷歌都有,本文讲讲安装时出错的问题. 教程:http://keliang.blog.51cto.com/3359430/661884 1.cxfreeze 找不到路径时: 需要修改Scrip ...

  5. SPOJ 7758. Growing Strings AC自动机DP

    Growing Strings 题目:给出n个字符串,问最多能够选出多少个串组成序列,并满足前一个字符串是后一个字符串的子串. 分析: AC自动机经典水题... 考虑每个节点结尾时,他能够选出最多的串 ...

  6. oc中的分类/协议/属性

    1.分类:当我们想给某个类加一些方法时,如果不想通过继承这个类来实现,可以通过分类给这个类加一些行为,这个过程与继承相比更加轻量化. @interface NSString (SubClass) -( ...

  7. 【trim()】去掉字符串开头和结尾的空格,防止不必要的空格导致的错误。

    去掉字符串开头和结尾的空格,防止不必要的空格导致的错误. public static void main(String arg[]){ String a=" abc"; Strin ...

  8. 自定义View（二)ViewPage广告轮播

    自定义View的第二个学习案例,使用ViewPage实现广告轮播,通过组合现有的View实现效果如下: 有关ViewPage使用可以学习谷歌官方API,和训练案例: 1.使用ViewPage实现屏幕滑 ...

  9. asp.net运算符之逻辑运算符以及其他运算符

    逻辑(布尔型)运算符用于对boolean型的结果的表达式进行运算,运算的结果都是boolean型.其运算结果如下所示: 运算符 运算 例子 结果 & AND(与) false&true ...

  10. dateset是不是在缓存中

    C#开发erp系统的时候有一个多表数据的查询展示到页面,采用了存储过程的方式,但是存储过程中没有加入分页(菜比).刚开始测试数据几百条没有问题,当数据量提升至十万级后页面加载速度就很卡了,一般是使用分 ...