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);
})