jquery基础

1.jquery与dom对象

var res1 = $("#div1");//jquery对象

var res2 = document.getElementById("div1");//原生js的dom对象

js dom对象转为jquery对象（集合）

$(res2) $(document) $(window)

jquery对象转为js dom 对象

res1.get();//返回值为一数组

get()方法不传参数： 返回一个数组， 数组里面一般都是原生的jsdom对象

get(0)也可以接受一个整数类型的参数（索引） ， 直接返回具体的dom元素

$("#div").get(0)===$("#div").get()[0]===$("#div")[0]

2.button 匹配所有提交按钮 标签按钮没有指定type的话，type默认是submit



3.map映射



4.remove()从页面中将元素移除，仅从页面中移除，集合中仍然保存

$(function (){
// remove() 仅从页面中将元素移除，在集合中仍然保留
var res;
$("#btn").click(function (){

//将页面中所有的p标签移除
res = $("p");
res.remove();
});
$("#btn1").click(function (){

//向页面中添加移除的p标签
$('body').append(res);
});
// empty() 清除前面元素集合中的元素的innerHTML

// p.innerHTML = ""
});

5.append()原理
var p = $("p");
$("div").append(p);
解析：前面集合中选到的div的个数有三个，循环前面集合中所有的元素，1. 首先在第一个div的内部添加一个p标签，添加的时候判断一下这个div是不是最后一个div，如果不是，就复制一个p（调用clone），将克隆之后的p标签放到第一个div中。2. 从第二个div开始，过程是一样的，如果是最后一个，那么直接将那个p标签放到其中



6.html方法与text方法
html()方法获取标签innerHTML时，里面的标签也会做为字符串返回
text()只返回字符串

var res1 = $('#div1').html();
var res2 = $('#div1').text();
console.log(res1); // "accd<span>AAAA</span>"
console.log(res2); // "accdAAAA"
设置html时
$('#div1').html("temp <span>content</span>");
//<div >temp <span>content</span></div>
$('#div2').text("temp <span>content</span>");
//<div >temp <span>content</span></div>
html()的回调函数也可以带参数，回调函数有一个默认的形参，代表当前元素在前面那个集合中的索引，第二个参数是原本的那个innerHTML的值。$("p").html(function(index,originHtml){...});



7.attr[]

var res = $('div').attr("class", "abcdef"); // 覆盖操作

addClass // 添加操作 removeClass // 移除某个class

attr设置的时候也可以接受一个函数作为参数



8.prop()



9.innerWidth与outerWidth
var innerWidth = $('#div1').innerWidth(); // 包括padding不包括border
var outerWidth = $('#div1').outerWidth(); // 包括padding和border，不包括margin
$(window).innerWidth(); // jquery这样获取到的也是document.documentElement.clientWidth

10.each循环

each也是
d6a1
jquery集合对象上的方法,each方法接受一个函数作为参数，会在前面集合的每一个元素上应用这个函数,函数内部的this指向具体的那个元素,each也有类似continue break的控制这个循环的方式,通过这个回调函数的返回return进行控制的,通过returnr任意值（非false）可以实现continue的控制,通过返回布尔类型false， 进行break的控制.



11.size()与length属性

jquery中可以使用size()方法和length属性获取对象集合中的元素的个数 ，如果是jquery的话，获取集合中元素个数的时候，推荐使用size方法，因为这样看起来就是jquery的代码。



12.子元素选择器
:nth-child : 表示选择第n个子元素(不管是什么标签的)， nth-child()括号里面的n是从1开始数的，会受到同级的其他标签的干扰。
:nth-of-type(n) 选择第n个指定类型的元素
:first-child 选择到第一个子元素（会受到其他标签干扰）
:first-of-type 选择到第一个指定类型的子元素
:last-child 选择到最后一个子元素（会受到其他标签干扰）
:last-of-type 选择到最后一个指定类型的子元素
:nth-last-child(n) 表示选择倒数第n个子元素(不管是什么标签的)，括号里面的n是从1开始数的
:nth-last-of-type() 选择倒数第n个指定类型的元素
:only-child 选择那个是唯一子元素的li，（会受到其他标签干扰）。
:only-of-type 选择哪个子元素中是唯一的li的那个li



13.clone()

clone可以接受一个布尔值作为参数，默认是false；如果是true，那么表示连带事件一起复制,

例：$('p').clone(true).appendTo($('body'));

jquery的html操作时append,在将元素插入到不止一个的目标元素中的时候，jquery会隐式地进行克隆,此时的克隆是会同时复制事件的.$('div').append($('p'));

14.绑定事件的方式
1).用具体事件的快捷方式去绑定事件(jquery事件的名称是没on的)

$('div').click(function (){
console.log(this);
});

这种方式绑定事件的时候还可以传递一组数据进到事件响应函数当中,传入响应函数的数据应该要是一个对象类型的数据.

$('div').click({time:(new Date()).getTime()},function (e){
// 传入的数据会放到相应函数的事件对象的data属性当中
console.log(e.data.time);
});
2)使用on方法绑定事件

参数一： 事件类型（字符串的值）

参数二： 事件响应函数

也可以将第二个参数变为需要传入响应函数的数据,这个在传数据的时候是不支持出对象类型以外的数据的





// 同一事件可以绑定多个, 响应函数的执行顺序就是绑定的顺序
off()方法进行解绑
参数一就是事件的类型名（字符串）,如果只传这个参数一的话，那么所有的 相同类型的事件都被解绑了
参数二（可选）传递一个事件响应函数的名称(要求绑定的时候传的是定义好的函数的名称)，可以将指定的那个响应绑定给解绑掉.

$('div').off('click', test1);
3).bind（）方法绑定事件

参数一： 事件类型（字符串的值） 参数二： 事件响应函数

也可以将第二个参数变为需要传入响应函数的数据,这个在传数据的时候是不支持出对象类型以外的数据的.

同一事件可以绑定多个, 响应函数的执行顺序就是绑定的顺序

unbind()方法进行解绑

参数一就是事件的类型名（字符串）,如果只传这个参数一的话，那么所有的相同类型的事件都被解绑了,参数二（可选）传递一个事件响应函数的名称(要求绑定的时候传的是定义好的函数的名称)，可以将指定的那个响应绑定给解绑掉.
4)使用one()方法绑定事件

使用one()方法去绑定事件,其他和on方法一样(包括传数据的方式)，只不过事件响应函数在执行一次之后就会自动解绑.

one绑定的时间响应也可以在其执行之前将其解绑,用off方法。



15.绑定事件的时候的响应函数的传递：
1). 直接传一个匿名函数的定义
2). 可以传递一个已经定义好的函数的名称

16.事件委派

事件委派： 指的是通过父元素给子元素指定事件

使用delegate这个方法

参数一是一个选择器，表示在子级当中去过滤

参数二是事件的类型名（字符串）

参数三是事件响应函数

事件委派相比普通事件绑定来说，具有动态性，对于新加入的符合条件的子级,都会自动地委派上对应的事件.

解除事件委派，使用undelegate方法,参数一的选择器一定也和添加事件委派的时候的那个选择器相同,参数二就是要解除的事件类型,参数三（可选的），传一个响应函数的名称，可以解除掉指定的那个委派响应.



17.事件触发

可以调用trigger方法在程序运行的任何地方触发某个事件,参数一是要触发的事件的类型,参数二（可选），触发时传递给事件响应函数的数据（一般也会给一个对象类型的值）.

trigger可以传递多个对象数据给事件响应函数，将第二个参数改为数组，数组的每个元素都是对象，

$('div').trigger('click', [{triggerTime: (new Date()).getTime()}, {a:"testa"}]);

通过trigger传递进来的数据，依次会放在响应函数的形参上（从第二个开始）

$('div').click({time: (new Date()).getTime()}, function (e, p1, p2){...});

18.事件类型

focusin后代元素获得焦点时触发

focusout后代元素失去焦点时触发

resize窗体大小改变时触发

mousemove鼠标移动事件

change当元素的值发生改变时，会发生 change 事件。

scroll当用户滚动指定的元素时，会发生 scroll 事件。

error当元素遇到错误（没有正确载入）时，发生 error 事件。

select当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

mouseenter当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseleave当鼠标指针离开元素时，会发生 mouseleave 事件。

hover事件接受两个函数作为参数,第一是移入时的响应函数,第二个是移出时的响应函数,也可以只接受一个函数作为参数，表示不论移入还是移除都触发这个函数.

blur当元素失去焦点时触发 blur 事件。

focus当元素获得焦点时，触发 focus 事件。

keydown当键盘或按钮被按下时，发生 keydown 事件。

keypress当键盘或按钮被按下时，发生 keypress 事件。

keyup当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

mousedown当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousemove当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

mouseout当鼠标指针从元素上移开时，发生 mouseout 事件。

mouseover当鼠标指针位于元素上方时，会发生 mouseover 事件。

19.动画show及hide

hide: 隐藏一个元素（宽高逐渐变小，透明度逐渐变透明，直到消失， 在消失后会将在行内将元素的display设为none）
参数一是一个整数时间值（单位是毫秒），表示在多长时间内完成指定动画, 默认是0，参数一的类型也可以是一个字符串的时间描述（"slow（600）", "normal（400）", "fast（200）"）
参数二可以是一个运动过程的视觉效果类型（"linear", "swing"）默认就是swing；
参数三是一个回调函数，它将在动画结束之后调用

$('div').hide(2000, "swing", function (){
console.log("done")
});

show: 显示一个元素(宽高逐渐变大，透明度逐渐变不透明，直到完全显示， 在显示后会将在行内将元素的display设为block）
参数一是一个整数时间值（单位是毫秒），表示在多长时间内完成指定动画, 默认是0，参数一的类型也可以是一个字符串的时间描述（"slow（600）", "normal（400）", "fast（200）"）
参数二可以是一个运动过程的视觉效果类型（"linear", "swing"）默认就是swing
参数三是一个回调函数，它将在动画结束之后调用
$('div').show(2000, "linear", function (){
console.log("done");
});

toggle表示显隐的切换

还支持一个单独布尔类型的参数,false代表不管怎么样都马上消失，true代表不管怎么样都马上显示

$('div').toggle(false);