Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM
使用jQuery放大字体：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="../js/jquery-1.11.1.js"></script> <!-- 自定义的js必须写在jQuery引入之后 --> <script> function bigger() { //获取第1个p的字号(16px) var size = $("p:eq(0)").css("font-size"); //去掉单位px,便于增加字号 size = size.replace("px",""); //字号+1,再设置给所有的p $("p").css("font-size",++size+"px") } </script> </head> <body> <input type="button" value="+" onclick="bigger();"/> <p>jQuery是一个轻量级的js框架</p> <p>它提供了简洁的API,极大的简化了js编程</p> <p>它主要封装了DOM操作的API</p> </body> </html>
使用jQuery，点击图片后放大，缩小
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="../js/jquery-1.11.1.js"></script> <script> function prt() { var ps = $("p"); console.log(ps); for(var i=0;i<ps.length;i++) { console.log(ps[i].innerHTML) } } function chg(img) { if($(img).width()==218) { //变大 $(img).width(250).height(250); } else { //变小 $(img).width(218).height(218); } } </script> </head> <body> <input type="button" value="打印" onclick="prt();"/> <p>jQuery对象可以调用jQuery方法</p> <p>DOM对象可以调用DOM方法</p> <p>jQuery对象本质上是对DOM数组的封装</p> <div> <img src="../images/01.jpg" onclick="chg(this);"/> <img src="../images/02.jpg" onclick="chg(this);"/> <img src="../images/03.jpg" onclick="chg(this);"/> </div> </body> </html>
选择器知识点：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="../js/jquery-1.11.1.js"></script> <script> //页面加载后自动调用此匿名函数. //等价于window.onload=function(){} $(function(){ //1.基本选择器 //和CSS基本选择器一样,略 //2.层次选择器 //前2个和CSS派生选择器一样,略 console.log($("#gz+li")); //3.过滤选择器 //3.1基本过滤(*) console.log($("li:first")); console.log($("li:lt(2)")); console.log($("li:odd")); console.log($("li:not(#gz)")); //3.2内容过滤 console.log($("li:contains('京')")); //3.3可见性过滤 console.log($("li:hidden")); //3.4属性过滤 console.log($("li[id]")); //3.5状态过滤 console.log($("input:disabled")); console.log($("input:checked")); //4.表单选择器 console.log($(":radio")); }); </script> </head> <body> <ul> <li>北京</li> <li>上海</li> <li id="gz">广州</li> <li>深圳</li> <li>南京</li> <li>天津</li> <li style="display:none;">杭州</li> </ul> <!-- readonly:只读,但数据依然可以提交到服务器. disabled:不可用,数据将无法提交到服务器. --> <p> <input type="text" disabled/> </p> <p> <input type="password"/> </p> <p> <input type="radio" name="sex" checked/>男 <input type="radio" name="sex"/>女 </p> </body> </html>
jQuery操作DOM知识点：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .big { font-size: 50px; } .important { color: red; } </style> <script src="../js/jquery-1.11.1.js"></script> <script> $(function(){ //1.读写节点 //1)html()==innerHTML console.log($("p:first").html()); $("p:first").html("1.jQuery支持<u>读写</u>节点"); //2)text()==innerText //3)val()==value console.log($(":button:first").val()); $(":button:first").val("BBB"); //4)attr()==setAttribute()+getAttribute() console.log($("img:first").attr("src")); $("img:first").attr("src","../images/02.jpg"); //3.查询某节点的亲戚 //假设别人传给我如下节点 var gz = $("#gz"); var ul = $("ul"); //假设我处理了该节点,又要处理它的亲戚 console.log(gz.parent()); console.log(gz.prev()); console.log(gz.siblings()); console.log(ul.find("li:not(li[id])")); //4.样式操作 $("p:first").addClass("big").addClass("important"); $("p:first").removeClass("big").removeClass("important"); console.log($("p:first").hasClass("big")); }); //切换样式: //判断有没有该样式,有则删除,无则增加 function chg() { $("p:first").toggleClass("important"); } //2.增删节点 //2.1增加 function f1() { var li = $("<li>杭州</li>"); $("ul").prepend(li); } //2.2插入 function f2() { var li = $("<li>南京</li>"); $("#gz").after(li); } //2.3删除 function f3() { $("li:last").remove(); } </script> </head> <body> <p>1.jQuery支持<b>读写</b>节点</p> <p>2.jQuery支持<b>增删</b>节点</p> <p><input type="button" value="AAA"/></p> <p><img src="../images/01.jpg"/></p> <p> <input type="button" value="增加" onclick="f1();"/> <input type="button" value="插入" onclick="f2();"/> <input type="button" value="删除" onclick="f3();"/> </p> <ul> <li>北京</li> <li>上海</li> <li id="gz">广州</li> <li>深圳</li> <li>天津</li> </ul> <p> <input type="button" value="切换" onclick="chg();"/> </p> </body> </html>
广告收起案例：
1.点击按钮收起
2.自动收起
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> #gg { border: 1px solid red; height: 300px; } #gg input { float: right; margin: 10px; } </style> <script src="../js/jquery-1.11.1.js"></script> <script> $(function(){ //给按钮x绑定单击事件 $("#gg :button").click(function(){ //让广告区域右下向上收起直到消失 $("#gg").slideUp(500); }); //页面加载后,延迟3S自动点击按钮x,收起广告 setTimeout(function(){ $("#gg :button").trigger("click"); },3000); }); </script> </head> <body> <div id="gg"> <input type="button" value="x"/> </div> </body> </html>
图片显示，隐藏，移动案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> #d1 { width: 200px; height: 200px; background-color: red; /*动画基于定位*/ position: relative; } </style> <script src="../js/jquery-1.11.1.js"></script> <script> function f1() { $("#d1").show(3000); } function f2() { //第2个参数是函数,该函数在动画结束时被调用. //这样的函数我们称之为回调函数. //回调函数:逻辑完成后自动调用的函数. $("#d1").hide(3000,function(){ console.log("OVER"); }); //动画底层的实现原理: //通过定时器不断的修改元素的样式就是动画. //定时器相当于线程,所以动画方法相当于启动 //了支线程,当前方法f2相当于主线程,二者并发 //执行.主线程f2启动支线程后不等待,立刻执行 //下一行代码,而支线程3秒后才执行完成. console.log("over"); } $(function(){ $("#d1").hover( function(){ $(this).animate({"left":"20px"},500); }, function(){ $(this).animate({"left":"0"},500); } ); }); </script> </head> <body> <p> <input type="button" value="显示" onclick="f1();"/> <input type="button" value="隐藏" onclick="f2();"/> </p> <div id="d1"></div> </body> </html>