其他分享
首页 > 其他分享> > jquery（1）

jquery（1）

作者：互联网

jquery文件的导入

<script src="jquery-1.12.4.js" type="text/javascript"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js" type="text/javascript"></script>
    <!--制作导航栏，当单击时会显示或隐藏-->
    <style type="text/css">
        .box .menu ul{
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="menu">
            <li class="level1">
                <a href="#">衬衫</a>
                <ul class="level2">
                    <li>短袖衬衫</li>
                    <li>短袖衬衫</li>
                    <li>短袖衬衫</li>
                    <li>短袖衬衫</li>
                </ul>
            </li>
            <li class="level1">
                <a href="#">卫衣</a>
                <ul class="level2">
                    <li>卫士大夫衣</li>
                    <li>开口卫衣</li>
                    <li>口卫衣开</li>
                    <li>口卫衣开</li>
                </ul>
            </li>
            <li class="level1">
                <a href="#">裤子</a>
                <ul class="level2">
                    <li>短裤</li>
                    <li>短裤</li>
                    <li>短裤</li>
                    <li>短裤</li>
                </ul>
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        $('.level1>a').click(function () {
            $(this).addClass("current").next().show()
                .parent().siblings().children("a").removeClass("current")
                .next().hide();
            return false;

        });
    </script>

</body>
</html>


1DOM 对象（Document Object Model 文档对象模型）每一个DOM都可以表示成一颗树
Jquery对象：在Jquery中无法使用DOM对象的任何方法，反之同样；
Jquery对象是一个类似数组的对象，可以通过【index】的方法得到相应的DOM对象
　　　　　　　　　　　　　　　　可以通过get（index）方法得到相对应的DOM对象



实例：DOM对象和Jquery对象的转换
<input type="checkbox" id="cr"><label for="cr">我已经阅读上面的制度</label>
<script type="text/javascript">
    $(document).ready(function () {
        var $cr=$("#cr");
        var cr=$cr[0];
        $cr.click(function () {
            if (cr.checked){
                alert("感谢支持")
            }
        });
    });
</script>







标签：jquery,Jquery,DOM,对象,衬衫,短袖,cr
来源： https://www.cnblogs.com/Damocless/p/11869503.html