jQuery小结8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        body{font-size:12px;}

        .box{margin:10px;padding:10px;}
        .box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;}
        .box p{line-height:20px;}
        strong{color:Red;margin-right:20px;}

        .treebox{margin:10px;padding:10px;width:380px;}
        .treebox ul{list-style:none;margin-left:15px;}
        .treebox>ul{list-style:none;margin-left:0px;}
        .treebox ul li{margin:12px 20px;}
        .treebox ul li label{list-style:none;cursor:pointer;line-height:16px;display:block;padding-left:20px;}
        .treebox ul li label.collapse{background-image:url(images/treeplus.gif);background-repeat:no-repeat;}
        .treebox ul li label.expand{background-image:url(images/treeminus.gif);background-repeat:no-repeat;}
        #panels dt{height:30px;line-height:30px;padding-left:10px;border:1px solid #aaccff;font-weight:bold;font-size:14px;background-color:#bb44aa;margin-top:-1px;cursor:pointer;}
        #panels dd{height:230px;padding:10px;line-height:20px;border:1px solid #aaccff;margin-top:-1px;}

    </style>
    <script type="text/javascript">

        $(function(){

            $(".treebox  li .expand").click(function(){
                $(this).next().toggle();
            });

        });
    </script>

</head>
<body>
    <div class="box">
        <h3><strong>选作</strong>本试题重点考察jquery构造树形控件,具体要求如下:</h3>
        <p>
            1.点击每个节点时,将其子节点显示或隐藏。<br />
        </p>
    </div>

    <div class="treebox">
        <ul>
            <li>
                <label class="expand">河北省</label>
                <ul>
                    <li><label>石家庄市</label></li>
                    <li>
                        <label class="expand">保定市</label>
                        <ul>
                            <li><label>望都县</label></li>
                            <li><label>顺平县</label></li>
                            <li><label>唐县</label></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <label class="expand">重庆市</label>
                <ul>
                    <li>
                        <label>沙坪坝区</label>
                    </li>
                    <li>
                        <label>北碚区</label>
                    </li>
                    <li>
                        <label>江北区</label>
                    </li>
                    <li>
                        <label>南岸区</label>
                    </li>
                </ul>
            </li>
            <li>
                <label>北京市</label>
            </li>
        </ul>
    </div>

</body>
</html>
时间: 2024-10-02 21:52:40

jQuery小结8的相关文章

jquery小结

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码.$(document).ready() 方法允许我们在文档完全加载完后执行函数$(document).ready(function(){ // jQuery methods go here... }); 简写:$(function(){ // jQuery methods go here... }); ------------------------------------------------------------------

jQuery小结3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <sc

jquery小结测试题

1.在div元素中,包含了一个<span>元素,通过has选择器获取<div>元素中的<span>元素的语法是? 提示使用has() 答案: $(div:has(span))     获取的是div下的span标签,而不是span标签下的文本内容! $("div span"); 2.在<ul>元素中,添加了多个<li>元素,通过jquery选择器获取最后一个<li>元素的方法是? 答案: $("li:la

JQuery小结(转)

一.页面加载 JQ的页面加载比JS要快,当整个dom树结构生成完毕后就会加载 JQ页面加载不存在覆盖问题,加载的时候是顺序执行 JQ的页面加载最简写的方式为: $(function(){ alert("显示页面加载内容"); }) //对比JS的页面加载为: window.onload = function(){ alert("显示页面加载内容"); } 二.JQ的获取 <script type="text/javascript" src=

Jquery 小结

1. 名词解释 实例对象:var p1=new Person();  p1就是实例对象 构造:function Person(){} 原型对象:在 JavaScript 中,每当定义一个对象(函数也是对象)时候,对象中都会包含一些预定义的属性.其中每个函数对象都有一个prototype 属性,这个属性指向函数的原型对象.补充:每个对象都有 __proto__ 属性,但只有函数对象才有 prototype 属性   原型对象和构造的关系 在默认情况下,所有的原型对象都会自动获得一个 constru

jQuery小结5

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title>

jQuery小结7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <sc

jQuery小结6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <sc

jQuery小结1

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title>