JSday18—jQuery
作者：互联网
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);
})标签：jQuery,function,JSday18,red,backgroundColor,div,选择器,css 来源： https://blog.csdn.net/qq_48991522/article/details/120833986