Hybrid App开发之jQuery基础

前言：

前面学习了JavaScript/Html/Css的基础知识，今天学习一下常用js框架jQuery的使用进行快速的开发。

JQuery的基本功能：

方位和操作DOM元素
控制页面样式
对页面事件的处理
大量插件在页面中的运用
与ajax技术的完美结合

首先先编写一个jquery程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert("欢迎来到Jquery编程世界");
        });
        //等价于传统凡事
        window.onload=function () {
            alert("欢迎来到Jquery编程世界");
        };
        //等价于
        $(function () {
            alert("欢迎来到Jquery编程世界");
        });
    </script>
</head>
<body>
</body>
</html>

在网页加载完毕是会弹出对话框提示。

通过上面额示例，可以看出JQuery的代码风格

使用$符号
事件操作采用链式调用

JQuery的简单应用

1、）JQuery访问DOM对象

先看下什么是DOM对象

DOM（Document Object Model即文本对象模型），每个页面就是一个DOM对象，通过传统的JavaScript的访问页面中的元素，就是访问DOM对象。

在了解一下什么是jQuery对象？

在JQuery库中通过本身自带的方法获取页面元素的对象，这些对象我们称之为JQuery对象。

举例对比一下两者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            //传统的JavaScript方式
            var firstDiv=document.getElementById("first_div");
            var secondDiv=document.getElementById("second_div");
            secondDiv.innerHTML=firstDiv.innerHTML;
            //JQuery方式
            firstDiv=$("#first_div");
            secondDiv=$("#innerHTML");
            secondDiv.html(firstDiv.html());
        });
    </script>
</head>
<body>

<div id="first_div">
    <p>
        这是第一行
    </p>
</div>
<div id="second_div">
    <p>
    </p>
</div>
</body>
</html>

2、）JQuery控制DOM对象

写一个简单的小例子说明一下，比如我们写一个网页用户输入姓名，年龄，性别然后提交，将信息显示在一个div中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写用户信息</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        //jquery写法
        $(function () {
            $("#submitUserData").click(function () {
                var name=$("#userName").val();
                var age=$("#userAge").val();
                var sex=$("#male").is(":checked") ?'男':'女';
                var isMarried=$("#isMarried").is(":checked")?"已婚":"未婚";
                var userInfoData=
                    "<p>姓名："+name+"<br>"
                    +"年龄："+age+"<br>"
                    +"性别："+sex+"<br>"
                    +"婚否："+isMarried+"<br></p>";
               var userInfoDiv= $("#userInfoDiv");
                userInfoDiv.html(userInfoData);
            });
        });
        //传统写法
        function submitUserData() {
            var name=document.getElementById("userName").value;
            var age=document.getElementById("userAge").value;
            var sex=document.getElementById("male").checked ?'男':'女';
            var isMarried=document.getElementById("isMarried").checked?"已婚":"未婚";
            var userInfoData=
                "<p>姓名："+name+"<br>"
                +"年龄："+age+"<br>"
                +"性别："+sex+"<br>"
                +"婚否："+isMarried+"<br></p>";
            var userInfoDiv= document.getElementById("userInfoDiv");
            userInfoDiv.innerHTML=userInfoData;
        }

    </script>
</head>
<body>

<div>
    <h3>请输入以下信息</h3>
        输入姓名：<input type="text" name="userName" id="userName"><br>
        输入年龄：<input type="number" name="userAge" id="userAge"><br>
        选择性别：<input type="radio" name="sex" id="male" checked> 男 <input type="radio" name="sex" id="female">女<br>
        是否已婚：<input type="checkbox" name="isMarried" id="isMarried"><br>
        <input type="submit" id="submitUserData" onclick="submitUserData()">
</div>

<div id="userInfoDiv">
</div>
</body>
</html>

3、）JQuery控制CSS样式

和上面一样，直接写个小例子，看下如何控制css样式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery控制css样式</title>
    <style type="text/css">
        .normal{
            color: black;
            width: 150px;
            height: 30px;
            padding: 5px;
        }
        .clicked{
            color: blue;
            width: 150px;
            height: 30px;
            padding: 5px;
        }

    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">

        //JQuery写法
        $(function () {
           $("#changeCssBtn").click(function () {
               $(this).toggleClass("clicked")
           });
        });
        //传统写法
        function changeCssBtnClick() {
           var className= document.getElementById("changeCssBtn").className;
           if(className=="clicked"){
               document.getElementById("changeCssBtn").className="normal";
           }else{
               document.getElementById("changeCssBtn").className="clicked";
           }
        }

    </script>
</head>
<body>

<div >
    <button id="changeCssBtn" class="normal" onclick="changeCssBtnClick()">点击修改css样式</button>
</div>

</body>
</html>

总结：

今天简单学习一下JQuery的基础及简单使用。

posted on 2017-06-13 07:38 总李写代码阅读(464) 评论(0) 编辑收藏举报