jQuery 介绍
官网：http://jquery.com/
jQuery是一个快速的、小的、功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等操作更加简单，易于使用的API在许多浏览器中起作用。结合了多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。
优势
轻量级
强大的选择器
出色的DOM操作
可靠的事件处理机制
出色的浏览器兼容性
链式操作方式
完善的Ajax
丰富的插件支持
完善的文档
开源
jQuery ready
ready是DOM结构绘制完毕后就执行，在JQ3.0以前ready在window.onload之前执行，JQ3.0后在window.onload之后执行。
$(document).ready(function () {
console.log(“ready”)
})
//ready简写
$(function () {
console.log(“ready”)
})
window.onload是等到页面内的所有元素加载完毕后和图片开始加载时才执行。
window.onload = function () {
console.log(“load”)
}
多库共存
防止jQuery和其他库冲突可以调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。
var JQ = jQuery.noConflict();
//执行jQuery ready
jQuery(function(){
console.log(“jQuery”)
})
//执行jQuery ready
JQ(function(){
console.log(“JQ”)
})
//下面代码报错
$(function(){
console.log(“$”)
})
jQuery 选择器
jQuery中的选择器完全继承了CSS的风格,支持CSS1到CSS3选择器。使用jQuery选择器可以非常简洁的获取DOM元素，也是jQuery对象，通过jQuery对象才可以使用jQuery的属性和方法。
//js原生获取元素
var d1 = document.getElementById(“d1”);
//jQuery获取元素
var $d1 = $(“#d1”);
CSS设置
//获取样式值
console.log($div.css(“backgroundColor”))
//设置样式链式操作方式
$div.css(“backgroundColor”,”red”)
.css(“width”,100)
.css(“height”,100)
//设置样JSON参数方式
$div.css({
backgroundColor:”blue”,
width:100,
height:100
})
事件处理事件绑定
$div.on(“click”,function () {
$(this).css(“background”,”red”);
})
$div.click(function(){
$(this).css(“background”,”red”);
})
移除事件
$div.off(“click”)
hover()
通过鼠标移进移除事件实现hover效果
$div.mouseenter(function () {//移进元素时触发
$div.css(“background”,”yellow”)
})
$div.mouseleave(function () {//离开元素时触发
$div.css(“background”,”red”)
})
JQ把鼠标移进移除事件封装到hover方法里面
$div.hover(function () {//移进元素时触发
$div.css(“background”,”yellow”)
},function () {//离开元素时触发
$div.css(“background”,”red”)
})
显示隐藏
show()：显示hide()：隐藏toggle()：显示隐藏
结构
<button>显示/隐藏</button>
<div>这是Div</div>
var $btn = $(“button”);
var $div = $(“div”);
var bol = true;
$btn.on(“click”,function () {
if (bol) {
$div.hide();//隐藏
}else{
$div.show()//显示
}
bol = !bol;//取反
})
通过toggle方法实现控制DIV显示隐藏
var $btn = $(“button”);
var $div = $(“div”);
$btn.on(“click”,function () {
$div.toggle();//显示隐藏
})
CSS 类名设置
addClass()：添加类名removeClass()：移除类名toggleClass()：添加移除类名
样式结构
<style type=”text/css”>
.d1{
width: 100px;
height: 100px;
background: red;
display: none;
}
.show{
display: block;
}
</style>
<button>显示/隐藏</button>
<div class=”d1 show”>这是Div</div>
var $btn = $(“button”);
var $div = $(“div”);
var bol = true;
$btn.on(“click”,function () {
if (bol) {
$div.removeClass(“show”);//移除类名
}else{
$div.addClass(“show”);//添加类名
}
bol = !bol;//取反
})
通过toggle方法实现添加移除类名
var $btn = $(“button”);
var $div = $(“div”);
$btn.on(“click”,function () {
$div.toggleClass(“show”);//添加移除类名
})
JQ对象和原生对象转换
JQ对象转原生
//通过JQ选择器获取JQ对象
var $div = $(“div”);
//通过JQ的get()方法获取第0个原生div对象
var div = $div.get(0);
//通过数组下标方式获取JQ对象里的第0个原生div对象
var div = $div[0];
原生对象转JQ
//获取原生对象
var div = document.querySelector(“div”);
//原生对象转JQ对象
var $div = $(div);
循环遍历JQ对象
eq()：获取第N个jQuery对象each()：循环遍历
结构
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
for循环遍历
var $li = $(‘li’);
for (var i = 0; i < $li.length; i ) {
if (i%2==0) {
$li.eq(i).css(“background”,”red”)
}else{
$li.eq(i).css(“background”,”blue”)
}
}
JQ的each方法遍历
var $li = $(‘li’);
$li.each(function (i) {
if (i%2==0) {
$(this).css(“background”,”red”)
}else{
$(this).css(“background”,”red”)
}
})
查找元素的索引值
index()：查找元素的索引值
结构
<ul>
<li><div class=”d1″>1</div></li>
<li><div class=”d1″>2</div></li>
<li><div class=”d1″>3</div></li>
<li><div class=”d1″>4</div></li>
<li><div class=”d1″>5</div></li>
</ul>
获取li在同级li中的索引位置。
var $li = $(“li”);
$li.on(“click”,function () {
console.log($(this).index());//输出索引位置
})
获取div在选择器的”div”中的索引位置。
var $div = $(“div”);
$div.on(“click”,function () {
console.log($(this).index(“div”));//输出索引位置
})
HTML代码/文本/值
html():获取或设置元素的html内容
//JQ方法
$div.html(“”)
//对应的原生方法
div.innerHTML = “”;
text():获取或设元素的内容
//JQ方法
$div.text(“”)
//对应的原生方法
div.innerText = “”;
val() 获取或设置元素的value属性值
//JQ方法
$input.val(“”)
//对应的原生方法
input.value = “”;
位置
offset():获取匹配元素在当前视口的相对偏移。
console.log($div.offset().top)
console.log($div.offset().left)
position():获取匹配元素在当前样式设置的定位left和top值
console.log($div.position().top)
console.log($div.position().left)
scrollTop():获取元素上下滚动条的位置。scrollLeft():获取元素左右滚动条的位置。
获取
console.log($(window).scrollTop())
console.log($(window).scrollLeft())
设置
console.log($(window).scrollTop(100))
console.log($(window).scrollLeft(100))
尺寸
heigh()：获取元素样式(height)的值
width()：获取元素样式(width)的值
innerHeight()：获取元素的高(不包括边框)
innerWidth()：获取元素的宽(不包括边框)
outerHeight()：获取元素的高(包括边框)
outerWidth()：获取元素的宽(包括边框)
样式结构
<style type=”text/css”>
div{
background: red;
width: 100px;
height: 100px;
padding:10px;
border: 5px solid black;
}
</style>
<div></div>
JQ代码
console.log($div.width());//输出100
console.log($div.height());//输出100
console.log($div.innerWidth());//输出120
console.log($div.innerHeight());//输出120
console.log($div.outerWidth());//输出130
console.log($div.outerWidth());//输出130
