JQuery容易被忽略的知识点,看看你不知道的有多少

发布时间:2018-06-29作者:laosun阅读(663)

JQuery容易被忽略的知识点,看看你不知道的有多少

    JQuery,简单易学的JavaScript库,大伙们应该不陌生吧,但越简单的东西,很多东西越容易被忽视掉。

    下面介绍一些JQuery中往往容易被忽视的知识点(文章不会全方面介绍JQuery,以下大部分知识,大家平常都用的相对较少,但却不可忽视)~

    0、js/jQuery入口函数

    $(function() {

    });

    $(document).ready(function() {

    });

    的简写形式

    js入口:

    window.onload = function() {

    }

    1、隐藏/显示/隐藏显示切换

    // 隐藏、显示

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

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

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

    // 淡入、淡出

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

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

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

    $(selector).fadeTo(speed, opacity callback); // 第2个参数为透明值,透明值从1渐变到opacity

    // 滑入、滑出

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

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

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

    重点在于方法里面的2个参数:

    speed:显示/隐藏速度,填入毫秒数,有一种动画的效果

    callback:执行完后,回调的函数(输入需要回调的函数名称,不要加括号)

    JQuery容易被忽略的知识点,看看你不知道的有多少


    JQuery容易被忽略的知识点,看看你不知道的有多少


    JQuery容易被忽略的知识点,看看你不知道的有多少


    2、动画:

    // 动画

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

    // 停止动画,在播放动画的途中,可以停止动画

    $(selector).stop();

    params:形成动画的CSS属性,例如:{left: "100px", top: "100px"}

    speed:动画的时间

    callback:回调函数

    JQuery容易被忽略的知识点,看看你不知道的有多少


    3、JQuery链:

    一般我们是一次写一条jquery语句,jquery里面有一种“链”,在相同的元素下,运行多条命令

    如:$(selector).hide(1000).show(1000);

    优点:浏览器就不必多次查找相同的元素了

    4、元素属性的设置与读取

    // 获取属性值

    $(selector).attr(属性名称);

    // 设置属性值

    $(selector).attr(属性名称, 属性值);

    例如:

    $(selector).attr({

    "href":"baidu.com",

    "title": "哇咔咔"

    });

    5、添加元素:

    append() - 在被选元素的结尾插入内容

    prepend() - 在被选元素的开头插入内容

    after() - 在被选元素之后插入内容

    before() - 在被选元素之前插入内容

    例如:

    $(selector).append(txt1, txt2, txt3);

    6、删除元素:

    remove() - 删除被选元素(及其子元素)

    remove(过滤规则) - 删除指定的元素

    empty() - 从被选元素中删除子元素

    例如:

    $(selector).remove();

    $(selector).empty();

    // 删除选中的所有p元素中class=‘tmp’的元素们

    $("p").remove(".tmp");

    7、CSS类:

    addClass() - 向被选元素添加一个或多个类

    removeClass() - 从被选元素删除一个或多个类

    toggleClass() - 对被选元素进行添加/删除类的切换操作

    css() - 设置或返回样式属性

    其中的参数都是css样式名称,如:

    addClass("myColor1 myColor2");

    $(selector).css({

    "width": "100px",

    "height": "100px"

    });

    8、元素尺寸的计算方式:

    补充:

    $(selector).offset().top - 上边距

    $(selector).offset().bottom - 下边距

    $(selector).offset().left - 左边距

    $(selector).offset().right - 右边距

    JQuery容易被忽略的知识点,看看你不知道的有多少


    9、祖先/后代/同胞

    parent() - 直接父元素

    parents([x]) - 所有父元素,参数可选(加入参数,可以过滤想要的父元素)

    parentsUntil([x]) - 返回2个元素之间的所有父元素,参数可选(不加入参数,默认和parents功能一样)

    children([x]) - 返回所有直接子元素,参数可选(加入参数,可以过滤想要的子元素)

    find(x) - 通过参数,查找给定的元素,参数必须

    siblings([x]) - 所有同胞元素(在同一级的所有元素),参数可选(加入参数,可以过滤想要的同胞元素)

    next() - 下一个同胞元素

    nextAll([x]) - 跟随其后的是所有同胞元素

    nextUntil([x]) - 介于2个元素之间的所有元素

    prev() - 同上

    prevAll([x]) - 同上

    prevUntil([x]) - 同上

    例如:

    $(selector).parents("p"); // 返回所有父元素中p节点元素

    $("#div").parentsUtil("#div1"); // 返回id=div与id=div1之间的所有父元素

    10、过滤:

    first()

    last()

    eq(x) - 选取第x + 1个元素(下表从0开始)

    filter(x) - 根据参数,过滤想要的元素

    not(x) - filter(x)返回结果相反

    例如:

    $("p").filter(".url");


0 +1

版权声明

 jquery  前端

 请文明留言

0 条评论