jquery中常见的面试题

最新推荐文章于 2023-06-29 17:59:41 发布

原创最新推荐文章于 2023-06-29 17:59:41 发布 · 1.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #面试题 #fadeIn #hede #absolute

javascript 同时被 2 个专栏收录

10 篇文章

订阅专栏

问题总结

5 篇文章

订阅专栏

本文介绍了jQuery的基本选择器，如id选择器、class选择器等，并详细解释了如何利用jQuery进行DOM操作，包括查找、创建、插入及替换元素的方法。此外，还展示了jQuery动画效果的实现方式，例如淡出图片和卷帘效果，以及如何制作简单的图片轮播。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>