美文网首页
jQuery----操作、效果

jQuery----操作、效果

作者: 忆往昔04551 | 来源:发表于2018-06-25 19:46 被阅读0次

    jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。

    jquery属性操作:

    1、html() 取出或设置html内容

                      取出html内容         var $htm = $('#div1').html();

                      设置html内容          $('#div1').html('添加文字');

    2、text()取出或设置text内容

                      取出文本内容          var $htm = $('#div1').text();

                      设置文本内容          $('#div1').text('添加文字');

    3、attr()取出或设置某个属性的值

                      取出图片的地址                 var $src = $('#img1').attr('src');

                    设置图片的地址和alt属性               $('#img1').attr({ src: "test.jpg", alt: "Test Image" });

    给元素绑定click事件,可以用如下方法:

                $('#btn1').click(function(){

                            内部的this指的是原生对象

                            使用jquery对象用 $(this)  })

    特殊效果:            

                                    fadeOut()                淡出

                                    fadeToggle()           切换淡入淡出

                                    hide()                      隐藏元素

                                    show()                     显示元素

                                    toggle()                    依次展示或隐藏某个元素

                                    slideDown()             向下展开

                                    slideUp()                  向上卷起

                                    slideToggle()            依次展开或卷起某个元素

    jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:

    $('#div1')                        id为div1的元素

    .children('ul')                  该元素下面的ul子元素

    .slideDown('fast')           高度从零变到实际高度来显示ul元素

    .parent()                        跳到ul的父元素,也就是id为div1的元素

    .siblings()                       跳到div1元素平级的所有兄弟元素

    .children('ul')                   这些兄弟元素中的ul子元素

    .slideUp('fast');                高度实际高度变换到零来隐藏ul元素

    通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。

    就算跌倒,也要豪迈的笑

    相关文章

      网友评论

          本文标题:jQuery----操作、效果

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