您的位置: 首页  >  文章  >  Web前端开发学习之路——认识JQuery与JQuery Mobile

Web前端开发学习之路——认识JQuery与JQuery Mobile

分类: 文章 • 2023-03-07 15:43:40

认识JavaScript

在HRML中使用JavaScript的语法很简单，只要用<script>标签嵌入JavaScript的程序代码就可以了，基本结构如下：

<script type="text/javascript">
<!--
:
:
-->
</script>

JavaScript程序代码的位置可以放在HTML的<head></head>标记中，也可以放在<body></body>标记中

下面看一个范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
<!--
    alert("欢迎光临");
    //-->
</script>
</head>
<body>
<h3>JavaScript好简单</h3>
</body>
</html>

执行结果如下，当用户进入网页时，就会弹出“欢迎光临”对话框：

Web前端开发学习之路——认识JQuery与JQuery MobileWeb前端开发学习之路——认识JQuery与JQuery Mobile

若将JavaScript程序代码放在<body></body>标记中，会发现先加载<h3></h3>的内容再加载对话框。

JavaScript是基于对象（Object-Based）的语言，其对于对象的处理属于阶梯式的架构，这个阶梯以window为顶层，window内还包含许多其他的对象，如框架（frame）、文档（document）等，文档中还可能有图片（image）、表单（form）、按钮（button）等对象。只要通过id、name属性或forms[]、images[]等对象集合就能获取对象，并使用各自的属性。

例如，我们想要利用JavaScript在网页文件中显示“欢迎光临”字样，网页文件本身对象是document，它是window的下层，所以就可以表示如下：

window.document.write("欢迎光临")
/*因为JavaScript程序代码与对象在同一页，所以window可以省略不屑，因此我们经常看到的表示法如下：*/
document.write("欢迎光临")

属性(Property)的表示方法如下：

document.bgColor="yellow"

函数

简单的说，函数就是程序设计师编写的一段程序代码，可以被不同的对象、事件重复调用。使用函数最重要是必须知道定义函数的方法与输入自变量，以及返回何种结果。

函数的操作有两个步骤：定义函数；调用函数；

/*定义函数的方法如下：*/
function 函数名（输入自变量）
{
    JavaScript语句
    ...
    ...
    return (返回值)  //有返回值时才需要
}

/*函数编写完成之后，我们就可以调用函数并根据情况来输入自变量，其方法如下*/
<input type="button" value="调用函数" onclick="函数名称();">

上面时以事件(Event)来调用函数，当事件发生时，函数就会被调用并运行了，onclick是“单击”事件，所以上面代码的意思是当用户单击按钮时就调用函数，下面请看一个范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        <!--
          function sum(a,b) {
              c = a+b;
              alert("a="+a+","+"b="+b+","+"a+b="+c);//alert对象的功能时弹出信息框来显示括号内的内容
          }
            -->
    </script>
</head>
<body>
请点击下面链接：<p>
<h1>
    <a href="#" onclick="sum(3,5)">a+b</a>
</h1>
</body>
</html>

执行结果如图：

Web前端开发学习之路——认识JQuery与JQuery MobileWeb前端开发学习之路——认识JQuery与JQuery Mobile

JavaScript常用的事件处理过程
事件处理过程 含义
onClick 鼠标单击对象时
onMouseOver 鼠标经过对象时
onMouseOut 鼠标离开对象时
onLoad 网页载入时
onUnload 离开网页时
onError 加载发送错误时
onAbort 加载停止图像时
onFocus 窗口或表单组件取得焦点时
onBlur 窗口或表单组件失去焦点时
onSelect 选择表单组件内容时
onChange 改变字段的数据时
onReset 重置表单时
onSubmir 提交表单时

当网页程序代码较多的时候，想要处理表单组件，不仅要为每个组件加入事件控制，又要回到Script编写事件函数，文件的上下滚动就很麻烦，这时就可以使用addEventListener()函数注册事件的处理函数，例如要在点击名为btn的按钮时调用sum()函数，可以这样表示：

btn.addEventListener("click",sum);

如果要在多个按钮上调用函数，只需多加几行addEventListener()函数即可，不需要再返回按钮上添加触发事件，更加省事。

addEventListener可以在网页加载时就执行，只要将函数制定在window的Onload事件中触发即可，语法如下：

<script type="text/javascript">
    window.onload = function()
        {
        //当点击按钮时就会调用sum函数
        btn.addEventListener("click",num)
        }
        function sum(){
            //sum函数执行的语句
    
        }
</script>
<button id="btn">计算</button>  <!--按钮就不需要加onclick事件-->

认识JQuery

jQuery是一套开放原始代码的JavaScript函数库(Library)，可以说是目前最受欢迎的JS函数库，最让人津津乐道的就是它简化了DOM文件的操作，让我们轻松选择对象，并以简洁的程序完成想做的事情。除此之外，还可以通过jQuery指定CSS属性值，达到想要的特效与动画效果，另外，jQuery还强化异步传输（AJAX）以及事件（Event）功能，轻松访问远程数据。网络上有很多开放原始代码的jQuery插件，学会jQuery之后，用户能够方便地应用到自己的网站上来，接下来就学习如何使用jQeury。

下载JQuery

百度搜素JQuery，第一个进入官网点击下载

Web前端开发学习之路——认识JQuery与JQuery Mobile

接着将JS文件加入到HTML的<head>标记之间，代码如下：

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

//src="你存放jquert的文件路径"

jQuery基本架构

jQeury(document).ready(function(){
    //程序代码
});

//上述jQuery程序代码由“jQuery”开始，也可以用“$”代替，如下所示。
$(document).ready(function(){
    //程序代码
});

jQuery基本语法

// $(选择器).操作()

$("p").hide();

jQuery选择器

jQeury选择器用来选择HTML组件，我们可以通过HTML标记名称、id属性以及class属性来取得组件

/*标记名称选择器*/
/*标记名称选择器顾名思义是直接使用HTML标记，例如想要选择所有的<p>组件，可以写成：*/
$("p")

/*id选择器*/
/*id选择器通过组件的id属性来获取组件，只要在id属性前加上“#”号即可，例如想要选择id属性为test的组件，可以写成：*/
$("#test")

/*class选择器*/
/*class选择器通过组件的class属性来取得组件，只要在class属性前加上“.”号即可，例如想要选择class属性为test的组件，可以写成：*/
$(".test")

/*我们还可以组合使用上述3种选择器，例如想要找出所有<p>标记class属性为test的组件，可以写成：*/
$("p.test")
常用的选择和搜索法
表示法 说明
$("*") 选择所有组件
$(this) 选择目前作用种的组件
$("p.first") 选择第一个<p>组件
$("[href]") 选择含有href属性的组件
$("tr.even") 选择偶数<tr>组件
$("tr.odd") 选择奇数<tr>组件
$("div.p") 选择<div>组件中包含<p>的组件
$("div").find("p") 搜索<div>组件中的<p>组件
$("div").next("p") 搜索<div>组件之后的第一个<p>组件
$('li').eq(2) 搜索第3个<i>组件的eq()种是输入组件的位置，只能输入整数，最小为0

设置CSS样式属性

学会选择器的用法之后，除了可以操控HTML组件之外，还可以使用css()方法来改变CSS样式。例如，指定<div>组件的背景色为红色，代码如下：

$("div").css("background-color","red");

下面给大家看一个范例，来简述jQuery用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('li').eq(2).css("background-color","red");
        })
    </script>
</head>
<body>
<ul>
    <li>跑步</li>
    <li>游泳</li>
    <li>篮球</li>
    <li>足球</li>
    <li>排球</li>
</ul>
</body>
</html>

执行结果如下，结合代码理解便可知一二：

Web前端开发学习之路——认识JQuery与JQuery Mobile

跨平台移动设备网页jQuery Mobile

随着移动设备的普及，仅在电脑上浏览网页已经不够，越来越多的人想学习移动设备的网页设计开发，但是在浏览器才只有几种的情况下，就寂静遇到跨浏览器支持的问题。移动设备品牌这么多，仅使用Apple iOS 和Android系统就有多种不同规格尺寸的手持设备，更何况还有其他平板设备，不可能为每种尺寸都做一个界面，那样做太费事了。为了解决这个问题，jQuery退出了新的函数库jQuery Mobile，目的是希望统一当前移动设备的用户界面（UI）。接下来就来认识jQuery Mobile。

jQuery Mobile的优点

  • 跨平台
  • 容易学习
  • 提高多种函数库
  • 多样的布景主题和ThemeRoller工具

jQuery Mobile操作流程

jQuery Mobile的操作流程与庇阿涅HTML文件相似，大致有下面几个步骤：

  1. 新增HTML文件
  2. 声明HRML5 Document
  3. 载入jQuery Mobile CSS、jQuery与jQuery Mobile链接库
  4. 使用jQuery Mobile Mobile定义的HTML标准，编写网页架构及内容

第一个jQuery Mobile网页

要开发jQuery Mobile网页，必须要引用JavaScript函数库(.js)、CSS样式表(.css)和配套jQuery函数库文件。引用方式有两种，一种是到jQuery Mobile官网上下载文件进行引用，另一种是直接通过URL连接到jQuery Mobile的CDN-hosted引用，不需要下载文件。

本次使用URL链接CDN-hosted方式进行引用，网址如下：

http://jquerymobile.com/download/

找到如下代码复制到<head></head>区块内：

Web前端开发学习之路——认识JQuery与JQuery Mobile

接下来我们就可以在<body></body>标记区域内开始添加程序代码了。

jQuery Mobile网页是由header、content与footer3个区域组成的架构，利用<div>标记加上HTML5自定义属性（HTML5 Custom Data Attributes）data-*来定义移动设备网页组件样式，最基本的属性data-role可以用来定义移动设备的网页架构，语法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Mobile创建的第一个网页</title>
    <!--引用jQuery Mobile函数库-->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
<div data-role="page">      <!---->
    <div data-role="header">
        标题（header）
    </div>
    <div data-role="content">
        网页内容（content）
    </div>
    <div data-role="footer">
        页脚（footer）
    </div>

</div>
</body>
</html>

Opera Mobile使用方法如下：

Web前端开发学习之路——认识JQuery与JQuery Mobile

这样我们就调试好了，接下来看一个上下页切换的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Mobile创建的第一个网页</title>
    <!--引用jQuery Mobile函数库-->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style type="text/css">
        #content{text-align: center;}
    </style>
</head>
<body>
<div data-role="page">      <!---->
    <div data-role="header">
        标题（header）
    </div>
    <div data-role="content">
        网页内容（content）
    </div>
    <div data-role="footer">
        页脚（footer）
    </div>

</div>
</body>
</html>

执行结果如下：

Web前端开发学习之路——认识JQuery与JQuery MobileWeb前端开发学习之路——认识JQuery与JQuery Mobile

这样我们就可以顺利地在两个页面之间进行切换。

但如果实际执行这个范例，会发现页面上的画面与文字显得非常小，这是因为移动设备的分辨率比较小，然而大多数浏览器会默认会议普通的网页宽度显示，这样网页内的画面都会变得很小而不易查看。

为了解决这个问题，苹果公司（Apple）首先在Safari种使用了viewport这个meta标记，目的是为了告诉浏览器移动设备的宽度和宽度，页面画面与字体比例看起来就会比较何使。用户可以通过平移(Scroll)和缩放(Zoom)来浏览整个页面，目前大部分浏览器都支持这个协议。

只需在<head></head>标记之间加上下面这一行代码就会调整适应的宽度

Viewport meta如下：

<meta name="viewport" content="width=device-width",intial-scale=1">
  • width:控制宽度，可以指定一个宽度值，或输入device-widtj，表示宽度随着设备宽度自动调整
  • height:控制高度，或输入device-height
  • initia-scale:初始缩放比例，最小为0.25，最大为5
  • minimum-scale:允许用户缩放的最小比例，最小为0.25，最大为5
  • maximum-scale:允许用户缩放的最大比例，最小为0.25，最大为5
  • user-scalable:是否允许用户手动缩放，可以输入0或1，也可以输入yes或no

执行结果如下：

Web前端开发学习之路——认识JQuery与JQuery Mobile

如果没有安装模拟器，利用Google Chrome浏览器打开网页，在调整浏览器的大小，同样可以达到模拟器的效果。

相关推荐