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

最新推荐文章于 2024-08-17 11:31:53 发布

宇直豪

最新推荐文章于 2024-08-17 11:31:53 发布

阅读量1.3k

点赞数

分类专栏：前端开发文章标签：前端开发

本文链接：https://blog.csdn.net/CSDN_XUWENHAO/article/details/88659083

版权

前端开发专栏收录该内容

15 篇文章 1 订阅

订阅专栏

认识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>

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

若将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>

执行结果如图：

**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，第一个进入官网点击下载

接着将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>

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

跨平台移动设备网页jQuery Mobile

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

jQuery Mobile的优点

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

jQuery Mobile操作流程

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

新增HTML文件
声明HRML5 Document
载入jQuery Mobile CSS、jQuery与jQuery Mobile链接库
使用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>区块内：

接下来我们就可以在<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使用方法如下：

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

<!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>

执行结果如下：

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

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

为了解决这个问题，苹果公司（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

执行结果如下：

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

宇直豪

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录