Python web前端 09 jQuery
一、三个重要网址
http://jquery.cuishifeng.cn/ #中文查询网站
http://www.bootcdn.cn/ #引入jq
http://api.jquery.com/ #官网 #jQuery是一种新的JavaScript库；jq是js写的，能用jq实现的，js都能实现；js能实现的，jq有些不能实现。 #jQuery $ 符号传字符串、选择器、尖括号标签的形式、函数、对象（object） #jq的API只对自己开放，jq不能用js的API，js也不能用jq的API #jQuery引入方法
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> #通过网页引入 <script src="jquery.js"></script> #将代码复制到本地，通过本地连接引入 #验证是否已引入
$(function(){alert(1);})#在一个新的script里面验证弹窗
二、jQuery
获取元素
var oBox=document.getElementById("#box"); #js获取元素
oBox.innerHTML="div++"; #js修改元素
var $box=$("#box"); #jq获取id元素
$box.html="div++"; #jq修改元素
$box.html("<em>div++</em>");#加粗内容
var $p=$("p");#jq获取标签
jq、js的互相转换
js---->jq
var oBox=document.getElenmentById("box");
oBox.innerHTML="";
$(oBox).html("");#在js对象前加个$符号即可将js转化为jq jq---->js
var $p=$("#box p");
$p.html("");
$p[2].innerHTML="";#在jq对象后面加个索引（转化为js）的后缀即可转化
$p.get(2).innerHTML="";#这种方法（转化为js）也可以 jq----->特定的jq
var $p=$("#box p");
$p.eq(1).html("");#仍然是jq
js---->jq
var oBox=document.getElenmentById("box");
oBox.innerHTML="";
$(oBox).html("");#在js对象前加个$符号即可将js转化为jq jq---->js
var $p=$("#box p");
$p.html("");
$p[2].innerHTML="";#在jq对象后面加个索引（转化为js）的后缀即可转化
$p.get(2).innerHTML="";#这种方法（转化为js）也可以 jq----->特定的jq
var $p=$("#box p");
$p.eq(1).html("");#仍然是jq
jq的遍历
<div id="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<script src="jQuery.js"></script>
<script>
$("#box p").each(function (i) {
this.innerHTML="我是第"+i+"个";用js方法完成遍历
$(this).html("我是第"+i+"个")#用jq方法完成遍历
});
</script>
jq操作属性
attr #设置、获取 标签属性
removeattr #移除标签属性 addClass
removeClass
#传class 移除你传的那个
#没有 移除全部
toggleClass #有就删除没有就添加
#操作class类名
jq js
html() innerHTML
text() innerTEXT
val() value #在jq里面，设置某个值的时候一般都是自带遍历，获取某个值的时候一般都是获取第一个 <div id="box" class="box">
<p class="on">1</p>
<p class="show">2</p>
<p>3</p>
</div>
<script src="jQuery.js"></script>
<script>
var $box=$("box");
$box.attr("class","xiaopo");#添加class="xiaopo",将原来的class覆盖掉
$box.attr("py","xp");#添加py="xp"
$box.removeAttr("class");#移除所有class
$box.addClass("box1 box2");#在原有的基础上，给class添加个一个box1、box2,(不删除原class)
$box.removeClass("box1");#只移除其中一个class "box1"
$("#box p").toggleClass("on");#原来有class "on"的没有了，原来没有的现在有了
$("#box p").html("");#在设置值的时候一般自带遍历
alert($("#box p").html());#在获取值的时候一般获取第一个
</script>
jq操作样式
.css()
.width()
.height() innerWidth()/innerHeight #算了padding
outerWidth()/outerHeight #算了padding加border offset() #该对象有top、left属性，代表到浏览器窗口的top、left的值 position() #该对象有top、left的值，代表到定位父级的top、left的值 <script src="jQuery.js"></script>
<script>
var $box=$("#box");
$box.css("height","300px");#操作单个属性
$box.css({
"width":"200px",
"height":"200x",
"background":"red"
}); #用键值对的形式操作多个属性
alert($box.width());#盒子本身的宽度300
alert($box.height());#盒子本身的高度200
alert($box.innerWidth());#盒子宽度+padding400
alert($box.innerHeight());#盒子高度+padding300
alert($box.outerWidth());#盒子宽度+padding+border420
alert($box.outerHeight());#盒子高度+padding+border420
alert($("#box").offset().top);#盒子距离顶部的距离
alert($("#box").offset().left);#盒子距离左边的距离
alert($("#box").position().top);#盒子距离父级顶部的距离
alert($("#box").position().left);#盒子距离父级左边的距离
</script>
scroll滚动条
<script>
$(document).click(function () {
console.log("滚动高度"+$(this).scrollTop());#这是获取高度
});
console.log("滚动宽度"+$(this).scrollLeft()); #这是获取宽度 $(document).click(function () {
$(this).scrollTop(1000);#这是设置高度
$(this).scrollLeft(500);#这是设置宽度
}); </script>
append prepend 添加子元素
#添加子元素 可以是标签、本文、js对象、jq对象
append
prepend appendTo
prependTo <div id="box">
<p>我是本来的p</p>
</div>
<b id="box1">我是外面的b标签</b>
<script src="jQuery.js"></script>
<script>
$("#box").append("<em>ahh</em>");#在p标签的后面添加
$("#box").prepend("<em>ahh1</em>");#在p标签的前面添加
var oB=document.getElementById("box1");
$("#box").append(oB);#将外面的b标签移动到前面div里面去了
$("#box").append($(oB));#相同效果
$("<em>ahh</em>").appendTo("#box");#跟上面意义一样
</script>
筛选
eq hasClass #检查当前的元素是否含有某个特定的类，如果有，返回true，否则返回false
children #找儿子，可以不传参
find #不传参，默认不找；传参的话就找符合参数的后代
parent #不需要参数
parents("show") #找到名字叫做show的先祖
siblings #不传参，所有兄弟；传参，所有的兄弟按照参数筛选出合格的 <body>
<div id="box" class="show">
<p>1</p>
<p class="box1">2</p>
<div>
<p>3</p>
<p>4</p>
</div>
</div>
<script src="jQuery.js"></script>
<script>
alert($("p").hasClass("box2"));#检查p标签是否含有class "box2" 返回false
console.log($("#box").children());#查找#box下面的所有儿子标签，传参的时候找儿子标签某某
console.log($("#box").find("p"));#查找#box下面的所有后代标签p，不传参的时候不找
console.log($("p").parent());找出所有p标签的爸爸
console.log($("p").parents());#一次p标签找出所有的祖宗
console.log($("p").parents(".show"));#找出class为show的祖宗
$("p").sibling().css("color","red");#将p标签的所有兄弟的样式都改便
$("p").sibling(".box1").css("color","red");#将p标签所有的class为box1的兄弟改变样式
</script>
</body>
</html>
事件
<body>
<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jQuery.js"></script>
<script>
var oBox=document.getElementById("box");
oBox.onclick=function () {
alert(1);
};
oBox.onclick=function () {
alert(2);
};#js里面的事件都是以赋值的形式，所以前面的函数被覆盖了，只会弹出 2 $("#box").click(function () {
alert(1);
});#这是jq里面的事件
$("#box").click(function () {
alert(2);
});#jq里面的事件是以绑定的形式，所以会弹出1和2 #绑定单个事件
$("li").on("clink",function () {
alert($(this).index());#index() 在jq里面是方法（快速获取对应下标）
}); #绑定多个事件
$("#box").on(
{
"clink":function () {
console.log("惦记我");
},
"mouseenter":function () {
console.log("一处啦")
},
"mouseleave":function () {
console.log("啦啦啦")
}
}
); #移除事件
$("#box").off();#如果不传参，就会将所有事件都移除
$("#box").off("mouseenter");#移除单个鼠标移入事件 #hover
$("#box").hover(function () {
console.log("ahh");#不管鼠标移入还是移出都会打印这个ahh
});
$("#box").hover(function () {
console.log("ahh") #鼠标移入打印ahh
},function () {
console.log("hhh") #鼠标移出打印hhh
});
</script>
</body>
二、动画
show hide toggle #不传参，瞬间显示隐藏；传一个数字，代表毫秒数，改变宽、高、透明度 fadeIn fadeOut fadeTo(1000,0.1) #默认事件300毫秒，改变透明度，可以吧透明度设置成一个值，时间参数不能省略 slideDown slideUp slideToggle #默认时间300毫秒，改变高度 #这三组不仅仅可以接受一个数字参数，能接受的数字如下：
number/string #代表动画时间（可缺省）毫秒数（fast normal slow）
string #代表运动曲线（可缺省）
function #代表回调函数（可缺省）
<body>
<div id="box"> </div>
<script src="jQuery.js"></script>
<script>
var $box=$("#box");
$(document).click(function () {
$box.hide(2000);#如果不传参，就瞬间小时；传了，就有动画效果得两秒后消失
}); var off=true;#用于判断图像是否存在
$(document).click(function () {
if(off){#如果存在，就让他消失
$box.hide(2000);
}else{#否则，就让他出现
$box.show(2000);
}
off=!off;#为了使再点一下的时候让他出现，取一下反
}); $(document).click(function () {
$box.toggle(2000);#这个就是综合了上面那个函数
}); var off=true;
$(document).click(function () {
if(off){
$box.fadeIn(2000);#宽高并没有变化，只是改变透明度
}else{
$box.fadeOut(2000);
}
off=!off;
}); $(document).click(function () {
$box.fadeTo(1000,0.5);#
}); var off=true;
$(document).click(function () {
if(off){
$box.slideUp(2000);#透明度并没有变化，只是改变高度
}else{
$box.slideDown(2000);
}
off=!off;
}); $(document).click(function () {
$box.slideToggle(1000,0.5);#只改变高度
});
</script>
</body>
三、补充
添加兄弟元素
<body>
<div id="box">555</div>
<script src="jQuery.js"></script>
<script>
var $box=$("#box")
$box.append("<b>hahahaha<b>");#添加子元素
$box.before("<b>hahahaha<b>");#在元素前加兄弟元素
$box.after("<b>hahahaha<b>");#在元素后加兄弟元素
</script>
</body>
wrap
wrap #给每个元素添加一个父元素
unwrap #删除元素的父元素
wrapAll #给子元素添加一个父元素都包起来
wrapInner #给元素内的内容添加一个标签 <body>
<div id="box">
<p>1</p>
<span>01</span>
<p>2</p>
<span>02</span>
<p>3</p>
<span>03</span>
</div>
<script src="jQuery.js"></script>
<script>
$("#box p").wrap("<div></div>");#给个p元素添加一个div标签
$("#box p").unwrap();$删除p元素的父级元素
$("#box p").wrapAll("<div></div>>");#将p元素全部包起来然后添加到同一个父级元素
$("#box p").wrapInner("<b></b>>");#给p里面的内容添加b标签
</script>
</body>
empty
empty #清空子节点
remove #移除自己（不保留数据和事件）
detach #移除自己（保留数据和事件） <body>
<div id="box">
<p class="box1">1</p>
<p class="box2">2</p>
<p class="box3">3</p>
</div>
<script src="jQuery.js"></script>
<script>
$("#box").empty();#清除#box目录下的所有子元素及所有后代
$("#box .p").remove(".box2"); #移除名字叫.box2的p标签的所有内容，包括自己；如果不传参就是移除所有p标签（包括自身）
$("#box p").detach(".box1");#移除名字叫.box2的p标签的所有内容，包括自己
</script>
</body>
animate
animate
#传参
obj #必传 {}格式代表的变化的属性和目标值，数值变化
number/string #可缺省 代表毫秒数 或者三个预设好的值，默认为300毫秒
string #可缺省，代表运动曲线，默认jQuery提供“linear”和“swing”
function #可缺省，代表动画结束后的回调函数 <body>
<div id="box"></div>
<script src="jQuery.js"></script>
<script>
var $box=$("#box");
$box.animate({
"width":"300px",
"height":"300px",
"margin-left":""
},2000);#自定义动画样式
</script>
</body>
stop
stop
#清空动画队列，可以接受两个布尔值参数
#第一个不用管，第二个决定是否瞬间到达队列终点，true表示到，false表示不到（默认） <body>
<div id="box">
<ul>
<li>lucky</li>
<li>tuple</li>
<li>which</li>
<li>xiaopo</li>
<li>budong</li>
</ul>
</div>
<script src="jQuery.js"></script>
<script>
$("#box ul li").hover(function () {
$(this).stop(true,true).animate({"height": "400px"});#加了stop就能够清除队列，马上到达终点
},function () {
$(this).stop(true,true).animate({"height": "50px"});
}
)
</script>
</body>
delay
<body>
<div id="box"></div>
<script src="jQuery.js"></script>
<script>
$(document).clink(function () {
$("#box").fadeOut();#点击完马上消失
$("#box").delay(5000).fadeOut();#点完过5秒才消失，延迟消失，只对动画有效
}); $("#box").delay(5000).queue(function () {
$(this).css("background","red");#如果想要delay对样式生效，要用这个
})
</script>
</body>