jquery使用效果

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使用效果)