1.jQuery简介：
? ? jQuery是一个兼容多浏览器的javascript库（函数库）。jQuery就是JavaScript和查询（Query），即是辅助javascrip开发的库。
2.jQuery的特点：
? ? ? ? ?jQuery 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。
? ? 1>提供了强大的功能函数
? ? 2>解决浏览器兼容性问题
? ? 3>纠正错误的脚本知识
? ? 4>体积小，使用灵巧(只需引入一个js文件)
? ? 5>易扩展、插件丰富? ?
? 3.jQuery的引用：
? ? ?1.引用本地jquery
<script src="本地地址"></script>
? ? ?2.在线cdn引用
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
4.jQuery的延迟加载
? ? 1.原生的onload是指页面包含图片在内的所有元素都加载完成
window.onload=function(){
}
? ?2.jQuery的ready表示文档已加载完成（不包含图片等非文字媒体文件）
// 简写形式
$(function(){
console.log("hello world");
});
// 完全体
jQuery(document).ready(function(){
console.log("hello jQuery");
});
则jQuery要比源生先执行
5.jQuery包装集：
? ? ? 在jQuery的世界中将所有的对象，无论是一个还是一组，都封装成一个jQuery包装集，即集合。也就是说，$()的返回结果都是集合，不是单个对象。
6.jQueryDOM和源生DOM之间的转换：
jQueryDOM和源生DOM有着不同的API，所有经常需要进行转换
6.1源生DOM转jQueryDOM
$(源生dom)：返回jQueryDOM
// let oBox = document.getElementById("box");
//console.log(oBox.innerHTML);
//$(原生dom):返回jQueryDom
// console.log($(oBox).html());//jQuery的innerHTML==html()
6.2jQuery转源生DOM
let oBox = $("#box").get(0); //将下标为0的jQueryDom的原生dom返回
console.log(oBox.innerHTML);
let oBox1 = $("div")[1]; //$("div").get(1);
console.log(oBox1.innerHTML);
7.kQuery选择器：
7.1基础选择器：
? ?<1>ID选择器（只代表唯一一个元素）
$("#box1").css({
backgroundColor:"red",
color:"yellow"
});
? ?<2>类选择器
$(".box").css({
backgroundColor:"red",
color:"yellow"
});
<3>标签选择器
$("p").css("backgroundColor","yellow");
<4>群组选择器
$("span,strong").css({backgroundColor:"blue"});
<5>通用选择器
$("*").css({backgroundColor:"green"});
7.2层级选择器：
? <1>子代选择器
$("body>div").css({ backgroundColor: "red" });
<2>后代选择器
$("body div").css({ backgroundColor: "yellow" });
<3>相邻选择器
$("#box2+div").css({backgroundColor: "blue" });
<4>兄弟选择器
$("#box2~div").css({backgroundColor: "green"});
7.3属性选择器：
<1>.通过属性名来选择器
$("div[class]").css({backgroundColor:"red"});
<2>通过属性值来获取
$("div[id=box1]").css({backgroundColor:"red"});
<3>通过多个属性来选择
$("div[id][class]").css({backgroundColor:"red"});
7.4伪类选择器：
? <1>even:获取偶数元素
$("div:even").css({backgroundColor:"red"});
<2>odd:获取奇数元素
$("div:odd").css({backgroundColor:"yellow"});
<3>first:获取第一个元素
$("div:first").css({backgroundColor:"blue"});
<4>last:获取最后一个元素
$("div:last").css({backgroundColor:"greenyellow"});
<5>eq(n)：获取下标所对应的元素(可以放外面)
//第一中写法
$("div:eq(2)").css({backgroundColor:"orange"});
// 第二中写法
$("div").eq(2).css({backgroundColor:"orange"});
<6>?not:除了某个元素都选
//第一种写法
$("div:not(#box2)").css({backgroundColor:"red"});
// 第二种写法
$("div").not("#box2").css({backgroundColor:"red"});
<7>lt(n):选中小于n的元素，但不包括n
$("div:lt(3)").css({backgroundColor:"red"});
<8>gt(n):大于
$("div:gt(3)").css({backgroundColor:"red"});
7.5内容选择器：
<1>contains(内容)：根据元素的内容来查找
$("div:contains('hello world')").css({backgroundColor:"red"});
<2>empty:找内容为空的元素
$("div:empty").css({backgroundColor:"red"});
<3>has(子元素):根据子元素来查找
$("div:has(#s)").css({backgroundColor:"red"});
7.6可见性选择器：
<1>hidden:隐藏
$("tr:hidden").css({backgroundColor:"red"});//改变隐藏tr的背景颜色
<2>?visible:显示
$("tr:visible").css({backgroundColor:"red"});//显示的tr的背景颜色变成红色
7.7遍历：
7.7.1兄弟之间遍历
?<1>next：下一个元素 ?特点：连缀模式
$("#box2").next().css({backgroundColor:"red"});
<2>nextAll：下一堆兄弟元素
$("#box2").nextAll().css({backgroundColor:"red"});
<3>prev：上一个
$("#box2").prev().css({backgroundColor:"red"});
<4>?prevAll：上一堆
$("#box2").prevAll().css({backgroundColor:"red"});
7.7.2父子之间遍历
<1>父元素.find("子元素") ?特点：必须要写子元素
$("body").find("div").css({backgroundColor:"red"});
<2>父元素.children([子元素]);
$("body").children().css({backgroundColor:"red"});
<3>?parent:父元素
$("p").eq(2).parent().next().css({backgroundColor:"red"});
7.8文本
value ==val()
// 写
$("input").val("xixixix");
// 读
console.log($("input").val());
innerHTML ==html()
// 写
$("div").html("xixixix");
// 读
console.log($("div").html());
// 有参为写无参为读
8.事件：
// $("div").click([传入的参数]，事件体的回调函数);
$("div").click(function(){
// 注意$(this)才是jQueryDom的this
$(this).css({
backgroundColor:"yellow"
});
});
$("div").mouseover(function(){
$(this).css({
backgroundColor:"blue"
});
});
$("div").mouseout(function(){
$(this).css({
backgroundColor:"green"
});
});
// ----------------------------------------
$("#box").click({
"name":"xixixi"
},function(evt){
// 通过data来操作外部传递的参数
console.log(evt.data);
});
9.基础动画：
9.1基础动画：
$("button").eq(0).click(function(){
// jQueryDOM.hide(事件长度，动画效果，回调函数)：注意回调函数是异步代码执行完后在执行的
$("#box").hide(2000,function(){
console.log("呆毛");
});
})
$("button").eq(1).click(function(){
// jQueryDOM.show(事件长度，动画效果，回调函数)：注意回调函数是异步代码执行完后在执行的
$("#box").show(2000,function(){
console.log("呆毛");
});
})
$("button").eq(2).click(function(){
// jQueryDOM.show(事件长度，动画效果，回调函数)：注意回调函数是异步代码执行完后在执行的
$("#box").toggle(2000,arguments.callee);
})
9.2滑块动画
$("button").eq(0).click(function(){
// jQueryDOM.hide(事件长度，动画效果，回调函数)
$("#box").slideUp(2000,function(){
console.log("呆毛");
});
})
$("button").eq(1).click(function(){
// jQueryDOM.show(事件长度，动画效果，回调函数)
$("#box").slideDown(2000,function(){
console.log("呆毛");
});
})
$("button").eq(2).click(function(){
// jQueryDOM.show(事件长度，动画效果，回调函数)
$("#box").slideToggle(2000,arguments.callee);
})
9.3淡入淡出
$("button").eq(0).click(function(){
// jQueryDOM.hide(事件长度，动画效果，回调函数)
$("#box").fadeOut(2000,function(){
console.log("呆毛");
});
})
$("button").eq(1).click(function(){
// jQueryDOM.show(事件长度，动画效果，回调函数)
$("#box").fadeIn(2000,function(){
console.log("呆毛");
});
})
$("button").eq(2).click(function(){
// jQueryDOM.show(事件长度，动画效果，回调函数)
$("#box").fadeToggle(2000,arguments.callee);
})
10自定义动画：
?1.animate({
?},[时间，过渡效果，回调函数])
$("button").eq(0).click(function(){
$("#box").animate({
width:50,
height:"300px",
left:800,
},2000).animate({
top:600
},2000).animate({
left:0
},2000).animate({
top:100
},2000,function(){
console.log("呆毛");
});
});
2.停止
$("button").eq(1).click(function(){
//立刻执行当前动画，执行下一步动画
// $("#box").stop(false,false);//无参就是两个false
// 结束当前动画，清空动画队列
// $("div").stop(true,false);
// 立即执行完当前动画，继续执行动画队列
// $("div").stop(false,true);
// 立即执行当前动画，清空动画队列
$("div").stop(true,true);
})
|