jquery使用心得
使用前的工作准备：
//1. 在<head></head>之间加入以下代码：
<script src="jquery.min.js"></script>
/*其中"jquery.min.js"是程序员自己创建的文件，
文件中所有代码从https://jquery.com/下载
（选择"Download the compressed, production jQuery 3.6.0"）*/
/*2.撰写程序入口。程序入口在body的<script></script>中，
填入以下代码*/
$(function() {})
//其中"{}"里面填需要完成的动作
这里有一个例子，可以结合上面说明运行思考（不关键代码已省略）
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
$(function() {
$('div').hide(); //隐藏div盒子
})
</script>
</body>
</html>
接下来正式进入jquery世界
1、$是jQuery的别称(另外的名字)
// 1. $ 是jQuery的别称（另外的名字）
// $(function () {
// alert(11);
// }) // 入口函数
jQuery(function () {
// alert(11);
// $('div').hide();
jQuery('div').hide();
})
2、如何区分这是一个jQuery对象还是DOM对象
var mydiv = document.querySelector('div'); // mydiv 是DOM对象
$('div'); // $('div')是一个jQuery对象
3、DOM对象不能使用jQuery的方法，jQuery也不能用原生js的属性和方法
mydiv.hide(); //myDiv是一个dom对象不能使用jquery里面的hide方法
$('div').style.display = 'none'; //这个$('div') 是一个jQuery对象不能使用原生js的属性和方法
4、DOM对象和jQuery对象相互转换
//以下代码在body区
<video src="mov.mp4" muted></video>
//muted用来关闭声音，以此顺利地在某些不兼容的浏览器中能正确播放视频
<script>
// 1. DOM 对象转换为jquery对象
// (1) 我们直接获取视频，得到就是
// $('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>
5、jQuery基本和层级选择器
<script>
$(function () {
console.log($(".nav")); //打印输出nav类的div标签
console.log($("ul li"));//打印输出ul里的所有li
console.log($("ol>li"));//打印输出ol里的所有li
})
</script>
6、jquery隐式迭代
<script>
// 1. 获取所有div元素
console.log($("div"));
// 2. 给所有div设置背景颜色为粉色 jquery对象不能使用style
$("div").css("background", "pink");
//3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
</script>
7、jQuery筛选选择器
<script>
$(function () {
//将ul里的第一个li颜色设置成红色
$("ul li:first").css("color", "red");
//将ul里的最后一个li颜色设置成红色
$("ul li:last").css("color", "red");
//将ul里的第二个li(数组从0开始)颜色设置成蓝色
$("ul li:eq(2)").css("color", "blue");
//将ol里的第偶数个li颜色设置成天蓝色
$("ol li:odd").css("color", "skyblue");
//将ol里的第奇数个li颜色设置成粉色
$("ol li:even").css("color", "pink");
})
// 注意一下都是方法 带括号 parent() 返回的是 最近一级的父级元素 亲爸爸
$(function () {
// 1. 父
console.log($(".son").parent());
// 2. 子
//(1) 亲儿子 children()
// $(".nav").children("p").css("color", "red");
// (2) 可以选里面所有的孩子 包括儿子和孙子 find()
$(".nav").find("p").css("color", "red")
// 3. 兄 siblings()
})
$(function () {
// 1. 兄弟元素 除了自身元素之外的所有亲兄弟
$("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(2).css("color", "blue");
// 3. 判断是否有某个类名
console.log($("div:first").hasClass("current"));
console.log($("div:last").hasClass("current"));
})
</script>
8、jQuery排他思想
<script>
$(function () {
// 1. 隐式迭代 给所有按钮都绑定了点击事件
$("button").click(function () {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色
$(this).siblings("button").css("background", "");
})
})
</script>
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
