<!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. 结合源码看nginx-1.4.0之nginx多进程机制详解

    目录 0. 摘要 1. nginx多进程设计思想 2. nginx多进程设计数据结构 3. nginx进程间通信机制 4. 一个简单的多进程例子 5. 小结 6. 参考源码

  2. 【开源项目6】介绍MenuDrawer这个牛x的控件，实现左右出菜单，上下出菜单

    现在很多应用都很潇洒的从左边屏幕手势一划出个左边的隐藏菜单,右边一划出个隐藏菜单,上边一划出个隐藏菜单,下边一划出个隐藏菜单.或者像android的API16左右的激活列表项的功能.很多人肯定都很着迷 ...

  3. ajax中的setRequestHeader设置请求头

    1.问题引发点: 前不久发现一个问题: 前端并没有设置请求头信息里面的Accept-Encoding:gzip...但是在请求头中可以明显的看到Accept-Encoding:gzip, deflat ...

  4. 2013 长沙网络赛J题

    思路:这题对于其他能退出所有值的情况比较好像,唯一不能确定的是XXOXXOXXOXX这个形式的序列,其中XX表示未知,O表示已知. 我们令num[1]=0,那么num[4]=sum[3]-sum[2] ...

  5. 各类.NET学习视频推荐

    想提高个人的技术水平一般来说都是看书.看博客.看官方实例.看视频等等,最近我也总算是稍微空了一点了,所以想找点学习资源看下,相对的我比较倾向于看 视频,因为看视频一般都有讲师讲解,而且许多视频都讲的不 ...

  6. 单独调用Ueditor的图片上传功能

    <!DOCTYPE html> <html> <head> <title></title> <script src="/sc ...

  7. Cisco模拟器使用和静态路由配置

    一. 模拟器使用 网络拓扑图 1. 模拟器搭建环境及网络结构 2. 使用ios系统加载并配置 3. 加载3745ios后计算pc值以减小cpu的消耗 4. 然后使用CTRL+]+i得到最大的一个值(如 ...

  8. 友盟分享--集成QQ和微信

    随着社交工具的应用范围越来越广,分享一些内容的功能也开始要求实现了. 用得比较多的第三方,比如说友盟,比如说Share等等... 前几天刚用友盟写了集成QQ和微信客户端的功能,觉得有必要分享一下. 在 ...

  9. 理解C#系列 / 结束

    结束 开始写的原因 因为不知道自己有多牛. 因为需要一个备忘录. 因为要把知识梳理清楚,以便机器学习. 结束写的原因 因为想知道自己有多牛,不是把知识统统都摆出来,而是运用知识去做出东西来. 即将开发 ...

  10. OC5_Block

    // // main.m // OC5_Block // // Created by zhangxueming on 15/6/26. // Copyright (c) 2015年 zhangxuem ...