JQuery 上部分&二级联动
一 引入
- 简述: JQuery可以简单的理解为js框架
- 优点: 写法简单,功能强大,可以动态操作css,支持低版本ie浏览器
- 用法:
*引入jquery库
*验证是否引入成功: alert($) 或 alert(jQuery)
二 语法
2.1 window.onload与$(function)的区别
同: body 加载完毕后执行
异: window.onload---->页面内容渲染后执行 $(function)---->页面结构加载后就执行(/*效率高*/)
2.2 jquery对象和dom对象的互转
dom--->jquery: $(dom);
jquery--->dom: jquery对象[0]; 或者 jquery对象.get(0);
//ps: jquery对象有length
2.3 循环
$.each(数组/列表,function(i,o){
i--->索引;
o--->元素;
});
2.4 选择器
基本选择器:
*id选择器 $("#id");
*标签选择器 $("标签名");
*类选择器 $(".class");
*组合选择器 $("#id,.class,标签名");
层级选择器:
*$("A B")---->获取选择器A下面的选择器B的元素(包括子孙);
*$("A>B")---->获取选择器A下面的选择器B的元素(包括子);
*$("A+B")---->获取紧跟在选择器A后的选择器B的元素;
属性选择器:
*$("A B[name]")----------->获取选择器A下拥有name属性的选择器B的元素;
*$("A B[name=value]")----->获取选择器A下name属性值为value的选择器B的元素;
form表单相关的选择器:
*$(":checked")----->获取选中的，复选框，单选框，下拉列表
*$(":select")------>下拉列表选中的
*$("div>img:not(:first)") 选中div中所有的img(不包含第一次img)
2.5 常用方法
hide(隐藏)---------------------->$(this).hide(1000); 点击1ms后隐藏
show(显示)---------------------->$(this).show(1000); 点击1ms后显示
remove(删除)-------------------->删除所有(包括自己)
empty(删除)--------------------->清空内部
val("设置值")------------------->$("form>input[name='radio']").val(["单选1"]); //radio必须[]
val()取值----------------------->$("#username").val();
html([""])设置指定标签或者获取指定标签中的值，设置值，存在html代码，能被浏览器所解析
text([""])获取指定标签中的纯文本或设置指定标签中的值，设置html代码,不能被浏览器所解析,只会当成纯文本进行展示
append(内部追加)---------------->$("#provinces").append("o.id+">"+o.name+"");
appendTo(追加到指定元素标签)----->$("#select1 option:selected").appendTo($("#select2"));
.css(添加样式)------------------>$("table tr:even").css({ color: "#ff0011", background: "blue" });
closest("tr")从当前元素，向上匹配最近的tr
prop("checked"，true)该方法是专门来操作复选框和单选框的
三 Ajax语法
$.get(url,[data],[callback],[type]); //加了[]的可以按需省略
*url:后台对应的url地址
*data:传递的数据
*callback:后台响应成功之后，返回的数据
*type:返回的格式(默认返回是json格式)
四 二级联动
简述思路:
先获取省的数据: 使用Ajax发送请求获取省的数据,通过jquery将数据追加到opttion中
通过省获取市:为省绑定change事件,当省发生改变,先清空市,如果省为: --请选择–,市设置为–请选择–,结束当前方法;
反之携带省id发送请求: 通过省获取后台对应的市;
<!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(){
//ajax获取省
$.get("/xx/city/provinces",function(data){
$.each(data,function(i,o){
$("#provinces").append("o.id+">"+o.name+"");
});
});
//ajax获取市
$("#provinces").change(function(){
$("#city").empty(); //清空市,不然会累加
if(this.value== -1){
$("#city").append(");
return;
}
var param = {"id":this.value}; //this.value 省份id
$.get("/xx/city/getCity",param,function(data){
$.each(data,function(i,o){
$("#city").append("o.id+">"+o.name+"");
});
});
});
});
</script>
</head>
<body>
省:
<select id="provinces">
<option value=-1>--请选择--</option>
</select>
市:
<select id="city">
<option>--请选择--</option>
</select>
</body>
</html>