一、jquery的元素内容操作
<body>
<div id="box">
<p>段落1</p>
</div>
<input type="text" value="hello">
</body>
// html:封装了原生js的innerHTML
// 原生js的innerHTML是属性
// 原生js的innerHTML是通过赋值
// jq的html是方法
// jq的html是传参设置
// $("#box").html("");
// $("#box").html("hello");
$("#box").html("<h1 abc='qwe'>hello</h1>");
console.log($("#box").html());
// text：封装了原生js的innerText
// $("#box").text("");
$("#box").text("world");
// $("#box").text("<em>world</em>");
console.log($("#box").text());
// val：封装了原生js的value
// $("input").val("");
$("input").val("hahaha");
// $("input").val("<b>hahaha</b>");
console.log($("input").val());
二、jquery的元素class操作
<style>
.box{width: 100px;height: 100px;}
.red{background: red;}
.blue{background: blue;}
.border{border: solid 10px black;}
.fontsize{font-size: 30px;}
</style>
<body>
<div class="box red">hello</div>
</body>
<script src="../jquery.js"></script>
<script>
// 原生js的className是覆盖
// jquery中添加class，不是覆盖，而是在原有的基础上添加
$(".box").addClass("blue border red");
// 删除class，不是清空
// $(".box").removeClass("border blue");
// 清空class，其实就是设置属性
// $(".box").prop("class","");
// $(".box").attr("class","");
// 判断当前有，删除；如果没有，添加
document.onclick = function(){
$(".box").toggleClass("fontsize");
}
// 判断是否具有class：有true，没有false
console.log($(".box").hasClass("red"));
</script>
三、jquery的事件绑定
<style>
#box{width: 200px;height: 200px;background: red;}
</style>
<body>
<div id="box">
<p>段落1</p>
<p class="aa">段落2</p>
<h3>标题3</h3>
<h4 class="aa">标题4</h4>
</div>
</body>
<script src="../jquery.js"></script>
<script>
// $("#box")[0].onclick = function(){}
// $("#box")[0].addEventListener("click",function(){})
// jq中所有的事件绑定，都是DOM2级，意味着全部可以重复绑定
// 1.on绑定，off删除
// on绑定可以实现事件委托，及，向事件处理函数中传参
// on的参数：
// 1.事件类型，还可以起名，为了将来删除方便
// 2.事件委托的元素，可省略
// 3.向事件处理函数中传递的数据，可省略
// 4.事件处理函数，注意，如果向时间里出函数中传参了，那么要通过事件对象的data属性找到
// off删除，件删除事类型+名字
// $("#box").on("click.c1",".aa","hello",function(eve){
// // console.log(eve);
// // console.log(eve.data);
// console.log(1);
// // console.log(this);
// });
// $("#box").on("click.c2",function(){
// console.log(2);
// })
// $("#box").off("click.c1");
// 2.one方法：绑定一次性事件，触发之后，自动删除
// $("#box").one("click",function(){
// console.log(1);
// })
// 3.基础绑定，直接使用事件名绑定
$("#box").click(function(){
console.log("点击")
})
// $("#box").mousemove(function(){
// console.log("移动")
// })
// $("#box").dblclick(function(){
// console.log("双击")
// })
// $("#box").mousedown(function(){
// console.log("按下")
// })
// ........
// 4.hover方法绑定事件
// 进入:mouseentwe
// 离开:mouseleave
// 不带事件冒泡
// $("#box").hover(function(){
// console.log("鼠标进入")
// },function(){
// console.log("鼠标离开")
// })
// 5.ready方法绑定事件
// 加载
// load
// document.onload
// $(document).ready(function(){
// console.log("页面结构加载完成")
// })
// window.onload
// $(window).ready(function(){
// console.log("页面和资源都加载完成")
// })
// 提示：使用图片的加载测试区别
// 6.模拟事件执行：triggerHandler / trigger
// trigger：会触发事件冒泡
// triggerHandler：不会触发事件冒牌
// $("#box").click(function(){
// console.log("点击了");
// })
// setInterval(()=>{
// $("#box").triggerHandler("click");
// },1000)
</script>
四、jquery的Tab选项卡
<style>
.box{width: 500px;height: 400px;border: solid 1px black;margin: 20px auto;}
.box ul{margin: 0;padding: 0;list-style: none;height: 40px;line-height
:40px;display: flex;background: #ccc;text-align: center;}
.box li{flex:1;border-left: solid 1px black;border-right: solid 1px black;}
.box li.active{background: red;}
.cont{}
.cont div{width: 500px;height: 360px;display: none;}
.cont .cont1{background: #f0f;display: block;}
.cont .cont2{background: #f00;}
.cont .cont3{background: #00f;}
.cont .cont4{background: #0ff;}
</style>
<body>
<div class="box">
<ul><li class="active">新闻</li><li>广告</li><li>招聘</li><li>介绍</li></ul>
<div class="cont">
<div class="cont1">第一个选项卡的内容区域，111111</div>
<div class="cont2">第二个选项卡的内容区域，222222222</div>
<div class="cont3">第三个选项卡的内容区域，333333</div>
<div class="cont4">第四个选项卡的内容区域，444444</div>
</div>
</div>
</body>
<script src="../jquery.js"></script>
<script>
// 点击li，设置当前项，操作对应内容区域
$(".box").find("li").click(function(){
// 先取消所有，再给当前加
// 先给当前加，然后取消其他兄弟
// 此处的this，默认找到的是原生js的DOM对象
// console.log(this);
// 如果想使用jq的方法，需要先转成jq的DOM对象
$(this).addClass("active").siblings().removeClass("active");
// 获取当前点击元素的索引
// console.log($(this).index());
$(".cont").children("div").css("display","none").eq($(this).index()).css("display","block");
})
// jq的所谓的一行代码解决问题：
// 思路更趋向于：自然语言
// 要求必须先使用自然语言分析
// 自然语言得没问题
</script>
五、jquery的DOM操作
<body>
<div id="box">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
<script src="../jquery.js"></script>
<script>
// 元素节点
// 创建：
// document.createElement("div")
// console.log($("<div>"));
// var s = $("<span>");
// 插入
// 要插入的父元素.appendChild(ele);
// append:插入指定父元素的最后一个子元素
// $("#box")被s插入了
// $("#box").append(s);
// 把s插入到$("#box")中
// s.appendTo($("#box"));
// prepend:插入指定父元素的第一个子元素
// $("#box").prepend(s);
// s.prependTo($("#box"));
// before:给指定元素，添加上一个兄弟
// $("#box").before(s);
// after:给指定元素，添加下一个兄弟
// $("#box").after(s);
// 删除
// 删除指定元素
// $(".box").remove();
// 删除所有子元素
// $("#box").empty();
// 修改
// 获取标签自身同时删除自己
// console.log($("#box").replaceWith());
// 传字符的参数，会修改标签
// $("#box").replaceWith("<span id='"+ $("#box").attr("id") +"'>"+ $("#box").html() +"</span>");
// 克隆
// $("#box").click(function(){
// console.log(1);
// })
// var b = $("#box").clone();
// $("body").append(b);
// 除了克隆结构，还会克隆事件
// var b = $("#box").clone(true);
// $("body").append(b);
// 查询：选择器
</script>
六、jquery元素的尺寸类获取
<style>
#box{width: 100px;height: 100px;padding: 20px;border: solid 30px black;margin: 40px;position: absolute;left:50px;top:50px;background: red;overflow: auto;}
</style>
<body>
<div id="box">此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作此处正在演示元素的尺寸操作</div>
</body>
<script src="../jquery.js"></script>
<script>
console.log($("#box").width()); // width
// $("#box").width(200);
console.log($("#box").innerWidth()); // width + padding
// $("#box").innerWidth(200); // 抵消掉padding，剩下的全给width
console.log($("#box").outerWidth()); // width + padding + border
// $("#box").outerWidth(300); // 抵消掉padding+border，剩下的全给width
console.log($("#box").offset()); // margin + position
console.log($("#box").offset().left); // margin + position
console.log($("#box").offset().top); // margin + position
// $("#box").offset({left:100,top:100}); // 抵消掉margin，剩下的全给position
console.log($("#box").position()); // position
console.log($("#box").position().left); // position
console.log($("#box").position().top); // position
// $("#box").position(); // 不能设置
// scrollTop
// scrollLeft
$("#box").scroll(function(){
console.log($("#box").scrollTop());
})
$(document).click(function(){
$("#box").scrollTop(233);
})
</script>
七、jquery的内置动画操作
<style>
#box{width: 500px;height: 500px;background: red;}
</style>
<body style="background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584614528100&di=7196bc24d165e27323735e4131c009d0&imgtype=0&src=http%3A%2F%2Fpic26.nipic.com%2F20121217%2F5955207_202406857000_2.jpg)">
<input type="button" id="btn1" value="隐藏">
<input type="button" id="btn2" value="显示">
<input type="button" id="btn3" value="隐藏/显示">
<input type="button" id="btn4" value="上拉">
<input type="button" id="btn5" value="下拉">
<input type="button" id="btn6" value="上拉/下拉">
<input type="button" id="btn7" value="淡出">
<input type="button" id="btn8" value="淡入">
<input type="button" id="btn9" value="淡出/淡入">
<input type="button" id="btn10" value="有点透明">
<div id="box"></div>
</body>
<script src="../jquery.js"></script>
<script>
// 内置动画：
// 当前这一波动画效果为：显示或隐藏
// 固定的，只能显示或隐藏
// 而且，方向不可改变，大小不可改变，除了运动时间，什么都不能改
// 隐藏，显示
$("#btn1").click(function(){
$("#box").hide(200,"linear",function(){
alert("动画结束了")
});
})
$("#btn2").click(function(){
$("#box").show(200);
})
$("#btn3").click(function(){
$("#box").toggle(200);
})
// 上拉，下拉
$("#btn4").click(function(){
$("#box").slideUp(1000);
})
$("#btn5").click(function(){
$("#box").slideDown(1000);
})
$("#btn6").click(function(){
$("#box").slideToggle(1000);
})
// 淡出，淡入
$("#btn7").click(function(){
$("#box").fadeOut();
})
$("#btn8").click(function(){
$("#box").fadeIn();
})
$("#btn9").click(function(){
$("#box").fadeToggle();
})
$("#btn10").click(function(){
$("#box").fadeTo(1000,0.2);
})
</script>
八、jquery的自定义动画操作
<style>
#box{width: 100px;height: 100px;position: absolute;left: 0;top:30px;background: red;}
</style>
<body>
<input type="button" id="btn1" value="走你">
<div id="box"></div>
</body>
<script src="../jquery.js"></script>
<script>
// hide的隐藏，为左上角隐藏
// 如何处理成右上角
// 文档流的方向理解：从上到下，从左向右
// 修改宽高，默认左上角是原点
// 缩小的同时，让他向右走
// jQuery动画的本质，尺寸和位置，不是2D3D变形
// 默认隐藏
// $("#btn1").click(function(){
// $("#box").animate({
// width:0,
// height:0
// },2000,function(){
// alert("结束了");
// });
// })
// 右上角隐藏
// $("#btn1").click(function(){
// $("#box").animate({
// width:0,
// height:0,
// left:100,
// top:30
// },2000,function(){
// alert("结束了");
// });
// })
// 中心点隐藏
$("#btn1").click(function(){
$("#box").animate({
width:0,
height:0,
left:50,
top:80
},2000,function(){
alert("结束了");
});
})
</script>
九、jquery的动画的执行顺序
<style>
#box{width: 100px;height: 100px;position: absolute;left: 0;top:30px;background: red;}
#box2{width: 100px;height: 100px;position: absolute;left: 0;top:160px;background: blue;}
</style>
<body>
<input type="button" id="btn1" value="走你">
<div id="box"></div>
<!-- <div id="box2"></div> -->
</body>
<script src="../jquery.js"></script>
<script>
$("#btn1").click(function(){
// $("#box").animate({
// left:500
// },1000);
// 动画结束后，开启另一个元素的动画
// 没有功能：
// 使用现有技术实现：回调函数（回调地域）
// 自己封装：利用promise在jq基础之上再进行封装
// 链式动画：一个接一个
// $("#box").animate({
// left:500
// },1000,function(){
// $("#box").animate({
// top:400
// },function(){
// $("#box").animate({
// left:0
// },function(){
// $("#box").animate({
// top:30
// })
// })
// })
// });
// 链式调用
// $("#box").animate({
// left:500
// }).animate({
// top:500
// }).animate({
// left:0
// }).animate({
// top:30
// })
// $("#box").animate({
// left:500
// }).animate({
// top:500
// }).css({
// background:"yellow"
// })
// animate与animate之间是同步执行
// animate与其他方法(css)是异步执行
// 如何让animate与其他方法(css)编程同步执行？
// 1.回调函数
// $("#box").animate({
// left:500
// }).animate({
// top:500
// },function(){
// $("#box").css({
// background:"yellow"
// })
// })
// 2.queue方法:不是为了动画而生，而是为了异步转同步而生
$("#box").animate({
left:500
}).animate({
top:500
}).queue(function(next){
$("#box").css({
background:"yellow"
})
next();
}).animate({
left:0
})
})
</script>
十、jquery动画的控制
<style>
#box{width: 100px;height: 100px;background: red;position: absolute;}
</style>
<body>
<input type="button" id="btn" value="走你~">
<input type="button" id="btn2" value="停下">
<div id="box"></div>
</body>
<script src="../jquery.js"></script>
<script>
$("#btn").click(function(){
// delay：延迟执行动画
// $("#box").delay(1000).animate({
// left:600
// }).delay(1000).animate({
// top:600
// }).delay(1000).animate({
// left:0
// }).delay(1000).animate({
// top:30
// })
// 停止：
$("#box").animate({
left:600
},1000).animate({
top:500
},1000)
})
$("#btn2").click(function(){
$("#box").stop(true,false);
})
// 多次动画执行过程（动画的队列）
// 如何一个元素存在多个动画效果，那么会产生一个队列，按照动画开启的顺序，依次执行，执行完前一个，后一个才能开始执行，如果前一个正在执行，那么后面所有动画都在等待
// 所谓的停止动画，其实要分两个动作进行，一个当前动画，一个是等待动画
// 真正想要的停止，就是停在当前位置不走了：既要清除当前动画，又要删除等待动画
// stop方法接收了两个参数：都是布尔值
// 参数1：表示动画队列的操作
// true:删除队列
// false:没有删除队列
// 参数2：表示当前动画的操作
// true:当前动画立即运动到终点
// false:当前动画停止了
// 直接运动到最后一个动画的终点
// $("#btn2").click(function(){
// $("#box").finish();
// })
</script>
3103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
