jQuery基础第二天(jQuery操作DOM)

作者: 越IT | 来源:发表于2016-12-08 22:36 被阅读120次

动画

1、基本效果（显示和隐藏）

$(“div”).show; //让div显示
$(“div”).hide(); //隐藏div

显示和隐藏.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function(){
           $("div").css({
               "display":"none",
               "height":"200px",
               "width":"300px",
               "background":"gold"
           });
            $("button").eq(0).click(function(){
               //让div显示出来
               // show()
                //$("div").show();
                //$("div").show(3000);//毫秒为单位
                //$("div").show("slow");
                //$("div").show("fast");
                //$("div").show("normal");

                //第一个 参数是动画时长， 可以是数字或者字符串
                //第二个 参数是动画执行完成后，要执行的函数

                $("div").show(2000,function(){
                   //alert("show动画执行完毕")；
                    $("div").hide(1000);
                });
            });
            $("button:last").click(function(){
                //让div隐藏
                $("div").hide();
            });
        });
    </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <div></div>
</body>
</html>

2、滑动效果

$(“div”).slideDown(); //下拉显示
$(“div”).slideUp(); //上拉
$(“div”).slideToggle; //切换

3、淡入淡出（淡定）

$(“div”).fadeIn();
$(“div”).fadeOut();
$(“div”).fadeTo();

4、自定义动画

$(“div”).animate();
$(“div”).stop();

滑动效果.gif

$(“div”).slideDown(); //下拉显示
$(“div”).slideUp(); //上拉
$(“div”).slideToggle; //切换

//两个参数的时候
第一个参数是：动画执行的时长
第二个参数是：动画执行完毕后要执行的函数

//三个参数的时候
第一个参数是：动画执行的时长
第二个参数是：动画效果
第三个参数是：动画执行完毕后要执行的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function(){

            //设置div的默认样式
            $("div").css({
                "display":"none",
               /* "float":"left"*/
                "margin-bottom":"20px",
                "height":"200px",
                "width":"300px",
                "background":"gold"
            });

            $("input[type='button']").click(function(){
                //让div以下拉的方式展示出来
               // $(".divItem").slideDown(3000);
                //两个参数的时候
                //第一个参数是：动画执行的时长
                //第二个参数是：动画执行完毕后要执行的函数
                $(".divItem:first").slideDown(3000,function(){

                });
                //三个参数的时候
                //第一个参数是：动画执行的时长
                //第二个参数是：动画效果
                //第三个参数是：动画执行完毕后要执行的函数
               /* $(".divItem:first").slideDown(2000,"linear",function(){

                });

                //swing 是一个先慢后快 的效果
                $(".divItem:last").slideDown(2000,"swing",function(){

                });*/
            });

            $("button:first").click(function(){
               $(".divItem").slideUp(3000);
            });

            $("button:eq(1)").click(function(){
               $(".divItem").slideToggle();
            });

            //淡入淡出效果

            $("button:eq(2)").click(function(){
                //淡入
                $(".divItem").fadeIn(3000);
            });

            $("button:eq(3)").click(function(){
                //淡出
                $(".divItem").fadeOut(3000);
            });

            $("button:eq(4)").click(function(){
                //淡入淡出切换
                $(".divItem").fadeToggle(2000);
            });

            //设置不透明度：fadeTo
            $("button:eq(5)").click(function(){
                //设置不透明度
                $(".divItem").fadeTo(1000,0.5);
            });

            //自定义动画
            $("button:eq(6)").click(function(){
              $(".divItem").animate({
                  "width":"50px",
                  "height":"60px",
                  "opacity":1
              });
            });
        });
</script>
</head>
<body>
    <!--<button>下拉</button>-->
    <input type="button" value="下拉"/>
    <button>上拉</button>
    <button>上拉下拉切换</button>
    <button>淡入</button>
    <button>淡出</button>
    <button>淡入淡出切换</button>
    <button>设置不透明度</button>
    <button>自定义动画</button>

<div class="divItem"></div>
<div class="divItem"></div>
</body>
</html>

案例：右下角的弹出广告

右下角弹出广告.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .ad {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 230px;
            height: 120px;
            background-image: url(imgs/ad.jpg);
            display: none;
        }
        .ad span {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 18px;
            background-image: url(imgs/h.jpg);
        }
    </style>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".ad")
                    .slideDown("normal")
                    .slideUp("slow")
                    .fadeIn(1000)
                    .children("span").click(function () {
                        $(this).parent().fadeOut();
                    });
        });
    </script>
</head>
<body>
    <div class="ad">
        <span></span>
    </div>
</body>
</html>

案例素材获取：链接：http://pan.baidu.com/s/1kVhTHXX 密码：1hhy

操作样式：

$(“div”).css(“background”,”pink”); //设置背景颜色值
$(“div”).addClass(“color-red”); //添加样式

给选定的元素添加样式，注意：样式名字没有点

$(“div”).removeClass(“color-red”); //移除样式
$(“div”).toggleClass(“color-red”); //切换样式
$("#hasBtn").click(function(){});//判断有没有样式
//hasClass的返回值为true或者false
//有某个样式的时候就返回true
//没有某个样式的时候返回false

补充备注：Windows+R出现运行窗口，输入“notepad”，即会弹出记事本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .divItem{
            background: #000;
            color: #fff;
        }
        .divItem1{
            font-size: 20px;
        }
    </style>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function(){
            //css
           /* $("li").css("font-size","18px");
            $("li").css({
               "background":"yellow",
                "color":"white"
            });
            var fontsize = $("li").css("font-size");
            console.log(fontsize);*/

            //给所有的li元素添加样式
            //给选定的元素添加类样式，注意：样式名字没有 点
            $("li").addClass("divItem");

            //给指定的元素删除某个样式
            //有参数的时候，移除指定的样式。如果指定的样式该元素不存在，那么将
            //不删除任何样式（类）
            //$("li").eq(2).removeClass("divItem1");

             //没有参数，则整个样式都会被清除
             //$("li").eq(2).removeClass();

             //切换样式
            $("#demo").click(function(){
                $("li").eq(2).toggleClass("divItem1");
            });

            //判断有没有样式
            $("#hasBtn").click(function(){
                //hasClass的返回值为true或者false
                //有某个样式的时候 就返回true
                //没有某个样式的时候 返回false
                var hasDivItem1Class = $("li").eq(2).hasClass("divItem1");
               /* console.log(hasDivItem1Class);*/
                if(hasDivItem1Class){
                    //有某个样式
                    $("li").eq(2).removeClass("divItem1");
                }else{
                    $("li").eq(2).addClass("divItem1");
                }
            });
        });
    </script>
</head>
<body>
<input type="button" value="切换样式" id="demo"/>
<input type="button" value="判断有没有样式" id="hasBtn"/>
<ul>
    <li>元素很多1</li>
    <li>元素很多2</li>
    <li class="divItem1">元素很多3</li>
    <li>元素很多4</li>
    <li>元素很多5</li>
    <li>元素很多6</li>
    <li>元素很多7</li>
    <li>元素很多8</li>
</ul>
</body>
</html>

生成京东的tab栏目切换

生成京东TAB栏目切换.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body,div,ul,li,ol,dl,dt,p,dd,img,input,a,span,h1,h2,h3,h4{padding:0; margin:0; border:0; list-style:none;}
        .wrapper{width:1000px; height: 475px; margin: 0 auto; margin-top: 100px;}
        .tab{ border:1px solid #ddd; border-bottom: 0; height: 36px; width: 320px;}
        .tab li{ position: relative; float: left; width: 80px; height: 34px; line-height: 34px; text-align: center; cursor: pointer;
            border-top:4px solid #fff;}
        .tab span{ position: absolute;right: 0;top:10px;background: #ddd;width: 1px;height: 14px;overflow: hidden; }
        .products{ width: 1002px;border:1px solid #ddd;height: 476px;}
        .products .main{float: left;display: none;}
        .products .main.selected{display: block;}
        .tab li.active{border-color: red; border-bottom: 0;}
    </style>
    <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".tab > li").mouseenter(function(){
                //给当前元素添加active 这个样式
                //给当前这个元素的所有兄弟元素移除 active 这个样式
                $(this).addClass("active").siblings("li").removeClass("active");

                // 让下面的div内容，根据上面tab栏菜单展示相应内容
                var index = $(this).index();
                $(".main")
                        .eq(index)
                        .addClass("selected")
                        .siblings(".main")
                        .removeClass("selected");
            });
        });
    </script>
</head>
<body>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item active">国际大牌<span>◆</span></li>
            <li class="tab-item">国妆名牌<span>◆</span></li>
            <li class="tab-item">清洁用品<span>◆</span></li>
            <li class="tab-item">男士精品</li>
        </ul>
        <div class="products">
            <div class="main selected">
                <a href="###">[站外图片上传中……(1)]</a>
            </div>
            <div class="main">
                <a href="###">[站外图片上传中……(2)]</a>
            </div>
            <div class="main">
                <a href="###">[站外图片上传中……(3)]</a>
            </div>
            <div class="main">
                <a href="###">[站外图片上传中……(4)]</a>
            </div>
        </div>
    </div>
    
</body>
</html>

案例素材获取：
链接：http://pan.baidu.com/s/1eRCpSjC 密码：xasd

常用的DOM操作--属性、值和内容

$(“div”).attr(“name”); //获取name属性值
$(“div”).removeAttr(“name”); //移除属性
$(“input”).val(function(I,v){}); //设置input的值
.html
.text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
       p{
           background: gray;
           height: 300px;
       }
    </style>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            //设置属性
            $("input:eq(0)").click(function(){
                $(this).attr("title","我是动态设置的属性");
            });

            //获取属性
            $("input:eq(1)").click(function(){
               var attr = $("input:eq(0)").attr("title");
                console.log(attr);
            });

            //移除属性
            $("input:eq(2)").click(function(){
               $("input:eq(0)").removeAttr("title");
            });

            //设置值
            //有一个参数的时候为设置值
            $("input:eq(3)").click(function(){
                $("#txt").val("我是动态设置的值");
            });

            //获取值
            //没有参数的时候为获取值
            $("input:eq(4)").click(function(){
                console.log($("#txt").val());

            });

            //设置html
            $("input:eq(5)").click(function(){
              /*$("div").html("我是div的html的内容")*/
                $("div").html("<p>我是p元素</p>");
        t    });

            //获取html
            $("input:eq(6)").click(function(){
                /*$("div").html("我是div的html内容")； */
               alert($("div").html());
            });

            //设置文本内容
            $("input:eq(7)").click(function(){
                $("div").text("我是动态创建的文本内容");
            });

            //获取文本内容
            $("input:eq(8)").click(function(){
                alert($("div").text());
            });

        });
    </script>
</head>
<body>
<input type="button" value="设置属性"/>
<input type="button" value="获取属性"/>
<input type="button" value="移除属性"/>
<input type="button" value="设置值"/>
<input type="button" value="获取值"/>
<input type="button" value="设置html内容"/>
<input type="button" value="获取html内容"/>
<input type="button" value="设置text内容"/>
<input type="button" value="获取text内容"/>
<div>
    <input type="text" id="txt"/>
</div>
</body>
</html>

操作文档

1、内部插入节点

$(“div”).append(node); //把div内部的后面追加元素
node.appendTo(“div”) //把node追加到div
$(“div”).prepend(node) //在div内部的前面追加元素
node.prependTo($(“div”)) //把node追加到div内部的前面

2、外部插入节点

$(“div”).after(node) //在div后面添加兄弟节点node
$(“div”).before(node) //在div前面添加兄弟节点node
$(“div”).insertBefore(node) //把div插入到node前面
$(“div”).insertAfter(node) //把div追加到node后面

3、删除节点

$(“div”).remove(); //删除选中的元素，“自杀”
$(“div”).empty(); //清空子元素
$(“div”).html(“”); //清空子元素，推荐使用此方法

4、复制节点

$(“div”).clone(); //复制节点

注意：参数为true的话，那么会之前绑定的事件也复制一份

5、包裹节点

$(“div”).wrap(node); //包裹单个包裹 --后面包裹前面
$(“div”).wrapAll(node); //包裹所有包裹在一个node中

6、替换节点

$(“div”).replaceWith(node); //替换

节点操作源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            $("button:first").click(function(){
              //追加节点
              $("div").append("<p>我是动态创建出来的p元素</p>");
            });

            $("button:eq(1)").click(function(){
                //把前面这个元素追加给后面$("div")元素
                $("<p>我是动态创建出来的</p>").appendTo($("div"));
            });

            $("button:eq(2)").click(function(){
                //给前面这个元素在所有子元素的前面添加一个子元素
                $("div").prepend("<p>我是动态创建出来的p元素</p>");
            });

            $("button:eq(3)").click(function(){
                //把前面这个元素添加给后面$("div")元素的所有子元素的前面
                $("<p>我是p元素 - prependTo进来</p>").prependTo("div");
            });

            $("button:eq(4)").click(function(){
                //往div的后面添加元素，他们是兄弟关系
                $("div").after("<p>我是div后面的p元素</p>");
            });

            $("button:eq(5)").click(function(){
                //往div的前面添加元素，他们是兄弟关系
                $("div").before("<p>我是div前面的p元素</p>");
            });

            $("button:eq(6)").click(function(){
                //把前面的元素 放到 后面div元素的前面，他们是兄弟节点关系
                $("<p>我在哪？</p>").insertBefore("div");
            });

            $("button:eq(7)").click(function(){
                //把前面的元素 放到 后面div元素的后面，他们是兄弟节点关系
                $("<p>我在哪？</p>").insertAfter("div");
            });

            //删除节点元素
            $("button:eq(8)").click(function(){
                //删除，可以“自杀”
               // $("div").remove();
               $(this).remove(); //自杀
            });

            //清空节点元素
            $("button:eq(9)").click(function(){
                    //清空子元素
                    //$("div").empty();
                $("div").html("");  //推荐使用此方法最为高效！
             });

            //复制
            $("button:eq(10)").click(function(){
                $("div").append($("p").clone());
            });

            //包裹元素
            $("button:eq(11)").click(function(){
                $("span").wrap($(".divItem"));
            });

            //包裹所有节点
            $("button:eq(12)").click(function(){
               $("li").wrapAll($(".divItem"));
            });

            //替换节点
            $("button:eq(13)").click(function(){
                $("span").replaceWith($("<div>我是大div</div>"));
            });

        });

    </script>
</head>
<body>
   <button>append 追加节点 </button>
   <button>appendTo 追加节点 </button>
   <button>prepend 在内部的前面添加节点 </button>
   <button>prependTo 在内部的前面添加节点 </button>
   <button>after 往后面添加节点 </button>
   <button>before 往前面添加节点 </button>
   <button>insertBefore 往前面添加节点 </button>
   <button>insertAfter 往后面添加节点 </button>
   <br/>
   <button>remove 删除节点</button>
   <button>empty 删除节点</button>
   <button>clone 复制节点</button>
   <button>wrap 包裹节点</button>
   <button>wrapAll 包裹所有节点</button>
   <button>replaceWith 替换节点</button>
<div>
    <h1>我是标题H1
        <span>我是span元素</span>
    </h1>
</div>
<p>我是div外面的p元素，不是动态添加的</p>
<div class="divItem">我是一个大div</div>
<span>我是一个小span</span>
   <ul>
       <li>我是li</li>
       <li>我是li</li>
       <li>我是li</li>
       <li>我是li</li>
       <li>我是li</li>
   </ul>
</body>
</html>

案例： 360图片导航效果

360导航效果.gif
案例素材及源码获取：链接：http://pan.baidu.com/s/1dFHrVxR 密码：x6xs

今日重点：

动画：
show、hide、fadeIn、fadeOut、fadeTo、slideDown、slideUp、slideToggle、animate

DOM操作：
.css()、addClass(“className”)、removeClass()、toggleClass、.attr()、removeAttr()、.val()、.html(“<p></p>”)、text()、 node.append(“p我是追加的内容p”)、prePend()

jQuery基础第二天(jQuery操作DOM)

动画

1、基本效果（显示和隐藏）

2、滑动效果

3、淡入淡出（淡定）

4、自定义动画

案例：右下角的弹出广告

操作样式：

生成京东的tab栏目切换

常用的DOM操作--属性、值和内容

操作文档

1、内部插入节点

2、外部插入节点

3、删除节点

4、复制节点

5、包裹节点

6、替换节点

节点操作源码：

案例： 360图片导航效果

今日重点：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

jQuery基础第二天(jQuery操作DOM)

动画

1、基本效果（显示和隐藏）

2、滑动效果

3、淡入淡出（淡定）

4、自定义动画

案例：右下角的弹出广告

操作样式：

生成京东的tab栏目切换

常用的DOM操作--属性、值和内容

操作文档

1、内部插入节点

2、外部插入节点

3、删除节点

4、复制节点

5、包裹节点

6、 替换节点

节点操作源码：

案例： 360图片导航效果

今日重点：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

6、替换节点