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方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。





就算跌倒,也要豪迈的笑

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 712评论 0 3
  • jQuery 入口函数: $(function(){ // 执行代码 }); jQuery 选择器: 元素选择器 ...
    Hassd阅读 435评论 0 1
  • 一)jQuery九类选择器【参见jQueryAPI.chm手册】 目的:通过九类选择器,能定位web页面(HTML...
    奋斗的老王阅读 1,071评论 0 51
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,492评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,260评论 0 1

友情链接更多精彩内容