jQuery笔记

简介

jQuery还是不得不学，毕竟dom操作随时可能进行，有jQuery会方便很多，它和当前热门的MVVM框架（Vue之类的）并不会冲突，只是后者不推崇直接的DOM操作。

基本使用

安装

可以用CDN，也可以本地文件导入，还可以npm install

操作符

$，这个操作符可以根据标签，id，类名选中任意元素，并对其进行操作（冲突时可以用noConflict释放$符号，改用jQuery充当$，或者用自定义的符号）：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

$(function(){
    //......
})

其中，入口为 document的一个ready函数，可以简写，也就是只留一个$符号后面直接跟着函数。

与原生js的onload的相似，不同的是onload必须所有资源加载完才会执行，而jquery会dom解析完就执行。

！！而且，jquery入口可以多个，原生不行。

操作CSS

$(function(){
    $("button").css({
        width: "100px",
        height: "100px"
    })
    $("button")[0].style.width = "150px";
    $("button").css("width","100px").css("height","100px");
})
//不设置值相当于get值

注意，css方法不能操作行内样式，会报错，

但是可以调用addClass，removeClass方法，toggleClass方法

还可以获取元素的位置，position，offset等方法，滚动条scrollTop等

可操作的对象

入口函数，选择器，字符串片段(可以用来创建dom元素)，直接获取dom元素

注意，传给$的dom会被包装。虽然效果差不多，但是本质是不一样的

jQuery对象与方法

jquery会把标签包装成dom树一样的结构，本质是一个伪数组。

方法：each还可以遍历伪数组，map，trim去空格，isArray判断，holdReady方法可以暂停入口的执行，eq找到第x个符合的，siblings获取兄弟（排他），html方法操作内部内容，等等。。。基本所有DOM操作都有对应的jQuery的方法

attr，修改获取属性节点，removeAttr可以删除节点属性，prop和前者相似，但是是操作dom对象的，前者是操作属性节点的，因此后者能够直接反映，对于有true，false之类的推荐用prop

内部插入：append，prepend（前面）方法，appendTo，prependTo

外部插入：after，before，insertAfter，insertAfter

删除：remove，empty，detach，复制：clone

等等等等，简易用时查文档

jQuery选择器

除开和CSS选择器类似的选择器外，还多了很多操作，比如

:empty表示空元素，:parent() 表示与空相反的

:contains(“text”)，找包含text文本的，:has(“span”)表示包含子元素span的，not表示不包含xxx的

事件绑定（委托）

所有dom事件基本均有对应的jquery事件，如click，mouseenter等，是addEventListener的简单写法，直接接在元素后面就视为绑定，或者用on方法（只有on方法才能绑定自定义事件，才有事件命名空间）。

jquery有专门的代码实现委托，delegate，可以把别的标签触发转移给父元素，主要针对动态绑定，其实就是js事件委托的升级版，它会自动判断事件来源，比如规定只委托span下li的事件，而不会处理其他事件，就不用我们用原生js的target了。

trigger可以主动触发绑定的事件：xxx.trigger(“click”)，注意a标签不能直接触发跳转

解绑通过off解绑制定类型的事件

动画

jquery有着特定的动画事件，包括隐藏，显示，可以加入回调函数等，还有淡入淡出，展开收起等，都是display的一种动画效果

stop方法可以停止动画，清掉队列

还有一个animate方法可以操作动画，和css3相似，有hidden，toggle等参数

AJAX

jquery封装了load、get、post方法，非常简便：

   	$("button").click(function(){
		$("#div1").load(url);
	});
   
   $.get("demo_test.html",function(data,status){
        //dosomething
    });
    
    $.post(url,{
		name:"xxxx",
		data2:"aaaa"
	},function(data,status){
		//dosomething
	});
    
    $.ajax({  
         type:'post',  
         url:'',  
         data:{},  
         cache:false,  
         dataType:'json',  
         success:function(data){  
          },  
          error:function(){}  
    }); 

总结

1. $符号的各种使用
2. jQuery提供的各种提高开发效率的方法（如事件委托）
3. ajax的使用