javaWeb核心技术第五篇之jQuery

- 概述
  - jQuery是一个优秀的javascript框架(js类库)，兼容css3和各大浏览器，提供dom，events，animate，ajax等简易的操作。并且jQuery有非常丰富的插件，大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多)
- jQuery入门
  - jQuery和html整合
    - 下载
      - 下载地址:www.jquery.com
    - 使用script的src属性即可
      "eg:<script src="../js/jquery-1.11.0.min.js"></script>"
  - 语法
    - $("选择器")     或     jQuery("选择器")
      "var  元素对象  = $("选择器");
      $("#id值");     val();"
  - javaScript和jquery区别
    - 注意事项:
      "使用jquery的方式获取的对象称为jquery对象,
      使用js的方式获取的对象称为dom(js)对象,
      两者的方法和属性不能混用,
      使用jquery的方法和属性时,必须保证对象是jquery对象."
    - js对象和jquery对象之间的转换
      - js对象  →  jquery对象
        - $(js对象);
      - jquery对象  →   js对象
        - 方式1:jQuery对象[index]
        - 方式2:jQuery对象.get(index)
- 事件(event)
  "在js的事件中,事件前加on,在jq的事件中通常没有on,直接写名称即可"
  - 页面加载成功事件
    - 格式1:$(document).ready(function(){});
    - 格式2:$(function(){});
    - 注意:在同一个页面内,jquery的页面加载成功事件可以出现多次,从上到下依次执行,js的页面加载成功事件只能出现一次,即使出现多次,也只有最后一个生效
  - 重点事件
    - click
    - change
    - submit
    - focus
    - blur
  - jquery事件和事件源的绑定
    "要保证页面加载成功后,才能使用jq的事件"
    - jquery对象.事件名称(function(){});
- jQuery的选择器
  - 基本选择器:★
    -  * 所有
    - # id
    - .class
    - 标签选择器(标签名)
    - 多个选择器用","号隔开   a,b
  - 层次选择器:★
    - a b:选择a的b的后代
    - a>b:选择a的b孩子
    - a+b:选择a的b大弟弟
    - a~b:选择a的所有的b弟弟
  - 基本过滤:
    - :first 第一个
    - :last  最后一个
    - :even    偶数
    - :odd    奇数
    - :eq(index) 索引=
    - :gt(index) 索引>
    - :lt(index) 索引<
    - :not(选择器)
  - 内容过滤:
    - :has(选择器):包含
  - 可见性过滤:
    - :hidden:不可见 主要针对的是 文本隐藏域和指定display=none
    - :visible:可见
  - 属性选择器★
    - [属性名]:有指定属性的元素
    - [属性名=‘值‘]:有指定属性和值的元素
  - 表单对象属性★
    - :enabled             可用的
    - :disabled          不可用的
    - :checked     选中的(针对的是单选框和复选框)
    - :selected     选中的(下拉选)
  - 表单:
    - :input:选择所有的表单子标签
      "input:选中所有input标签
      select   textarea   button"
      - input select textarea button
- jQuery的DOM操作
  - jQuery效果:
    - 基本:★ 高和宽都变化
      - hide([毫秒值]):隐藏
      - show([毫秒值]):显示
      - toggle([毫秒值]):切换
    - 滑入滑出:高变化
      - slideUp([毫秒值]):滑出
      - slideDown([毫秒值]):滑入
      - slideToggle([毫秒值]);切换
    - 淡入淡出:
      - fadeIn([毫秒值]);
      - fadeOut([毫秒值]);
      - fadeToggle();切换
    - 了解:
      - fadeToggle(毫秒值,function(){});
      - 以上效果都可以添加一个回调函数
  - css样式
    - css
      - 设置css样式
        - 格式1:设置单个属性
          "jq对象.css("属性","值");"
        - 格式2:设置多个属性
          "jq对象.css({
              "属性":"值",
              "属性1":"值1"
          });"
      - 获取css样式的值
        "    jq对象.css("属性名称");"
    - 获取元素的宽和高
      - jq对象.width()
      - jq对象.height()
    - 扩展:offset()
      "获取元素在当前页面的位置"
      - top
        "元素距离顶部的距离"
      - left
        "元素距离左边的距离"
  - 属性
    - attr():设置或者获取元素的属性
      - 设置属性(给标签添加属性)
        - 格式1:设置单个属性
          "jq对象.attr("属性名","值");"
        - 格式2:设置多个属性
          "jq对象.attr({
              "属性":"值",
              "属性1":"值1"
          });"
      - 获取属性的值
        "    jq对象.attr("属性名");"
      - 移出属性(删除属性)
        "    jq对象.removeAttr("属性名");"
    - prop():使用方式和attr一样,优先使用attr方法,若attr方法不能用,换prop方法(版本升级后的产物)
    - class操作 了解
      - 元素.addClass("属性值");添加
      - 元素.removeClass():移除指定的样式
      - 元素.toggleClass("属性值"):切换

*/

/*

回顾:
    jQuery:js类库(js框架)对js进行封装,本质上就是外部的js文件.
    jQuery和html整合:
        1.下载
        2.通过script标签的src属性引入即可(1.11)
    jQuery语法:
        $("选择器");     或  jQuery("选择器");
    jq对象和js对象转换
        jq ===>  js(dom)
            jq对象[index]
            jq对象.get(index);
        js ===>  jq对象
            $(js对象);
    事件:
        click:
        submit:
        change:
        focus:
        blur:
        页面加载成功:
            $(function(){});
            $(document).ready(function(){});
    选择器:
        基本选择器:
            *
            #id
            .class
            标签名称
            多个选择器之间使用逗号
        层次选择器:
            a b
            a>b
            a+b
            a~b
        基本过滤选择器:
            :first
            :last
            :even
            :odd
            :eq(index)
            :gt(index)
            :lt(index);
            :not(选择器)
        内容过滤选择器:
            has(选择器);
        可见性过滤选择器:
            :hidden        type="hidden"   display = "none"
            :visible
        属性选择器:
            [属性]
            [属性=‘值‘]
        表单对象选择器:
            :enabled
            :disabled
            :selected    下拉选
            :checked    单选框个复选框
        表单选择器:
            :input
                input select textarea button
    DOM:
        效果:
            基本效果:
                hide()
                show()
                toggle()
            滑入滑出:
                slideUp();
                slideDown();
                slideToggle();
            淡入淡出:
                fadeIn();
                fadeOut();
                fadeToggle([毫秒值],回调函数);
        操作css样式:
            设置:
                设置单个:
                    jq对象.css("属性名称","值");
                设置多个:
                    jq对象.css({
                        "属性名称":"值",
                        "属性名称":"值"
                    });
            获取:
                jq对象.css("属性名称");
            获取宽和高:
                width();
                height();
            获取位置:
                offset();
                    top:
                    left:
        操作属性:
            attr:
                设置属性:
                    设置单个:
                        jq对象.attr("属性名称","值");
                    设置多个:
                        jq对象.attr({
                            "属性名称":"值",
                            "属性名称":"值"
                        });
                删除:
                    removeAttr("属性名称");
            prop:如果attr不好使使用prop代替
            操作class:
                addClass("class属性的值");
                removeClass();
                classToggle("class属性的值");
/////////////////////////////////////////////
案例1-省市联动
    需求分析:
        当省份改变的时候,根据选中的省份查询其所对应的市数组,遍历市数组,将每一个市拼成option插入到市的下拉选中.
    技术分析:
        事件
        jq遍历
        jq对DOM操作
    /////////////////////////
    步骤分析:
        1.确定事件(改变事件)
            给省份的下拉选添加改变事件
        2.编写改变事件函数
            //a.获取省份的value的值
            //b.获取所对应的市数组
            //c.获取市的下拉选对象
            //d.遍历市数组,将每一个市拼成option插入到市的下拉选中

案例2-左右选择
    需求分析:
        当点击不同的按钮时,根据按钮的需求将左边或右边的option插入到对面的下拉选中.
    技术分析:
        事件
        文档处理
    ////////////////////
    步骤分析:
        1.确定事件(单击事件)
            给按钮派发单击事件
        2.编写函数
            //a.将左边选中的第一个插入到右边

案例3-表单校验
    需求分析:
        通过使用validate插件来完成表单校验.
    技术分析:
        validate插件
//////////////////

扩展案例-模拟分组

//////////////////
day31jQuery

- jQuery遍历
  - 方式1:jQuery的对象方法
    - 格式:
      " jq对象.each(function([index],[dom对象]){
              对遍历到每个元素的操作
        });"
  - 方式2:全局函数
    - 格式:
      "$.each(要遍历的jquery对象,function([index],[dom对象]){
      });
      $.each(数组,function(){
      });"

案例:
//方式1:jq对象的方法
                $("#b1").click(function(){
                    //获取当前页面的文本隐藏域,并打印他们的value值
                    //[e1,e2,e3,e4]  存放的是dom(js)对象
                    $("input:hidden").each(function(index,ele){
//                        alert(index+"   "+ele.value+"  "+$(ele).val());
                        alert(this.value);
                    });
                });
                //方式2:全局遍历
                $("#b2").click(function(){
                    //获取要遍历的对象
                    var $hideObj = $("input:hidden");
                    $.each($hideObj, function(index,ele) {
                        alert(index+"   "+ele.value+"  "+$(ele).val()+"  "+this.value);
                    });
                });
                //js对象
                var arr = new Array(1,2,3,"tom");
                $("#b3").click(function(){
//                    $.each(arr, function(index,ele) {
//                        alert(index+"   "+ele+"   "+this);
//                    });
                    $(arr).each(function(index,ele){
                        alert(index+"   "+ele+"   "+this);
                    });
                });
            });

- jQueryDOM操作
  - HTML代码/文本/值 ★
    - val() : 对value属性的操作
      - jq对象.val();       获取value属性的值
      - jq对象.val("值");       设置value属性的值
    - html() : 对标签体的操作
      - jq对象.html();      获取标签体的内容
      - jq对象.html("值");     设置标签体的内容
    - text() : 对标签体的操作
      - jq对象.text();       获取标签体的内容
      - jq对象.text("值");     设置标签体的内容
    - html和text区别
      "设置内容: html可以将内容解析,text只是作为普通文本
      获取内容:html获取所有源码内容,text只是获取文本内容"
  - 文档处理
    - 内部插入:
      - append        a.append(c)     将c插入到a的内部的后面
      - prepend        a.prepend(c)    将c插入到a的内部的前面
      - appendTo    a.appendTo(c) 将a插入到c的内部的后面
      - prependTo    a.prependTo(c)将a插入到c的内部的前面

内插入案例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <title>01_内部插入节点.html</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //0.获取要操作的对象
                var $city = $("#city");
                var $fk = $("#fk");
                //1.在city内部的后面追加 反恐
                //向指定标签内部的前面进行插入
//                $city.append($fk);
//                $fk.appendTo($city);
                //2.在city内部的前面插入 反恐
                //向指定标签内部的后面进行插入
//                $city.prepend($fk);
                $fk.prependTo($city);
            });
        </script>
    </head>

    <body>
        <ul id="city">
            <li id="bj" name="beijing">北京</li>
            <li id="tj" name="tianjin">天津</li>
            <li id="cq" name="chongqing">重庆</li>

        </ul>

        <ul id="love">
            <li id="fk" name="fankong">反恐</li>
            <li id="xj" name="xingji">星际</li>
        </ul>

    </body>
    <script type="text/javascript">
    </script>

</html>

 $(document).ready(function() {

                //1 获取 username的value属性的值
//                alert($("[name=‘username‘]").val());
                //2 设置 username的默认值为"许多多"
                $("[name=‘username‘]").val("许多多");
                //3通过html获取div标签体的内容
//                alert($("div").html());
                //4通过html设置div标签体的内容
//                $("div").html("已满18,请戴眼镜...");
                //5通过text获取div标签体的内容
//                alert($("div").text());
                //6通过text设置div标签体的内容
//                $("div").text("已满18,请戴眼镜!!!!");
                //7 两者设置值的区别
                //html在设置内容时,可以解析html标签
                $("div").html("<font color=‘red‘>已满18,请戴眼镜...</font>");
                //text在设置内容时,原样设置
//                $("div").text("<font color=‘red‘>已满18,请戴眼镜...</font>");
                //8 两者获取值的区别
                //html在获取时,原样获取(不会解析任何标签)
//                alert($("div").html());
                //text在获取时,会解析标签,仅仅获取文本内容
//                alert($("div").text());

            }); $(document).ready(function() {

                //1 获取 username的value属性的值
//                alert($("[name=‘username‘]").val());
                //2 设置 username的默认值为"许多多"
                $("[name=‘username‘]").val("许多多");
                //3通过html获取div标签体的内容
//                alert($("div").html());
                //4通过html设置div标签体的内容
//                $("div").html("已满18,请戴眼镜...");
                //5通过text获取div标签体的内容
//                alert($("div").text());
                //6通过text设置div标签体的内容
//                $("div").text("已满18,请戴眼镜!!!!");
                //7 两者设置值的区别
                //html在设置内容时,可以解析html标签
                $("div").html("<font color=‘red‘>已满18,请戴眼镜...</font>");
                //text在设置内容时,原样设置
//                $("div").text("<font color=‘red‘>已满18,请戴眼镜...</font>");
                //8 两者获取值的区别
                //html在获取时,原样获取(不会解析任何标签)
//                alert($("div").html());
                //text在获取时,会解析标签,仅仅获取文本内容
//                alert($("div").text());

            });

    - 外部插入:
      - after                a.after(c)                在a的后面插入c
      - before        a.before(c)          在a的前面插入c
      - insertAfter    a.insertAfter(c)    将a插入到c的后面
      - insertBefore     a.insertBefore(c) 将a插入到c的前面

案例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <title>02_外部插入节点.html</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //0.获取要操作的对象
                var $city = $("#city");
                var $p2 = $("#p2");
                //1.在 p2 的后面插入 city
                //在指定的标签的后面进行插入
//                $p2.after($city);
//                $city.insertAfter($p2);
                //2.在 p2 的前面插入 city
                //在指定的标签的前面进行插入
//                $p2.before($city);
                $city.insertBefore($p2);
            });
        </script>
    </head>

    <body>
        <ul id="city">
            <li id="bj" name="beijing">北京</li>
            <li id="tj" name="tianjin">天津</li>
            <li id="cq" name="chongqing">重庆</li>
        </ul>

        <p id="p3">I would like to say: p3</p>

        <p id="p2">I would like to say: p2</p>

        <p id="p1">I would like to say: p1</p>

    </body>
    <script type="text/javascript">
    </script>

</html>

    - 删除:
      - empty():清空元素 (清空所有的子标签)
      - remove():移除 (自杀)

删除案例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <title>03_删除节点.html</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //0.获取要 操作的对象
                var $ul = $("#city");
                //1.清空ul
//                $ul.empty();
                //2.移除ul
                $ul.remove();
            });
        </script>
    </head>

    <body>
        <ul id="city">
            <li id="bj" name="beijing">北京
                <p>海淀区</p>
            </li>
            <li id="tj" name="tianjin">天津
                <p>河西区</p>
            </li>
            <li id="cq" name="chongqing">重庆</li>
        </ul>
        <p class="hello">Hello</p> how are
        <p>you?</p>
    </body>
    <script type="text/javascript">
    </script>

</html>

- jQuery的事件总结
  - 事件切换(知道)
    - hover:相当于给一个元素添加了mouseover和mouseout两个事件
      "jq元素对象.hover(function(){
          //第一个函数相当于mouseover
      },function(){
          //第二个函数相当于mouseout
      });"
    - toggle:相当于给一个元素添加了单击事件,轮流执行多个函数(兼容性有问题jquery1.8版本之前支持)
      "jq元素.toggle(function(){},function(){}...);"

案例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <!--<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>-->
        <script type="text/javascript">
            $(function(){
                $("#divId").hover(function(){
                    //相当于mouseover
                    $(this).html("mouseover事件被触发了");
                },function(){
                    //相当于mouseout
                    $(this).html("mouseout事件被触发了....");
                });

                $("#bId").toggle(function(){
                    alert(1);
                },function(){
                    alert(2);
                },function(){
                    alert(3);
                });

            });
        </script>
    </head>

    <body>
        <input type="button" id="bId" value="点击查看" /><br>
        <div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div>
    </body>

</html>

  - 常见事件
    - submit 表单提交事件★
    - focus 获得焦点事件  ★
    - blur  失去焦点  ★
    - change  改变 ★
    - click  单击 ★
    - dblclick 双击
    - keydown  键盘按下
    - keyup  键盘弹起
    - keypress 键盘按下并弹起
    - mousedown   鼠标按下
    - mouseup  鼠标弹起
    - mousemove  鼠标移入
    - mouseout   鼠标移出
    - mouseover  鼠标悬停
  - 事件和事件源的绑定  ★
    - jq对象.事件名称(function(){});
- validate插件
  "插件:指的就是别人已经写好的功能代码,直接引入使用即可.
      "
  - 作用:对表单进行校验
  - 下载:
    "下载路径:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip"
  - 使用方式:
    - 1.导入jquery.js
      "validate是基于jquery写的,所以要先导入jquery的js文件"
    - 2.再导入validate.js
      "想要使用别人的插件就必须的导入人家已经写好的js文件(插件)"
    - 3.在页面加载成功后,要确定对页面上的哪个表单进行校验
      "    $(function(){
              表单对象.validate();
          });"
    - 4.validate使用格式:
      "    表单对象.validate({
              rules:{},    //校验规则
              messages:{}    //提示信息
          });"
    - 5.常见的校验规则
      - 校验器名称             描述            值
      - required:           必须填写          true|false
      - number:        只能输入数字            true|false
      - min:               最小值              数字
      - max:        最大值            数字
      - range:        取值范围        [min,max]
      - minlength:    最小长度        数字
      - maxlength:    最大长度        数字
      - rangelength:    长度范围        [minlength,maxlength]
      - equalTo:            和谁相等      通过jQuery选择器选中指定元素对象
      - email:        校验邮箱        "email"
    - 6.rules校验器语法:
      - 方式1:单一校验
        "name属性的值:"校验器""
      - 方式2:多个校验
        "    name属性的值:{
                校验器1:值1,
                校验器2:值2
            }"
    - 7.messages自定义提示信息语法:
      - 方式1:
        "name属性的值:"提示信息""
      - 方式2:
        "    name属性的值:{
                校验器1:"提示信息1",
                校验器2:"提示信息2"
            }"

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--1.导入jq的js文件-->
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <!--2.导入validate的js文件-->
        <script type="text/javascript" src="../js/jquery.validate.js" ></script>
        <script type="text/javascript" src="../js/messages_zh.js" ></script>
        <script>
            /*3.在页面加载成功之后,锁定要校验的表单对象*/
            $(function(){
                //锁定要校验的表单对象,调用validate方法
                $("#formId").validate({
                    rules:{
                        //单一校验规则
//                        username:"required",
//                        //多个校验规则
//                        password:{
//                            required:true,
//                            number:true
//                        },
//                        repassword:{
//                            required:true,
//                            number:true,
//                            equalTo:"[name=‘password‘]"
//                        },
//                        zuixiaozhi:{
//                            required:true,
//                            min:180
//                        },
//                        shuzhiqujian:{
//                            required:true,
//                            range:[18,26]
//                        }
                        card:{
                            required:true,
                            cardLength:true
                        }
                    },    //校验规则
                    messages:{
//                        username:"<font color=‘red‘>用户名不可为空</font>",
//                        password:{
//                            required:"密码不可为空",
//                            number:"密码只能为数字"
//                        },
//                        zuixiaozhi:{
//                            min:"请输入不小于{0}的值啊...."
//                        },
//                        shuzhiqujian:{
//                            range:"请输入年龄在{0}到{1}之间的年龄"
//                        }
                        card:{
                            cardLength:"请输入16或18位的数字"
                        }
                    }    //提示信息
                });
            });

            //编写自定义校验器
            $.validator.addMethod("cardLength",function(val,ele,par){
                if(par){
                    if(val.length==16||val.length==18){
                        return true;
                    }
                    return false;
                }else{
                    return true;
                }

            },"输入的不合法");

        </script>
    </head>

    <body>
        <form id="formId" action="">
            必填：<input type="text" name="username" /> <br/> 必填数字：
            <input type="text" name="password" /> <br /> 必填重复：
            <input type="text" name="repassword" /> <br /> 最小值：
            <input type="text" name="zuixiaozhi" /> <br /> 区间：
            <input type="text" name="shuzhiqujian" /> <br />
            身份证长度:<input type="text" name="card" /> <br />
            <input type="submit" value="提交" />
        </form>
    </body>
</html>

  - 自定义校验器
    - 格式:
      - $.validator.addMethod(name,function(value,element,params){},"message");
      - 参数说明:
        - name:校验器的名称,唯一
        - function:校验规则
          - value:用户输入的值
          - element:要校验的dom对象
          - params:校验器的值
        - message:当不满足校验规则时的提示信息
- 扩展:
  - 筛选-查找;
    - children(["选择器"]):    所有孩子
    - parent():    父母
    - find("选择器"):        查找后代
    - next():        下个兄弟 +
    - nextAll():    所有的弟弟 ~
    - prev():        小哥哥
    - prevAll():    哥哥们
    - siblings():    兄弟们

  - 筛选-过滤
    - is("选择器"):判断是否满足   返回Boolean

查找案例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>05-可见性过滤选择器.html</title>
        <!--   引入jQuery -->
        <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="../js/assist.js" ></script>
        <link rel="stylesheet" type="text/css" href="../css/style.css" />
        <script type="text/javascript">
            $(document).ready(function() {
                //<input type="button" value=" 选择 id=two 所有子元素" id="b1" />
                $("#b1").click(function(){
                    $("#two").children().css("background-color","#ff0");
                });
                //<input type="button" value=" 选择 id=two 子元素title=other 元素 " id="b2" />
                $("#b2").click(function(){
//                    $("#two").children("[title=other]").css("background-color","#ff0");
                    $("#two").find("[title=other]").css("background-color","#ff0");
                });
                //<input type="button" value=" 选择 id=two 下一个兄弟" id="b3" />
                $("#b3").click(function(){
                    $("#two").next().css("background-color","#ff0");
                });
                //<input type="button" value=" 选择 id=two 后面的所有兄弟" id="b4" />
                $("#b4").click(function(){
                    $("#two").nextAll().css("background-color","#ff0");
                });
                //<input type="button" value=" 选择 id=two 上一个兄弟" id="b5" />
                $("#b5").click(function(){
                    $("#two").prev().css("background-color","#ff0");
                });
                //<input type="button" value=" 选择 id=two 前面的所有兄弟" id="b6" />
                $("#b6").click(function(){
                    $("#two").prevAll().css("background-color","#ff0");
                });
                //<input type="button" value=" 选择 id=two 所有兄弟" id="b7" />
                $("#b7").click(function(){
                    $("#two").siblings().css("background-color","#ff0");
                });
                //<input type="button" value=" 选择 id=two 父元素" id="b8" />
                $("#b8").click(function(){
                    $("#two").parent().css("background-color","#ff0");
                });
            });
        </script>
    </head>

    <body>
        <h3>可见性过滤选择器.</h3>
        <button id="reset">手动重置页面元素</button>
        <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
        <br/><br/>
        <input type="button" value=" 选择 id=two 所有子元素" id="b1" />
        <input type="button" value=" 选择 id=two 子元素title=other 元素 " id="b2" />
        <input type="button" value=" 选择 id=two 下一个兄弟" id="b3" />
        <input type="button" value=" 选择 id=two 后面的所有兄弟" id="b4" />
        <input type="button" value=" 选择 id=two 上一个兄弟" id="b5" />
        <input type="button" value=" 选择 id=two 前面的所有兄弟" id="b6" />
        <input type="button" value=" 选择 id=two 所有兄弟" id="b7" />
        <input type="button" value=" 选择 id=two 父元素" id="b8" />
        <br /><br />

        <!--文本隐藏域-->
        <input type="hidden" value="hidden_1">
        <input type="hidden" value="hidden_2">
        <input type="hidden" value="hidden_3">
        <input type="hidden" value="hidden_4">

        <div class="one" id="one">
            id为one,class为one的div
            <div class="mini">class为mini</div>
        </div>

        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div.
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>

        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>

        <div style="display:none;" class="none">style的display为"none"的div</div>

        <div class="hide">class为"hide"的div</div>

        <span id="mover">正在执行动画的span元素.</span>
    </body>

</html>

过滤案例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>05-可见性过滤选择器.html</title>
        <!--   引入jQuery -->
        <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/assist.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="../css/style.css" />
        <script type="text/javascript">
            $(document).ready(function() {
                $("#b6").click(function(){
                    //判断样式为hide的div 下一个兄弟是否是span
                    var flag = $("div:hidden").next().is("span");
                    alert(flag);
                });
            });
        </script>
    </head>

    <body>
        <h3>可见性过滤选择器.</h3>
        <button id="reset">手动重置页面元素</button>
        <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
        <br/><br/>
        <input type="button" value=" 判断样式为hide的div 下一个兄弟是否是span" id="b6" />
        <br /><br />
        <!--文本隐藏域-->
        <input type="hidden" value="hidden_1">
        <input type="hidden" value="hidden_2">
        <input type="hidden" value="hidden_3">
        <input type="hidden" value="hidden_4">

        <div class="one" id="one">
            id为one,class为one的div
            <div class="mini">class为mini</div>
        </div>

        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div.
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>

        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>

        <div style="display:none;" class="none">style的display为"none"的div</div>

        <div class="hide">class为"hide"的div</div>

        <span id="mover">正在执行动画的span元素.</span>
    </body>

</html>

用户分组案例:

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        </script>

        <style type="text/css">
            div * {
                display: block;
                width: 200px;
            }
            div span {
                background-color: #0f0;
            }
        </style>
        <script>
            $(function(){
                //给span派发单击事件
                $("span").click(function(){
                    //将span后面的a标签显示或隐藏
                    $(this).nextAll().toggle();
                    $(this).parent().siblings().find("a").hide();
                });
            });
        </script>
    </head>

    <body>

        <div>
            <span>三国好友</span>
            <a>曹操</a>
            <a>刘备</a>
            <a>周瑜</a>
        </div>
        <div>
            <span>笑傲好友</span>
            <a>东方不败</a>
            <a>向问天</a>
            <a>任我行</a>
        </div>
        <div>
            <span>水浒好友</span>
            <a>行者武松</a>
            <a>豹子头</a>
            <a>急先锋</a>
        </div>

    </body>

</html>

省市联动案例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            // 定义二维数组:
            var arr = new Array(4);
            arr[0] = new Array("石家庄", "邯郸", "保定", "秦皇岛");
            arr[1] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");
            arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
            arr[3] = new Array("长春市", "吉林市", "四平市", "通化市");
        </script>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(function() {
                /*    步骤分析:
        1.确定事件(改变事件)
            给省份的下拉选添加改变事件
        2.编写改变事件函数
            //a.获取省份的value的值
            //b.获取所对应的市数组
            //c.获取市的下拉选对象
            //d.遍历市数组,将每一个市拼成option插入到市的下拉选中*/
                $("[name=pro]").change(function(){
                    //a.获取省份的value的值
//                    alert(this.value);
                    //b.获取所对应的市数组
                    var cityArr = arr[this.value];
//                    alert(cityArr);
                    //c.获取市的下拉选对象
                    var $cityObj = $("#city");
                    //初始化
                    $cityObj.html("<option>=请选择=</option>");
                    //d.遍历市数组,将每一个市拼成option插入到市的下拉选中
                    $.each(cityArr, function() {
//                        $cityObj.append("<option>"+this+"</option>");
                        $("<option>"+this+"</option>").appendTo($cityObj);
                    });
                });
            });
        </script>
    </head>

    <body>
        <form action="#" method="get">
            <input type="hidden" name="id" value="007" /> 姓名:
            <input name="username" value="xuduoduo" /><br> 密码:
            <input type="password" name="password" value="123" disabled="disabled"><br> 性别:
            <input type="radio" name="sex" value="1" checked="checked">男
            <input type="radio" name="sex" value="0">女
            <br> 爱好:
            <input type="checkbox" name="hobby" value="eat">吃
            <input type="checkbox" name="hobby" value="drink" checked="checked">喝
            <input type="checkbox" name="hobby" value="sleep" checked="checked">睡
            <br> 头像:
            <input type="file" name="photo"><br> 籍贯:
            <select name="pro">
                <option>--请选择--</option>
                <option value="0">河北</option>
                <option value="1">河南</option>
                <option value="2">辽宁</option>
                <option value="3">吉林</option>
            </select>省
            <select id="city">
                <option>-请选择-</option>
            </select>市
            <br> 自我介绍:
            <textarea name="intr" cols="40" rows="4">good!</textarea>
            <br>
            <input type="submit" value="保存" />
            <input type="reset" />
            <input type="button" value="普通按钮" />
        </form>
    </body>

</html>
<!--

-->

左右选中案例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <title>左右选中.html</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style>
            input[type=‘button‘] {
                width: 50px;
            }
        </style>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(function(){
                /*    步骤分析:
                1.确定事件(单击事件)
                    给按钮派发单击事件
                2.编写函数
                    //a.将左边选中的第一个插入到右边*/
                $("#toRight1").click(function(){
                    //a.将左边选中的第一个插入到右边
                    $("#left option:selected:first").appendTo($("#right"));
                });

                $("#toRight2").click(function(){
                    //a.将左边选中的插入到右边
                    $("#left option:selected").appendTo($("#right"));
                });

                $("#toRight3").click(function(){
                    //a.将左边选中的插入到右边
                    $("#left option").appendTo($("#right"));
                });
            });
        </script>
    </head>

    <body>
        <table>
            <tr>
                <td>
                    <select id="left" multiple="true" style="width:100px" size="10">
                        <option>環</option>
                        <option>芈</option>
                        <option>琅</option>
                        <option>琊</option>
                        <option>爨</option>
                        <option>甄</option>
                        <option>槑</option>
                        <option>夔</option>
                    </select>
                </td>
                <td>
                    <input type="button" value=">" id="toRight1"><br>
                    <input type="button" value=">>" id="toRight2"><br>
                    <input type="button" value=">>>" id="toRight3"><br><br>
                    <input type="button" value="<" id="toLeft1"><br>
                    <input type="button" value="<<" id="toLeft2"><br>
                    <input type="button" value="<<<" id="toLeft3">
                </td>
                <td>
                    <select id="right" multiple="multiple" style="width:100px" size="10">

                    </select>
                </td>
            </tr>
        </table>
    </body>

</html>

表单效验案例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript" src="../js/jquery.validate.js" ></script>
        <script type="text/javascript" src="../js/messages_zh.js" ></script>
        <script>
            $(function(){
                $("#formid").validate({
                    rules:{
                        username:{
                            required:true
                        },
                        email:{
                            required:true,
                            email:"email"
                        },
                        sex:{
                            required:true
                        }
                    },
                    messages:{
                        username:{
                            required:"用户名不可为空"
                        }
                    }
                });
            });
        </script>
    </head>

    <body>
        <form action="#" method="get" id="formid">
            <table width="60%" height="60%" align="center" bgcolor="#ffffff">
                <tr>
                    <td colspan="3">会员注册USER REGISTER</td>
                </tr>
                <tr>
                    <td width="20%">用户名:</td>
                    <td width="80%"><input type="text" name="username" id="username"></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="password" id="password"></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password" name="repassword" id="repassword"></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" id="email"></td>
                </tr>
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td>
                        <input type="radio" name="sex" value="男"> 男
                        <input type="radio" name="sex" value="女" />女
                        <label for="sex" class="error"></label>
                    </td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="date" name="birthday">
                    </td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td>
                        <input type="text" name="checkcode">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="注册" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

原文地址：https://www.cnblogs.com/haizai/p/11368036.html