06_jQuery(二)

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);
});

文档处理
- 追加内容(内部插入)
  1. append():末尾追加,跟document.appendChild()差不多
    - A.append(B):将B追加到A内容的末尾
  2. appendTo():
    - A.appendTo(B):将A追加到B内容的末尾(相反)
  3. prepend():首部追加
  4. prependTo():追加到首部
- 清楚内容
  1. empty():清空节点内的子节点,节点保留
  2. 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>

06_jQuery(二)

JQuery(二)

JQ二级联动

JQ左右选择

JQ表单校验

推荐阅读更多精彩内容