jQuery学习笔记1
// 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>