<!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. 通过UIBezierPath贝塞尔曲线画圆形、椭圆、矩形

    /**创建椭圆形的贝塞尔曲线*/ UIBezierPath *_ovalPath=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(, , , )]; ...

  2. css居中的几种方式

    居中分水平和垂直两种,使用的频度也算是很高,下面分情况来讨论一下几种常用的实现方式. 欢迎指正文中的错误,同时如果有学习到新的方式也会更新在后面,也方便以后温故知新. 1.margin 这种方式只能实 ...

  3. Android中“再按一次返回键退出程序”实现

    private long exitTime = 0; @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyC ...

  4. Java学习笔记——Java工厂模式之简单工厂

    package com.app; import java.util.Date; /* * 工厂模式:简单工厂.工厂方法.抽象工厂 * * */ public class Test0718_Factor ...

  5. My Linux API

    @图形界面与命令行界面切换 Linux预设提供了六个命令窗口终端机让我们来登录.默认我们登录的就是第一个窗口,也就是tty1,这个六个窗口分别为tty1,tty2 … tty6,你可以按下Ctrl + ...

  6. 页面modal服务

    /** * * * 初始化: * var oneModal = modalSvc.createModal(templateUrl, controller, size); * size可以是:lg或sm ...

  7. IP Camera Something

    ONVIF Device Manager http://sourceforge.net/projects/onvifdm/ http://synesis.ru/products/menedzher-u ...

  8. 转：微信Android客户端架构演进之路

    转自: http://www.infoq.com/cn/articles/wechat-android-app-architecture 微信Android客户端架构演进之路 作者 赵原 发布于 20 ...

  9. 【JS Note】undefined与null

    在Javascript中有这两种原始类型: Undefined与Null.而这两种原始类型都各自只有一个值,分别是undefined,null. undefined: 1.变量声明后未赋值,则变量会被 ...

  10. 【转载】理解OAuth 2.0

    http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html 作者: 阮一峰 日期: 2014年5月12日 OAuth是一个关于授权(authorizat ...