zoukankan      html  css  js  c++  java
  • jQuery

    一、jQuery语法

    基础语法: $(selector).action()


    二、jQuery选择器

    元素选择器、#id选择器、.class选择器

    实例
    $("*"): 选取所有元素
    $(this): 选取当前 HTML 元素
    $("p.intro"): 选取 class 为 intro 的 <p> 元素
    $("p:first"): 选取第一个 <p> 元素
    $("ul li:first"): 选取第一个 <ul> 元素的第一个 <li> 元素
    $("ul li:first-child"): 选取每个 <ul> 元素的第一个 <li> 元素
    $("[href]"): 选取带有 href 属性的元素
    $("a[target='_blank']"): 选取所有 target 属性值等于 "_blank" 的 <a> 元素
    $("a[target!='_blank']"): 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
    $(":button"): 选取所有 type="button" 的 <input> 元素 和 <button> 元素
    $("tr:even"): 选取偶数位置的 <tr> 元素
    $("tr:odd"): 选取奇数位置的 <tr> 元素


    三、jQuery事件

    (1)语法

    $("p").click(function(){
    // 动作触发后执行的代码!!
    });


    (2)常见DOM事件

    鼠标事件        键盘事件       表单事件    文档/窗口事件
    lick keypress submit load dblclick keydown    change resize mouseenter keyup    focus scroll mouseleave    blur unload

    四、jQuery效果


    (1)隐藏和显示

    语法:

    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    切换hide()和show()方法:$(selector).toggle(speed,callback);

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

    (2)淡入淡出

    fadeIn() 方法用于淡入已隐藏的元素:$(selector).fadeIn(speed,callback);

    fadeOut() 方法用于淡出可见元素:$(selector).fadeOut(speed,callback);

    fadeToggle() 方法用于在 fadeIn() 与 fadeOut() 方法之间进行切换:$(selector).fadeToggle(speed,callback);

    fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间):$(selector).fadeTo(speed,opacity,callback);

    (3)滑动

    slideDown() 方法用于向下滑动元素:$(selector).slideDown(speed,callback);

    slideUp() 方法用于向上滑动元素:$(selector).slideUp(speed,callback);

    slideToggle() 方法用于在 slideDown() 与 slideUp() 方法之间进行切换:$(selector).slideToggle(speed,callback);

    (4)动画

    animate() 方法用于创建自定义动画:$(selector).animate({params},speed,callback);

    必需的 params 参数定义形成动画的 CSS 属性。
    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
    可选的 callback 参数是动画完成后所执行的函数名称。

    注意:可以定义相对值(该值相对于元素的当前值),需要在值的前面加上 += 或 -=;

              可以把属性的动画值设置为 "show"、"hide" 或 "toggle";

              默认地,jQuery 提供针对动画的队列功能。

    (5)停止动画

    stop() 方法用于在它们完成之前停止动画或效果:$(selector).stop(stopAll,goToEnd);
    可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
    可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

    (6)Callback方法

    Callback 函数在当前动画 100% 完成之后执行。

    //使用 callback 实例

    $("button").click(function(){ $("p").hide("slow",function(){ alert("段落现在被隐藏了"); }); });
    //没有 callback(回调)

    $("button").click(function(){ $("p").hide(1000); alert("段落现在被隐藏了"); });


    (7)链
    Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。

    //"p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动:

    $("#p1").css("color","red").slideUp(2000).slideDown(2000);


    五、HTML

    (1)捕获

    获得内容 -- text()、html() 以及 val()

    text() - 设置或返回所选元素的文本内容
    html() - 设置或返回所选元素的内容(包括 HTML 标记)
    val() - 设置或返回表单字段的值
    获取属性 -- attr()


    (2)设置

    设置内容 -- text()、html() 以及 val()

    text() - 设置或返回所选元素的文本内容
    html() - 设置或返回所选元素的内容(包括 HTML 标记)
    val() - 设置或返回表单字段的值
    text()、html() 以及 val() 的回调函数
    回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
    设置属性 -- attr()

    (3)添加元素

    添加新的 HTML 内容

    append() - 在被选元素的结尾插入内容
    prepend() - 在被选元素的开头插入内容
    after() - 在被选元素之后插入内容
    before() - 在被选元素之前插入内容


    (4)删除元素
    remove() - 删除被选元素(及其子元素)
    empty() - 从被选元素中删除子元素


    (5)CSS类
    addClass() - 向被选元素添加一个或多个类
    removeClass() - 从被选元素删除一个或多个类
    toggleClass() - 对被选元素进行添加/删除类的切换操作
    css() - 设置或返回样式属性


    (6)css() 方法

    返回 CSS 属性:css("propertyname");
    设置 CSS 属性:css("propertyname","value");

    设置多个 CSS 属性:css({"propertyname":"value","propertyname":"value",...});

    (7)尺寸

    jQuery 尺寸方法:width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight()


    六、遍历

    (1)祖先

    parent() 方法:返回被选元素的直接父元素。

    parents() 方法:返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。

    parentsUntil() 方法:返回介于两个给定元素之间的所有祖先元素。

    (2)后代

    children() 方法:返回被选元素的所有直接子元素。

    find() 方法:返回被选元素的后代元素,一路向下直到最后一个后代。

    (3)同胞

    siblings() 方法:返回被选元素的所有同胞元素。

    next() 方法:返回被选元素的下一个同胞元素。

    nextAll() 方法:返回被选元素的所有跟随的同胞元素。

    nextUntil() 方法:返回介于两个给定参数之间的所有跟随的同胞元素。

    prev(), prevAll() 以及 prevUntil() 方法:工作方式与上面的方法类似,只不过方向相反而已,它们返回的是前面的同胞元素。

    (4)过滤

    first() 方法:返回被选元素的首个元素。

    last() 方法:返回被选元素的最后一个元素。

    eq() 方法:返回被选元素中带有指定索引号的元素。

    filter() 方法:允许您规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

    not() 方法:返回不匹配标准的所有元素。


    七、Ajax

    (1)load()方法

    load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
    语法: $(selector).load(URL,data,callback);
    必需的 URL 参数规定您希望加载的 URL。
    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
    可选的 callback 参数是 load() 方法完成后所执行的函数名称。

    回调函数可以设置不同的参数:

    responseTxt - 包含调用成功时的结果内容
    statusTXT - 包含调用的状态
    xhr - 包含 XMLHttpRequest 对象


    (2)get()/post()方法
    get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

    $.get() 方法通过 HTTP GET 请求从服务器上请求数据。
    语法: $.get(URL,callback);
    必需的 URL 参数规定您希望请求的 URL。
    可选的 callback 参数是请求成功后所执行的函数名。

    $.post() 方法通过 HTTP POST 请求从服务器上请求数据。
    语法:  $.post(URL,data,callback);
    必需的 URL 参数规定您希望请求的 URL。
    可选的 data 参数规定连同请求发送的数据。
    可选的 callback 参数是请求成功后所执行的函数名。


    ---------------------
    作者:木槿花开lalala
    来源:CSDN
    原文:https://blog.csdn.net/zl_best/article/details/54710425
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    JS中解析JSON。
    对不同浏览器实现图片旋转。
    FF和IE内容不透明,字体透明。
    C# 通过身份证查询出生日期
    C# v3微信 access token 过期处理的问题
    C# 微信v3退款
    codesmith生成java类
    IOS调用WCF服务,WCF服务器进行上传图片
    安装VS 2013遇到的问题,及解决方案
    接口,个人理解
  • 原文地址:https://www.cnblogs.com/Antwan-Dmy/p/10681008.html
Copyright © 2011-2022 走看看