jQuery操作页面-day13

最新推荐文章于 2024-08-11 18:40:36 发布

agkbhh3631

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量166

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yanlinux/p/8920725.html

版权

一、JavaScript变量的作用域

　　PS：变量的作用域是在声明的时候决定的而不是在执行的时候决定的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>

<script>
//    var a=6, b=7; // window（作用全局）
//    function t(){
////        var a=3, b=5; //函数作用域
//        console.log(a + '---' + b);// 3----5
//    }
//    t();
var a=8,b=9;
function sum(){
//    var a=3,b=5;
    function p(){
//        var a=4,b=6;
        console.log(a+b); // 10
    }
    p();
}
sum();
</script>
</body>

</html>

二、JavaScript词法分析

　　函数执行前，会进行预编译，这个预编译的过程就是词法分析

　　会形成一个活动对象，Active Object AO

　　实例一（xx同城面试题）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
<script>

    var str = "global"; //AO1  AO1.str
    function t(age){
        console.log(str); // undefined
        var str = "locale";
//        console.log(str); // locale

    }
    t();
</script>
</html>

　　通过上面的实例我们可以发现第一个str变量在console中打印的是undefined，第二个是locale（这个没有问题），疑惑点是在第一个所打印的变量str为什么是undefined。首先浏览器对HTML进行一个预编译，这个时候AO在windows域中发现有一个变量，他就会在内部将这个定义成undefined（实际上var str = global并未执行），所以我们在第一个地方str的值是undefined。

AO对象具体：

* 1.f分析函数的参数：
* 如果没有参数的话，AO对象上没有任何属性
* Ao.age = undefined
* 2.分析函数的变量声明：
* AO.str = undefined
*
* 3.分析函数的函数声明表达式：
* 无
* AO.sum = functioon(){}

　　实例二（xxx面试题）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script>
    var age = 100; // age = undefinde
    function t(age) {
        console.log(age); // function age(){}
        var age = 99;
        console.log(age); // 99
        function age() {
        }

        console.log(age); // 99
    }
    t(5);
</script>
</body>
</html>

　　分析AO对象上变量age的值：

1.分析函数变量，函数外部定义了age这时候AO.age = undefined，
2.分析函数参数，如果AO上有值，则不做处理，没有，AO加上，AO.age=5；
3.函数声明表达式（函数内部中的函数），AO.age = function(){}
4.结合函数的执行过程打印第一个age的时候AO对象中最后的age是函数表达式，所以第一个age是函数表达式
5.第二次和第三次打印age的时候这个时候age变量已经被定义了一个值99，所以后面的两个都是99

三、jQuery的查找操作

　　DOM中的两种查找标签的方式

直接查找 xxx.getElementById ，xxx.getElementsByClass , xxx.getElemenetsByName xxx.ElemenetsByTags
间接查找。silbings children ........

　　jQuery中的查找（直接查找）

　　描述：不管是JavaScript操作页面还是jQuery中操作页面，最终目的都是需要得到自己想要的一些变化。大家都知道HTML文件是由需要HTML标签组成的。我们如果需要操作HTML或者说是操作某一个、某一些标签的时候，都离不开找到标签，然后对他们进行一些操作，而下面这些方法就是帮我们在HTML页面中找到我们所需要的一些HTML代码。（jQuery得到的HTML标签对象是列表形式）下面也写出了从jQuery对象转换成DOM对象或者是DOM对象转换成jQuery对象的一些方法。

　　　　Ps :jquery 和 DOM对象直接的转换

　　　　JQuery ---> DOM $("#test")[0] Jquery的对象是一个列表

　　　　DOM

id选择器 $()的意思是需要引用jquery的语法了；$("# + id名称")
class选择器 $(".class")
标签选择器 $("div")
组合选择器 $("div,p,span") 寻找div，p，span标签不通的选择器用逗号隔开
祖先 --- 子孙 $("form input") 找form标签下面的所有input标签、
父亲 --- 儿子 $("form > .hide") 找所有form标签第一层下面class属性是hide标签
$("ul:first") $("ul:last") $("ul:eq(3)") 第一个是获取第一个ul标签，第二个为获取最后一个ul标签，最后一个是获取指定的ul标签
属性选择器 $("input[type="password"]") 查找所有input标签，并且type是password

　　Ps：如果需要在$()中寻找多种类的HTML标签，请把他们用逗号（，）隔开

　　示例（jQuery版的全选和反选）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<input type="button" value="全选" οnclick="Allxuan();">
<input type="button" value="取消" οnclick="removexuan();">
<input type="button" value="反选" οnclick="reversexuan();">
<table style="border: solid 1px ;width: 400px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td><input type="checkbox" /></td>
    </tr>
</table>
<script>
    function Allxuan() {
        $('input[type="checkbox"]').prop("checked",true)
    }
    function removexuan() {
        $('input[type="checkbox"]').prop("checked",false)
    }
    function reversexuan() {
        $('input[type="checkbox"]').each(function () {
            var v = $(this).prop('checked');
            console.log(this);
            /*方式一
            if(v){
                $(this).prop('checked',false);
            }else {
                $(this).prop('checked',true);
            }*/
            v ? $(this).prop('checked',false):$(this).prop('checked',true);
        })
    }
</script>
</body>
</html>

　　jQuery中的间接查找（筛选）

　　描述：通过上面的一些jQuery“选择器”其实我们已经能完成很多工作了，但是如果我们一组input标签(这里我们假设有三个input标签我们的class属性值分别是Leon、CHEN、Tony)，而这个时候已经用选择器将class="Leon"的标签对象找到了，但是我们这个时候需要对他下面的其他input标签进行一个操作。这个时候我们就需要对他们在进行一个筛选了。

next("可选")：当前标签的下一个标签，双引号中的内容可选，如果填的话需要填写选择器
nextAll("可选")：当前标签下面的所有标签，双引号中的内容可选，如果填的话需要填写选择器
nextUtile("必写")：直到某一个选择器再停止下来，双引号中为目的标签
prev("可选")：当前标签的上一个标签，双引号中为可选，意思是上个什么标签
prevAll("可选")：当前标签上的所有标签，双引号中可选
prevUtile("必写")：从当前标签到哪里结束，双引号中为停止的条件
children()：获取所有的字标签，其中括号中也可以填写寻找的条件
parent():父级标签，里面同样可以传值，表示寻找哪一种父级标签
siblings()：获取兄弟标签，括号中为过滤的条件
更多详见http://jquery.cuishifeng.cn/

　　示例（jQuery版的左侧标签一）

　　某些公司中的左侧标签并不是点击其中的一个菜单从而，其他标签隐藏，而是这个菜单点击一次打开内容，再点击一次就关闭内容，而这种方式更加简单，只需要一句jquery语句，不过需要用到一些超前的内容。我相信你会看下去的，这些方法在博客的后面也会写到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .hide{
            display: none;
        }
        .item > .title{
            height: 40px;
            background-color: aqua;
            line-height: 40px;
        }
        .item .content a{
            display: block;
        }
    </style>
</head>
<body>
    <div class="left_meau" style="width: 150px;height: 800px;border: red solid 2px">
        <div class="item">
            <div class="title" οnclick="changeMeau(this);">菜单一</div>
            <!--this这里的意思是鼠标所点击的标签对象-->
            <div class="content">
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
            </div>
        </div>


        <div class="item">
            <div class="title" οnclick="changeMeau(this);">菜单二</div>
            <div class="content hide">
                <a href="#">内容二</a>
                <a href="#">内容二</a>
                <a href="#">内容二</a>
                <a href="#">内容二</a>
                <a href="#">内容二</a>
                <a href="#">内容二</a>
            </div>
        </div>

        <div class="item">
            <div class="title" οnclick="changeMeau(this);">菜单三</div>
            <div class="content hide">
                <a href="#">内容三</a>
                <a href="#">内容三</a>
                <a href="#">内容三</a>
                <a href="#">内容三</a>
                <a href="#">内容三</a>
                <a href="#">内容三</a>
            </div>
        </div>

    </div>
<script src="jquery-1.12.4.min.js"></script>
<script>
    function changeMeau(ele) {
        /**
         * hasClass("class_name"):判断这个标签中是否有这个class属性
         * removeClass("class_name"):移除一个标签的某一个class属性，这个属性是这个标签上面必须有的
         * addClass("class_name"):给一个标签添加一个Class属性，这个class属性事先的定义好
         * 下面这个句子用到了三元运算
         * **/
        $(ele).next('.content').hasClass('hide') ? $(ele).next('.content').removeClass('hide') :$(ele).next('.content').addClass('hide')
    }
</script>
</body>
</html>

　　示例（方式二）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .hide{
            display: none;
        }
        .item > .title{
            height: 40px;
            background-color: aqua;
            line-height: 40px;
        }
        .item .content a{
            display: block;
        }
    </style>
</head>
<body>
    <div class="left_meau" style="width: 150px;height: 800px;border: red solid 2px">
        <div class="item">
            <div class="title">菜单一</div>
            <!--this这里的意思是鼠标所点击的标签对象-->
            <div class="content">
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
            </div>
        </div>


        <div class="item">
            <div class="title">菜单二</div>
            <div class="content hide">
                <a href="#">内容二</a>
                <a href="#">内容二</a>
                <a href="#">内容二</a>
                <a href="#">内容二</a>
                <a href="#">内容二</a>
                <a href="#">内容二</a>
            </div>
        </div>

        <div class="item">
            <div class="title">菜单三</div>
            <div class="content hide">
                <a href="#">内容三</a>
                <a href="#">内容三</a>
                <a href="#">内容三</a>
                <a href="#">内容三</a>
                <a href="#">内容三</a>
                <a href="#">内容三</a>
            </div>
        </div>

    </div>
<script src="jquery-1.12.4.min.js"></script>
<script>
    /**
    function changeMeau(ele) {

         * hasClass("class_name"):判断这个标签中是否有这个class属性
         * removeClass("class_name"):移除一个标签的某一个class属性，这个属性是这个标签上面必须有的
         * addClass("class_name"):给一个标签添加一个Class属性，这个class属性事先的定义好
         * 下面这个句子用到了三元运算
         *
        $(ele).next('.content').hasClass('hide') ? $(ele).next('.content').removeClass('hide') :$(ele).next('.content').addClass('hide')

    }
    **/

    /**
     * 获取到class属性是title的标签，给他们绑定一个事件(chick)循环所有class==title的标签
     * $(this)当前点击标签
     * 获取到当前点击的标签然后将他下一个标签的hide属性给去掉
     * 找到当前标签的父亲标签的兄弟(也就是其他的item标签)class属性是content的孩子标签，然后将他们(得到的是其他两个内容)的class属性中加上hide
     * **/
    $(".title").click(function () {
        $(this).next('.content').removeClass('hide');
        $(this).parent('.item').siblings('.item').children('.content').addClass("hide");
    })
</script>
</body>
</html>

　　jQuery中的动画效果

show():将隐藏的标签显示，可以加参数，表示出现的时间；
hide()将显示的标签隐藏，可以加参数，表示出现的时间；
toggle():如果标签是隐藏的就显示，如果是显示的就隐藏，可以加参数，表示出现的时间；

　　示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="ju.jpg" alt="" style="display: none">
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $('img').toggle(1000);
    </script>
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="ju.jpg" alt="" style="display: none">
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $('img').show(2000);
    </script>
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="ju.jpg" alt="">
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $('img').hide(1000);
    </script>
</body>
</html>

fadeIn():和上面的show类似只不过效果不一样
fadeOut：和上面的hide()类似，效果不一样

　　样式操作

　　描述：样式操作是一个对标签来说很重要的一项工作，如果我们找到了我们想要找到的标签，但是我们却不能给加上一个样式，这种情况是很糟糕的。这就好比是有一个美女在你面前把衣服脱光了，但是你一时性起想玩一下SM，哈这时候你是不是必须要给她穿上一身皮衣了呢？

addClass():给标签添加一个样式
removeClass() ：给标签移除一个样式
hasClass()：判断这个标签是否有这个样式，值为布尔值
$("xxx").css()：个标签添加CSS样式，如果是一个值的话就是判断是否有这个样式

　　文本操作

　　描述：文本的操作主要的作用其实就是给我们已经找到的标签提供一种判断它里面值的方法，如果有我们pass，如果没有我们需要给它赋值的一个操作

$("xxx").text(); 取得所有匹配元素的内容
$("xxx").text("sdfsdfsd") :将标签中赋值
$("xxx").val(): 获取input标签中的值
$("xxx").val("sdfsdf") :设置input标签中的值

　　属性操作

　　描述：属性操作是一个非常非常非常重要的操作。重要的事情我需要说三遍。期主要的目的就是获取属性的值，通过这些值来拿来做一些匹配工作，完成自己想要的效果，或者是给自己匹配到的标签赋一个属性

$("xxx").attr("leon","shuai") //赋值
$("xxx").attr("leon") //获取属性值
$("xxx").removeAttr("xxx") //移除属性
$("xxx").prop() 　　 //专门用于input系列
在操作input系列框(redio CheckBox) 我们选中或者取消，不能采用attr来进行设置值

　　实例jQuery模态对话框（low版本）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .hide{
        display: none;
    }
    .show{
        display: block;
    }
    .shadow{
        position: fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        opacity:0.6;
        background-color: #000;
        z-index: 10;
    }
    .modal{
        position: fixed;
        top:10%;
        left:20%;
        right:20%;
        bottom:30%;
        background-color: wheat;
        z-index: 11;
    }

</style>
<body>
<input type="button" οnclick="addEle();" value="添加"/>
<table border="1" width="400px" id="info">
    <tr>
        <td target="ip">192.168.1.1</td>
        <td target="port">80</td>
        <td>
            <input type="button" value="编辑" class="edit"/>
        </td>
        <td>
            <input type="button" value="删除"/>
        </td>
    </tr>
    <tr>
        <td target="ip">192.168.1.2</td>
        <td target="port">81</td>
        <td>
            <input type="button" value="编辑" class="edit"/>
        </td>
        <td>
            <input type="button" value="删除"/>
        </td>
    </tr>

    <tr>
        <td target="ip">192.168.1.3</td>
        <td target="port">82</td>
        <td>
            <input type="button" value="编辑" class="edit"/>
        </td>
        <td>
            <input type="button" value="删除"/>
        </td>
    </tr>
</table>
<div class="modal hide">
    主机IP：<input type="text" value="" name="ip"/><p>
    端口号：<input type="text" value="" name="port"/><p>
    <input type="button" value="确认">
    <input type="button" value="取消" οnclick="cancelModel()">
</div>
<div class="shadow hide"></div>
</body>
<script src="jquery.js"></script>
<script>
    function addEle() {
        $('.hide').removeClass('hide');
    }
    function cancelModel() {
       $('.modal').addClass('hide');
       $('.shadow').addClass('hide');
    }
    //给所有class=edit的标签绑定一个事件，click对标签进行了一个遍历，导致点击任何一个edit标签都会执行这个函数
    $('.edit').click(function () {
        $('.hide').removeClass('hide');
        var list = $(this).parent().siblings('td'); //当前所点击标签的td（ip和端口）
        var ip = $(list[0]).text(); //获取当前当前点击的td标签中ip的值
        var port = $(list[1]).text(); //获取当前当前点击的td标签中port的值

        $("input[name='ip']").val(ip); //将模态对话框中的class=ip赋值
        $("input[name='port']").val(port); //将模态对话框中的class=port赋值
    })

</script>
</html>

　　对应关系模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .hide{
        display: none;
    }
    .show{
        display: block;
    }
    .shadow{
        position: fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        opacity:0.6;
        background-color: #000;
        z-index: 10;
    }
    .modal{
        position: fixed;
        top:10%;
        left:20%;
        right:20%;
        bottom:30%;
        background-color: wheat;
        z-index: 11;
    }

</style>
<body>
<input type="button" οnclick="addEle();" value="添加"/>
<table border="1" width="400px" id="info">
    <tr>
        <td target="ip">192.168.1.1</td>
        <td target="port">80</td>
        <td>
            <input type="button" value="编辑" class="edit"/>
        </td>
        <td>
            <input type="button" value="删除"/>
        </td>
    </tr>
    <tr>
        <td target="ip">192.168.1.2</td>
        <td target="port">81</td>
        <td>
            <input type="button" value="编辑" class="edit"/>
        </td>
        <td>
            <input type="button" value="删除"/>
        </td>
    </tr>

    <tr>
        <td target="ip">192.168.1.3</td>
        <td target="port">82</td>
        <td>
            <input type="button" value="编辑" class="edit"/>
        </td>
        <td>
            <input type="button" value="删除"/>
        </td>
    </tr>
</table>
<div class="modal hide">
    主机IP：<input type="text" value="" name="ip"/><p>
    端口号：<input type="text" value="" name="port"/><p>
    <input type="button" value="确认">
    <input type="button" value="取消" οnclick="cancelModel()">
</div>
<div class="shadow hide"></div>
</body>
<script src="jquery.js"></script>
<script>
    function addEle() {
        $('.hide').removeClass('hide');
    }
    function cancelModel() {
       $('.modal').addClass('hide');
       $('.shadow').addClass('hide');
    }
    //给所有class=edit的标签绑定一个事件，click对标签进行了一个遍历，导致点击任何一个edit标签都会执行这个函数
    $('.edit').click(function () {
        $('.hide').removeClass('hide');
        var list = $(this).parent().siblings('td'); //当前所点击标签的td（ip和端口）,此处可以优化
        list.each(function () {
            var k = $(this).attr('target');  //获取所有target标签上面的值，和后面的模态框中的name做对应关系
            var v = $(this).text(); //获取td标签的值
//            console.log(k + '-------' + v)
            var v1 = "input[name='"; //字符串的拼接
            var v2 = "']";
            var tmp = v1 + k + v2;
            $(tmp).val(v); //对应并赋值
        })
    })

</script>
</html>

高级版

　　购物菜单示例

　　这个示例用到的知识点在于，给需要操作的标签上面添加自定义的一些属性，包括用到attr来获取当前的标签的一些属性。难点就在于字符串的拼接，这个很容易让人迷糊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
 <style>
        .item{
            height:38px;
            line-height: 38px;
            background-color: #204982;
            width:300px;
        }
        .menu{
            float: left;
            border-right: 1px solid green;
            padding:0 10px;
            color:white;
            cursor: pointer;
        }

        .hide{
            display: none;
        }

        .active{
            background-color: #2459a2;
        }
    </style>
<body>
 <div style="width: 700px;margin: 0 auto;">
        <div class="item">
            <div class="menu active" a="1">菜单一</div>
            <div class="menu" a="2">菜单二</div>
            <div class="menu" a="3">菜单三</div>
        </div>

        <div class="content">
            <div class="info" b="1">内容一</div>
            <div class="info hide" b="2">内容二</div>
            <div class="info hide" b="3">内容三</div>
        </div>
 </div>
</body>
 <script src="jquery.js"></script>
<script>
    $('.menu').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        var v = $(this).attr('a');  // a=1 a=2 a=3
        /**
         * 这里的唯一难点就是字符串的拼接("[b='"+ v + "']")
         * **/
        $(this).parent('.item').next('.content').children("[b='"+ v + "']").removeClass('hide').siblings().addClass('hide');
        console.log(v)
    })
</script>
</html>

购物车菜单切换

　　文本操作

　　描述：文本操作用来给我们找到的标签前面、后面、上面、下面添加一个文本（HTML代码）

append() ---往选中的元素内部的后面添加元素
appendTo()
prepend() --- 往选中的元素的前面添加元素
prependTo()
after --- 往选中元素的外部得后面进行添加
before --- 往选中元素的外部得前面进行添加
empty() --- 将元素内部的内容删除
remove() ---将元素的标签删除

　　应用实例（菜单的左右移动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        select{
            width:150px;
            height:300px;
        }
    </style>
</head>
<body>
<select name="fruit" id="fruit" multiple></select>
<input type="button" value="<---" οnclick="toleft();">
<input type="button" value="<===" οnclick="totalleft();">
<input type="button" value="--->" οnclick="toright();">
<input type="button" value="===>" οnclick="totalright();">
<select name="fish" id="fish" multiple>
    <option value="">大鱼</option>
    <option value="">小鱼</option>
    <option value="">虾米</option>
    <option value="">甲鱼</option>
    <option value="">咸鱼</option>
    <option value="">苹果</option>
    <option value="">香蕉</option>
    <option value="">菠萝</option>
    <option value="">西瓜</option>
</select>

<script src="jquery.js"></script>
<script>
    function toleft() {
        $("#fish option:selected").appendTo("#fruit")
    }
    function totalleft() {
        $("#fish option").appendTo("#fruit");
    }
    function toright() {
        $("#fruit option:selected").appendTo("#fish");
    }
    function totalright() {
        $("#fruit option").appendTo("#fish");
    }
</script>

</body>

</html>

　　事件相关：

　　描述：事件操作是jQuery和DOM中必须的。实际上我们到知道标签的目的就是要给它们做一些操作，而这个时候我们就需要事件模块了。

click：当元素被点击的时候触发
dbclick：当元素被双击的时候触发
blur：当元素失去焦点的时候触发
focus：当元素获取焦点的时候被触发
mouseover：当鼠标指针位于元素上方，方法被触发
mouseout：当鼠标从元素上面移走的时候，方法被触发
keyup：当按钮被松开的时候，keyup时间被执行，它发生在当前获得焦点的元素上
keydown：当键盘或按钮被按下的时候，keydown被执行
$("xxx").on(events,function) ：给找到的标签绑定一个事件，events是事件，function是自己绑定执行的函数
$("xxx").off(events,function)：给找到的标签移除一个事件，events是事件，function是自己绑定执行的函数

　　阻止事件：

　　描述：阻止事件的一个比较好的示例是登陆后台的一个动作。登陆后台需要用户名和密码的填写，如果我们有一项没有填写，form表单就不应该向后台提交，这个时候我们就需要阻止它向后台提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://www.baidu.com" method="get">
        用户名：<input type="text"  msg="用户名"/> <br/>
        密码：<input type="password" msg="密码" /> <br>
        电话号码：<input type="text" msg="电话号码" /> <br/>
        家庭住址：<input type="text" msg="家庭住址" /> <br/>
        <input type="submit" value="提交">

    </form>
</body>
<script src="jquery-1.12.4.min.js"></script>
<script>
    $("input[type='submit']").click(function () {
        /**
         * 首先我们需要获取每一个input框中的值是否为空
         * 我们需要让最外层知道循环知道return的值
         * 在外面定义一个公共的变量，在函数的最外部返回这个变量，让程序知道
         * 循环input表从而循环得到每一个val的值，然后判断是否有值，如果其中一个没有flag就会为false，表格不会被提交
         *
         * 程序到这里主要功能已经完成，但是为了更加人性化，我们需要把没有填值的框中提示出来
         * 可以看见我给程序的所有input标签中加了一个特殊的msg标签，他们的值使我们区别哪一个没有填写，从而需要显示的
         * 下一步就是我们需要给没有填写的字段加一些HTML代码，也就是在判断中添加
         * **/
        var flag = true;
        $("input[type='text'],input[type='password']").each(function () {
            var v = $(this).val(); // 获取到每个input框中的数据
            console.log("input表格中的数据" + v);
           if(v.length == 0){
               var msg = $(this).attr("msg");
               $(this).after("<span style='color: red;'>"+ msg + "必填</span>");
               flag = false;
           }
        });
        return flag;
    })
</script>
</html>

登陆动作编写

转载于:https://www.cnblogs.com/yanlinux/p/8920725.html

agkbhh3631

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作页面-day13

一、JavaScript变量的作用域　　PS：变量的作用域是在声明的时候决定的而不是在执行的时候决定的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title><...
复制链接

扫一扫