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>