<!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. SQL 必知必会-- 第17课：创建和操作表

    我这里用的是oracle 10g,PL/SQL来做的. 第17课  创建和操纵表  14517.1  创建表  14517.2  更新表  15017.3  删除表  15317.4  重命名表  1 ...

  2. Java克隆--深克隆与浅克隆的区别

    克隆,就是复制一个对象的副本,而克隆又分浅克隆和深克隆.浅克隆是指克隆得到的对象基本类型的值改变了,而源对象的值不会变.但如果被克隆对象引用类型的值改变了,那么源对象的值同样会改变,因为引用类型在栈内 ...

  3. [课程相关]附加题——stack的理解

    一.stack的三种解释 stack有三种解释,我个人理解如下. 1.用户自定义的stack 用户自定义的stack就是一般意义上的后进先出队列,从名字上就能理解了,stack由下向上增长,有一个顶指 ...

  4. Android 自定义Dialog工具类

    由于项目的需要,系统的弹出框已经不能满足我们的需求,我们需要各式各样的弹出框,这时就需要我们去自定义弹出框了. 新建布局文件 dialog_layout.xml,将下面内容复制进去 <?xml ...

  5. 剑指Offer17 二叉树的镜像

    /************************************************************************* > File Name: 17_Mirror ...

  6. Web 网页常见问题集锦

    1.如何去掉Chrome记住密码后自动填充表单的黄色背景 不知道大家有没有这样的烦恼,在Chrome浏览器中,记住密码后重新填写表单数据时,自动会有黄色背景的出现.(如图a) 图a 而出现这个黄色背景 ...

  7. Javascript中关于数组的认识

    昨天在练习js中cookie的时候,知道js中的cookie是一个字符串,这与php中的操作cookie还是有很大的差别的,起初我是以php的思维来学习怎么样使用使用js中的cookie. js中的c ...

  8. 解决方案：Error:Execution failed for task ':app:compileDebugAidl'. > aidl is missing

    也许有朋友最初在用Android Studio创建新工程的时候会碰到这个错误,其实这个问题是由于版本不兼容导致的,解决方法很简单,只需要把编译工具的版本改一下就可以了: 1.选左侧的工程根目录app, ...

  9. UI5_UINavigation传值

    // // AppDelegate.m // UI5_UINavigation传值 // // Created by zhangxueming on 15/7/7. // Copyright (c) ...

  10. Toad for Oracle Authorization key

    Authorization key :    0-63920-00993-29060-08749 sit         message  :     li