jQueryday03补充(筛选查找下拉菜单)

来源：互联网发布：淘宝短链接生成器编辑：程序博客网时间：2024/05/17 21:45

    <script>        $(document).ready(function () {           //.eq()           //$("div").eq(1).css("font-size","33px");           //.first()           //$("div").first().css("font-size","11px");           //.parent()           //$("#sp").parent().css("background","red");            //$("p").parent("#div").css("font-size","44px");           //$("#li03").siblings(".liItem").css("font-size","44px");            //.find()            $("div").find("#li03").css("font-size","44px");        });    </script></head><body><div>4    <span>4</span>    <span id="sp"></span>    <span>4</span></div><div>    <p>        hello    </p></div><div class="selected" id="div">    <p >hello again</p></div><div>    <ul>        <li>我是1</li>        <li>我是2</li>        <li id="li03">我是3</li>        <li>我是4</li>        <li>我是5</li>        <li>我是6</li>        <li class="liItem">我是7</li>        <li>我是8</li>    </ul></div></body>

    <script type="text/javascript">        /*            mouseover事件跟mouseenter事件的区别                mouseover事件会触发多次 没遇到一个子元素就会触发一次                mouseenter事件 鼠标经过的时候只会触发一次         */        var x=0;        var y=0;        $(document).ready(function(){            $("div.over").mouseover(function(){                $(".over span").text(x+=1);            });            $("div.enter").mouseenter(function(){                $(".enter span").text(y+=1);            });        });    </script></head><body><p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p><p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p><div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">    <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2></div><div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">    <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2></div></body>

    <style>        *{            padding: 0px;            margin: 0px;        }        ul{            list-style: none;        }        .wrap{            width: 400px;            height: 30px;            margin:100px auto 0px;            background-image: url("background.png");            padding-left: 10px;        }        .wrap li{            float: left;            width: 100px;            height: 30px;            margin-right: 30px;            position: relative;        }        .wrap a{            text-decoration: none;            color: black;            width: 100px;            width: 30px;            text-align: center;            line-height: 30px;/*定义文字的高度 不会因为数量而改变*/            background-image: url("background.png");        }        .wrap li ul{            position: absolute;            display: none;        }    </style>    <script src="jquery-1.11.1.js"></script>    <script>    </script></head><body><div class="wrap">    <ul>        <li>            <a href="#">一级1</a>            <ul>                <li><a href="#">二级1</a></li>                <li><a href="#">二级2</a></li>                <li><a href="#">二级3</a></li>            </ul>        </li>        <li><a href="#">一级2</a>            <ul>                <li><a href="#">二级1</a></li>                <li><a href="#">二级2</a></li>                <li><a href="#">二级3</a></li>            </ul>        </li>        <li><a href="#">一级3</a>            <ul>                <li><a href="#">二级1</a></li>                <li><a href="#">二级2</a></li>                <li><a href="#">二级3</a></li>            </ul>        </li>    </ul></div></body>

阅读全文

0 0

jQueryday03补充(筛选查找 下拉菜单)

jQueryday03补充(筛选查找下拉菜单)