jquery面试题

1.如何在DOM树中替换指定元素?请举例写出代码?

使用replaceWith和replaceAll

replaceWith(content):

该方法是将所选择的元素替换成指定的HTML或DOM元素,其中content表示选择元素替换的内容。

如: $(“#span”).replaceWith(“<span title=’replaceWith’>张三</span>”)

replaceAll(selector):

该方法是将所选择的元素替换成指定的selector元素,其中参数selector为需要被替换的元素。

例:<!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 type="text/javascript"
            src="Jscript/jquery-1.4.2.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           span{font-weight:bold}
           p{background-color:#eee;padding:5px;width:200px}
    </style>
    <script type="text/javascript">
        $(function() {
            $("#Span1").replaceWith("<span title='replaceWith'>李连杰</span>");
            $("<span title='replaceAll'>[email protected]</span>").replaceAll("#Span2");
        })
    </script>
</head>
<body>
    <p>姓名:<span id="Span1">吴永先</span></p>
    <p>邮箱:<span id="Span2">[email protected]</span></p>
</body>
</html>

2.给你一张图片,让这张图片以淡出的效果消失在页面中,请写出代码?

使用fadeIn和fadeOut方法,格式如下:

fadeIn(speed,[callback])

该方法的功能是通过改变所选元素透明度,实现淡入的动画效果,并在完成时可执行一个回调函数,参数speed为动画效果的速度,可选项参数[callback]为动画完成时执行的函数。

fadeOut(speed,[callback])

通过改变所选元素透明度,实现淡出的动画效果。参数的功能与fadeIn()方法一样。

例:<!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>fadeIn()和fadeOut()方法</title>
    <script type="text/javascript"
            src="Jscript/jquery-1.4.2.js">
    </script>
    <style type="text/css">
           .divFrame{width:188px;text-align:center;}
           .divFrame .divTitle{padding:5px 0px 5px 0px}
           .divFrame .divContent{padding:5px 0px 5px 0px}
           .divFrame .divContent img{border:solid 1px #eee;padding:2px}
           .divFrame .divTip{position:absolute;padding:90px 0px 0px 60px;font-size:13px;font-weight:bold}
           .btn {border:#666 1px solid;padding:2px;width:80px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            $("input:eq(0)").click(function() {
                //在3000毫秒中淡入图片
                $("img").fadeIn(3000);
            })
            $("input:eq(1)").click(function() {
                //在3000毫秒中淡出图片
                $("img").fadeOut(3000);
            })
        })
    </script>
</head>
<body>
      <div class="divFrame">
           <div class="divTitle">
               <input id="Button1" type="button" value="淡入" class="btn" />
               <input id="Button2" type="button" value="淡出" class="btn" />
           </div>
           <div class="divContent">
               <div class="divTip"></div>
               <img src="images/img05.jpg" alt="" title="风景图片" />
           </div>
      </div>
</body>
</html>

说明:运行时必须添加相应的jquery文件和图片

 

 

你可能感兴趣的:(jquery)