JQuery的入门(二)

var $options = $(“option”);
for(var i=0;i<$options.length;i++）{
alert(option.value);
}

var $options = $("option");
$options.each(function(index，element){
alert(index); //打印索引
alert(element); //打印$options集合对象中的每一个元素
})；

var $options = $(“option”);
$.each($options,function(index,element){
alert(index); //打印索引
alert(element); //打印$options集合对象中的每一个元素
})；

<script type="text/javascript">
$(function(){ 
/*  
* 方式1: for循环方式
*/
var $list = $("#city li");
for(var i = 0 ; i < $list.length;i++){
//遍历数组,DOM对象,调用属性innerHTML
alert($list[i].innerHTML);
//遍历数组,DOM对象转成Jquery对象,调用方法html
alert($($list[i]).html());
}
       
      /*
      * 方式2: Jquery对象的each方法
      * Jquery对象.each(function(索引,元素))
      */
      $list.each( function(index,element){
     alert(index+"---"+$(element).html());
     });
     
      /*
      * 方式3: Jquery的each函数
      * $.each(数组, function(索引,元素))
      */
     $.each($list, function(index,element) {

    alert(index+"==="+$(element).html());
     });
      });
</script>

$("#btn").on("click",function () {
  alert("按钮点击事件");
});

//多个事件的响应函数相同，灵活性差
$("#btn").on("click mouseover",function () {
  alert("按钮点击事件");
});
//每个事件有自己的响应函数
$("#btn").on({
  "click" : function () {
    alert("点击事件");
 },
  "mouseover":function () {
    alert("鼠标悬浮");
 }
});

//id值是d1的元素的子代d2绑定事件
//如果有多个子代，逗号分开
$("#d1").on("click","#d2",function (data) {
   alert("d2...")
});

$("#btn").click(function () {
  $("#d1").off("click mouseover");
});

<script type="text/javascript">
$(function(){
//定义区域信息
var areas =
[
["海淀区","昌平区","朝阳区"],//代表北京
["南开区","和平区","西青区"],//天津
["浦东区","浦西区","闵行区"],//上海
["xx区","yy区","zz区"]//重庆
];
//下拉菜单绑定内容变化事件
$("#city").change(function(){
//获取被选中的option属性value的值
var $val = $("#city option:selected").val();
//获取数组,变成Jquery对象
var $area = $(areas[$val]);
//添加之前清空子标签
$("#area").empty();
$("#area").append($("<option>--请选择区域--</option>"));
//遍历数组
$area.each(function(index,element){
//创建option标签
var $optionElement = $("<option></option>");
$optionElement.html(element);
//添加到省份标签中
$("#area").append($optionElement);
});
});
/*
* 另一种简化写法
*/
$("#city").change(function(){
//获取被选中的option属性value的值
var $val = $("#city option:selected").val();
//获取数组,变成Jquery对象
var $area = $(areas[$val]);

//定义变量保存字符串
var options = "<option>--请选择区域--</option>";
$area.each(function(index,element){
options+="<option>"+element+"</option>";
});
$("#area").html(options);
});
});
</script>

<script type="text/javascript">
$(function(){
//按钮add绑定点击事件
//左面选中的,移动到右边
$("#add").click(function(){
//获取右边 获取选中的
$("#second").append($("#first option:selected"));
});
//按钮addall绑定点击事件
//左面全部的,移动到右边
$("#add_all").click(function(){
//获取右边 获取全部的
$("#second").append($("#first option"));
});
$("#remove").click(function(){
//获取左边 获取右边选中的
$("#first").append($("#second option:selected"));
});
$("#remove_all").click(function(){
//获取左边 获取右边全部
$("#first").append($("#second option"));

});
});
</script>

<scripttype="text/javascript">
$(function(){
     //获取表单id,调用方法validate
    $("#empForm").validate({
      //定义验证规则
      rules:{
        //文本框的name属性,必须填写
        realname:"required"
      },
      //定义验证信息
      messages:{
        //文本框name属性,违反规则的提示
        realname:"真是姓名必填"
      }
    });
});
  </script>

<script type="text/javascript">
    $(function(){
   
    //获取表单id,调用方法validate
   $("#empForm").validate({
   //定义验证规则
   rules:{
   //文本框的name属性,必须填写
   realname:"required",
   //用户名文本框验证,多个规则
   username:{
   //必须填写
   required:true,
   rangelength:[5,8]
   },
  
   //密码验证规则
   psw:{
   required:true,
   minlength:6,
   maxlength:12
   },
   //确认密码定义规则
   psw2:{
   required:true,
   minlength:6,
   maxlength:12,
   equalTo:"#psw"
   },
   //性别选择定义规则
   gender:{

 required:true
   },
   //年龄验证规则
   age:{
   required:true,
   range:[26,50]
   },
   //学历规则
   //由option标签的value属性决定
   edu:{
   required:true
   },
   //生日规则
   birthday:{
   required:true,
   //验证日期格式
   dateISO:true,
   //验证日期是否合法
   date:true
   },
   //兴趣爱好规则
   checkbox1:{
   required:true
   },
   //电子邮箱规则
   email:{
   required:true,
   email:true
   }
   },
   //定义验证信息
   messages:{
   //文本框name属性,违反规则的提示
   realname:"真是姓名必填",
   username:{
   required:"用户名必须填写",
   rangelength:"用户名5-8位"
   },
  
   psw:{
   required:"密码必须填写",
   minlength:"最小长度6",

  maxlength:"最大长度12"
    },
    
     psw2:{
   required:"确认密码必须填写",
   minlength:"最小长度6",
   maxlength:"最大长度12",
   equalTo:"两次密码不一致"
   },
   /*
   * 性别提示规则
   * 显示位置发生错误,手动在添加label标签
   */
   gender:{
   required:"请选择性别"
   },
  
   age:{
   required:"请输入年龄",
   range:"年龄在26-50之间"
   },
   edu:{
   required:"请选择一个学历"
   },
  
   birthday:{
   required:"请填写生日",
   dateISO:"日期格式不正确",
   date:"日期非法"
   },
   checkbox1:{
   required:"请选择至少一个爱好"
   },
   email:{
   required:"必须填写邮件",
   email:"请输入正确的邮件格式"
   }
   }
   });
    });
    </script>

//身份证号规则
cart:{
  required:true,
  cartlength:[15,18],
  cart15:true,
  cart18:true
}
//参数: 规则名称. 参数 实现逻辑
   
//身份证号码长度
$.validator.addMethod( "cartlength", function(value,element,params){
  if(value.trim().length!=15 && value.trim().length!=18){
    return false;
  }
 return true;
 } );
   
//身份证号码15位校验
$.validator.addMethod( "cart15", function(value,element,params){
    //定义15位正则规则,必须全部数字
    var reg = /^[0-9]{15}$/;
    if(value.trim().length==15){
      return reg.test(value.trim());
}
    return true;
 } );
   
//身份证号码18位校验
$.validator.addMethod( "cart18", function(value,element,params){
    //定义15位正则规则,必须全部数字
    var reg = /^[0-9]{18}|[0-9]{17}X$/;
    if(value.trim().length==18){
      return reg.test(value.trim());
   }
    return true;
} );