jQuery

jQurey

一、jQuery简介

1.版本

（1）jQuery1：兼容所有浏览器
（2）jQuery2：不再支持IE6/7/8
（3）jQuery3：目前版本

2.作用

jQuery作为JavaScript封装的库，他的目的就是为了简化开发者使用JavaScript。

二、jQurey代码

1.$

在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象：jQuery对象，

2.jQuery对象

（1）jQuery对象是一个列表对象，就是操作内容是针对看列表中所有的元素。
（2）jQuery对象是不能使用DOM的方法和事件。
（3）jQuery的方法也只针对jQuery对象使用，DOM对象不能使用。
（4）jQuery转换为DOM元素
①$("div")[i];②$(“div”).get(0);
⑤$(“div”).get(); 返还一个dom元素的数组
（5）DOM元素转换为jQuery
①直接将dom元素放入jQuery $() 函数内。
②将nodeList或者HTMLCollection放入 $() 函数内，转为jQuery对象
（6）jQuery对象筛选其中某一个
$("").eq(i)

三、jQuery选择器

1.选择器种类

（1） 1.$("div")标签选（2）$("#div1") id选择器
（3）$(".div0")class选择器（4）$("") 通配符选择器
（5）$("div.div2")后代选择器(包含的所有标签)（6）$(“div>.div2”) 子代选择器(仅下一级标签)
（7）$(".div1+div")下一个兄弟选择器（8）$(".div1~div") 下面所有的兄弟选择器
（9）特殊：
①$"div.div1";div中类名是div1的div②$(“div .div1”); div后代中类名是div1的元素
③$(".div1>\ast ");类名是div1所有的子元素④$(" .div1+") div1下一个任意兄弟元素

2.选择器方法

①$(".div1").next(); $(".div1+");②$(" .div1") .nextAll(); $(".div1");③$(".div1"). nextUntil(" .div2"); div1到div2停止
④$(".div1").prev();向上的一个兄弟元素⑤$(". div1"). prevAll(); 向.上的所有兄弟元素
⑥$(".div1").prevUntil(".div2");从div1向上到div2兄弟元素截止⑦$(" .div1"). find(“span”); $(".div1span");⑧$(" .div1"). find(“span”); $(".div1 span");

3.属性选择器

（1）$("div[a]")标签是否具备a属性（2）$("[a]") 具有a属性的标签
（3）$("[a=1]")具有属性a,且属性值为1的标签（4）$("[a|=ab]") 具有属性a，且属性值是ab或者ab- 的标签
（5）$("[a=ab]")具有属性a，且属性值是ab或者以空格区分隔的标签（6）$("[a^=1]") 具有属性a,且属性值以1开头的标签
（7）$("[a=$1]")具有属性a,且属性值以1结尾的标签（8）$("[a=!1]") 具有属性a,且属性值不为1的标签

四、jQuery过滤器

1.基本过滤器

（1）first
①$("div.first")将所有div放在一个列表中，筛选出第一个元素等同于：$(“div”).first();
②$("div:first-child")将每个div父元素中的第一个子元素，如果是div的筛选出来③$(“div:first-of-type”)；将每个div父元素中第一个div类型的子元素筛选出来
（2）last
①$("[div.last")等同于：$(“div”).last();
②$("div:last-child")③$(“div:last-of-type”)
（3）not： $(“ul>:not(li)”) ul所有子元素中不是li元素的
（4）even： $(“li :even”); 偶数列表 是从0开始计数
（5）odd: $("li:odd");奇数项（6）nth①$(“li:nth-child(i)”)； 父元素内，下标为i的元素，父元素内只能有li一种类型元素
②$(“li:nth-of-type(i)”); 父元素内，下标为i的元素，父元素下可以有不同类型元素
（7）gt： $(“li:gt(i)”) 列表中下标大于i的所有元素
（8）lt： $("li:lt(i)")列表中下标小于i的所有元素（9）$(“li:eq(i)”); li列表内下标为i的元素
（10）$(":header");所有h1-h6的元素（11）$(":animated"); 所有使用aniamte动画的元素
（12）$(":focus");聚焦元素（13）$(":empty"); 没有内容或者子元素的元素
（14）$(".div1:has(.div2)");含有div2的内容的div1元素（15）$(".div2:parent"); 判断div2有子元素的或者有内容的
（16）$(".div2").parents();获取div2的所有父元素（17）$(".div2").parentsUntil(“html”); 获取div2的所有父元素中到什么之前的
（18）$(".div1:contains(1)");判断元素的后代中有1这个内容的元素（19）$(".div4:hidden"); 隐藏的元素，针对display:none或者是不显示的元素
（20）$(":visible")；显示的元素（21）$(":only-child") 只有一个子元素的元素
（22）$("div").is(".div1")；这个方法得到一个布尔值，是否在div中有类名是div1的元素（23）$(“div”).hasClass(“div1”); 这个方法得到一个布尔值，是否在div中类名是div1的元素
（24）$("li").slice(2,4);div列表中选择第2个到第4个之间的元素（25）$(":text"); type=text的input
（26）$(":disabled");不可用（27）$(":enabled"); 可用
（28）$(":checked");用于input中checkbox和radio（29）$(":selected"); 用于下拉菜单的元素

四 、jQuery遍历

1.数组的遍历

$.each(function(index,item){});

2.对象广度遍历

$.each(obj.function(key,value){});

五、jQuery内容

1.html

①$("div").html("");等同于div.ininnerHTML②$(“div”).html(); 获取第一个div元素的文本

2.text

①$(“div”).text(""); 将所有列表中的元素的内容和为一个字符串返回

3.on

$(“input”).on(“input”,function(){} input事件侦听

4.val

$(“input”).val(10); 设置value

六、jQuery属性

1.attr

（1）$("div").attr("a");只能获取元素列表中第一个元素的a属性（2）$(“div”).attr(“a”,“3”);
给元素赋予属性

2.data

（1）$(“div”).data（“属性名”，“属性值”）;
设置在一个jquery映射对象上的

3.prop

（1）$("div").prop（"属性名"，"属性值"）；设置了jquery列表中所有DOM的对象属性增加某个属性（2）$(“div”).prop（“属性名”）；
从列表中取第一个元素的DOM对象属性值

4.总结

（1）attr是设置在DOM标签上的属性
（2）prop是设置在DOM对象上的对象属性
（3）data 是设置在jQuery映射对象上的属性，为了不污染DOM对象的属性

七、jquery的CSS的样式

1.css

（1）$("div").css("width","50px");设置css样式（2）$(“div”).css(“width”)；
不但可以获取行内样式，还可以获取css计算后的样式
（3）$(“div”).css（[“width”,[height],“color”…）
获取第一个元素多个指定的样式值，返回一个对象

2.addClass

（1）$("div").addClass添加类名（2）$(“div”).removeClass
删除类名

3.width ，height

（1）$("div").width()内容宽度（2）$(“div”).height() 内容高度
（3）$("div").innerWidth()width+padding宽度（4）$(“div”).outerWidth() width+padding+border宽度
（5）$("div").outerWidth(true)width+padding+margin+border宽度（6）$(“div”).offset() 元素相对于页面左上角的位置
设置$("div").outerWidth(left:500,top:500);（7）$(“div”).position() 获取定位位置 （不能进行设置）
（8）$("div").scrollTop()获取和设置滚动条位置设置：$(“div”).scrollTop(200)；

八、jQuery的DOM

1.创建DOM元素

 $("<div></div>").appendTo("body").width(50).height(50).css("...");

2.插入

（1）append
①$(“body”) . append(div);
$("body").append("<div></div>");这种写法返回body的jQuery的对象②$("

").appendTo(“body”);
这种写法返回的是div的jQuery对象
（2）prepend
$("

"). prependTo(".div1");
插入父元素的第一个子元素位置
（3）after和before
① $("

"). prependTo(".div1");
插入父元素的第一个子元素位置
$(".div1").prepend("<div></div>");②$(".div1").before("

")
$("

"). insertBefore(".div1");
插入在兄弟元素前面

3.wrap

（1）$("div").wrap("<a></a>");给每个元素外面的包裹--个a标签（2）$( “div” ).wrapAll("");
给所有元素外面包裹一个a标签
（3）$("span").unwrap();将包裹的父元素删除（4）$(“div”) . wrapInner("");
给每个div的内容包裹1个a标签

4.clone

（1） $("div").clone(false);深复制，但不复制事件（2）$(“div”) .clone(true);
深复制，连事件一起复制

5.删除

（1）$("div").remove();删除元素的时候会将所有元素的事件也删除注销（2）$(“div”).detach
仅删除元素，事件保留
（3）$(".div1"). empty();
清除元素的所有子元素和内容

6.替换

（1）$(".div1").replaceWith("<a></a>");a替换div1（2）$("") . replaceA1l(" .div1");
a替换div1

九、jQuery事件

1.添加事件

$(".div1").on("触发事件.命名空间"，function(e){});

2.删除事件

$(".div1").off("触发事件.命名空间");
将所有click事件的内容全部删除。

3.传参

$(".div1").on("触发事件",传入的参数，function(e){
 e.data   //参数存放在e.data里
});

4.抛发事件

（1）抛发事件
$(".div").on(“触发事件”,function(e){});
$(“div”). trigger(“chilema”);
（2）抛发事件带参数
$(".div").on(“触发事件”,function(e,o){
o //o为抛发带的参数
});
$(“div”). trigger(“chilema”,参数);
（3）triggerHandler 和 trigger 的区别
①
$(“form” ) . trigger(" submit" ); 会触发默认事件
$(“form”). triggerHandler(“submit”); 这个不会触发默认事件
②triggerHandler()方法只会影响第-个匹配到的元素，而.trigger()会影响所有。
③triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回undefined; 而.trigger()则返回当前包含事件触发元素的jQuery对象(方便链式连缀调用)。

5.简写事件

$(“div”).click(function(){});
所有事件都可以简写

6.加载事件

（1）$(document).ready(function(){});
当DOM全部加载完成，图片未加载完成前

十、jquery动画

1. hide 隐藏

$(“div”).hide(毫秒数);

2.show 显示

$(“div”).show(毫秒数);

3.toggle 切换

$(“div”).toggle(毫秒数);

4.slideUP 和 slideDown

（1）slideUp
向上消失
（2）slideDown
向下出现

5.fadeOut 和 fadeIn 和 fadeTo

（1）fadeOut
逐渐显示
（2）fadeIn
逐渐消失
（3）fadeTo
透明到多少

6.animate

数字变化的属性实现动画

十一、jQuery插件

1. jQuery方法重构

$.fn.方法名=function(参数){
return this;};

2.扩展jQuery静态方法

$.extend({
方法名：function（参数）{
}})

3.注意

（1）使用闭包
①(function($))jQuery);自执行函数②避免全局依赖③避免第三方破坏④兼容jquery操作符$‘和"jQuery’
（2）扩展
①JQuery提供 了2个供用户扩展的“基类" --S extend和$ .fn. extend
②$.extend用于自身方法③$.fn. extentd用户扩展jquery类
（3）选择器
①尽量使用ld选择器
②样式选择器应该尽量明确指定的tagName,例如className为jq的div,要写成${(}^{\prime }div.j{q}^{\prime })而不是$(’.jq’)

十二、jQuery中AJAX

1.格式

最顶层
$.getJSON();
$.getScript();
中间层
$.(“div”).load();
$.get();
$.post();
最底层
$.ajax();

2.最顶层

（1）$.getJSON();
加载JSON;
$getJSON("json文件路径",function(data));（2）$.getScript();
加载JS；
$.getScript(“js文件路径”,function(){})

3.中间层

（1）$.get();
$.get("服务器路径",function(data));（2）$post();
$.post(“服务器路径”,{参数对象},function(data){
})
（3）load
①通信
1° $(“div”).load(“服务器地址”,{参数对象});
2° $(document).load(“服务器地址”,{参数对象},function(data){});
②加载页面
$(“div”).load("./2、jQuery插件.html")
③加载JS
$(document).load("./a.js",function(data){
var script=document.createElement(“script”);
script.innerHTML=data;
document.body.appendChild(script);
})
④加载JSON
$(document).load("./config.json",function(data){})

4.最底层

（1）$.ajax
$.ajax({
url:“服务器路径”,
tyoe:“POST”,
data:{“数据”,“数据”}
success:function(data){}
})
（2）JSONP
$.ajax({
url:“路径+&cb=callback”,
type:“GET”,
dataType:“jsonp”,
})
function callback(data){}
（3）queryString 序列化
$(“form”).serialize()