• jquery


    jquery

    jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。

    特点

    1. 动态特效
    2. AJAX
    3. 通过插件来扩展
    4. 方便的工具 - 例如浏览器版本判断
    5. 渐进增强
    6. 链式调用
    7. 多浏览器支持,支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+(在2.0.0中取消了对Internet Explorer6,7,8的支持)

    动态特效

    较快速度的淡入

    $("#msg").show("fast");

    较慢速度的淡出

    $("#msg").hide("slow");

    淡入淡出

    $("#msg").fadeIn();

    $("#msg").fadeOut();

    带参数的淡入淡出

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

    可选的 speed 参数规定效果的时长它可以取以下值:"slow"、"fast" 或毫秒

    可选的 callback 参数是 fading 完成后所执行的函数名称

    滑动

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

    可选的 speed 参数规定效果的时长它可以取以下值:"slow"、"fast" 或毫秒

    可选的 callback 参数是滑动完成后所执行的函数名称

    动画

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

    必需的 params 参数定义形成动画的 CSS 属性

    可选的 speed 参数规定效果的时长它可以取以下值:"slow"、"fast" 或毫秒

    可选的 callback 参数是动画完成后所执行的函数名称

    遍历函数

    jquery提供了很多遍历的函数如each(fn)但是使用这些函数的前提是:你使用的对象是jquery对象使一个Dom对象成为一个jquery对象很简单通过下面一些方式(只是一部分):

    代码

    var a = $("#cid");

    var b = $("<p>hello</p>");

    var c = document.createElement("table");

    var tb = $(c);

    实例:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <div id="div1">
    <div>11111111</div>
    <div>22222222222</div>
    <div>333333333333
    <div id="div31">313131313131</div><span>323232</span>
    <div>3232323232</div>
    </div>
    </div>
    <input type="text" size="100"/>
    <br/>
    <button onclick="getinfo()">获取子元素</button>


    <script src="js/jquery-1.12.2.min.js"></script>
    <script>

    function getinfo(){
    // next 找兄弟元素
    // $("input[type='text']").val($("div").next().length);
    $("div").next().each(function(i){
    alert(i+"====="+this.innerHTML);
    });

    //找子元素
    // $("input[type='text']").val($('div div').length); // 4
    // $("input[type='text']").val($('#div1>div').length); // 3
    // $("input[type='text']").val($('#div1').children('div').length); // 3

    // 通过子元素来找父元素
    // $("input[type='text']").val($("#div31").parent().html());
    // $("input[type='text']").val($("#div31").parents().html());

    // 匹配含有子元素或者文本的元素
    // $("input[type='text']").val($('#div31:parent').html());
    }

    // jQuery ====> $
    // var obody = document.body; // js下DOM元素
    // var jqbody = $(obody); // 将DOM元素转换为jQuery的对象
    // jqbody = $("body");



    </script>
    </body>
    </html>
  • 相关阅读:
    STL
    STL
    Python编程-基础知识-条件判断
    STL
    springmvc 自定义注解
    Springboot 入口类及其实现自动配置的原理
    Java RestTemplate post请求传递参数遇到的坑
    Spring中@Autowire的底层原理解析(附详细源码阅读步骤)
    非常详细的SpringBoot-自动装配原理
    为何一个@LoadBalanced注解就能让RestTemplate拥有负载均衡的能力?
  • 原文地址:https://www.cnblogs.com/lxy1023-/p/6573223.html
Copyright © 2020-2023  润新知