一.jQury的引入
jQuery的优势
轻量级
强大的选择器
出色的DOM操作
可靠的事件处理机制
完善的Ajax
出色的浏览器兼容性
链式操作方式
丰富的插件支持
完善的文档
开源
一定要引入jquery文件
在jQuery库中，$ 就是jQuery的一个简写形式
选择器:类似于css的选择器(包含css1-css3的选择器)
//原理采用的是事件监听机制，不会发生覆盖
//在运行时间点上，ready方法只要html、css、js文件加载完毕就可以执行，无需等待图片加载
$(document).ready(function() {
alert("a");
})
//不会出现覆盖
$(document).ready(function(){
alert("b");
})
//推荐使用，非常简单
$(function(){
alert("c");
})
jQuery(function(){
alert("d");
})
二.jQuery绑定事件
//需要传入选择器
//对照原生事件，jQ里面的事件，不需要使用on开头
$("#btn").click(function(){
//alert("点击");
})
$("#div").mouseover(function(){
//alert("移入");
})
//推荐使用以下方法来绑定事件
$("#btn").on("click mouseover",function(ev){
//这里面已经做过兼容，ev可以直接使用
//ev.type 可以区分当前绑定的多个事件
console.log(ev);
//alert("heihei");
})
三、做一个移入移出的案例
$("#div").on("mouseover mouseout", function(ev) {
if(ev.type == "mouseover") {
this.style.backgroundColor = "red";
}
if(ev.type == "mouseout") {
this.style.backgroundColor = "green";
}
})
四、jQ的奇葩方法
//jQ里面除了原有事件之外，还有很多个性化事件
//第一个事件为移入事件，第二个事件为移出事件
$("#div1").hover(function() {
this.style.backgroundColor = "blue";
}, function() {
this.style.backgroundColor = "pink";
})
五、jQ改变和获取样式
$("#btn").on("click", function() {
//在jQ里面css方法专门用来操作样式
$("#div1").css({
//不能用分号，用逗号隔开
display: "block",
backgroundColor:"blue",
//可以加双引号加px，也可以直接写个值
transition:"4s all linear",
height:"400px",
width:400,
});
//animate只针对于值的变化，字符串变化是不可以的
//animate第一个参数为变换的值的集合，第二个参数为变换时间，
//第三个参数为运动轨迹，第四个参数为结束之后执行的回调函数
//jQ的学习成本很低
// 在现有高度的基础上增加100px
$aaron.animate({
width:"+=100px",
height:"+=100px"
});
$("#div1").animate({
width:400,
height:400,
},2000,"linear",function() {
//变化结束回调的函数
$("#div1").animate({
width:200,
height:200
},2000)
});
//除了给定样式、修改样之外之外，还可以获取样式，
//因为有良好的兼容性，所以不管是css样式还是行间样式，都可以获取
//alert($("#div1").css("width"));
})
六、jQ奇葩方法2
$("#hide").on("click", function() {
//隐藏hide()
$("#div1").hide();
})
$("#show").on("click", function() {
//显示show()
$("#div1").show();
})
七、修改元素行间属性
$("#btn").on("click", function() {
//获取当前点击元素的type类型value值
alert($(this).attr("type"));
alert($(this).attr("value"));
//修改有问题,
//如果使用attr修改value值，则value必须先改
$(this).attr({
value: "haha",
type: "text",
name: "btn"//本来没有name就是在添加属性
})
//也可以单独修改value的值
//$(this).val("哈哈");
})
八、jQ的DOM操作
DOM(Document Object Model-文档对象模型)：一种与浏览器，平台，语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件
DOM操作的分类：
--DOM Core：DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它，它的用途并不仅限于处理网页，也可以用来处理任何一种是用标记语言编写出来的文档，例如：XML
--HTML DOM：使用javascript和DOM为html文件编写脚本时，有许多专属于HTML DOM的属性
--CSS DOM：针对于CSS操作，在javascript中，CSS DOM主要用于获取和设置style对象的各种属性
$("#btn").on("click",function(){
//在jQ中使用DOM创建一个元素，添加到文档中
//类似于innerHTML
var div=$("<div><a href="#">我是超链接</a></div>")；
div.css({
width:200,
height:200,
backgroundColor:"red"
});
$("#wrap").append(div);
});
九、jQ对象与jS对象互换
//jQuery对象就是通过jQuery($())包装DOM对象后产生的对象
//jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么
//它就可以使用jQuery里的方法：$("#persontab").html()
//jQuery对象无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery里的任何方法
//约定：如果获取的时jQuery对象，那么要在变量前加上$
//jQuery对象是一个数组对象，可以通过index的方法得到对应的DOM对象
//var $cr=$("#div") var cr=$cr(0);
//使用jQuery中的get(index)方法得到相应的DOM对象
//var $cr=$("#div") var cr=$cr.get(0);
$("#btn").on("click", function() {
//获取一个jQuery对象
var $btn = $("#btn");
//jQuery对象是一个数组
alert($btn.length);
//可以通过数组下标转为DOM对象
//由jQuery对象转换成DOM对象
alert($btn[0].firstChild.nodeValue);
var btn = document.getElementById("btn");
//把DOM对象转为一个jQuery对象，使用$()进行包装
alert($(btn).text())
})
//原生
var div=document.getElementById("div1");
alert(div.offsetWidth);
//jQ
var div = $("#div1");
alert(div.css("width"));
//jq转原生
alert(div.get(0).offsetWidth);
var div = document.getElementById("div1");
//js原生转jq
alert($(div).css("width"));
十、jq版tab切换
//依次为按钮添加点击事件
$("input").on("click", function() {
//alert($(this).index());
//alert($("input").index($(this)))
var index = $("input").index($(this));
//把animate改成css就是tab切换
//用animate就是大图滚动
$("#middle").animate({
//方法一：
//left: -index * $("#wrap").width()
//方法二：
//left:-index*parseInt($("#wrap").css("width"))
//方法三：
left: -index * $("#wrap").get(0).offsetWidth
},1500)
})
十一、jQ版全选反选
$("#All").on("click", function() {
$.each($(".box"), function(index, el) {
el.checked = "true"
})
})
$("#Else").on("click", function() {
$.each($(".box"), function(index, el) {
el.checked = !el.checked
});
})
十二、each版tab切换
//第一种
$.each($("input"), function(index, el) {
el.onclick = function() {
//animate换成css就是tab切换
$("#middle").animate({
left: -index * $("#wrap").width(),
}, 1000)
}
});
//第二种
$.each($("input"), function(index, el) {
$(el).on("click", function() {
$("#middle").animate({
left: -index * $("#wrap").width(),
}, 1000)
})
});
十三、小练习
//点击p节点，弹出对应的文本内容，并且设置文本内容
//jQuery对象可以进行隐式迭代：$("p").on("click",function () {
}表示为选取的所有的p节点都添加了click响应函数。jquery对象本身就是一个DOM对象的数组
$("p").on("click",function () {
//在响应函数中，this是DOM对象，若想要使用jQuery对象的方法需要用$()把this包装起来
//alert(this.firstChild.nodeValue)
//alert($(this).text())
$(this).text("^^"+$(this).text())
//text()方法：不加参数表示读取文本值，加上参数表示为属性节点添加文本值（文本节点）
})
十四、小练习
//点击按钮弹出checkbox被选中的个数
<input type="button" id="btn" value="选中的个数">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
//js代码
<script type="text/javascript">
$("#btn").on("click",function(){
alert($(":checkbox:checked").length)
})
</script>
