初级jQuery的使用

初级jQuery的使用
<!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="1" name="check" checked="checked" />
        <input type="checkbox" value="2" name="check" />
        <input type="checkbox" value="3" 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[0]);
            })
        </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的使用

初级jQuery的使用,布布扣,bubuko.com

初级jQuery的使用

上一篇:MVC应用程序实现上传文件


下一篇:ASP.NET MVC5 网站开发实践(二) Member区域 - 文章管理 - 架构