<!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. Linux常用命令之sed

    标题:sed命令的使用 作用:sed(stream editer)是以行为单位处理文本数据,可以对数据按行进行选取(显示打印).替换.删除和新增等功能. 工作流程:sed是一个流编辑器,它可以对从标准 ...

  2. MySQL双主配置

    MySQL双主配置 准备环境:服务器操作系统为RHEL6.4 x86_64,为最小化安装.主机A和主机B均关闭防火墙和SELINUX ,IP地址分别为192.168.131.129和192.168.1 ...

  3. hdu-5597 GTW likes function(欧拉函数+找规律)

    题目链接: GTW likes function Time Limit: 4000/2000 MS (Java/Others)     Memory Limit: 131072/131072 K (J ...

  4. hdu 2121 , hdu 4009 无定根最小树形图

    hdu 2121 题目:给出m条有向路,根不确定,求一棵最小的有向生成树. 分析:增加一个虚拟节点,连向n个节点,费用为inf(至少比sigma(cost_edge)大).以该虚拟节点为根求一遍最小树 ...

  5. itunes connect提交app教程

    .打开itunes connect登陆之后,选择Manage Your Apps,再选Add New App: .填写项目相关信息,不知道怎么填的点击问号查看: Bundle ID Suffix需要和 ...

  6. 揪出ie和Edge的js代码

    var userAgent = navigator.userAgent; var isIE = userAgent.indexOf("compatible") > -1 &a ...

  7. 自定义input file 属性

    <label class="input"><input title="浏览文件" type="file" />浏览… ...

  8. Oracle学习笔记4 使用Navicat for Oracle 连接Oracle时出现错误：ORA-28547: connection to server failed, probable Oracle Net admin error

    出问题到的机器环境: Oracle 11gR2 64bit Navicat for Oracle 11.0.10 根据网上一些大神的做法及个人的一些推测,总结如下: 问题出现的原因:Navicat与O ...

  9. Hive通过查询语句向表中插入数据注意事项

    最近在学习使用Hive(版本0.13.1)的过程中,发现了一些坑,它们或许是Hive提倡的比关系数据库更加自由的体现(同时引来一些问题),或许是一些bug.总而言之,这些都需要使用Hive的开发人员额 ...

  10. java 获取数组(二维数组)长度实例程序

    我们可能知道 js有个length函数,java也有啊length函数 例 如果数组是data[],则data.length 代码如下 复制代码 byte[] phone =new byte[81]; ...