jquery语法二

一、事件
1、ready(fn)

1、当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
2、这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
3、这个方法是对向window.load事件注册事件( 浏览器加载完成事件)的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。==
4、确保在 <body> 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件
5、可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行

    //dom渲染完成事件
     $(window).ready(function (){
     console.log("1");//写执行的函数
     });
     //简写
     $(function (){
     console.log(2);//写执行的函数
     });

2、事件绑定$(selector).on(event,childSelector,data,function)

<ul>
    <li>11</li>
    <li>22</li>
    <li class="inf">33</li>
    <li>44</li>
</ul>
<button>按钮</button>
<button class="btn">按钮</button>
<button>按钮</button>
<input type="text" value="你看我变色"/>

	举例
    $("ul").on("click",".inf", function () {
        console.log(1);
    });
    $("button").on("mousemove", function () {
        console.log("move");
    })；

事件绑定bind()

     $(window).bind("mousewheel",function (){
     console.log(1);
     });
     
         $("html").bind("keydown mousemove", function () {
        console.log("key");
        $(this).unbind("mousemove");
    });

bind与on的区别

绑定多个事件toggle([speed],[easing],[fn])

1、这个方法toggle(fn,fn,fn) 1.9版本已删除,jQuery Migrate（迁移）插件可以恢复此功能。所以我的就不可以实现
2、用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
3、如果元素是可见的，就切换为隐藏的；如果元素是隐藏的，就切换为可见的。$(".tri").toggle();

$(document).ready(function(){
  $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );
});

3、点击事件click(data,fn) 鼠标事件 mousedown([[data],fn]) 事件切换hover()

mousedown与click()的区别
mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 / .clientY` 属性代表鼠标的座标

鼠标事件的区别
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

    var a=3;
    $("button").click(a, function () {
        //传递的参数在event.data
        console.log(a);
    }).mouseenter(function () {
        console.log(1);
    }).mouseleave(function () {
        console.log("2");
    });

	$(document).mousemove(function(e){
        $("span").text(e.pageX + ", " + e.pageY);
    });

事件切换hover()
某种程度上等于 mouseenter+mouseleave

    $("button").hover(function () {
        console.log("over");//进入
    }, function () {
        console.log("out");//离开
    });

事件移除off() unbind()

$("button").click(function(){
    $("p").off("click");
});

4、键盘事件keydown(),keypress(),keyup()

    $("body").keypress(function () {
        console.log("键被按下，与keydown类似，只不过有些键不会触发此事件，如shift，需要用keydown");
    }).keyup(function () {
        console.log("键被松开");
    });

    $("body").keydown(function () {
        console.log("键按下的过程");
    }).keyup(function () {
        console.log("键被松开");
    });

5、滚动事件scroll()

<div style="height: 3000px;"></div>

     $(window).scroll(function (){
     console.log($(this).scrollTop());
     });

6、一次性绑定事件one()

    $("ul>li").one("click", function () {
        console.log("li");
    });

7、失焦获焦blur() focus()

    $("input").blur(function () {
        console.log("失");
    }).focus(function () {
        console.log("获");
    });

8、select([[data],fn])

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

   $("input").select(function () {
        $(this).css("color", "red");
    }).trigger("select").on("my", function () {
        console.log("自定义事件");
    }).trigger("my");

    事件的执行参数
    $(window).keypress(10, function (e) {
        console.log(e.timeStamp);//时间
        console.log(e.currentTarget);//冒泡阶段的元素
        console.log(e.target);//最初触发的dom元素
        console.log(e.data);//传递数据 在data
        e.stopPropagation()//阻止事件冒泡
        e.preventDefault()//阻止事件默认行为
        return false;//阻止事件默认
    });

9、triggerHandler(type, [data])

关于triggerHandler和triggle的讲解，特别nice

如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作
将不会被触发，只会触发你绑定的动作

<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>

$("#old").click(function(){
  $("input").trigger("focus");
});
$("#new").click(function(){
  $("input").triggerHandler("focus");
});
$("input").focus(function(){
  $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});

二、效果
1、hide()和show()

    $(".tri").click(function () {
        $(".tri").hide()
    })
    $(".tri").click(function () {
        $(".tri").show()
    })

2、animate()
$(selector).animate(styles,speed,easing,callback)

$(document).ready(function()
  {
  $(".btn1").click(function(){
    $("#box").animate({height:"300px"});
  });
  $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
  });
});

三、工具
.each()

    /*
     * each  方法   类似for
     * */
    var arr = [1, 2, 3];
    $.each(arr, function (index, val) {
        console.log(index, val);
    });
    $.each($("li"), function (index, val) {
        console.log(index, val);
    });

jQuery.extend([deep], target, object1, [objectN])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象
相当于内容的覆盖

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
//结果settings == { validate: true, limit: 5, name: "bar" }

var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
//结果 settings == { validate: true, limit: 5, name: "bar" }
//empty == { validate: true, limit: 5, name: "bar" }

//例3
    var stu={
        name:"张三",
        sex:"女",
        age:18
    }
    var s={
        name:"李四",
        sex:"男",
        age:20

    }
    var person=$.extend({},s,stu);
    console.log(person);

.grep(array,fn)

使用过滤函数过滤数组元素
此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素

$.grep( [0,1,2], function(n,i){
  return n > 0;
});//[1, 2]

.makeArray(obj)

将类数组对象转换为数组对象。

.toArray()

把jQuery集合中所有DOM元素恢复成一个数组

  console.log($("li").toArray());

.map(arr|obj,callback)

将一个数组中的元素转换到另一个数组中
作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中

    console.log($.map([1, 2, 3], function (val) {
        return val + 2;
    }));

.proxy(function,context)

var obj = {
  name: "John",
  test: function() {
    alert( this.name );
    $("#test").unbind("click", obj.test);
  }
};

$("#test").click( jQuery.proxy( obj, "test" ) );

 以下代码跟上面那句是等价的:
 $("#test").click( jQuery.proxy( obj.test, obj ) );

$.fn.jquery

代表 jQuery 版本号的字符串。
.jquery 属性是通过 jQuery 原型赋值的，通过使用它的别名 $.fn 进行引用。它是一个含有 jQuery 版本号的字符串，例如 “1.5.0” 或 “1.4.4”.

    //给init对象原型追加的方法或者属性
    $.fn.mySort=function (){
        console.log("2222");
    }
    $("li").mySort();
    console.log($());

四、核心

常用的 Git 指令

sm4加密工具类

vue起步以及常用指令

js事件、事件流

jquery語法一

入坑----關於this調用位置和指向問題

jquery語法二

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結