jQuery与JavaScript加载页面的区别
1.JavaScript传统的方式页面加载会存在覆盖问题，加载比jQuery慢(整个页面加载完毕<包含里面的其他内容，比如图片>)
2.jQuery的加载比JavaScript加载要快！(当整个dom数结构绘制完毕就会加载)
3.jQuery不存在覆盖问题,加载的时候是顺序执行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ与JavaScript加载页面的区别</title> <script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script> <script> window.onload = function(){ alert("张三"); } //传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包含里面的其他内容，比如图片>) window.onload = function(){ alert("老宋"); } //JQ的加载比JS加载要快！(当整个dom数结构绘制完毕就会加载) jQuery(document).ready(function(){ alert("李四"); }); //JQ不存在覆盖问题,加载的时候是顺序执行 $(document).ready(function(){ alert("王五"); }); //简写方式 $(function(){ alert("赵六"); }); </script> </head> <body> </body> </html>
jQuery的获取
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ的获取</title> <script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script> <script> $(function(){ //1.js的获取 /*document.getElementById("btn").onclick=function(){ location.href="惊喜.html"; }*/ //2.jq的获取======>$("#btn") $("#btn").click(function(){ location.href="惊喜.html"; }); }); </script> </head> <body> <input type="button" value="点我有惊喜！" id="btn"/> </body> </html>
DOM对象与jque对象的转换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM对象与JQ对象的转换</title> <script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script> <script> function write1(){ //1.JS的DOM操作 //DOM对象无法操作JQ对象的属性和方法 //document.getElementById("span1").innerHTML="萌萌哒"; var spanEle = document.getElementById("span1"); //将DOM对象转换成JQ对象 $(spanEle).html("思密达"); } $(function(){ $("#btn").click(function(){ //jQuery对象无法操作,JS技巧里面的修行 //$("#span1").innerHTML = "呵呵哒"; $("#span1").html("呵呵哒"); //jq对象向DOM对象转换方式一 $("#span1").get(0).innerHTML="美美哒！"; //jq对象向DOM对象转换方式一 $("#span1")[0].innerHTML="棒棒哒"; }); }); </script> </head> <body> <input type="button" value="JS写入" onclick="write1()"/> <input type="button" value="JQ写入" id="btn" /><br /> 班长：<span id="span1">你好帅！</span> </body> </html>
使用jQuery完成首页定时弹出广告图片
实现步骤
第一步：引入jQuery相关的文件
第二步：书写页面加载函数
第三步：在页面加载函数中，获取显示广告图片的元素
第四步：设置定时操作（显示广告图片的函数）
第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示（show（）)
第六步：清除显示广告图片的定时操作
第七步：设置定时操作（隐藏广告图片的函数）
第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
第九步：清除隐藏广告图片的定时操作
代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script> <script> $(function(){ //1.书写显示广告的定时操作 time=setInterval("showAd()",3000); }); //2.书写显示广告图片的函数 function showAd(){ //3.获取广告图片 //$("#img2").show(1000); $("#img2").slideDown(1000); //4.清除显示图片的定时操作 clearInterval(time); //5.设置隐藏图片的定时操作 time=setInterval("hiddenAd()",3000); } function hiddenAd(){ //6.获取图片广告图片，并让其隐藏 //$("#img2").hide(); $("#img2").slideUp(1000); //7.清除隐藏图片的定时操作 clearInterval(time); } </script> </head> <body> <div id="father" style="height: 500px; 500px;"> <img src="../img/1.jpg" width="100%" style="display: none" id="img2" /> <!--<input type="button" value="下一张" " />--> <img src="../img/1.jpg" width="100%" height="100%" id="img1"/> </div> </body> </html>
toggle()的使用
切换元素的可见状态
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>toggle的使用</title> <style> div{ border: 1px solid white; width: 500px; height: 350; margin: auto; text-align: center; } </style> <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script> <script> $(function(){ $("#btn").click(function(){ $("#img1").toggle(); }); }); </script> </head> <body> <div> <input type="button" value="显示/隐藏" id="btn" /><br /> <img src="../img/飞机05.gif" width="100%" height="100%" id="img1" /> </div> </body> </html>
使用jQuery完成表格隔行变色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行变色</title> <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script> <script> //1.页面加载 $(function(){ //2.获取tbody下面的偶数行并设置背景颜色 $("tbody>tr:even").css("background-color","yellow"); //3.获取tbody下面的齐数行并设置背景颜色 $("tbody tr:odd").css("background-color","pink"); }); </script> </head> <body > <table border="1" width="500" height="50" align="center" id="tb1"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>22</td> </tr> <tr> <td>2</td> <td>李四</td> <td>25</td> </tr> <tr> <td>3</td> <td>王五</td> <td>27</td> </tr> <tr> <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr> <td>5</td> <td>田七</td> <td>30</td> </tr> <tr> <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body> </html>
使用jQuery实现全选和全不选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选和全不选</title> <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script> <script> $(function(){ $("#select").click(function(){ //获取下面所有的复选框并将其选中状态，设置跟编码的eagel //attr 方法与jQuery的版本有关，在1.8.3及其以下有效 //$("tbody input").attr("checked",this.checked); $("tbody input").prop("checked",this.checked); }); }); </script> </head> <body > <table border="1" width="500" height="50" align="center" id="tb1"> <thead> <tr> <td colspan="4"> <input type="button" value="添加" /> <input type="button" value="删除" /> </td> </tr> <tr> <th><input type="checkbox" id="select"/></th> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"/ class="selectOne"></td> <td>1</td> <td>张三</td> <td>22</td> </tr> <tr> <td><input type="checkbox" class="selectOne"/></td> <td>2</td> <td>李四</td> <td>25</td> </tr> <tr> <td><input type="checkbox" class="selectOne"/></td> <td>3</td> <td>王五</td> <td>27</td> </tr> <tr> <td><input type="checkbox" class="selectOne" /></td> <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr> <td><input type="checkbox" class="selectOne" /></td> <td>5</td> <td>田七</td> <td>30</td> </tr> <tr> <td><input type="checkbox" class="selectOne" /></td> <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<script>
$(function(){
//2.创建二维数组用于存储省份和城市
var cities = new Array(3);
cities[0]=new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1]=new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2]=new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3]=new Array("郑州市","洛阳市","开封市","安阳市");
$("#province").change(function(){
//alert("aa");
//1.获取用户选择的省份
var val = this.value;
//alert(val);
//3.遍历二维数组中的省份
$.each(cities, function(i, n){
//alert(i+":"+n);
//4.判断用户选择的省份和遍历省份
if(val==i){
//5.遍历该省份的所有城市
$.each(cities[i],function(j, m){
//alert(m);
//6.创建城市文本节点
var textNode = document.createTextNode(m);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列包啊
$(opEle).appendTo($("#city"));
})
}
})
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city"></select>
</td>
</tr>
</table>
</body>
</html>