Day53
总结
我是最棒的！基础不牢，地动山摇！
JQuery
一个优秀的js库
核心特性
- 独特的链式原发和短小清晰的多功能接口
- 高效灵活的css选择器
- 拥有便捷的插件扩展机制和丰富的插件
- 兼容各种主流浏览器
获取dom节点
当页面结构加载完毕之后，执行匿名函数中的内容
$(function(){
})
window.onload和$(function(){})的区别
window.onload它是页面内容加载完毕之后，执行匿名函数中的内容
$(function(){})它是页面结构加载完毕之后，执行匿名函数中的内容
但是$(funciton(){})性能更好
dom对象和jQuery对象的相互转换
jQuery对象转为dom对象
- jQuery对象[0]
- jQuery对象.get(0)
dom对象转为jQuery对象
$(dom对象)
html和text方法的区别
html和text类似于原生js中的innerHTML和innerText
html和text分别都是在指定标签中去设置值和获取值
html获取的是指定标签中所有的值，设置值有html代码，能被解析
text获取的时指定标签中的纯文本，设置值有html，不会被解析
jQuery基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jQuery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
//id选择器
var notMe = $("#notMe");
console.debug(notMe);
var myDiv = $("#myDiv");
console.debug(myDiv);
//元素选择器
var divs = $("div");
console.debug(divs);
//类型选择器
notMe = $(".notMe");
console.debug(notMe);
var classes = $(".myClass");
console.debug(classes);
//组合选择器
var test = $("div,span.myClass");
console.debug(test);
})
</script>
</head>
<body>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
</body>
</html>
jQuery层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jQuery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
//ancestor descendant 获取ancestor下的所有descendant元素
var test = $("form input");
console.debug(test);
//parent > child 获取指定父元素下的所有子元素(只有儿子一层)
test = $("form > input");
console.debug(test);
//prev + next 匹配所有紧接在 prev 元素后的 next 元素
test = $("label + input");
console.debug(test);
//prev ~ siblings 返回prev元素后的所有siblings元素
test = $("form ~ input"); //找到所有与表单同辈的 input 元素
console.debug(test);
})
</script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
</body>
</html>
jQuery循环
i表示索引，o代表对象
$.each(数组,function(i,o){
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jQuery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
//jQuery循环
$.each(["G","N","M"], function(i,o){
console.debug(i + "=====" + o);
})
//结果
0 ===== G
1 ===== N
2 ===== M
</script>
</head>
<body>
</body>
</html>
JSON和Ajax
/*
ajax请求方式:
url:返回请求的地址
[data]:请求的参数
[callback]:回调函数
[type]:返回数据的格式 xml, html, script, json, text, _default。(不管,默认它会自动转为json)
返回值:$.get(url, [data], [callback], [type])
*/
实现一个二级省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jQuery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
/*
ajax请求方式:
url:返回请求的地址
[data]:请求的参数
[callback]:回调函数
[type]:返回数据的格式 xml, html, script, json, text, _default。(不管,默认它会自动转为json)
返回值:$.get(url, [data], [callback], [type])
*/
$(function(){
$.get("/getProvince",function(result){
//console.debug(result);
$.each(result,function(i,o){
$("#province").append("<option value='"+o.id+"'>"+o.name+"</option>");
})
})
/*
监听省份的变化，对应城市发生变化
*/
$("#province").change(function(){
//每次查询之前都先把城市清空
$("#city").empty();
//如果pid为-1，就把城市设置为请选择
var pid = $("#province").val();
if(pid == -1){
$("#city").append("<option value='-1'>--请选择--</option>");
return;
}
$.get("/findCityByProvince",{"pid":pid},function(result){
$.each(result,function(i,o){
$("#city").append("<option value='"+o.id+"'>"+o.name+"</option>");
})
})
})
})
</script>
</head>
<body>
省:<select id="province">
<option value="-1">--请选择--</option>
</select>
市:<select id="city">
</select>
</body>
</html>