JQuery小结_jquery slig-CSDN博客

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <style type="text/css">
        /*//小圆点 list-style
        //缩紧清除 padding  margin
        //背景控制： class="main" 背景图片提醒立体效果backgroun-image norepeat;或者，background-repeat = repeat-x
        //li设定背景色*/
        ul,li {
            list-style:none;
            padding:0px;
            margin:0px;
        }
        .main, .hmain {
            background: url('button1.jpg') no-repeat;
            width: 100px;
        }
        li {
            background-color:#f7ebf5;
            width:100px;
        }
        a {
            text-decoration:none ;
            padding-left:20px;
            /*充满所占的区域*/
            display:block;
            display:inline-block;
            padding-top:2px;
            padding-bottom:2px;

        }
        .main a,.hmain a{
            color: black;
            background: url('icon2.gif') no-repeat;
            background-position: 5px center;
        }
        .main li a,.hmain li a{
            color: gray;
            background-image: none;
        }
        .main ul,.hmain ul{
            /*子菜单项全部隐藏*/
            display: none;
        }
        .hmain {
            float:left;
        }
    </style>
    <script type="text/javascript" src ="jquery.js"></script>
    <script type="text/javascript">
        //竖向的菜单动态下拉设置
        $(document).ready(function(){
            //页面中的DOM已经装载完成了，执行的代码
            $(".main > a").click(function(){
                var node = $(this).next("ul");
                //方法一：
                //if(node.css("display") == "none") {
                //    node.css("display", "block");
                //} else {
                //    node.css("display", "none");
                //}
                //方法二三：
                //node.show();
                //node.hide();
                //node.toggle();
                //方法四：
                node.slideToggle();
                changeIcon($(this));
            });

            //横向菜单鼠标移动动态显示
            $(".hmain").hover(function () {
                $(this).children("ul").slideDown();
                changeIcon($(this).children("a"));
            },function () {
                $(this).children("ul").slideUp();
                changeIcon($(this).children("a"));                
            });
        }); 

        //修改下拉框的图标---这是用JavaScript实现的
        function changeIcon(mainNode) {
            if (mainNode) {
                if (mainNode.css("background-image").indexOf("icon2.gif") >=0){
                    mainNode.css("background-image", "url( 'icon1.gif' )");
                } else {
                    mainNode.css("background-image","url( 'icon2.gif' )");
                }
            }                
        }
        
    </script>
</head>
<body>略</body>

【JavaScript】——滑动下拉

<head>
    <meta charset="utf-8" />
    <title></title>

    <script src="jquery.js"></script>
    <style  type="text/css">
        ul {
            list-style: none;
        }
        li {
            width: 200px;
            height: 35px;
            float: left;
            background: yellow;
            overflow: hidden;
            line-height: 35px;
            text-align: center;
        }
    </style>
   <script>
        window.onload = function () { //在浏览器设置窗口
            var li = document.getElementsByTagName("li");//返回带有指定标签名的对象集合
            for (var i = 0; i < li.length; i++) {
                li[i].onmouseover = function () {
                    console.log(this);//这里的this指的是Windows
                    this.style.overflow = "visible";
                }
                //鼠标移动上去，内容不会被修剪，会呈现在元素框之外
                li[i].onmouseout = function () {
                    this.style.overflow = "hidden";
                    //鼠标移除去，内容会被修剪，并且其他内容是不可见的
                }
            }
        }
    </script>
</head>

JQuery可以和CSS进行无缝连接，可以对CSS样式里的所有选择器进行获取操作：比如基本选择题： id #id；类 class；标签 tag；通用*，还可以通过方法： .val（） .text（） .html() .css() .attr()进行获取操作，

JavaScript是通过DOM获得指定的标签名，转化成dom 进行for循环遍历，执行。