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;width: 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>
