jquery中常见的面试题

1、列举jquery中常用的选择器

基本选择器    id选择器：每个id选择器名称只能使用一次    class：允许重复使用    *： 匹配所有层次选择器：    $("#a.b") 选取id值为a的元素里所有class值为b的元素    $("#a>.b") 选取id值为a的元素后class为b的子元素    $("#a+b.") 选取id值为a的元素后紧挨着class为b的元素过滤选择器：    ：first 选取第一个元素    ：odd 选取索引是奇数的元素    ：even 选取索引是偶数的元素    ：not（） 选取除某元素外的其他元素    ：eq（）按索引寻找元素    ：gt() 大于某索引的元素

2 如何实现查找DOM树种的元素

var input = $("input:first"); //获取input标签中的第一个节点

3 如何在DOM树种创建并插入元素

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div>friut</div><script>    var title = $("<span>apple</span>");    $("div").append(title); //将title追加到div标签内容的后面    $("div").before(title); //将title追加到div标签之前与div标签同级    $("div").prepend(title); //将title追加到div标签内容之前    $("div").after(title); //将title追加到div标签后面与div同级</script>

4 如何在dom树种替换指定元素

注：jQuery中主要使用replaceWith()和replaceAll()

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div>friut</div><script>    var title = $("<span>apple</span>");    $("div").replaceWith(title); //将节点div换成span</script>

5 给一张图片，让这张图片以淡出的效果消失在页面

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><img src="col.jpg"><script>    $("img").click(function){        $(this).fadeOut("slow"); //图片淡出网页    });</script>

6 制作一个按钮，当按钮被点击时以卷帘效果消失

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><input type="button" value="but" style="width:100px;height:100px;"><script>    $("input").click(function){        $(this).sideUp("slow"); //以卷帘效果向上消失    });</script>

7 制作一个照片轮换

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><style>    ul {        list-style:none;        width: 350 px;        height: 200 px;        position: absolute;    }    li{ position: absolute;}</style><div class="change">    <ul>        <li><img src="1.jpg" width=350px height=200px></li>        <li><img src="2.jpg" width=350px height=200px></li>        <li><img src="3.jpg" width=350px height=200px></li>        <li><img src="4.jpg" width=350px height=200px></li>    </ul></div><script>    $(function(){        $(".change ul li:not(:first)").hide();        setInterval(function(){            if($(".change ul li:last").is(":visible")){                $(".change ul li:first").fadeIn("slow");                $(".change ul li:last").hide();            }else{                $(".change ul li:visible").next.fadeIn("slow");            }        },1000);    });</script>