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的基础及简单使用。

Hybrid App开发之jQuery基础的更多相关文章

Hybrid App开发之jQuery选择器
前言: 前面学习了JQuery的简单使用,今天进一步学习一下JQuery的选择器. 什么是选择器? JQuery选择器通过标签名.属性名或者内容对DOM元素进行快速准确的选择,而不必担心浏览器的兼容性 ...
Hybrid App开发之JavaScript基础
前言: 前面学习了html和css的基本使用,今天开始学习JavaScript的使用. 什么是JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Drive ...
Hybrid App开发之jQuery操作DOM
前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...
Hybrid App开发之css样式使用
前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...
Hybrid App开发之Html基本标签使用
前言: 前面简单学习了html简单标签的使用,今天学习一下其他的标签的使用. HTML的超链接 1.)创建一个超链接 <div> <p> <a href="ht ...
iOS 开发之 GCD 基础
header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...
ios开发之OC基础-类和对象
本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...
ios开发之OC基础-oc小程序
本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...
ios开发之OC基础-ios开发学习路线图
本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...

随机推荐

统计学习方法：核函数（Kernel function）
作者:桂. 时间:2017-04-26 12:17:42 链接:http://www.cnblogs.com/xingshansi/p/6767980.html 前言之前分析的感知机.主成分分析( ...
[KISSY5系列]KISSY5安装使用(二)
上篇文章,我们遗留的一个问题就是,请求数量有点多,虽然现在的浏览器的请求资源都是并发的.但是我们还是尽量减少请求量. 但是KISSY里面这个问题我们怎么解决呢,其实还是从data-config=&qu ...
实用收藏Linux命令备忘
系统操作 #使用shutdown命令马上重启系统[root@H32 ~]# shutdown –r now #使用shutdown命令马上关闭系统[root@H32 ~]# shutdown –h n ...
读入一个自然数n，计算其各位数字之和，用汉语拼音写出和的每一位数字。输入格式：每个测试输入包含1个测试用例，即给出自然数n的值。这里保证n小于10的100次幂。输出格式：在一行内输出n的各位数字之和的每一位，拼音数字间有1 空格，但一行中最后一个拼音数字后没有空格。输入样例： 1234567890987654321123456789 输出样例： yi san wu
这是PAT中的一道练习题刚开始的时候我想着直接定义正整数n,结果走了很大的弯路,因为题目中要求n小于10的100次幂,即最大的正整数n有100位,而C语言中整型数字最大占8个字节的存储空间,如果按无 ...
css定位浮动伪类 margin
一,margin .标准文档流,margin在竖直方向的不叠加,以较大的为准 .使用margin: auto;的盒子必须有明确的width,并且只有标准文档流的盒子才能使用margin: auto; ...
前端 tips
1.==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快. 2.首次为变量赋值时务必使用var关键字,变量没有声明而直接赋值 ...
hdu2089 不要62 我的第一个数位DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 数位DP的入门题,我是根据kuangbin的博客写出来的思路: dp[i][0],表示长度为i ...
解决ssh或ftp下root用户认证失败问题
问题:当连接ssh远程终端或使用ftp方式进行文件传输时,使用普通用户可以进行远程登录,但使用root用户则认证失败,提示密码错误.而我们在普通用户登录下,su - root,验证密码,是可以正常切换 ...
jQuery插件ImgAreaSelect 实例讲解二
在上一篇随笔http://www.cnblogs.com/chenguanai/p/6883401.html中,已经了解了头像的上传预览和裁剪功能:那么这次就再看一下imgareaselect的裁剪功 ...