前端知识---基础(一)

一,下载资源

下载jquery,点击Latest stable下载,解压
下载地址

(一)名词解释:

1,doctype 文档类型(document type)

2,div和span标签都是用来帮助页面进行排版的，它们两个没有自己的语意。

2.1,div：块级元素，所谓的块级元素，就是可以通过css设置宽高等一些大小的样式，这样的元素标签称为块级元素。块级元素的特点是自己占一整行。如果再写其它标签，那么其它标签会显示在它的下面。

div的宽度默认是整个浏览器的宽度，这个宽度是从body标签继承过来的。

2.2,span：行内元素，不能通过css设置具体的宽高等样式的标签元素称为行内元素。行内元素的特点是标签内的内容是多大它就是多大，而且不会占一整行。

3,jquery.mobile-1.4.5.css和jquery.mobile-1.4.5.min.css

二者功能一致

3.1,jquery.mobile-1.4.5.css可以观看源码,修改源码,一般开发用这个

3.2,jquery.mobile-1.4.5.min.css 无法观看源码,好的都是匿名的.一般上线用这个

二,代码编写

相关属性

官方文档:

https://api.jquerymobile.com/data-attribute/

1,“data-role”属性是HTML 5的一个新特征，通过设置该属性，jQuery Mobile就可以很快地定位到指定的元素，并对内容进行相应的处理。

page,表示一个页面,header表示头部,footer表示底部

<<div data-role = "page">

2,data-theme=”b”表示页面的主题背景

3,data-position=”fixed”jquery mobile里面的,固定在头部或者底部

4,data-rel=”back” 返回上一个页面

data-rel = “dialog” 表示进入的页面时dialog

5,data-transition=”flip” 页面跳转效果,进入退出某个页面

6,点击按钮,跳转到下一个页面

<a href="#second" data-role = "button" data-transition = "flip">跳转到第二个页面</a>

7,点击返回箭头,返回上一个页面

解释:h5内部页面跳转

在jQuery Mobile中，针对一个页面中多个“page”区域间的切换称为内链接，其方式为添加一个<a>元素，并将该元素的“href”属性值设置为“#”加对应“Id”形式，如下所示： page2是第二个页面的id

•<a href="#page2">详细页</a>

8,具体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css"/>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
<body>

      <!--1,首页-->
        <div data-role = "page" id="first">
            
            <div data-role = "header">
                <h3>首页</h3>
            </div>
            <div data-role = "content">
                <p>具体内容</p>
                <a href="#second"  data-role = "button" data-transition = "slide">跳转到第二个页面</a>
                <a href="#dialog_id" data-role = "button">dialog</a>
            </div>
            <div data-role="footer" data-position = "fixed">
                <div >
                    <h3>底部</h3>
                </div>
            </div>     
        </div>
     
        
        <!--2,第二个页面-->
        <div data-role = "page" id="second" data-theme = "b">
            <div data-role = "header">
                <a href="#" data-rel = "back" data-icon = "back">返回</a>
                <h1>第二个页面</h1>
            </div>
            
            <div data-role = "content">
                <input type="text" placeholder="请输入金额" />
                <button>确定</button>
            </div
            
            <div data-role = "footer" data-position = "fixed">
                <h1>第二个页面底部</h1>
            </div>
        </div>
      </body> 
</html>

前端知识---基础(一)

猜你喜欢