jQuery的基本介绍和使用（详细）

1、jQuery的介绍

jQuery就是一个JavaScript库，它就是通过原生JS来进行一些列的封装，它是John Resig在2006年创建的 一个开源项目，随着越来越多的人使用，jQuery已经集成了JS、CSS、DOM、Ajax与一体，他可以使用很少的代码完成复杂困难的功能，主旨：以更少的代码，完成更多的功能。

jQuery的功能：1.像CSS那样访问和操作DOM、2.修改CSS控制页面外观、3.简化JavaScript代码操作、4.事件处理更加容易、5.各种动画效果使用方便、6.让Ajax技术更加完美、7.基于jQuery大量插件、8.自行扩展功能插件

jQuery最大的优势，就是特别的方便。比如模仿CSS获取DOM，比原生的JavaScript要方便太多。并且在多个CSS设置上的集中处理非常舒服，而最常用的CSS功能又封装到单独的方法，感觉非常有心。最重要的是jQuery的代码兼容性非常好，你不需要总是头疼着考虑不同浏览器的兼容问题。

jQuery的官网：http://www.jQuery.com；

jQuery官网下载：http://jquery.com/download/

在页面中引入jQuery只需要在head标签中引入相应的Jquery文件即可

<script src="./js/jquery.js"></script>

2、jQuery选择器介绍

在使用jQuery选择器时，首先必须使用“$()”函数来包装我们的CSS规则。而CSS规则作为参数传递到jQuery对象内部后，再返回包含页面中对应元素的jQuery对象。随后，我们就可以对这个获取到的DOM节点进行行为操作了。

$('div');//标签名选择器
$('#div1');//id选择器
$('.div0');//class选择器
$('*');//通配符选择器
$('div .div1');//后代选择器
$('div>.div1');//子代选择器
$('.div1+div');//下一个兄弟选择器
$('.div1~div');//后面所有的兄弟选择器
$(".div1").next();//下一个兄弟选择器 相当于$('.div1+')
$(".div1").nextAll();//后面所有的兄弟选择器 相当于$(".div1~");
$(".div1").nextUntil(".div2");//div1到div2之间的所有兄弟元素
$(".div1").prev();//向上的一个兄弟元素
$(".div1").prevAll();//向上的所有兄弟元素
$(".div1").prevUntil(".div2");//向上到所有兄弟元素
$(".div1").find("span");//div1中的所有span标签 相当于$(".div1 span");
$(".div1").children();//div中所有的子元素 相当于$(".div>");

属性选择器

$("div[a]")//div具备属性a的所有div
$("[a]")//具备属性a的所有元素
$("[a=1]")//具备属性a且a=1的所有元素
$("[a^=1]")//具备属性a且a属性值开头为1的元素
$("[b|=ab]")//具备属性b且值是ab或者以ab起头后面使用-来连接的
$("[b~=ab]")//具备属性b且值是ab或者ab后有空格区分其他字符的
$("[b$=b]")//具备属性b且值是以b结尾的值
$("[b*=c]")//具备属性b且值中包含有c这个字符的
$("[a][b]")//有a属性和b属性的元素

3、jQuery过滤器介绍

$('li;first')//将所有li放在一个列表中，筛选出第一个元素；
$("li").first();//同上$('li;first')；
$("li:first-child")//将每个li父元素中的第一个子元素，如果是li的筛选出来
$("li:first-of-type")// 将每个li父元素中第一个li类型的子元素筛选出来
//相应的下面这四种是筛选最后一个是li元素的
$("li:last")
$("li").last();
$("li:last-child")
$("li:last-of-type")
$("ul>").not("li")//;//ul所有子元素中不是li元素的所有元素
$("li:even")//li为偶数项的  列表是从0开始计数所以第二个元素相当于索引为1的列表项
$("li:odd")//li为奇数项的
$("li:nth-child(2)")//li父元素中的第2个为li的项
$("li:nth-of-type(2)")//li父元素中的第二个li项
$("li:nth-child(even)")//偶数，列表是从1开始计数
$("li:nth-of-type(even)")//偶数，列表是从1开始计数
$("li").eq(2);//列表中下标为2的元素
$("li:gt(2)");//列表中下标大于2的所有元素
$("li:lt(2)");//列表中下标小于2的所有元素
$(":header");//所有h1-h6的元素
$(":animated");//所有使用aniamte动画的元素
$(":focus"); //聚焦元素
$(":empty")；//没有内容或者子元素的元素
$(".div1:has(.div2)")//含有div2的内容的div1元素
$(".div2:parent")//判断div2有子元素的或者有内容的
$(".div2").parent()//获取div2的父元素
$(".div2").parents()//获取div2的所有父元素
$(".div2").parentsUntil("html")//获取div2的所有父元素中到什么之前的
$(".div1:contains(1)")//判断元素的后代中有1这个内容的元素
$(".div4:hidden")//隐藏元素，针对display:none或者是不显示的元素
// visibility: hidden;不是隐藏，因为它占位了
$(":visible")//显示元素
$(":only-child")//只有一个子元素的元素
$("div").is(".div1")//这个方法得到一个布尔值，是否在div中有类名是div1的元素
$("div").hasClass("div1")//这个方法得到一个布尔值，是否在div中类名是div1的元素
$("li").slice(2,4)//div列表中选择第2个到第4个之间的元素
$(":input")//所有input标签
$(":text");//type=text的input
$(":password");//type=password的input
$(":disabled");//不可用
$(":enabled");//可用
$(":checked");用于input中checkbox和radio
$(":selected");//用于下拉菜单的元素

4、jQuery的遍历

var arr= [1,2,3,4];
$.each(arr,function(item,index){
console.log(index,item)
})//便利数组
var obj ={a:1,b:2,c:3};
$.each(obj,function(key,value){
console.log(key,value)
})//遍历对象
$.each($('div'),function(index,item){
console.log(index,item)
})//静态方法遍历
$('div').each(function(index,item)){
console.log(index,item)
}//实例化元素方法遍历

5、jQuery的内容

$("div").html("");//就相相当于div.innerHTML=""
$("div").text();//相当于div.innerText

6、jQuery的属性

console.log($("div").attr("a"));  // 只能获取到列表中第一个元素的a属性值
$("div").attr("b","10");//给所有div添加b属性值为10
$("div").attr("c",function(index,item){
return index+1;
})//也可以使用回调函数来设置不同的属性值
$("div").attr({
b:"1",
c:function(index,item){
return index+1;
}
}) //添加多个不同属性
$("div").removeAttr("b");//删除属性

$("div").prop("a","10");//使用.prop()添加属性
$("div").a=10;
console.log($("div").a);//结果为Undefined 因为每次$就会新建一个jQuery对象
var list=$("div");
list.a=10;
console.log(list.a);//使用变量接收这个对象就可以打印出a的属性值
$("div").prop("b",10);//设置了jQuery列表中所有DOM的对象属性增加b
$("div").prop("b")//从列表中取第一个元素的DOM对象属性b的值

$("div").data("abc",10);//设置在一个jQuery映射对象上
$("div").data("abc")//获取列表中第一个div的abc属性

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

7、jQuery的css样式

$('div').css('width',50)//设置某一个样式
$('div').css({
width:50,
height:50,
'属性'：'属性值'
})//设置多个样式
$('div').css('width')//获取某一样式，获取的是css后计算的样式
$("div").css(["width","height","backgroundColor"]);// 获取第一个元素的指定样式值，返回一个对象
$("div").addClass("div1");//添加某一类名
$("div").addClass("div1 div2");//添加多个类名
$("div").removeClass("div1");//移除某一类名
$("div").removeClass("div1 div2");//移除多个类名
$('div').toggleClass("div2");//切换某一类名样式
$("div").innerWidth()//width+padding 可以设置
$("div").outerWidth()//offsetWidth,width+padding+border 可以设置
$("div").outerWidth(true)//width+padding+border+margin 只读属性
$("div").offset()//元素相对页面左上角的位置 可以设置
$(".div3").position()/得到的是定位位置，和offsetLeft，offsetTop  不能设置
(".div2").scrollTop()// 获取和设置滚动条位置

8、jQuery中的dom

var div=$("<div></div>");//创建dom元素
$("body").append(div);//将div放入到body中
$("<div></div>").appendTo("body");//创建一个div将div放入body中
//append和appendTo的所属对象不同，使用链式编程的时候根据情况需要来看使用某一方法
$("<div></div>").prependTo(".div1")//插入父元素的第一个子元素位置
$(".div1").prepend("<div></div>");/插入父元素的第一个子元素位置
$(".div1").after("<div></div>");// 插入在兄弟元素后面
$("<div></div>").insertAfter(".div1");// 插入在兄弟元素后面
$(".div1").before("<div class='divs'></div>")//插入在兄弟元素前面
$("<div></div>").insertBefore(".div1");//插入在兄弟元素前面
$("div").wrap("<a></a>")//给每个元素外面的包裹一个a标签
$("div").wrapAll("<a></a>");//给所有元素外面包裹一个a标签
$("span").unwrap();//将包裹的父元素删除
$("div").wrapInner("<a></a>")//给每个div的内容包裹一个a标签
$("div").clone(false)
$("div").clone(true);//两种复制都是深复制，只不过true时连带事件一起复制，false时不复制事件。
$(".div1").remove();//删除元素的时候会将所有元素的事件也删除注销
$(".div1").detach();//仅删除元素，事件保留
$(".div1").empty()//清除元素的所有子元素和内容
$(".div1").replaceWith("<a></a>");
$("<a></a>").replaceAll(".div1")//都是用来替换元素的

9、jQuery中的事件

$('div').on('click',clickHandler)//给div注册一个点击事件
$('div').off('click',clickHandler)//删除div的注册事件
$("div").on("click.a",function(e){
console.log("a");
$(this).off("click.a");//命名空间可以解决删除事件的问题
// 将所有click事件的内容全部删除
}).on("click.b",function(){
console.log("b");
})
var obj = {
a:1,
b:function(){
$('div').on('click',this,fuction(e){
console.log(e.data)//e.data就是obj 也就是上面传入的this
})
}
}
$("div").on("click",{a:1},function(e){
console.log(e.data);//e.data就是上面传入的数据
})
//使用trigger抛发事件
$("div").on("aaa",function(e,o){
console.log(e,o);
})//创建一个aaa事件
$("div").trigger("aaa");//抛发aaa事件
$("div").trigger("aaa",{a:1,b:10});//抛发事件并传递参数
$("form").on("submit",function(e){
console.log(e);
return "abc"
})
$("form").trigger("submit");//会触发默认事件
$("form").triggerHandler("submit");//这个不会触发默认事件
$(document).ready(function(){
// 当DOM全部创建完成后，图片没有加载完成前
})
window.onload=function(){
//当所有页面加载完成后
}
$("div").hover(function(){
$(this).css("backgroundColor","green")
},function(){
$(this).css("backgroundColor","red")
})//鼠标滑过事件 类似于mouseenter mouseleave

10、JQuery中的动画

JQuery中显示方法为：.show(),

隐藏方法为：.hide().

在没有参数时，只是硬性的显示内容和隐藏内容。

$("div").hide()//隐藏
$("div").show();//显示

shoe和hide方法可以传递一个参数，参数以毫秒值来控制速度，并且里面富含了匀速变大变小，以及透明度的切换。

$("div").hide(2000).show(2000);//两秒隐藏两秒显示
$("div").hide(2000,function(){
$(this).show(2000);
}) //和上述方法相同
$("div").hide(2000,function(){
$(this).toggle(2000);
}) //toggle意为切换之前隐藏现在就显示，之前显示就隐藏

它的参数除了是毫秒值还可以 是字符串，slow、normal、fast分别对应 600、400、200毫秒。

jQuery提供了一组改变元素高度的方法：

.slideUp()、.slideDown()、.slideToggle();

就是向上收缩和向下展开还有自动切换，他们和hide和show一样具有相同的参数

$("div").slideUp(2000).slideDown(2000);

jQuery还提供了一组专门 用于透明度的变化的方法：

.fadeIn()和.fadeOut()、.fadeToggle()

淡入、淡出和自动切换

$("div").fadeOut(1000).fadeIn(1000);

上述三个方法只能从0到1，或者从1到0，如果我们想设置指定的值的话jQuery还提供了一个 .faceTo()的方法

$("div").fadeTo(2000,0.4)//两秒透明度到0.4

上述的方法都是简单常用的一些方法，如果我们要实现复杂的需求的话jQuery给我提供了一个。animate()方法来创建我们的自定义动画，满足更多复杂多变的要求。

$(document).on("click",function(e){
$("div").animate({
'width':'300px',
'height':'200px',
'fontSize':'50px',
'opacity':0.5
},500,fucntion(){//500表示500毫秒执行完成
//执行完的回调函数
})
})

实现队列动画可以使用连缀写法或者回调函数来完成

$("div").animate({
left:100
},500).animate({
top:100
},500).animate({
left:0
},500).animate({
top:0
},500)

11、jQuery插件的封装

编写一个jQuery插件开始于给jQuery.fn加入新的功能属性

$.fn.aa = function () {
//方法内容
};//相当于写入了一个jQuery方法

利用$.extend()向jQuery中添加函数

$.extend({a:function(){
console.log("aa");
}
})

$.a();

编写实际插件最好使用自调用函数来避免一些全局依赖以及兼容问题，尽量使用id选择器。

(function ($) {
$.fn.aaa = function () {
console.log(aaa)
};
})

12、jQuery中的Ajax

jQuery提供了一组用于特定异步加载的方法：

$.getScript()用于加载特定的JS文件；

$.getScript("./a.js",function(){
//可以使用本地js文件中的方法
})//加载本地js文件

$.getJSON()用于专门加载JSON文件

$.getJSON("./config.json",function(data){
console.log(data);
})//加载本地JSON文件

$.get()通过GET方式请求服务

$.get("http://localhost:4001?name=aaa",function(data){
console.log(data);
})
$.get("http://localhost:4001,"name=aaan",function(data,success,xhr){
console.log(data,success,xhr);
})//success表示是否请求成功

$.post()通过POST方式请求服务

$.post("http://localhost:4001",{user:"aaa",age:11},function(data){
console.log(data);
})

$(“div”).load()将数据加载到div中

load也可以加载本地文件使用回调函数来传入数据

$("div").load("http://localhost:4001",{user:"xietian",age:30});

$(document).load("./config.json",function(data){
console.log(JSON.parse(data));
})

$.ajax() jQuery中的使用其中的参数可以去参考JQuery中Ajax参数的表，这里就主要演示方法。

$.ajax({url:"http://localhost:4001?name=aaa",
success:function(data){
console.log(data);
}
})//通过get来发送Ajax请求

$.ajax({url:"http://localhost:4006",
type:"POST",
data:{name:'aaa'},
success:function(data){
console.log(data);
}//利用POST来发送Ajax请求

$.ajax({
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=11&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback",
type:"GET",
dataType:"jsonp",
})//使用jsonp进行跨域访问 callback为回调函数这里就不写了。

使用Ajax异步处理提交表单时可以使用表单序列化方法.serialize()，他会将表单元素内容序列化为字符串，然后在使用Ajax请求大大提高效率。

$("form").on("submit",function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:'localHost:4001',
data:$('form').serialize(), //表单序列化
success:function(response,status,xhr){
alert(response);
}
});
})