jQuery---文档操作

82550495 2020-02-20 

一、相关知识点总结1、CSS    .css()      - .css("color")  -> 获取color css值      - .css("color", "#ff0000") -> 设置值      - .css({"color": "#cccccc", "border": "1px solid #ff0000"})  -> 设置多个值      - .css(["color", "border"])  -> 获取多个值   .offset       - 获取相对位置       - 比较的对象是html (窗口)   .position        - 获取相对已经定位的父标签的位置        - 比较的是最近的那个做过定位的祖先标签   .scrollTop([val])      - 返回顶部的例子   .scrollLeft([val])   尺寸：    height([val|fn])      - 元素的高度   width([val|fn])       - 元素的宽度   innerHeight()      - 带padding的高度   innerWidth()       - 带padding的宽度   outerHeight([soptions])      - 在innerHeight的基础上再加border的高度   outerWidth([options])       - 在innerHeight的基础上再加border的高度2、文档操作内部插入    A.append(B)       吧B添加到A的后面    A.appendTo(B)     吧A添加到B的后面    A.prepend(B)      吧B添加到A的前面    A.prependTo(B)    吧A添加到B的前面外部插入    A.after(B)        吧B添加到A的后面    A.insertAfter(B)  吧A添加到B的后面    A.before(B)       吧B添加到A的前面    A.insertBefore(B) 吧A添加到B的前面    包裹    wrap(html|ele|fn)      A.wrap(B)  --> B包A   unwrap()   不抱      - 不要加参数   wrapAll(html|ele)  都包(作为整体包)，只包你选中的那个   wrapInner(html|ele|fn)  里面包    替换    replaceWith(content|fn)      A.replaceWith(B)  --> B替换A   replaceAll(selector)      A.replaceAll(B)   --> A替换B    删除    empty()      - 清空 内部清空   remove([expr])      - 删除 整体都删除   detach([expr])      - 剪切  多保存在变量中，方便再次使用    克隆/复制    clone([Even[,deepEven]])3、动画基本   show([s,[e],[fn]])   hide([s,[e],[fn]])   toggle([s],[e],[fn])滑动   slideDown([s],[e],[fn])   slideUp([s,[e],[fn]])   slideToggle([s],[e],[fn])淡入淡出   fadeIn([s],[e],[fn])   fadeOut([s],[e],[fn])   fadeTo([[s],o,[e],[fn]])      - 淡出到0.66透明度   fadeToggle([s,[e],[fn]])      - .fadeToggle(3000, function () {            alert("真没用3");        });自定义animate(p,[s],[e],[fn])1.8*   - css属性值都可以设置    - 图片变小（漏气）4. 事件处理   之前绑定事件的方式：      1. onclick=clickMe();  function clickMe() {}      2. ele.onclick = function(){}      3. ele.addEventListener("click", function(){})  js事件委派   jQuery绑定事件的方式：      1. $(ele).on("click", function(){})      2. $("tbody").delegate(".btn-warning", "click", function(){})  这个3.几的版本没有这个方法了，这是3.几以前版本有的方法      3. $("tbody").on("click",".btn-warning",function(){})  jQuery的事件委派二、图片详述（1）offset 和 postion

jQuery---文档操作

（2）innerwrap   和  wrap 和  warpAll

jQuery---文档操作

jQuery---文档操作

jQuery---文档操作

 （3）克隆

jQuery---文档操作

（4）empty 和 remove 

jQuery---文档操作

（5）牛逼的操作

jQuery---文档操作

（6）取消Bootstrap默认提示

jQuery---文档操作

三、具体代码实现

1、返回首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回首页</title>
</head>
<style>
    .c1{
        height: 100px;
    }
    button{
        position: fixed;
        right: 15px;
        bottom: 15px;
        background-color: #336699;
    }
    .hide{
        display: none;
    }
</style>

<body>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<div class="c1">5</div>
<div class="c1">6</div>
<div class="c1">7</div>
<div class="c1">8</div>
<div class="c1">9</div>
<div class="c1">10</div>
<div class="c1">11</div>
<div class="c1">12</div>
<div class="c1">13</div>
<div class="c1">14</div>
<div class="c1">15</div>
<div class="c1">16</div>
<div class="c1">17</div>
<div class="c1">18</div>
<div class="c1">19</div>
<div class="c1">20</div>
<div class="c1">21</div>
<div class="c1">22</div>
<div class="c1">23</div>
<div class="c1">24</div>
<div class="c1">25</div>
<div class="c1">26</div>
<div class="c1">27</div>
<div class="c1">28</div>
<div class="c1">29</div>
<div class="c1">30</div>
<div class="c1">31</div>
<div class="c1">32</div>
<div class="c1">33</div>
<div class="c1">34</div>
<div class="c1">35</div>
<div class="c1">36</div>
<div class="c1">37</div>
<div class="c1">38</div>
<div class="c1">39</div>
<div class="c1">40</div>
<div class="c1">41</div>
<div class="c1">42</div>
<div class="c1">43</div>
<div class="c1">44</div>
<div class="c1">45</div>
<div class="c1">46</div>
<div class="c1">47</div>
<div class="c1">48</div>
<div class="c1">49</div>
<div class="c1">50</div>
<div class="c1">51</div>
<div class="c1">52</div>
<div class="c1">53</div>
<div class="c1">54</div>
<div class="c1">55</div>
<div class="c1">56</div>
<div class="c1">57</div>
<div class="c1">58</div>
<div class="c1">59</div>
<div class="c1">60</div>
<div class="c1">61</div>
<div class="c1">62</div>
<div class="c1">63</div>
<div class="c1">64</div>
<div class="c1">65</div>
<div class="c1">66</div>
<div class="c1">67</div>
<div class="c1">68</div>
<div class="c1">69</div>
<div class="c1">70</div>
<div class="c1">71</div>
<div class="c1">72</div>
<div class="c1">73</div>
<div class="c1">74</div>
<div class="c1">75</div>
<div class="c1">76</div>
<div class="c1">77</div>
<div class="c1">78</div>
<div class="c1">79</div>
<div class="c1">80</div>
<div class="c1">81</div>
<div class="c1">82</div>
<div class="c1">83</div>
<div class="c1">84</div>
<div class="c1">85</div>
<div class="c1">86</div>
<div class="c1">87</div>
<div class="c1">88</div>
<div class="c1">89</div>
<div class="c1">90</div>
<div class="c1">91</div>
<div class="c1">92</div>
<div class="c1">93</div>
<div class="c1">94</div>
<div class="c1">95</div>
<div class="c1">96</div>
<div class="c1">97</div>
<div class="c1">98</div>
<div class="c1">99</div>
<div class="c1">100</div>
<button class="hide">返回顶部</button>
<button class="cc hide">返回底部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $(":button").on("click",function () {
        $(window).scrollTop(0);// 给一个滚动条位置
//        $(window).scrollTop(500)
    });
    $(window).scroll(function () {
        //滚动的时候做的操作
        if ($(window).scrollTop()>100){
            $(":button").removeClass("hide")
        }
        else{
            $(":button").addClass("hide")
        }
    });

</script>
</body>
</html>

返回首页示例

2，查看尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尺寸</title>
    <style>
        .c1{
            height: 100px;
            width: 80px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
//  没设置前
    console.log($(".c1").height);
    console.log($(".c1").width);
    console.log($(".c1").innerHeight()); //100
//  设置后   innerHeight()
    $(".c1").css("padding","20px");
    console.log($(".c1").innerHeight()); //140(自己的高度+padding(内边距)
    console.log($(".c1").innerWidth()); //120(自己的高度+padding(内边距)

//  测试margin
     $(".c1").css("margin","20px"); //和外边距没有关系，高度还是140
     console.log($(".c1").innerHeight());

//  outerHeight()
    console.log($(".c1").outerHeight()); //140(自己的高度+padding(内边距)
    $(".c1").css("border","10px solid yellow")//120(自己的高度+padding(内边距)
    console.log($(".c1").outerHeight()); //160(自己的高度+padding(内边距)+border的宽度

//  测试margin
     $(".c1").css("margin","30px"); //和外边距没有关系，高度还是160
     console.log($(".c1").outerHeight());


</script>
</body>
</html>

尺寸测试

3，CSS示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css示例</title>
</head>
<style>
    .c2{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        top: 50px;
        left: 50px;
    }
    .c3{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        position: absolute;
        left: 100px;
        top: 100px;

    }
</style>
<body>
<div class="c1">你好那？</div>
<div class="c4">哎呦歪</div>
<div class="c2">
    <div class="c3"></div>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
//  1、  .css()
    $(".c1").css("color","#336699");//找到标签，设置单个样式
    console.log($(".c1").css("color"));//获取color css值
    $(".c4").css({"color":"red","border":"1px solid green","font-size":"20px"});//设置多个样式
    console.log($(".c4").css(["color","border","font-size"]))
//    2、offset
    console.log($(".c2").offset());
    console.log($(".c2").offset().left);
    console.log($(".c2").offset().top);

    console.log($(".c3").offset()); //{top: 107, left: 58}
    console.log($(".c3").position());//{top: 100, left: 100}

</script>
</body>
</html>

CSS相关操作

4，文档操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档操作</title>
</head>
<ul id="u1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<p>苍茫的大海是我的哎</p>
<ul id="u2">
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
    <li>第四章</li>
</ul>
<body>
<script src="jquery-3.2.1.min.js"></script>
<script>
//    在内部插入
//      append：往后添加
    $("#u1").append("<li>456</li>");
    var li =document.createElement("li");
    $(li).text(666);
    $(li).appendTo($("#u1"));
    $("#u1>li:first").appendTo($("#u1")); //吧第一个添加到这个列表中。注意是挪动，不是复制
    $("#u1>li:last").appendTo($("#u1"));
//      prepend ：往前添加
    $("#u2").prepend("<li>啦啦啦</li>");  //吧啦啦啦添加到列表的前面

    var tem = document.createElement("li");
    tem.innerText = "哗啦啦。呼啦啦";
    $(tem).prependTo($("#u2")) ;//吧啦啦啦添加到列表里（先创建）

//    在外部插入
//    after
    $("#u2").after("<div>哈啊好好</div>");  //在列表的后面插入

    var tem = document.createElement("div");
    $(tem).text("哎哎呀");
    $(tem).css("color","red");
    $(tem).insertAfter($("#u2"));  //插入到列表的后面
//    before
    $("#u2").before("<div>111</div>");  //在列表的前面插入

    var tem = document.createElement("div");
    $(tem).text("six");
    $(tem).css("color","blue");
    $(tem).insertBefore($("#u2"))  //插入到列表的后面

//    包裹
// wrap和unwrap
    var tem = document.createElement("div");
    $(tem).css("border","1px solid #ff0000");
    $("#u1").wrap($(tem));  //让tem吧列表包起来
    $("#u1").unwrap() ;//不包，不需要加参数
//    wrapAll和wrap和wrapInner
    var tem = document.createElement("div");
    $(tem).css("border","1px solid yellow");
    $("ul").wrapAll($(tem)); //都包
    $("ul").wrap($(tem)); //单个包
    $("ul").wrapInner($(tem));//里面包

//    替换
//    replaceWith和replaceAll
    $("ul").replaceWith("<p>你愁啥？<p>") ;//吧所有的列表替换成你愁啥？

    var ele = document.createElement("p");
    $(ele).text("你愁啥？");
    $(ele).replaceAll($("ul"));

//    删除
    $("ul:first").empty() ;//吧第一个ul清空
    $("ul>li:first").empty() ;//只是清空内容
    $("ul>li:last").remove();//都清空

      var a = $("#u1>li:first").detach();  //删除以后还保留着，可以再次使用
      a.appendTo($("#u1"))
</script>
</body>
</html>

文档操作

5，克隆复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>克隆</title>
</head>
<body>
<button class="c1">点我点我</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $(".c1").on("click",function () {
        $(this).clone(true).insertAfter($(this))
    })
</script>
</body>
</html>

6，动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<img src="z.png" alt="">
<script src="jquery-3.2.1.min.js"></script>
<button class="c1">召唤</button>
<button class="c2">淡出</button>
<button class="c3">淡入</button>
<button class="c4">淡出到0.66透明度</button>
<button class="c5">淡入淡出</button>
<button class="c6">动画:图片变小</button>
<script>
    $(".c1").on("click",function () {
//        $("img").hide();
//        $("img").show();
        $("img").toggle();
    });

//    淡出
    $(".c2").on("click",function () {
        $("img").fadeOut();
        $("img").fadeOut("fast"); //快速的淡出
    });
//    淡入
    $(".c3").on("click",function () {
//        增加淡入的时间
        $("img").fadeIn(3000,function () {
//            alert(123)
        });
    });
//    淡出到0.66透明度
    $(".c4").on("click",function () {
        $("img").fadeTo(3000,0.66,function () {
//            alert(123)
        })
    });
//    淡入淡出
    $(".c5").on("click",function () {
        $("img").fadeToggle(3000,function () {
//            alert(123)
        })
    })
//    动画-图片变小
    $(".c6").on("click",function () {
        $("img").animate(
            {
                width:"80px",
                height:"80px"
            },3000,function () {
                //这是一个回调函数
                alert(123)
            }
        )
    })
</script>
</body>
</html>

动画效果
82550495

82550495

相关推荐

2020-8-15 Python语言基础3：函数、面向对象、异常处理

# - 对象是内存中专门用来存储数据的一块区域。# - 函数名必须要符号标识符的规范。# - 函数中保存的代码不会立即执行，需要调用函数代码才会执行。# 比如有如下三行代码，这三行代码是一个完整的功能。# fn是函数对象 fn()调用函数。# 定义函数时

kevinweijc / 0评论 2020-08-18

三种注册事件方式的封装

//判断当前浏览器是否能支持addEventListener方法,ie9以下不支持。//传统流事件注册，兼容性好，但是无方法监听效果。//解绑事件，使事件只触发一次

ELEMENTS爱乐小超 / 0评论 2020-07-04

JS原型对象操作实例分析

本文实例讲述了JS原型对象操作。分享给大家供大家参考，具体如下：。打开浏览器，输入fn，会发现fn有一个prototype(原型)属性，这个属性是一个指针，指向原型对象，这个对象包括了特定类型所有共享的属性和方法。换句话说，prototype对象包含了函数

xiaoge00 / 0评论 2020-06-14

Golang源码学习：调度逻辑（二）main goroutine的创建

接上一篇继续分析一下runtime.newproc方法。siz是传入的参数大小；fn对应的是函数，但并不是函数指针，funcval.fn才是真正指向函数代码的指针。在golang中编译器会把类似 go foo() 编译成调用 runtime.newproc

free0day / 0评论 2020-05-25

python 装饰器

print #日志输出到控制台。上面的加法函数是完成了需求，但是有以下的缺点：。　　打印日志信息是一个功能，这条语句和 add 函数耦合太高；下面代码做到了业务功能分离，但是 fn 函数调用传参是个问题：。解决了传参的问题，进一步改变：。ret = fn

cas的无名 / 0评论 2020-05-19

进阶 对传入的数据进行分类

[‘beep‘, ‘boop‘, ‘foo‘, ‘bar‘], lambda x: x[0] == ‘b‘

zxznsjdsj / 0评论 2020-05-03

python函数递归-实例

函数递归包含了一种隐式的循环，它会重复执行某段代码，但这种重复执行无须循环控制。例1.己知有一个数列：f = 1，f = 4，f = 2*f +f，其中 n 是大于 0 的整数，求 f 的值?所以我们的目的就是通过递归函数反复调用自身，直到将欲求函数的表达

hongxiangping / 0评论 2020-04-30

JC2：递推，递归与分治

定义：已知初始值F1，通过递推关系式Fn=g求出最终结果Fn的递推方式称为顺推法；同理，把已知最终结果为Fn，通过递推关系式Fn-1=g＇求出初始值F1的递推方式称为倒推法。

风吹夏天 / 0评论 2020-02-17

jquery事件参数和相关事件

处理事件冒泡 e.stopPropagation(); return false;2.one 和triggerone 一次性事件data不能是字符串trigger 触发指定类型事件 自动触发事件传递参数形式为[data]3.事件切换 hover

80437916 / 0评论 2020-02-15

0143 JavaScript预解析：概念、变量预解析、函数预解析、函数表达式声明函数问题

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。【提升到当前作用域的最顶部。【声明提前，赋值留在原地。console.log; // 结果是多少？

First00 / 0评论 2020-01-05

koa 洋葱模型

在这里面，app首先是调用了两次use，然后就开始监听端口，从上面可以看出这里将外部use的函数通过内部的一个middleware变量记录下来，然后就没了。OK，到这里我们知道当浏览器发送一个请求的时候，koa的application对象会根据middle

lert0 / 0评论 2019-11-19

Linux基础： 解密module_init幕后的故事

在Linux底下写过driver模块的对这个宏一定不会陌生。module_init宏在MODULE宏有没有定义的情况下展开的内容是不同的，如果这个宏没有定义，基本上表明阁下的模块是要编译进内核的。所以，module_init最终展开为：static ini

wwater / 0评论 2011-03-02

Rust点滴: 闭包那点事儿

我们常常需要回调函数的功能, 需要函数并不是在创建时执行, 而是以回调的方式, 在需要的时候延迟执行. 并且, 常常需要在函数中获取环境中的一些信息, 又不需要将其作为函数参数传入. 这种应用场景就需要闭包这一工具了.其中params表示向闭包中传递的参数

TianlangStudio / 0评论 2019-11-03

Linux 系统编程:几个宏定义

__init宏使内建模块中的init函数在执行完成后释放掉，仅用于初始化。编译器将所有代码存储到特殊的内存段中，初始化结束就释放这段内存。__initdata，和__init的作用基本上一样，不过它是针对数据。__exit和__exitdata 仅用于退出

wwater / 0评论 2011-11-20

jQuery延时绑定事件(lazy-bind)

"有个延时绑定事件的需求, 如等待鼠标停留在某图片上面一段时间之后才展示浮动层, 以避免鼠标滑过屏幕时一片乱闪. 一时找不到合适的插件, 所以自己写了个.// 定义(function($){ $.fn.lazybind = function(ev

zhanggang / 0评论 2019-09-26

jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部

webtouch页面，防苹果手机safari浏览器，网上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。因此只能判断滚动条是上滚下滚等。关于手机手势，后面的文章会介绍，欢迎关注！

dly / 0评论 2015-05-29

org.apache.maven.archiver.MavenArchiver.getManifest错误

3.按照安装提示，一直next，重启eclipse之后，执行maven-update project

Selier / 0评论 2018-08-25

win10更新定点设置后电脑Fn键失灵问题修复两种方法

好多升级win10电脑启动后不能输入密码，或进入后按键失灵，例如三星Q470、神舟优雅、神州精盾等品牌系列的WIN10情况下升级定点设置后，小键盘区与英文键重叠区失灵，必须按着FN+重叠区才能输入等问题的修复方法。下面小编就为大家介绍win10更新定点设置

做你的老王 / 0评论 2015-08-19

Fn键的几个小技巧

Mac键盘上的Fn键除了用来配合F1-F12实现一些特殊硬件功能外，还有几个比较少人知道的用处。大家有没有发现Mac的键盘没有Home, End, Page UP, Page DOWN这几个键？其实可以用Fn键来组合得到同样的功能：。呵呵，是不是用了很久m

KINGJENSEN / 0评论 2010-10-09

阅读 is-generator-function 源码

:function)?\*/可知。*fn() {},};if (!hasToStringTag) {. var str = toStr.call(fn);return str === '[object GeneratorFunction]';return

Awara / 0评论 2019-07-01

JQuery插件之$.fn

jQuery对象方法$("a").css;当使用$选择元素的时候，它会返回一个jQuery对象，这个对象中包含了你一直使用的方法。这个jQuery对象是从$.fn对象中得到的这些方法。使用这种方式编写插件，即jQuery类的实例将会拥有

人心 / 0评论 2019-07-01

理解deno-基础篇

它在内部嵌入了一个typescript的编译器。可以将typescript编译成js然后运行在v8上，并通过c++ libdeno实现js与rust的通信交互，当然deno也可以直接运行Javascript代码。let fn: number = 0, ne

chenjh / 0评论 2019-07-01

前端进击的巨人（五）：学会函数柯里化（curry)

柯里化写在开头柯里化理解的基础来源于我们前几篇文章构建的知识，如果还未能掌握闭包，建议回阅前文。代码例子会用到 apply/call ，一般用来实现对象冒充，例如字符串冒充数组对象，让字符串拥有数组的方法。在此先了解，两者功能相同，区别在于参数传递方式的不

RainyX / 0评论 2019-06-30

Golang的Redis客户端，支持单机，哨兵，集群

mode.MaxIdle, // 最多保持空闲连接数，默认2*runtime.GOMAXPROCS. redis.DialPassword(""), // 鉴权密码，默认空。redis.Di

尹小鱼 / 0评论 2019-06-30

js数据结构与算法--递归

// 15+30+45+60+75+90+fn => 15+30+45+60+75+90+01-10之间，把所有能被2整除的数获到，然后累加求和

风和日丽 / 0评论 2019-06-28

用 JavaScript 的方式理解递归

原文地址1. 递归是啥?递归概念很简单，“自己调用自己”。在分析递归之前，需要了解下 JavaScript 中“压栈” 概念。可以理解是在内存中某一块区域，这个区域比喻成一个箱子，你往箱子里放些东西，这动作就是压栈。在 JavaScript 中，调用函数时

王甲评 / 0评论 2019-06-28

clojure-基本语法-函数定义

"hello"简短的函数可以使用#()，%表示唯一的参数；%1、%2..表示第1、2、..个参数；%&表示所有参数，如下：。它的参数包括一个函数名字，一个可选的注释字符串，参数列表，然后一个方法体。而函数的返回值则是方法体里面最

Mybaby0 / 0评论 2013-03-12

jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()

软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能更好地组织我们的代码，并且从这些前人总结出来的模式中学到很多好的实践。第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动

Kindlecode / 0评论 2016-08-16

AngularJs 之service injection 根据参数名获取对象-源码分析

在Angular中，使用controller时，如果需要某service，只需要在参数中写上这个service的名称即可。那么是如何实现的呢？在javascript中是否有方法获取function的参数的名称的值？// fill an array with

涓涓溪流 / 0评论 2016-07-31

设置文本框失去焦点与获得焦点的样式（新）

发现好多人在找这个，之前的那个有点乱……看这个，直接引入Html即可。tipinput.value ="您可以输入公司名称/职位名称/公司特色等关键词进行搜索";}“tipinput"为input框的ID………………

水荷 / 0评论 2016-03-29

jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部

webtouch页面，防苹果手机safari浏览器，网上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。遇到问题1、我一开始用swipeup和swipedown来做，发现因为有滚动条，不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势，后

EdwardSiCong / 0评论 2015-05-30

理解JavaScript的单线程运行机制及setTimeout(fn,0)

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题

amyleeYMY / 0评论 2015-03-30

VUE - MVVM - part8 - 优化Event

看这篇之前，如果没有看过之前的文章，可拉到文章末尾查看之前的文章。回顾在上一步我们实现了一个简易的事件管理的类，接下来我们把它给优化下，方便我们的使用。方便为多个事件添加同一个函数方便为一个事件添加多个函数有针对性的取消事件的函数第一点和第二点都要修改 $

菲菲无敌 / 0评论 2019-06-27

【jquery】$.fn 与 $.fx 的却别

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。如扩展$.fn.abc()那么你可以这样子：$.abc(); 通常使用jQuery.extend方法扩展，详细请看API. $.fx是指jquery的特效。$.fx

杉林的HelloWord / 0评论 2014-07-12

jquery-$.fn详解

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。如扩展$.fn.myfnc(),即$.myfnc(),是对jquery扩展了一个myfnc方法,那么后面你的每一个jquery实例都可以引用这个方法了.那么你可以这

小仙儿 / 0评论 2014-01-09

jQuery的$.fn使用

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。那么你可以这样子：$.abc();通常使用extend方法扩展，详细请看API.如果使用显示、滑动、淡入淡出、动画等。$.fx.off可以关闭动画，其实是直接显示结

mapdigit / 0评论 2013-12-25

jQuery 中each()方法的讲解(转)

each()函数是基本上所有的框架都提供了的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理。而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。} } return obj;}需要特别注意的是each方法中fn的

83500391 / 0评论 2013-09-10

jquery $.fn $.fx是什么意思

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。那么你可以这样子：$.abc();通常使用extend方法扩展，详细请看API.如果使用显示、滑动、淡入淡出、动画等。jQuery.extend;为扩展jQuery

DevilPace / 0评论 2013-05-31

query $.fn $.fx是什么意思

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。那么你可以这样子：$.abc();通常使用extend方法扩展，详细请看API.如果使用显示、滑动、淡入淡出、动画等。$.fx.off可以关闭动画，其实是直接显示结

madanling / 0评论 2013-05-17

sea.js 小记

看目录结构，代码不算多，命名划分很清晰，仅看命名大概能猜到它的作用，比如require.js源码舒服多了。sea.js-定义sea.js的命名空间，在命名空间定义一些供内部适用的模块，达到分模块调试sea.js的目的

binglingnew / 0评论 2013-05-14

jquery $.fn $.fx extend和fn.extend

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。那么你可以这样子：$.abc();通常使用extend方法扩展，详细请看API.如果使用显示、滑动、淡入淡出、动画等。jQuery.extend; 为扩展jQuer

小仙儿 / 0评论 2012-12-19

不要过度依赖JQuery（三）

在这里先拜个年，祝大家新年快乐，阖家幸福，步步高升！回归正题，在不要过度依赖JQuery（一）和不要过度依赖JQuery（二）两篇文章中已经列举了大量的使用原生JavaScript替代JQuery的例子，在本文中将继续列举！

Jensony / 0评论 2019-06-21

jQuery 绑定事件及移除绑定事件方法和元素事件列表

ready;$.ready()注意在body中没有onload事件，否则该函数不能执行。在每个页面中可以有很多个函数被加载执行，按照fn的顺序来执行。bind为每一个匹配元素的特定事件绑定一个或多个事件处理器函数。可能的事件属性有：blur,focus,l

海欣海夜 / 0评论 2012-11-21

jquery $.fn 与 $.extend 的用法

$.fn 即原形对象给原形对象添加方法，每个jq实例都可以调用。

堇年 / 0评论 2019-06-21

Promise学习笔记(三):源码core.js解析(上)

源码阅读阶段先理解Promise根本吧,想快点理解的话可以直接跳到下个标题.这部分根据理解将持续修改.空函数,用于判断传入Promise构造器的函数是否为空函数,如果为空函数构造一个promise对象并初始化状态为pending,终值null,回调状态0和

84563376 / 0评论 2019-06-20

(二)jquery总结：Event

ready;$.ready()注意在body中没有onload事件，否则该函数不能执行。在每个页面中可以。bind为每一个匹配元素的特定事件绑定一个或多个事件处理器函数。可能的事件属性有：blur,focus,load,resize,scroll,unlo

lining / 0评论 2012-08-16

javascript 判断页面加载完毕

只有在判断加在完毕的时候才会限制这个按钮。--修改页面内容-->

zfszhangyuan / 0评论 2012-05-14

读jQuery之十五

在之前的event-jq-0.2.js基础上继续提取jQuery的trigger和namespace。');感兴趣的同学可以拿到项目中试试

scjcjlu / 0评论 2012-04-21

jquery中的事件绑定方法live( type, fn )的说明

那么当在以后增加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。

zfjdoreen / 0评论 2011-07-28