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语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...

随机推荐

std::thread使用
本文将从以下三个部分介绍C++11标准中的thread类,本文主要内容为: 启动新线程等待线程与分离线程线程唯一标识符 1.启动线程线程再std::threada对象创建时启动.最简单的情况下, ...
java集合的核心知识
1. 集合 1.1. 什么是集合存储对象的容器,面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,存储对象,集合是存储对象最常用的一种方式. 集合的出现就是为了持有对象. ...
add,update,list.jsp源码
add:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncod ...
C++学习 cout的格式化输出
cout的格式化输出 1.常用: ①double 输出到小数点后n位:(保留精度 n位) #include <iostream> #include <iomanip> usin ...
eclipse--java工程转web工程以及 java或java web工程转maven工程
1. 打开工程文件夹,编辑工程的.project文件. 在<natures></natures>中加入 <nature>org.eclipse.wst.commo ...
Android 安卓实现页面相互跳转并相互传递参数
一.对于两个页面之间相互传值,跳转的时候我们使用 startActivityForResult(intent,0),而不是startActivity(intent) 这个方法第一个页面中在触发跳转的 ...
Linux中安装redis
第一部分:安装redis 1.希望将安装包下载到此目录 /home/local/src 安装过程指令 $ mkdir /home/local/redis $ cd /home/local/src ...
使用crontab，让linux定时执行shell脚本
阅读目录 1. cron服务[Ubuntu环境] 2. crontab用法 3. 编辑crontab文件 4. 流程举例 5. 几个例子 Linux中,周期执行的任务一般由cron这个守护进程来处理. ...
OAuth及第三方登录
现在的生活中运用互联网的有好多地方,我们既要申请微博,申请博客,申请邮箱等等:哪怕登录一个小网址看点东西都要注册登录,不过现在好多了:有了第三方登录,再也不用担心这不够用的脑子整天记忆账号和密码了,只 ...
Lists, Maps and Sets in Java
ArrayList vs LinkedList vs Vector From the hierarchy diagram, they all implement List interface. The ...