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="888"; $(oBox).html("999");#在js对象前加个$符号即可将js转化为jq jq---->js var $p=$("#box p"); $p.html("999"); $p[2].innerHTML="666";#在jq对象后面加个索引(转化为js)的后缀即可转化 $p.get(2).innerHTML="666";#这种方法(转化为js)也可以 jq----->特定的jq var $p=$("#box p"); $p.eq(1).html("888");#仍然是jq
js---->jq var oBox=document.getElenmentById("box"); oBox.innerHTML="888"; $(oBox).html("999");#在js对象前加个$符号即可将js转化为jq jq---->js var $p=$("#box p"); $p.html("999"); $p[2].innerHTML="666";#在jq对象后面加个索引(转化为js)的后缀即可转化 $p.get(2).innerHTML="666";#这种方法(转化为js)也可以 jq----->特定的jq var $p=$("#box p"); $p.eq(1).html("888");#仍然是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("999");#在设置值的时候一般自带遍历 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":"200" },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>