jQuery入门

jQuery基本介绍

jQuery简介

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。使用jQuery没有浏览器兼容性问题

使用

下载文件
- jquery-3.5.1.min.js 压缩版上线
- jquery-3.5.1.js 未压缩版开发阶段
目前只有1.x版本兼容性最好，1.x版本支持对ie6、ie7、ie8的支持。但是1.x官网已经不再增添新的功能。只做bug库的维护
区别
- 由于压缩版本做了简单的加密，可以保护JS不会被泄露
- 压缩版本文件体积小，网页加载速度快
- 未压缩版JS被格式化
引入
- 使用外部引用js文件

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #d1{
            width: 200px;
            height: 200px;
            background-color: green;

            /* 隐藏div */
            display: none;
        }
        #d2{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
        #d3{
            width: 200px;
            height: 200px;
            background-color: blue;
            display: none;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js">

    </script>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <button onclick="fun1()">显示div</button>
    <button onclick="fun2()">隐藏div</button>
    <button onclick="fun3()">jQuery显示</button>
    <button onclick="fun4()">jQuery隐藏</button>
</body>

<script>

    /* 
        相当于标签选择器
        
    */

    function fun1(){
        //根据标签名获取div
        var divs =  document.getElementsByTagName("div")
        //  遍历获取每个div元素
        for(var i =0;i<divs.length;i++){
            divs[i].style.display="block";
        }

    }

    function fun2(){
        //根据标签名获取div
        var divs =  document.getElementsByTagName("div")
        //  遍历获取每个div元素
        for(var i =0;i<divs.length;i++){
            divs[i].style.display="none";
        }

    }

    function fun3(){
        $("div").show();
    }

    function fun4(){
        $("div").hide();
    }
</script>
</html>

页面加载

介绍

jQuery提供了ready()函数，用于页面加载成功后执行。与window.onload函数作用一致。

jQuery的ready()与window.onload的区别

js页面加载函数在一个页面中出现多个最终只执行最后一个
jQuery页面加载函数执行时机要早于js页面加载函数
jQuery页面加载函数在一个页面中出现多个会按照顺序依次执行

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="../js/jquery-1.12.4.js"></script>
    <script >
        // 页面加载函数
        window.onload=function(){
            var username = document.getElementById("username").value;
            console.log(username)
        }

        //jQuery方式一
     /*    $(document).ready(function(){
            var username = document.getElementById("username").value;
            console.log(username)
        }); */

        //第二种写法
   /*      jQuery().ready(function(){
            var username = document.getElementById("username").value;
            console.log(username)
        }); */

        //页面加载函数简写方式
      /*   $(function(){
            var username = document.getElementById("username").value;
            console.log(username);
        }) */
    </script>
</head>
<body>
    用户名：<input type="text" name="username" id="username" value="张三4">
</body>
</html>

JS对象与jQuery对象

DOM对象

通过原生JavaScript方法获取到的对象

jQuery对象

通过jQuery包装DOM对象后产生的对象

注意

jQuery对象和DOM对象可以进行相互转换，但是切记两个对象的属性和函数不能彼此混搭使用

DOM对象转jQuery对象

jQuery(DOM对象)
$(DOM对象)

jQuery对象转DOM对象

jQuery对象[index]
jQuery对象.get(index)

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入jQuery -->
    <script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
    <!-- 
        js对象不可以调用jQuery的方法
        jQuery对象不能使用js对象的方法

        val():jQuery获取输入框中value的方法
        val(李四):jQuery设置输入框中value的方法
     -->
     用户名：<input type="text" name="username" id="username" value="张三">
     密码：<input type="password" name="password" id="password" value="123456">
</body>

<script>
    //通过document获取用户名输入框
    var username = document.getElementById("username");
    /* 
        通过js方式获取的对象属于js对象
        js转换jQuery对象
        $(js对象)
    */
   console.log($(username).val());


    //通过jQuery选择器获取到的元素为jQuery对象
    // $("#password")相当于 document.getElementById("username");
    var password = $("#password");

    /* 
        jQuery转js对象
        jQuery对象[0]       jQuery对象.get(0)
    */
    console.log(password[0].value);
    
</script>
</html>

jQuery选择器

介绍

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。jQuery选择器继承了CSS与Path(xml语言解析)语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的定位，从而完成元素属性和行为的处理。

基本选择器

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <!-- 引入jQuery -->
        <script src="../js/jquery-1.12.4.js"></script>

        <style>
            .p1{
                color: red;
            }
        </style>
</head>
<body>
    <!--    
        id选择器    $("#元素id")
        类选择器    $(".类的名称")
        标签选择器  $("标签名称")   

      -->
      <input type="text" name="username" id="username">
      <div class="p1">11</div>
      <p class="p1">22</p>
</body>

<script>
   console.log($("#username"));
   console.log($(".p1"));
   console.log($("div"));
</script>
</html>

层级选择器

后代选择器
- parent child, 使用空格隔开。获得父元素内部的所有儿子、孙子...元素。（祖孙关系）
子选择器
- parent > child ,使用>符号隔开。获得父元素下面的子元素。（父子关系）
示例

	  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入jQuery -->
    <script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
    <div>
        <p><span>我是孙子元素</span></p> <span>我是子元素</span>
        
    </div>
</body>

<script>
    /* 
        父元素  子元素：获取父元素下所有的子元素(孙子元素也包括)
        父元素>子元素：获取父元素下所有的子元素（不包括孙子元素）
    */

   console.log($("div span"));
   console.log($("di>span"));

</script>
</html>

属性选择器

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入jQuery -->
    <script src="../js/jquery-1.12.4.js"></script>

</head>
<body>
    <!-- 
        [attribute]:获取页面中含有xx属性的元素
        [attribute='属性值']:获取属性值为xx的属性的元素     重要！！！
        [attribute!='属性值']:获取属性值不为xx的属性的元素
        [attribute$='属性值']:获取属性值为xx的属性并以xx结尾的元素
        [attribute^='属性值']:获取属性值为xx的属性并以xx开头的元素
     -->

     <img src="../img/1.jpg" width="200px" height="200px" alt="">
     <input type="text" name="username">
</body>
<script>
    // 获取属性值为src的属性的元素
    console.log($("[src]"));

    console.log($("[name='username]"));
    console.log($("script[src!='../img/1.jpg']"));
    console.log($("[src$='.jpg']"));
    console.log($("[src^='../']"));

</script>
</html>

过滤选择器

示例

	  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入jQuery -->
    <script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
    <a href="#">点我哦</a>
    <a href="#">就不点</a>
    <a href="#">你点一个吧</a>
    <a href="#">就就不点</a>

    <h1>红灯区</h1>
    <h2>会所</h2>
    <h3>洗浴中心</h3>

    <input type="checkbox" name="hobby" id="">坑
    <input type="checkbox" name="hobby" id="">蒙
    <input type="checkbox" name="hobby" checked id="">拐
    <input type="checkbox" name="hobby" id="">骗
    <!-- 
        :first  获取第一个元素
        :last   获取最后一个元素
        :even   获取偶数行所有元素
        :odd    获取奇数行所有的元素
        :eq(标签索引)   根据索引获取到一个标签
        :gt(标签索引)   获取大于指定索引多个标签
        :lt(标签索引)   获取小于指定索引多个标签
        :header 获取页面中又有标题标签
        :not    获取与选择器相反的元素

     -->
</body>

<script>
    console.log($("a:first"));
    console.log($("a:last"));
    console.log($("a:even"));
    console.log($("a:odd"));
    console.log($("a:eq(0)"));
    console.log($("a:gt(1)"));
    console.log($(":header"));  //获取三个标题
    console.log($(":header:eq(1)"));  //获取会所标题 
    console.log($("input:not(:checked)"));  //  :checked    获取当前页面被选中的复选框
</script>
</html>

表单属性选择器

示例

	  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入jQuery -->
    <script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
    用户名：<input type="text" name="username" disabled id="">
    用户名：<input type="text" name="username"  id=""><br>

    <input type="checkbox" name="hobby" id="">坑
    <input type="checkbox" name="hobby" id="">蒙
    <input type="checkbox" name="hobby" checked id="">拐
    <input type="checkbox" name="hobby" id="">骗<br>

    <select name="" id="">
        <option >正在学习</option>
        <option >正在研究</option>
        <option selected>正在研究学习</option>
    </select>
    <!-- 
        :disabled   获取当前页面中被禁用的所有元素
        :enabled    获取当前页面中可用所有元素
        :checked    获取当前页面中被选中的单选框或复选框
        :selected   获取当前页面中被选中的下拉框
     -->
</body>
<script>
    console.log($(":disabled"));
    console.log($(":enabled"));
    console.log($(":checked"));
    console.log($(":selected"));
</script>
</html>

jQuery的DOM操作

属性操作

attr()
- attr("属性名") 获取标签中对应的属性名的值
- attr("属性名","属性值") 设置标签的属性名与对应的属性值
prop()
- prop("属性名") 获取标签中对应的属性名的值
- prop(“属性名”,"属性值") 设置标签的属性名与对应的属性值
val()
- val() 只能获取value
- val("新值") 只能设置value
attr()与prop()区别
- attr()能够实现对标签中自带属性与自定义属性的操作，但在某些使用过程中有功能失效问题
- prop()实现对标签中自带属性的操作，推荐使用

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
    用户名：<input type="text" name="username" value="admin">
</body>

<script>
    /*
        js:setAttribute("属性","属性值")    设置属性值
            get Attribute("属性")   获取属性值
            xx.属性 获取
            xx.属性=新值
        
        jq：prop("属性")    获取xx元素的属性值
            prop("属性","属性值")   设置xx元素的属性值
            attr("属性")    获取xx元素的属性值
            attr("属性","属性值")   设置xx元素的属性值

            val():  只能获取value
            val("新值") 只能设置value
     */
    console.log($("input[name='username']").prop("value"));
    console.log($("input[name='username']").prop("value","吴亦凡"));

    console.log(($("input[name='username']").val()));
</script>
</html>

class类操作

addClass()
- 向被选元素添加一个类
removeClass()
- 从被选元素删除一个类
toggleClass()
- 对被选元素进行增加/删除类的切换操作

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.min.js"></script>

    <style>
        .p1{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>

<script>
    /* 
        addClass("类选择器名称")    给xx元素作用类选择器样式
        removeClass("类选择器名称") 移除xx元素类选择器的样式
        toggleClass("类选择器名称") 判断当前xx元素是否有此类样式如果有移除，没有则添加
    */
   $("div").addClass("p1");

   $("div").removeClass("p1");

   $("div").toggleClass("p1")
</script>
</html>

样式操作

css(“样式名”)
- 获取该样式值
css("样式名","值")
- 设置一个样式
css({"样式名":"值","样式名":"值",……})
- 设置多个样式

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
    <!-- 
        css("属性") 获取xx元素上的样式
        css("属性","属性值")    给xx元素上设置一个样式
        css({"属性":"属性值","属性":"属性值"})

     -->

     <div></div>
</body>
<script>
    $("div").css({width:"200px",height:"300px","background-color":"red"})

    $("div").css({"border-radius":"100%"})

    console.log( $("div").css("width"));
</script>
</html>

文档操作

内部插入
- append() 在被选元素的结尾插入内容
- prepend() 在被选元素的开头插入内容
外部插入
- after() 在xx元素后添加兄弟元素
- before() 在xx元素前添加兄弟元素

删除

empty() 清空内容
remove() 删除整个元素
detach()
- 删除整个元素
- 与remove()区别，所有绑定的事件、附加的数据等都会保留

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.js"></script>

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 

        empty() 清空元素内容
        remove()    删除元素    返回值是删除元素自身
        detach()    删除元素（保留元素上之前绑定事件或数据）
     -->

     <div>
         吴某我预测判刑4四年
     </div>
</body>

<script>
    // $("div").empty();
    // $("div").remove();

    $("div").mouseover(function(){
        alert(1111);
    })

    //验证事件是否保留
   var d =  $("div").detach();
   $("body").append(d);

</script>
</html>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
    <!-- 
        js: appendChild()   在元素内部末尾添加子元素
            inserBefore(B,C)    在B元素前添加一个C元素

        jq：
            append()   在元素内部末尾添加子元素
            prepend()    在元素内部前面添加子元素

            after() 在xx元素后添加兄弟元素
            before  在xx元素前添加兄弟元素
     -->
     <ul>
         <li>杜美竹</li>
     </ul>
</body>
<script>
    /* js */
 /*    var li = document.createElement("li");
    li.innerHTML="<li>14岁未成年</li>"
    var ul = document.getElementsByTagName("ul")[0]
    ul.appendChild(li) */

    // jq
    $("ul").append("<li>吴亦凡</li>");
    $("ul").prepend("<li>14岁未成年</li>");

    $("li:eq(1)").after("<li>段子手</li>");
    $("li:eq(1)").before("<li>大碗宽面</li>");
</script>

</html>

jQuery事件

jQuery的事件类型和JavaScript事件类型基本上是一样的，只是在使用的方式上有一些差别比如点击事件click,失焦事件 blur,聚焦事件 focus等...

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
    用户名：<input type="text" name="username" id="">
    
</body>

<script>
    // js动态绑定
  /*   document.getElementsByTagName("input")[0].onblur=function(){
        console.log(this.value)
    } */

    // jq动态
    $("input").blur(function(){
        console.log(this.value)
    })
</script>
</html>

动画效果

jQuery特效，是指jQuery封装了JS的一些用于处理元素的显示与隐藏的比较好看的效果，可以通过调用函数直接使用。

显示与隐藏

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.js"></script>
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        display: none;
    }
</style>

</head>
<body>
    <!-- 

        show()  显示元素
        hide()  隐藏元素
        toggle()    如果隐藏就显示，若显示就隐藏
        参数：solw缓慢  fast快速    normal正常  毫秒
     -->

     <div>

     </div>

     <button  onclick="fun1()">显示div</button>
     <button onclick="fun2()">隐藏div</button>
     <button onclick="fun3()">切换div</button>
</body>
    <script>
        function fun1(){
            $("div").show("solw");
        }

        function fun2(){
            $("div").hide();
        }

        function fun3(){
            $("div").toggle();
        }
    </script>
</html>

淡入淡出

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.js"></script>
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        display: none;
    }
</style>

</head>
<body>
    <!-- 

        fadeIn()    淡入
        fadeOUt()   淡出
        fadeToggle()    如果淡入就淡出，若淡出就淡入
        参数：solw缓慢  fast快速    normal正常  毫秒
     -->

     <div>

     </div>

     <button  onclick="fun1()">淡入div</button>
     <button onclick="fun2()">淡出div</button>
     <button onclick="fun3()">切换div</button>
</body>
    <script>
        function fun1(){
            $("div").fadeIn("solw");
        }

        function fun2(){
            $("div").fadeOut();
        }

        function fun3(){
            $("div").fadeToggle(3000);
        }
    </script>
</html>

滑动效果

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
    
    </head>
    <body>
        <!-- 
    
            slideDown()    划入
            slideUp()   划出
            slideToggle()    如果划入就划出，若划出就划入
            参数：solw缓慢  fast快速    normal正常  毫秒
         -->
    
         <div>
    
         </div>
    
         <button  onclick="fun1()">淡入div</button>
         <button onclick="fun2()">淡出div</button>
         <button onclick="fun3()">切换div</button>
    </body>
        <script>
            function fun1(){
                $("div").slideDown("solw");
            }
    
            function fun2(){
                $("div").slideUp();
            }
    
            function fun3(){
                $("div").slideToggle(3000);
            }
        </script>
    </html>

自定义动画

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;   
        }
    </style>
</head>
<body>
<div></div>
</body>

    <script>

        /* 
            animate:    自定义动画函数
                参数1：{}设置移动位置
                参数2：几秒到达设定位置
                参数3：到达位置自动执行的函数   回调函数
        */
        $("div").animate({top:"500px",left:"900px"},5000,function(){
            $(this).fadeOut(3000);
        })
    </script>
</html>

数组操作

方式一

$obj.each(function(i,dom){

})

方式二

$.each(object,function(i,dom){

})

i

对象成员或数组的索引

dom

对应变量或内容，该变量或者内容为js对象

注意

若需要退出each循环可使用回调函数返回 false，其他返回值将被忽略

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
    <script>
        var arr = [10,true,"吴亦凡"];

        /* 
            $.each(要遍历的对象,function(索引,从数组中获取到每一个数组){
                循环体
            })
        */

        $.each(arr,function(index,d){
            console.log(index+"\t"+d)
        })


        /* 
        方式二
            jQuery对象.each(function(索引,从数组中获取到每一个数组){
                循环体
            })
        */
       $(arr).each(function(index,d){
            console.log(index+"\t"+d)
        })
    </script>
</body>
</html>

示例2文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
    <select name="" id="province" onchange="fun1(value)">
        <option value="-1">--请选择省--</option>
        <option value="0">河南</option>
        <option value="1">河北</option>
        <option value="2">山东</option>
    </select>省

    <select name="" id="city">
        <option value="-1">--请选择市--</option>
    </select>市
</body>

<script>
    var citys = new Array();
    citys[0]=["驻马店","郑州","新乡","开封","洛阳"]
    citys[1]=["石家庄","廊坊","保定","邯郸","秦皇岛","张家口","唐山"]
    citys[2]=["青岛","菏泽","日照","烟台","威海","枣庄","济南"]

    function fun1(index){

        // 清空city下拉项
        /* 
            text()  获取文本值
            text("内容")    设置文本值
            html()  获取文本值
            html("内容")  设置文本值
        */
        $("#city").html("<option value='-1'>--请选择市--</option>");

        $.each(citys[index],function(a1,city){
            
            $("#city").append("<option>"+city+"</option>")
        })
        
    }
</script>
</html>

表单插件

在学习javascript时候，我们手动的完成过表单数据的校验，这项功能在实际开发中也是常见的，属于通用功能，但是单纯的通过javascript进行校验，如果选项过多，那么还是有些力不从心。实际在开发中都是使用第三方工具，本案例中将使用jQuery插件validation进行表单的校验

使用步骤

下载validation工具
导入工具jquery-3.4.1.js、jquery.validate.js、messages_zh.js。
编写form表单信息并在脚本中给form表单绑定validate验证方法。
在form表单元素中逐个指定校验规则

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.js"></script>
    <!-- 引入校验插件 -->
    <script src="../js/jquery.validate.js"></script>
    <!-- 引入国际化文件 -->
    <script src="../js/messages_zh.js"></script>
</head>
<body>
    <form id="f1" action="/s1" method="POST">
    <table cellspacing="0px" cellpadding="7px" width="1200px" height="400px" border="1px" align="center">
        <tr align="center">
            <td colspan="2" style="color: green;font-weight: bold;font-size: 25px;">用户注册</td>
        </tr>
        <tr>
            <td align="right">用户名:</td>
            <td>
                <input type="text" name="username" id="username" required>
            </td>
        </tr>
        <tr>
            <td align="right">密码:</td>
            <td>
                <input type="password" name="password" id="password" required rangelength="[6, 16]">
            </td>
        </tr>
        <tr>
            <td align="right">确认密码:</td>
            <td>
                <input type="password" name="pwd2" id="pwd2" required equalto="#password">
            </td>
        </tr>
        <tr>
            <td align="right">Email:</td>
            <td>
                <input type="text" name="email" id="email" required   email="true">
            </td>
        </tr>
        <tr>
            <td align="right">出生日期:</td>
            <td>
                <input type="text" name="birthday" id="birthday" required dateiso="true">
            </td>
        </tr>
        <tr align="center">
            <td colspan="2"><input type="submit" value="注册"></td>
        </tr>
    </table>
</form>
</body>
<script>
    /* 表单校验 */
    $("#f1").validate();

</script>
</html>

示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.js"></script>
    <!-- 引入校验插件 -->
    <script src="../js/jquery.validate.js"></script>
    <!-- 引入国际化文件 -->
    <script src="../js/messages_zh.js"></script>
    <style>
        label{
            color: red;
        }
    </style>
</head>
<body>
    <form action="/s1" method="POST" id="f1">
    <table cellspacing="0px" cellpadding="7px" width="1200px" height="400px" border="1px" align="center">
        <tr align="center">
            <td colspan="2" style="color: green;font-weight: bold;font-size: 25px;">用户注册</td>
        </tr>
        <tr>
            <td align="right">用户名:</td>
            <td>
                <input type="text" name="username" id="username" >
            </td>
        </tr>
        <tr>
            <td align="right">密码:</td>
            <td>
                <input type="password" name="password" id="password">
            </td>
        </tr>
        <tr>
            <td align="right">确认密码:</td>
            <td>
                <input type="password" name="pwd2" id="pwd2" >
            </td>
        </tr>
        <tr>
            <td align="right">Email:</td>
            <td>
                <input type="text" name="email" id="email" >
            </td>
        </tr>
        <tr>
            <td align="right">出生日期:</td>
            <td>
                <input type="text" name="birthday" id="birthday">
            </td>
        </tr>
        <tr align="center">
            <td colspan="2"><input type="submit" value="注册"></td>
        </tr>
    </table>
</form>
</body>
<script>
        $("#f1").validate({
            /* 定义规则 */
            rules:{
                username:{
                    required:true
                },
                password:{
                    required:true,
                    rangelength:[6,16]
                },
                pwd2:{
                    required:true,
                    equalTo:"#password"
                },
                email:{
                    required:true,
                    email:true
                },
                birthday:{
                    required:true,
                    dateISO:true
                }

            },
            /* 规则不符合的提示信息 */
            messages:{
                username:{
                    required:"用户名不能为空"
                },
                password:{
                    required:"密码不能为空",
                    rangelength:"密码长度必须在6-16位之间"
                },
                pwd2:{
                    required:"确认不能为空",
                    equalTo:"两次输入密码不一致"
                },
                email:{
                    required:"邮箱不能为空",
                    email:"邮箱不合法"
                },
                birthday:{
                    required:"出生日期不能为空",
                    dateISO:"请输入有效的日期 (YYYY-MM-DD)"
                }


            }
        })


</script>
</html>

posted @ 2021-08-06 17:21 Lucky_龍阅读(52) 评论(0) 收藏举报

刷新页面返回顶部

Lucky_龍

jQuery入门

jQuery基本介绍

jQuery简介

使用

页面加载

介绍

jQuery的ready()与window.onload的区别

示例

JS对象与jQuery对象

DOM对象

jQuery对象

注意

DOM对象转jQuery对象

jQuery对象转DOM对象

示例

jQuery选择器

介绍

基本选择器

层级选择器

属性选择器

过滤选择器

表单属性选择器

jQuery的DOM操作

属性操作

class类操作

样式操作

文档操作

jQuery事件

jQuery的事件类型和JavaScript事件类型基本上是一样的，只是在使用的方式上有一些差别 比如 点击事件click,失焦事件 blur,聚焦事件 focus等...

示例

动画效果

jQuery特效，是指jQuery封装了JS的一些用于处理元素的显示与隐藏的比较好看的效果，可以通过调用函数直接使用。

显示与隐藏

淡入淡出

滑动效果

自定义动画

数组操作

方式一

方式二

i

dom

注意

示例1

示例2文本操作

表单插件

使用步骤

示例1

示例2

公告

jQuery的事件类型和JavaScript事件类型基本上是一样的，只是在使用的方式上有一些差别比如点击事件click,失焦事件 blur,聚焦事件 focus等...