// jQuery的入口函数
// 1.等着DOM结构渲染完毕即可执行内部代码，不必等到所以外部资源加载完毕，jQuery帮我们完成了封装
// 相当于原生js中的DOMContentLoaded
<script src="./jquery.min.js"></script>
<style>div {width: 200px;height: 200px;background-color: pink;}</style></head><body><div></div><script>// jQuery的入口函数// 1.等着DOM结构渲染完毕即可执行内部代码，不必等到所以外部资源加载完毕，jQuery帮我们完成了封装// 相当于原生js中的DOMContentLoaded// $("div").hide();// 1.等着页面dom加载完毕之后执行js代码// $(document).ready(function () {// $("div").hide();// });// 2.等着页面DOM加载完毕再去执行js代码$(function () {$("div").hide();});</script>jQuery的顶级对象$
// 1.$是jQuery的别称（另外的名字）// $(function () {// alert("1111");// });jQuery(function () {// alert("1111");// $("div").hide();jQuery("div").hide();});// 2.$同时也是jQuery的顶级对象 
代码测试功能：
// 1.DOM对象： 用原生js获取过来的对象就是DOM对象var myDiv = document.querySelector("div"); // myDiv 是原生DOM对象var mySpan = document.querySelector("span"); // mySpan 是原生DOM对象console.dir(myDiv);// 2.jQuery对象： 用jQuery方式获取过来的对象是jQuery对象，本质：通过$把DOM元素进行了包装$("div"); // $('div')是一个jQuery对象$("span"); // $('span')是一个jQuery对象console.dir($("div"));// 3.jQuery对象只能使用jQuery方法，DOM对象则使用原生的javascript属性和方法// myDiv.style.display = 'none'// myDiv.hide(); // myDiv是一个dom对象不能使用jquery里面的hide方法// $("div").style.display = "none"; //会报错jQuery对象和DOM对象
<style>video {width: 200px;height: 200px;background-color: pink;}</style></head><body><video src="mov.mp4" muted></video><script>// DOM对象转换成为jQuery对象// （1）我们直接获取视频，得到就是jQuery对象$("video");// (2)我们已经使用原生js获取过来DOM对象var myvideo = document.querySelector("video");// $(myvideo).play(); // jquery里面没有play这个方法// 2.jQuery对象转换成DOM对象// myvideo.play(); // 原生写法比较麻烦// $("video")[0].play();$("video").get(0).play();</script>jQuery选择器
隐式迭代（重要）
<script>// 1.获取四个div元素console.log($("div"));// 2.给四个div设置背景颜色为粉色，jquery对象不能使用style$("div").css("background", "pink");// 3.隐式迭代就是把匹配的所有元素进行遍历循环，给每一个元素添加css这个方法$("ul li").css("color", "red");</script>
<script>$(function () {$("ul li:first").css("color", "red");$("ul li:eq(2)").css("color", "blue");$("ol li:odd").css("color", "skyblue");$("ol li:even").css("color", "pink");});</script>
查找父级，最近一级子元素，所有子元素
<script>// 注意一下都是方法 带括号$(function () {// 1.父 parent() 返回的是 最近一级的父级元素console.log($(".son").parent());// 2.子// （1）儿子 children() 子代选择器 ul>li$(".nav").children("p").css("color", "red");// (2) 可以选择里面所有的孩子 包括儿子和孙子 find() 类似于后代选择器$(".nav").find("p").css("color", "red");// 3.兄});</script>新浪下拉菜单<script>$(function () {// 鼠标进入$(".nav>li").mouseover(function () {// $(this) jQuery当前元素 this不要加引号// show() 显示元素 hide() 隐藏元素$(this).children("ul").show();});// 鼠标移开$(".nav>li").mouseout(function () {// $(this) jQuery当前元素 this不要加引号// show() 显示元素$(this).children("ul").hide();});});</script>筛选选择器<script>// 注意一下都是方法 带括号$(function () {// 1. 兄弟元素siblings 除了自身元素之外所有亲兄弟$("ol .item").siblings("li").css("color", "red");// 2.第n个元素var index = 2;// （1） 我们可以利用选择器的方式选择// $("ul li:eq(2)").css("color", "blue");// $("ul li:eq(" + index + ")").css("color", "blue");// (2) 我们可以利用选择方法的方式选择 更推荐这种写法$("ul li").eq(index).css("color", "blue");// 3.判断是否有某个类名console.log($("div:first").hasClass("current"));console.log($("div:last").hasClass("current"));});</script>
<script>$(function () {// 1. 隐式迭代 给所有的按钮都绑定了点击事件$("button").click(function () {// 2.当前元素变化背景颜色$(this).css("background", "pink");// 3. 其余的兄弟去掉背景颜色 隐式迭代$(this).siblings("button").css("background", "");});});</script>
// 链式编程<script>$(function () {// 1. 隐式迭代 给所有的按钮都绑定了点击事件$("button").click(function () {// 2.当前元素变化背景颜色// $(this).css("background", "pink");// 3. 其余的兄弟去掉背景颜色 隐式迭代// $(this).siblings("button").css("background", "");// 我的颜色为红色，我的兄弟的颜色为空$(this).css("color", "red").siblings().css("color", "");// 我的兄弟的颜色为红色，我本身不变色// $(this).siblings().css("color", "red");// 最后给我的兄弟的父亲body变化颜色$(this).siblings().parent().css("color", "blue");});});</script>// 淘宝服饰<script>$(function () {// 1.鼠标经过左侧的小li$("#left li").mouseover(function () {// 2.得到当前小li的索引号var index = $(this).index();console.log(index);// 3.让我们右侧的盒子相应索引号的图片显示出来就好了// $("#content div").eq(index).show();// 4.让其余的图片隐藏起来// $("#content div").eq(index).siblings().hide();// 使用链式编程$("#content div").eq(index).show().siblings().hide();});});</script>jQuery 样式操作
<script>// 操作样式之css方法$(function () {console.log($("div").css("width"));// $("div").css("width", "300px");// $("div").css("width", 300);// $("div").css("height", "300px"); // 属性名一定要加引号，属性值不一定$("div").css({width: 400,height: 400,backgroundColor: "red",// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号});});</script>
<body><div class="current"></div><script>$(function () {// 1.添加类 addClass()// $("div").click(function () {// $(this).addClass("current");// });// 2.删除类 removeClass()// $("div").click(function () {// $(this).removeClass("current");// });// 3.切换类 toggleClass()$("div").click(function () {$(this).toggleClass("current");});});</script></body>
<script>$(function () {// 1.点击上部的li，当前li 添加current类，其余兄弟移除类$(".tab_list li").click(function () {// 链式编程的操作$(this).addClass("current").siblings().removeClass("current");// 2.点击的同时，得到当前li的索引号var index = $(this).index();console.log(index);// 3.让下部里面相应索引号的item显示，其余的item隐藏$(".tab_con .item").eq(index).show().siblings().hide();});});</script>
<script>// var one = document.querySelector(".one");// one.className = "two";$(".one").addClass("two"); // 这个addClass相当于追加类名，不影响以前的类名$(".one").removeClass("two");</script>jQuery 效果
但是如果快速滑动菜=菜单栏，多个地方就会出现动画效果，因为hover移动上去，出现的动画效果必须执行完成，动画都有排队的问题
// 显示隐藏效果$(function () {$("button").eq(0).click(function () {$("div").show(1000, function () {{console.log("1");}});});$("button").eq(1).click(function () {$("div").hide(1000, function () {{console.log("2");}});});$("button").eq(2).click(function () {$("div").toggle(1000);});// 一般情况下，我们都不加参数直接显示隐藏就可以了// 滑动下拉菜单<script>$(function () {// 鼠标经过// $(".nav > li").mouseover(function () {// // $(this) jquery 当前元素 this 不要加引号// // show() 显示元素 hide() 隐藏元素// $(this).children("ul").slideDown(200);// });// 鼠标离开// $(".nav > li").mouseout(function () {// $(this).children("ul").slideUp(200);// });// 事件切换 hover 就是鼠标经过和离开的复合写法// $(".nav>li").hover(// function () {// $(this).children("ul").slideDown(200);// },// function () {// $(this).children("ul").slideUp(200);// }// );// 2.事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标移开都会触发这个函数$(".nav>li").hover(function () {// stop 方法必须写到动画的前面$(this).children("ul").stop().slideToggle();// 这样写相当于停止动画$(this).children("ul").slideToggle().stop();});});</script>
//淡入淡出效果<script>$(function() {$("button").eq(0).click(function() {// 淡入 fadeIn()$("div").fadeIn(1000);})$("button").eq(1).click(function() {// 淡出 fadeOut()$("div").fadeOut(1000);})$("button").eq(2).click(function() {// 淡入淡出切换 fadeToggle()$("div").fadeToggle(1000);});$("button").eq(3).click(function() {// 修改透明度 fadeTo() 这个速度和透明度要必须写$("div").fadeTo(1000, 0.5);});});</script>//实例<script>$(function () {// 鼠标进入的时候，其他的li标签透明度： 0.5$(".wrap li").hover(function () {$(this).siblings().stop().fadeTo(400, 0.5);},function () {// 鼠标离开，其他li 透明度改为1$(this).siblings().stop().fadeTo(400, 1);});});</script>
<script>$(function () {$("button").click(function () {//params 更改需要更改的属性$("div").animate({left: 500,top: 300,opacity: 0.4,width: 300,},500);});});</script>
<script type="text/javascript">$(function () {// 鼠标经过某个小li，有两步操作$(".king li").mouseenter(function () {// 1.当前小li宽度变为 224px, 同时里面的小图片淡出，大图片淡入$(this).stop().animate({width: 224,},200).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();// 其余兄弟小li宽度变为 69px，小图片淡入，大图片淡出$(this).siblings("li").stop().animate({width: 69,},200).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();});});</script>
