美文网首页
jquery的各种DOM操作

jquery的各种DOM操作

作者: a4316976150e | 来源:发表于2017-02-22 04:21 被阅读0次

    隐藏和显示以及切换隐藏和显示;

    hide和show,

    $("#id").onclick(function(){

    $("#id").show(speed);     显示        //  speed可以取的值为slow,fast,和毫秒

    $("#id").hide(speed);        隐藏

    $("#id").toggle(speed)     切换两张状态

    })

    淡入淡出有四种方法

    $("#id").onclick(function(){

    $("#id").fadeln()   // 淡入已经隐藏掉的元素

    $("#id").fadeout()   //   淡出显示的元素

    $("#id").fadetoggle()  //在上面两种效果之间切换

    $("#id").fadeto()  //    允许渐变为给定的一个透明度

    })

    滑动有三种方法

    $("#id").onclick(function(){

    $("#id").slidedowm() // 让元素向下滑动

    $("#id").slideup()   //   让元素向上滑动

    $("#id").slidetoggle()  //在上面两种效果之间切换

    })

    动画  $(selector).animate({params},speed,callback);

    params  //必选,规定形成动画的css属性

    speed  //  规定动画的时长

    callback  //规定动画完成之后的回调函数

    $("button").click(function(){

    $("div").animate({

    left:'250px',

    opacity:'0.5',

    height:'150px',

    width:'150px'

    });

    });

    动画使用相对值(元素相对与元素本身的值)的话是用+=来表示

    height:"+=250px"

    动画有队列功能,如果编写了多个animate的话,它会逐一实现

    停止动画

    $("#id").onclick(function(){

    $("#id").stop(stopAll,goToEnd);  //  第一个参数是仅仅停止当前的动画,允许队列中的后面的动画执行,

                                                             第二个参数是是否立即完成当前动画   两个参数默认都为false

    }

    attr是获取元素的属性

    $("#id").attr("href","www.baidu.com");  //  第一个参数是要获取的属性,第二个参数是你要修改的内容

    jquery添加元素

    $("#id").onclick(function(){

    $("#id").append()   // 用于在元素末尾添加元素

    $("#id").perpend()  // 用于在元素开头添加元素

    $("#id").after()  // 用于在被选元素之后添加元素

    $("#id").before()  // 用于在被选元素之前添加元素

    }

    jquery删除元素

    $("#id").onclick(function(){

    $("p").remove("#one")   // 用于删除被选元素以及它的字元素     可以接受一个jquery当中的所有选择器参数   用来过滤其他元素   

    如上面;删除id=one的元素中的所有p元素

    $("#id").empty()  // 用于删除被选元素的子元素

    }

    jquery获取并设置css样式

    $("button").click(function(){

    $("h1,h2,p").addClass("blue");  //里面可选的参数为style里面地class类样式   可以为元素添加一个或者多个class

    $("h1,h2,p").removeclass("blue");  //删除元素当中的class

    $("h1,h2,p").toggleclass("blue");  //用于给元素切换添加删除class地操作

    $("h1,h2,p").css("background-color":"yellow");  //用于给元素添加一个或者多个css属性

    });

    jquery的尺寸

    $("#id").width();  //  用于设置或者返回元素的宽度(不包括内外边距以及边框)

    $("#id").innerwidth();  //  用于设置或者返回元素的宽度(包括内边距);

    $("#id").outerwidth();  //  用于设置或者返回元素的宽度(包括内外边距以及边框)

    jquery的遍历

    $("#id").parent();  //  用于返回被选元素的父元素

    $("#id").parents("ul");  //用于返回被选元素的所有祖元素,一直到html根元素   可以接受一个参数,用于过滤对祖先元素的筛选

    如上,返回被选id元素的祖元素当中的ul元素

    $("#id").parentuntil("div");  //用于返回两个给定元素之间的所有元素

    $("#id").children();   //用于返回被选元素的所有直接子元素,不会返回孙元素

    $("#id").find("*");  //用于返回被选元素的所有后代元素  可以接受一个参数,参数是什么,就返回被选元素的所有后代的这个参数的元素

    $("#id").siblings("p");   //用于返回被选元素的所有同胞兄弟元素  可以接受一个参数,用来过滤其他元素

    如上,返回被选元素的所有兄弟p元素

    $("#id").next();  //用于返回被选元素的下一个兄弟元素

    $("#id").nextAll();  //用于返回被选元素之后的所有兄弟元素

    $("#id").nextuntil("#id");  //用于返回被选元素与参数之间的所有兄弟元素

    jQuery prev(), prevAll() & prevUntil() 方法   

    prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

    jquery过滤

    三个最基本的方法

    $("#id p").first();   //返回被选元素当中的第一个p元素

    $("#id p").last();  //返回被选元素当中的最后一个p元素

    $("p").eq(2);  // 参数为 索引值   返回html里面被选元素索引值为3的元素

    $("p").filter("#id");  //允许你放入一个参数,返回的是被选元素中带有这个参数的所有元素

    如上,返回被选元素中带有#id的所有元素

    $("p").not("#id");  //允许你放入一个参数,返回的是被选元素中所有不带有这个参数的所有元素

    如上,返回被选元素中不带有#id的所有元素

    相关文章

      网友评论

          本文标题:jquery的各种DOM操作

          本文链接:https://www.haomeiwen.com/subject/kjepwttx.html