jq与js
- jq是js写的插件库，就是一个js文件
- 凡是用jq能实现的，js都能实现，js能实现的，jq不一定能实现
引入
- bootcdn：https://www.bootcdn.cn/jquery/
- 本地文件引入：
<script src="js/jq.js"></script>
- 在线引入：
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
选择元素
- 在jq中使用选择器选择元素和在css中使用css选择器是一样的
$("p,span").click(function () { ... });- 方法内使用时，选择当前选中的元素，用this：
$(this)
基本使用一
- 修改内容
- jq/js对象转换
- 点击事件
- 鼠标滑入滑出：hover()
- 添加内容
- 添加标签
- 移除值
// 修改内容
$("#p1").html("<h1>11</h1>");//html()
$("#p2").text("<h1>12</h1>");//text()
//将jq对象转换为js对象
var p = $('p');
p.get(0).innerhtml=("<h1>21</h1>");//get()
p[1].innertext=("<h1>22</h1>");//[]
// 将js对象转换为jq对象
var sp1 = document.getelementsbyclassname('sp1');
$(sp1).text("23");//$()
//单击
$("#p1").click(function () {
alert("单击")
});
//双击
$("#p2").dblclick(function () {
alert('双击')
});
// 鼠标滑入滑出
$("#p2").hover(function () {
alert("鼠标滑入")
},function () {
alert("鼠标滑出")
});
//添加内容
var p2 = $("#p2");
p2.prepend("在前==preend==");//prepend()
p2.append("==append==在后");//append()
//添加标签
var p1 = $("#p1");
p1.before("<p id='p0'>p1_前</p>");//before()
p1.after("<p class='p'>p1_后</p>");//after()
//移除
$('#p1').empty();//清空内容、标签还在
$('#p2').remove();//连标签一起删除
基本使用二
- 操作属性
- 添加/移除class属性的值
- 判断：hasclass()
- 索引
- 滚动条事件
- scroll()
- scrolltop()
- scrollleft()
var div1 = $("#div1");
// 操作属性
div1.attr("aaa","bbb");
// alert(div1.attr("aaa"));//bbb
div1.removeattr("aaa");
// 添加/移除class属性的值
div1.addclass("divclass1");
div1.addclass("divclass2");//class="divclass1 divclass2"
div1.removeclass("divclass1");//class标签还在，但没有值
//判断class是否有这个值
// alert(div1.hasclass("divclass"));
//遍历 each()
$("ul li").each(function (i) {
$(this).text("元素下标："+i)
});
//下标 index()
$("li").click(function () {
alert($(this).index())
});
// 滚动条事件
$(window).scroll(function () {
console.log("左："+$(document).scrollleft());//离左边
console.log("上："+$(document).scrolltop());//离上边
})
基本使用三
- 父级元素：parent()
- 子级元素：children()
- 兄弟：siblings()
- 后代：find()
- 祖宗：parents()
// 查找父级元素
console.log($("li").parent());
// 查找子级元素
console.log($("#div1").children());
// 查找兄弟元素
console.log($("#p2").siblings());
// 查找后代元素
console.log($("ul").find("li"));//find必须给参数
// 查找祖辈元素
console.log($("#li3").parents());
操作css样式
$("..").css({...})
//设置
$("#div1").css({
"height":"300px",
"width":"300px",
"border":"1px red solid"
});
//获取
console.log($("#div1").css("border"));
简单动画
- 隐藏： hide()
- 显示： show()
- 向上：slideup()
- 向下：slidedown()
- 取反：slidetoggle()
- 淡入：fadein()
- 淡出：fadeout()
- 自定义：fadeto()
- 取反：fadetoggle()
- 动画：animate()
- 停止：stop()
- 延迟：delay()
// //显示
// $("#btn1").click(function () {
// $("#div1").show(500)//设置动画时间
// });
// // 隐藏
// $("#btn2").click(function () {
// $("#div1").hide()
// });
// //向上
// $("#btn1").click(function () {
// $("#div1").slideup(2000);//设置动画时间
// //取反：向上完毕之后会自动返回
// // $("#div1").slidetoggle(2000);
//
// });
// // 向下
// $("#btn2").click(function () {
// $("#div1").slidedown();
// $("#div1").slidetoggle(500);//取反
// });
// //淡入
// $("#btn1").click(function () {
// $("#div1").fadein(1500);//设置动画时间
// $("#div1").fadetoggle(500);//取反
//
// });
// // 淡出
// $("#btn2").click(function () {
// $("#div1").fadeout(1500);
// });
// // 自定义
// $("#btn3").click(function () {
// // 参数：动画时间，透明度（0-1）
// $("#div1").fadeto(1000,0.3);
// });
//自定义动画
$("#btn1").click(function () {
//动画时间3秒、延迟3秒
//完成或者停止时，3秒过后才能继续后续点击的动画操作
$("#div1").animate({
width: "600px",
height: "400px",
opacity: "0.3" //透明度
}, 3000).delay(3000)
});
//自定义动画
$("#btn2").click(function () {
//动画时间3秒、延迟2秒
//完成或者停止时，2秒过后才能继续后续点击的动画操作
$("#div1").animate({
width: "100px",
height: "100px",
opacity: "1" //透明度
},3000).delay(2000)
});
// 停止动画
$("#btn3").click(function () {
$("#div1").stop();
});
LEO64270262
