jquery使用整理

为什么使用jquery

jQuery3是jQuery的未来，如果你需要兼容IE6-8，你可以继续使用1.12版本。jQuery3不在兼容ie8以下的。

js的入口函数。windos.reload=function(){    //此处写js};jquery的入口函数$(function(){    //此处写js})$(document).ready(function(){});//jquery的入口函数无论有几个都会覆盖之前写的。

1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
   3.===jQuery,也就是说能用的地方，完全可以用jQuery，$仅仅是简写形式。

jquery对象转DOM对象

var $li = $(“li”);//第一种方法（推荐使用）$li[0]//第二种方法$li.get(0)//其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。

Dom对象转Jquery对象

var box=documen.getElementById("box");var $box=$(box);//dom对象装换成jquery对象。

jquery选择器
1.基本选择器

• $(“#id”); id选择器
• $(“.class”);类选择器
• $(“div,p,li”);并集选择器
• $(“div.redClass”);交集选择器

2.层级选择器

• $(“ul>li”);子代选择器
• $(“ul li”);后代选择器

3.过滤选择器

• :eq（index）选择索引是index的juqery对象
• :odd 选择是奇数的jquery对象
• :even 选择是偶数的jquery对象

4.筛选选择器(方法)

• children(selector) //(“ul”).children(“li”)，相当于(” ul>li”)
• find(selector) //(“ul”).find(“li”);,相当于(“ul li”)后代选择器
• siblings(selector) //$(“#first”).siblings(“li”);找兄弟，不包括自己
• parent()//$(“#first”).parent(); 找父亲
• eq(index) //(“li”).eq(2);相当于(“li:eq(2)”)
  jquery操作样式

//单个设置$("#one").css("background","gray");//将背景色修改为灰色//多个设置$("#one").css({    "background":"gray",    "width":"400px",    "height":"200px"});//获取样式$("div").css("background-color");//注意：获取样式操作只会返回第一个元素对应的样式值。

jquery操作类名

• addClass(“one”);
• removeClass(“one”)//不带参数，移除所有的样式类
• hasClass(“one”)//是否有这个样式，true、false
• toggleClass(“one”)//如果有，移除该样式，如果没有，添加该样式。

jquery动画
1.show([speed], [callback]);hide([speed], [callback])

//speed(可选)：动画的执行时间1.如果不传，就没有动画效果。2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。//callback(可选):执行完动画后执行的回调函数

2.滑入与滑出slideUp,slideDown

slideUp(speed, callback);//speed(可选)：动画的执行时间1.如果不传，默认为normal，注意区分show/hide。2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)3.固定字符串，slow(200)、normal(400)、fast(600)//callback(可选):执行完动画后执行的回调函数

3.滑入滑出切换

$(selector).slideToggle(speed,callback);//如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。

5.stop
stop(stopAll,goToEnd)

$("animation").shop();两个值默认都是false.stopAll：为false时，只停止当前动画，不停止所有动画，反之为true：停止所有动画。goToEnd（是否结束当前懂啊胡）:默认fasle，fasle:不结束，true:结束。

fadeIn和fadeOut

• fadeIn(speed,callback);
• fadeOut(speed,callback);
• fadeToggle();淡入淡出切换。
• fadeTo(speed, value, callback)

//可以设置具体的透明度//speed（必须）//value  0-1之间的数值(比如0.4)，表示淡到某一个值。//callback(可选) 回调函数

jquery自定义动画animate

$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）nomal,slow,fast或具体的数
//easing:可选linear(匀速)，swing(变速，开始和结束慢，中间快)
// callback：可选动画执行完后立即执行的回调函数（可选）

此处动画支持的属性

easing参数
控制动画在不同元素的速度，默认为“swing”
“swing”：在开头和结尾移动慢，在中间移动速度快
“linear”：匀速移动

jquery操作DOM(节点)
1.创建元素

var $span = $(“<span>这是一个span元素</span>”);

2.添加元素

//方法一：将jQuery对象添加到调用者内部的最后面。 var $span = $(“<span>这是一个span元素</span>”);$(“div”).append($span);//方法二：参数传字符串，会自动创建成jquery对象$(“div”).append(“<span>这是一个span元素</span>”);

添加已经存在的元素

var $p = $(“p”);$(“div”).append($p);//注意：如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。之前的p标签和内容一起挪到div里面去了

类似的用法：append prepend after before

3.清空元素

$("#box").html("");$("#box").empty("");

4.删除元素

$("#box").remove();标签没有了

5.克隆元素

var newbox=$("#box").clone(true);//可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。和cloneNodede 区别。cloneNode() 方法克隆所有属性以及它们的值。如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。

jQuery操作属性
1.attr(name, value);

$(“img”).attr(“title”,”哎哟，不错哦”);//设置$(“img”).attr(“title”);//获取$("img").attr({    title:"哎哟，不错哦",    alt:"哎哟，不错哦",    style:"opacity:.5"});//设置多个属性

1. prop();
   对于checked、selected、disable这类boolean类型的属性来说，如果使用attr方法获取属性值，得到的不是true和false，而是checked以及undefined。使用prop方法来获取或者设置checked、selected、disable这类的值。prop方法使用跟attr方法一样。

//设置属性$(“:checked”).prop(“checked”,true);//获取属性$(“:checked”).prop(“checked”);//返回true或者false

* jQuery操作值与内容*
1.val();val方法用于设置和获取表单元素的值，例如input、select、textarea的值

$(“#name”).val(“张三”);//获取值$(“#name”).val();

2.html()

//设置内容$(“div”).html(“<span>这是一段内容</span>”);//获取内容$(“div”).html()

1. text方法

//设置内容$(“div”).text(“<span>这是一段内容</span>”);//获取内容$(“div”).text()

html方法与text方法的区别：
html方法会识别html标签，text方法会把内容直接当成字符串，并不会识别html标签。
jQuery操作尺寸
1.height()

//带参数表示设置高度$(“img”).height(200);//不带参数获取高度$(“img”).height();//返回值是number类型（比如200），而使用$(“img”).css(“width”)返回的是字符串（比如200px）

2.widht()同height()一样

jquery操作坐标值

1.offset 设置或者获取元素相对于文档document的位置。

//设置位置$(selector).offset({left:100, top: 150});//获取位置$(selector).offset();//注意：使用offset操作，如果元素没有设置定位(默认position:static)，则会把position修改为relative.会修改left、top

JS下offsetLeft，style.left，以及jQuery中的offset().left，css(“left”)的区别。

JS下的offsetLeft和style.left，以及jquery的css("left")，对定位的理解相似，如果父元素中有定位元素，都是相对于上一个定位元素（position不为static）定位。值得一提的是如果没有已经定位的父元素，那么offsetLeft指向的是文档（document）的左边缘，而style.left与css（"left"）指向的是body的左边缘，如果body默认存在margin的话，他们取得的值是不一样的。     此外老生常谈，css("left")和style.left是带单位"px"的，而offsetLeft没有单位，另外，style.left必须是内联样式，或者在JS中通过style.left赋值，否则取得的将为空字符串（在内部样式和外部样式中指定left是无效的）。而jquery的css("left")没有这一限制，显然使用jquery操作dom的优势就体现出来了。     最后是jquery的offset().left，它永远是相对于文档的左边缘（往往体现为浏览器的左边缘）定位的，这样的话使用jquery就可以在不同的应用场景采用不同的方法来获取元素的位置，相比较原生JS有巨大的优势。

2.position()

获取相对于其最近的有定位的父元素的位置。
// 获取，返回值为对象：{left:num, top:num}
$(selector).position();
注意：position方法只能获取，不能设置

此时的position()和offsetLeft和offsetTop的取值是一样的。

scrollTop和scrollLeft
设置或者获取垂直滚动条的位置

// 有参数表示设置偏移，参数为数值类型$(selector).scrollTop(100);// 无参数表示获取偏移$(selector).scrollTop();// 有参数表示设置偏移，参数为数值类型$(selector).scrollLeft(100);// 无参数表示获取偏移$(selector).scrollLeft();

jQuery事件的发展历程
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
1.简单事件绑定

• click(handler) 单击事件
• mouseenter(handler) 鼠标进入事件
• mouseleave(handler) 鼠标离开事件
• scroll(handler) 滚动事件
  缺点：一次只能绑定一个事件
  
  1. bind事件绑定(不推荐使用)

//绑定多个事件//第一个参数：事件类型//第二个参数：事件处理程序$("p").bind("click mouseenter", function(){    //事件响应方法});缺点：不支持动态创建出来的元素绑定事件。

1. delegate事件绑定,支持动态绑定事件

// 第一个参数：selector，要绑定事件的元素// 第二个参数：事件类型// 第三个参数：事件处理函数$(".parentBox").delegate("p", "click", function(){    //为 .parentBox下面的所有的p标签绑定事件});//理解：为什么delegate支持动态绑定事件？原因是事件冒泡机制。因为事件时绑定到父元素上的，由子元素触发。

4.on事件绑定(推荐)

$(selector).on(events[,selector][,data],handler);// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）// 第四个参数：handler，事件处理函数例子// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定$(selector).on( "click",“span”, function() {});// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定（不使用代理）。$(selector).on( "click", function() {});

事件解绑
1.unbind()

$(selector).unbind(); //解绑所有的事件$(selector).unbind(“click”); //解绑指定的事件

2.undelegete()

$( selector ).undelegate(); //解绑所有的delegate事件$( selector).undelegate( “click” ); //解绑所有的click事件

2.off方式（重点）

// 解绑匹配元素的所有事件$(selector).off();// 解绑匹配元素的所有click事件$(selector).off(“click”);// 解绑所有代理的click事件，元素本身的事件不会被解绑 $(selector).off( “click”, “**” ); 

事件触发

简单事件触发$(selector).click(); //触发 click事件trigger方法触发事件$(selector).trigger(“click”);triggerHandler触发 事件响应方法，不触发浏览器行为比如:文本框获得焦点的默认行为$(selector).triggerHandler(“focus”);

jQuery事件对象（）

• event.type 事件类型
• event.data 存储绑定事件时传递的附加数据
• event.target 点了谁就是谁
• event.currentTarget 当前DOM元素，等同于this
• event.delegateTarget 代理对象
• screenX和screenY 对应屏幕最左上角的值
• offsetX和offsetY 点击的位置距离元素的左上角的位置
• pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
• event.witch 鼠标按键类型，1=鼠标左键 2=鼠标中键 3=鼠标右键
• event.keyCode 按下的键盘代码
• event.stopPropagation() 阻止事件冒泡行为
• event.preventDefault() 阻止浏览器默认行为
• return false;
  jQuery补充
  1.链式编程
  链式编程原理：return this;
  通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
  end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
  2.隐式迭代
  隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
  如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
  设置性操作的时候：设置的是所有的元素
  获取性操作：获取的是第一个元素。
  3.each()方法
  有了隐式迭代，为什么还要使用each函数遍历？
  大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
  如果要对每个元素做不同的处理，这时候就用到了each方法

// 参数一表示当前元素在所有匹配元素中的索引号// 参数二表示当前元素（DOM对象）$(selector).each(function(index,element,callback){});

4.多库共存
我们知道jQuery占用了这个标识符，如果引用的其他库也用到这个标识符，这时候为了保证每个库都能正常使用，这时候就存在了多库共存的问题。
后引入的的会覆盖掉先引入的库中的。
===jQuery解决办法：jQuery的和jQuery是两个相同的变量，因此遇到多库共存的时候，可以让jquery交出符的控制权，这个时候还是可以使用.

console.log($);//function(selector, context){}//$.noConflict();//释放$的控制权console.log($);{name:”zhangsan”,age:12}jQuery(function () {    jQuery("div").html("我不是div的内容");});

5.制作jquery插件

$.fn. pluginName = function() {};