JQuery(二)
-
回顾:
- js是在整个html文档加载完(包括图片)成后执行,jq是在domcument加载完成后执行,所以jq比js快
- 所有的jquery代码写在页面加载函数
- jQuery对象用$开头 var $objEle = $("#id_name");
$(function(){ Jquery代码 }); -
学习目标
- 通过JQ给元素添加属性或样式
- 给制定的标签添加子标签或兄弟标签
- 学会给标签绑定事件
-
JQ中属性操作
- html():获取html代码如果有标签一并获取
- html(...):设置文本,如果有标签,进行解析
- text():获得文本,如果有标签,忽略
- text(...):设置文本,如果有标签,不进行解析,原样输出
- val():获取value属性的值
- val(...):给value设置属性值
JQ二级联动
-
jQuery数组中遍历:
- each(callback)
- callback方法中得到的this对象为document的对象
<body><img/><img/></body> $("img").each(function(i){this.src="xxx.jpg"});- $.each(object,[callable])
- 回调函数的参数
function(index,docEle) { index:遍历的索引 docEle:this==docEle,当前遍历的对象 } $.each(obj,function(index,docEle){ alert(index + "==" + docEle.value); }); - each(callback)
-
文档处理
- 追加内容(内部插入)
- append():末尾追加,跟document.appendChild()差不多
- A.append(B):将B追加到A内容的末尾
- appendTo():
- A.appendTo(B):将A追加到B内容的末尾(相反)
- prepend():首部追加
- prependTo():追加到首部
- append():末尾追加,跟document.appendChild()差不多
- 清楚内容
- empty():清空节点内的子节点,节点保留
- remove():删除节点内所有的子节点,包括自身也删除
- 追加内容(内部插入)
<script type="text/javascript">
var citiesArr = new Array(4);
citiesArr[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
citiesArr[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
citiesArr[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
citiesArr[3] = new Array("郑州市","洛阳市","开封市","安阳市");
$(function(){
$("#province").change(function() {
//1.获取用户选择的省份
var value = this.value;
//2.转成number类型
value = parseInt(value);
//3.获取城市select
var $city = $("#city");
//4.清空之前的城市信息
$city.empty();
//5.遍历
$(citiesArr[value]).each(function(i,n){
//DOM方式创建节点
opEle = document.createElement('option');
//给节点设置值,也可以通过:document.createTextNode(n)后appendchild()进去
//opEle.innerHTML = n;
//$(opEle).html(n);
$(opEle).text(n);
$(opEle).appendTo($city);
});
});
});
</script>
JQ左右选择
<script type="text/javascript">
$(function(){
$("#left_one_to_right").click(function(){
$("#left_select option:selected").appendTo($("#right_select"))
});
$("#left_all_to_right").click(function(){
$("#left_select option").appendTo($("#right_select"))
});
});
</script>
JQ表单校验
- 在学习javascript时我们通过手动的方式进行表单校验,此功能在开发中非常常见,属于通用功能范畴,在实际开发中一般都是通过第三方工具实现的
- 使用jQuery插件validation进行表单校验
- validate.js是建立在jquery之上的，所以得先导入jquery的类库再导validate
- 出生日期选择一般用控件实现
- 验证码暂时还不能校验
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<!--validate.js是建立在jquery之上的，所以得先导入jquery的类库-->
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="../../js/messages_zh.js" ></script>
<script>
$(function(){
$("#checkForm").validate({
rules:{
username:{
required:true,
minlength:6
},
password:{
required:true,
digits:true,
minlength:6
}
},
messages:{
username:{
required:"用户名不能为空!",
minlength:"用户名不得少于6位！"
},
password:{
required:"密码不能为空!",
digits:"密码必须是整数!",
minlength:"密码不得少于6位!"
}
},
errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>
