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

动画

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

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

显示和隐藏.gif

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; //切换

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

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

案例：右下角的弹出广告

右下角弹出广告.gif

案例素材获取：链接：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”，即会弹出记事本




    
    
    
    
    





    元素很多1
    元素很多2
    元素很多3
    元素很多4
    元素很多5
    元素很多6
    元素很多7
    元素很多8

生成京东的tab栏目切换

生成京东TAB栏目切换.gif




    
    
    
    
    


    
        
            国际大牌◆
            国妆名牌◆
            清洁用品◆
            男士精品
        
        
            
                [站外图片上传中……(1)]
            
            
                [站外图片上传中……(2)]
            
            
                [站外图片上传中……(3)]
            
            
                [站外图片上传中……(4)]

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

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

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

操作文档

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); //替换

节点操作源码：




    
    
    
    


   
   
   
   
   
   
   
   
   

   
   
   
   
   
   

    我是标题H1
        我是span元素
    

我是div外面的p元素，不是动态添加的
我是一个大div
我是一个小span
   
       我是li
       我是li
       我是li
       我是li
       我是li

案例： 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(“

”)、text()、 node.append(“p我是追加的内容p”)、prePend()