jQuery学习总结-----2017/12/20


一、选择网页元素

选择表达式可以是CSS选择器:

$(document)//选择整个文档对象

$('#myId')//选择ID为myId的网页元素

$('div.myClass')//选择class为myClass的div元素

$('input[name=first]')//选择name属性等于first的input元素

也可以是jQuery特有的表达式:

$('a:first')//选择网页中第一个a元素

$('tr:odd')//选择表格的奇数行

$('#myForm :input')//选择表单中的input元素

$('div:visible') //选择可见的div元素

$('div:gt(2)')//选择所有的div元素,除了前三个

$('div:animated')//选择当前处于动画状态的div元素



二、改变结果集

如果选中多个元素,jQuery提供过滤器,可以缩小结果集:

* $('div').has('p'); //选择包含p元素的div元素

* $('div').not('.myClass'); //选择class不等于myClass的div元素

* $('div').filter('.myClass'); //选择class等于myClass的div元素

* $('div').first(); //选择第1个div元素

* $('div').eq(5); //选择第6个div元素

有时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法:

$('div').next('p'); //选择div元素后面的第一个p元素

$('div').parent(); //选择div元素的父元素

$('div').closest('form'); //选择离div最近的那个form父元素

$('div').children(); //选择div的所有子元素

$('div').siblings(); //选择div的同级元素



三.jQuery 效果 - 淡入淡出

1.jQuery fadeIn() 用于淡入已隐藏的元素。

$(selector).fadeIn(speed,callback);

2.jQuery fadeOut() 方法用于淡出可见元素。

$(selector).fadeOut(speed,callback);

3.jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

4.jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。可选的 callback 参数是该函数完成后所执行的函数名称。



四.jQuery 效果 - 滑动

jQuery 拥有以下滑动方法:

    1.slideDown()

$(selector).slideDown(speed,callback);

    2.slideUp()

$(selector).slideUp(speed,callback);

    3.slideToggle()

$(selector).slideToggle(speed,callback);



五.jQuery 效果 - 动画

    jQuery animate() 方法允许您创建自定义的动画。

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

        $("div").animate({

                left:'250px',

                opacity:'0.5',

                height:'150px',

                width:'150px'

        });

    });



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、选择网页元素 选择表达式可以是CSS选择器: $(document)//选择整个文档对象 $('#myId')...
    孤魂草阅读 367评论 0 1
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 747评论 0 9
  • 【目录】 一、选择网页元素 二、改变结果集 三、链式操作 四、元素的操作:取值和赋值 五、元素的操作:移动 六、元...
    L怪丫头阅读 289评论 0 1
  • 作为前端和后台最基础可靠的神器工具JQuery,你真的对她有足够了解么? 亚非拉地区苦逼的前端er们,有时候不得不...
    扭了个妞阅读 385评论 0 0
  • 喜欢,是最苍白无力的理由。尽管很无力,但能成为一切行动的理由。但作为结果,喜欢又是最难的。 喜欢需要理由吗?不需要...
    YouthKeepQuesti阅读 2,149评论 1 0