面包屑導航介紹
一般的內容型網站，例如CMS都會有這種面包屑導航?？偨Y起來它有以下優勢：
讓用戶了解目前所在的位置，以及當前頁面在整個網站中所在的位置；
體現了網站的架構層級；提高了用戶體驗；
減少返回到上一級頁面的操作；
實現效果
那我們應該如何實現？我看網上多數都是只提供靜態實現，
這里我結合bootstrap 和 spring boot以及mysql來做一個完整的例子。
表結構設計
圖里面的菜單其實是分級維護上下級關系的。我這里用到了2級，表里有level字段標記。
點擊第1級加載第2級分類，點擊第2級分類名稱則展示面包屑導航。
CREATE TABLE tb_category (
id bigint(20) NOT NULL AUTO_INCREMENT,
category_name varchar(100) NOT NULL,
parent_id bigint(20) DEFAULT NULL,
level tinyint(1) DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;
insert into tb_category values(1,'Java文檔',0,1);
insert into tb_category values(2,'Java多線程',1,2);
insert into tb_category values(3,'Spring Boot',1,2);
insert into tb_category values(4,'微服務實戰',1,2);
insert into tb_category values(5,'Java視頻',0,1);
insert into tb_category values(6,'Java基礎',5,2);
insert into tb_category values(7,'Java基礎',1,2);
commit;
前端代碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec=";
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>響應式布局</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">
<div class="container-fluid">
<!--頁頭-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" th:href="@{'/breadCrumb'}">Java分享</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="navbar">
</ul>
</div>
</div>
</nav>
<!--面包屑-->
<ol class="breadcrumb">
</ol>
<div class="list-group" id="submenu-list">
</div>
</div>
<script src=";
<script src=";
<script>
var ctx=$("#ctx").val();
$(function () {
// 獲取一級菜單
getMenu(null,1);
});
function getMenu(id, level){
var json = {parentId:id,level:level};
$.ajax({
url: ctx+"/myCategory/list",
type: "POST",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(json),
success: function (result) {
var text='';
if (result.success) {
if(result.data != null){
// 一級菜單
if(level!=null){
$.each(result.data, function (i, r) {
text += '<li><a href="#" οnclick="getMenu('+r.id+')">'+r.categoryName+'</a></li>'
});
$("#navbar").empty();
$("#navbar").append(text);
}
// 子菜單
if(id!=null){
$.each(result.data, function (i, r) {
console.log(i);
text += '<a href="#" class="list-group-item" οnclick="getBreadCrumb('+r.id+')">'+r.categoryName+'</a>'
});
$("#submenu-list").empty();
$("#submenu-list").append(text);
}
}
} else {
alert(result.message);
}
}
});
}
// 生成面包屑導航
function getBreadCrumb(id) {
var param = {id:id};
$.ajax({
url: ctx+"/myCategory/getParentList",
type: "GET",
data: {"id":id},
success: function (result) {
var text='';
if(result.data!=null){
text = '<li><a href="#">首頁</a></li>';
$.each(result.data, function (i, r) {
text += '<li><a href="#">'+r.categoryName+'</a></li>'
});
$(".breadcrumb").empty();
$(".breadcrumb").append(text);
}
}
})
}
</script>
</body>
</html>
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
隨著公司項目多端化，開發所需要注意的細節越來越多。我在會議上提出組件化開發，希望能把業務細節與技術細節區分開來。
一、組件化流程
首先我們需要找到切入點，我采取的是通過模仿element-ui的組件，先讓我們美工小姐姐，照著element的組件庫描繪一版我們自己的組件，內容包括 顏色、字體、按鈕、圖片 等基礎UI組件。這就是我們組件化第一步，UI 組件形成。
其次是業務組件的補充，這方面我和項目經理還有其他前端一起商討，將跨場景跨頁面同樣效果的部分給抽象成組件。組件化第二步，業務組件形成。
然后就是漫長的更迭與組件補充。
二、組件化細節處理
2.1 全局文件布置
無論是UI組件還是業務組件，都包含著class與css。
變量值我選擇存放在兩個公共文件內：
一個負責管理class名，諸如 x-btn-s，x-btn-m，x-btn-l，x-pic-s，聲明規則：公司名-組件名-尺寸（業務場景）。
另一個負責管理 css 變量值， 諸如 $-font-s： 12px，$-font-m：16px； $-font-l：24px；$-background-warn: #f00；聲明規則：$-相關樣式-大?。伾?br />
再通過 exports 與 import 對全局文件進行調用。
2.2 組件的多樣化使用
通過全局文件的配置，我們對組件的調用從一對一調用變成了一對多調用。如下：
使用全局變量前，我們只能通過以下形式調用
<x-button/>
現在我們可以通過：class的形式調用<x-button/>的多種形態，如下：
<x-button type="$-x-btn-warn' size-'$-x-btn-s'>注冊</x-button>
當然，我們還需要在組件內部定義好:class部分，配置如下：
<template>
<button
class="x-button"
:class="[
type ? 'x-button--' + type : '',
buttonSize ? 'x-button--' + buttonSize : '',
]"
>
</button>
</template>
<script>
export default {
name: 'XButton',
props: {
type: {
type: String,
default: 'default'
},
size: String,
},
};
</script>
2.3 slot 插槽的配置與使用
合理使用 slot 插槽，例如：組件內嵌組件，組件內嵌文字，內嵌 iconfont 等；
三、 組件的配置
在 app.js 中使用 vue.use(components) 對組件進行配置，再在相關頁面進行引用。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
“大名鼎鼎的”jQuery因為其極簡的引用方式而在N年前備受追捧，而今“浪潮”過去，還剩下什么？
我認識jQuery，只是在去年接觸ajax時了解，從而感興趣，進而深入探究（其實也沒多深入，只是相關的看了一下）。不得不說，jQuery對ajax支持的四個type：post（一般用于發送）、get（一般常用于接收）、put（修改）、delete（刪除） 令我非常震撼，太**實用了。
這其中，post和get是最常用的（因為好像說不是所有的瀏覽器都支持put和delete），具體的我在 這篇文章 中以JS方式提到，這里不再贅述。
load()
load()方法時jQuery中操作上最為簡單的Ajax方法，能載入其他的HTML代碼并插入到DOM中。其基本格式為：
load(url [,data] [,callback])
1
參數意義：
url： String類型，請求HTML頁面的URL地址
data（可選）： Object類型，發送至服務器的key/value數據
callback（可選）： Function，請求完成時的回調函數，無論請求成功或失敗
為什么說它是“特別的”呢？因為它只用于文檔流（html）的操作，而且，既可以是get操作，又可以是post操作：
基本示例：
//如果是jsp代碼，這里要加一行：
// <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>請求的文件</title>
</head>
<body>
<div class="comment">
<h6>張三：</h6>
<p class="para">沙發</p>
</div>
<div class="comment">
<h6>李四：</h6>
<p class="para">板凳</p>
</div>
<div class="comment">
<h6>王五：</h6>
<p class="para">地板</p>
</div>
</body>
</html>
//如果是jsp代碼，這里要加一行：
//<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>發送ajax的文件</title>
<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
//如果是jsp代碼，上面這一行要換成：<script src="<%=request.getContextPath()%>/js/jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#send").on("click", function () {
$("#resText").load("test.jsp");
});
});
</script>
</head>
<body>
<input type="button" id="send" value="Ajax獲取">
<div class="comment">已有評論：</div>
<div id="resText"></div>
</body>
</html>
上面是“載入文檔”，它還可以“篩選載入的文檔”：
如果只需要加載某頁面內的某些元素，那么可以使用load()方法的URL參數來達到目的。通過為 URL參數 指定選擇符，就可以很方便地從加載過來的HTML文檔里篩選出所需要的內容。
load()方法的URL參數的語法結構為：“url selector”。注意，URL和選擇器之間有一個空格：
$(function () {
$("#send").on("click", function () {
$("#resText").load("test.html .para");
});
});
傳遞方式：
load()方法的傳遞方式根據 參數data 來自動指定。如果沒有參數傳遞，則采用GET方式傳遞；反之，則會自動轉換為POST方式：
//無參數傳遞，GET方式
$("#resText").load("test.html .para", function(){
//....
});
//有參數傳遞，POST方式
$("#resText").load("test.html .para",{name:"tom", age:"18}, function(){
//....
});
回調函數：
對于必須在加載完成后才能繼續的操作，load()方法提供了 回調函數 ，該函數 有3個參數 ，分別代表請求返回的內容、請求狀態和XMLHttpRequest對象 ，jQuery代碼如下：
$("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest){
//responseText：請求返回的內容——等同于js-ajax時的“得到服務器響應的文本格式的內容”（注意：js操作中的get、post...都在open()中規定）
//textStatus：請求狀態：success、error、notmodified、timeout4種
//XMLHttpRequest：XMLHttpRequest對象——這玩意一般用在判斷瀏覽器適用類型上
});
//注意：在load()方法中，無論Ajax請求是否成功，只要請求完成（complete）后，回調函數就被觸發。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
使用function關鍵字定義函數
函數聲明會被提升（Hoisting），將聲明移動到當前作用域頂端的默認行為。
參數：
如果函數調用的參數太多（超過聲明），則可以使用函數的內置對象arguments
arguments.length 會返回函數被調用時收到的參數數目
arguments[index]可以得到相應的參數
傳遞對象的時候是使用引用來傳遞的，如果函數修改了對象屬性，則原始對象也改變了。
調用：
以函數形式調用函數：（這種方式調用默認的是全局對象調用）
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2);
作為方法來調用函數：（這種方式調用屬于函數的擁有者myObject）
var myObject = {
firstName:"Bill",
lastName: "Gates",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName();
通過函數構造器來調用函數：（如果函數調用的前面是 new 關鍵字，那么這是一個構造函數調用）
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("Bill", "Gates");
x.firstName;
call()和apply()方法：
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates",
}
var person2 = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
call() 方法是預定義的 JavaScript 方法。
它可以用來調用所有者對象作為參數的方法。
通過 call()，您能夠使用屬于另一個對象的方法。
如：
person.fullName.call(person1)// person1來調用person的fullName方法
call()可以帶參數,參數對應按順序的傳給方法
person2.fullName.call(person1,"Seattle", "USA")
apply()方法和call()方法類似
區別在于接收參數的方式不一樣。
call(obj,"x","y") 方法分別接受參數
apply(obj,["x","y"]) 方法接收數組形式的參數
箭頭函數：（ES6）
箭頭函數不需要function關鍵字、return關鍵字和大括號
var x = function(x, y) {
return x y;
}
var x = (x, y) => x y;
兩個的作用相同。
箭頭函數沒有自己的this、如果函數是單個語句，則只能省略 return 關鍵字和大括號
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
User表：
User類：
package pers.zhang.domain;
public class User {
private Long user_id;
private String user_code;
private String user_name;
private String user_password;
private String user_state;
public Long getUser_id() {
return user_id;
}
public void setUser_id(Long user_id) {
this.user_id = user_id;
}
public String getUser_code() {
return user_code;
}
public void setUser_code(String user_code) {
this.user_code = user_code;
}
public String getUser_name() {
return user_name;
}
public void setUser_name(String user_name) {
this.user_name = user_name;
}
public String getUser_password() {
return user_password;
}
public void setUser_password(String user_password) {
this.user_password = user_password;
}
public String getUser_state() {
return user_state;
}
public void setUser_state(String user_state) {
this.user_state = user_state;
}
}
ORM元數據：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC
"-//Hibernate/Hibernate Mapping DTD 3.0//EN"
";
<hibernate-mapping package="pers.zhang.domain" >
<class name="User" table="sys_user" >
<id name="user_id" >
<generator class="identity"></generator>
</id>
<property name="user_code" column="user_code" ></property>
<property name="user_name" column="user_name" ></property>
<property name="user_password" column="user_password" ></property>
<property name="user_state" column="user_state" ></property>
</class>
</hibernate-mapping>
控制層：
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//獲得查詢參數
String userIdStr = request.getParameter("userId");
String userName = request.getParameter("userName");
//獲得離線查詢對象
DetachedCriteria detachedCriteria = DetachedCriteria.forClass(User.class);
//拼裝查詢條件
if(userIdStr != null && !"".equals(userIdStr)) {
Long userId = (long) Integer.parseInt(userIdStr);
detachedCriteria.add(Restrictions.eq("user_id", userId));
}
if(userName != null && !"".equals(userName)) {
detachedCriteria.add(Restrictions.like("user_name", userName, MatchMode.ANYWHERE));
}
//作為參數傳遞給service層
UserService userService = new UserService();
List<User> list = userService.findUserByCondition(detachedCriteria);
request.setAttribute("userList", list);
request.getRequestDispatcher("list2.jsp").forward(request, response);
}
Service層：
public List<User> findUserByCondition(DetachedCriteria detachedCriteria) {
//傳遞給Dao層
UserDao userDao = new UserDao();
return userDao.findUserByCondition(detachedCriteria);
}
1
2
3
4
5
Dao層：
public List<User> findUserByCondition(DetachedCriteria detachedCriteria) {
Session session = HibernateUtils.openSession();
Transaction tx = session.beginTransaction();
//關聯session
Criteria criteria = detachedCriteria.getExecutableCriteria(session);
//查詢
List<User> list = criteria.list();
return list;
}
前端頁面：
忘記寫查詢數據回顯了…
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<form class="form-inline" role="form" method="post" action="${pageContext.request.contextPath }/findUserByCondition">
<div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail2" placeholder="用戶ID" name="userId">
</div>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputPassword2" placeholder="用戶名" name="userName">
</div>
<button type="submit" class="btn btn-default">篩選</button>
</form>
<div style="text-align: center; width: 600px;">
<table class="table table-hover">
<tr><td>編號</td><td>用戶ID</td><td>用戶名</td><td>昵稱</td><td>密碼</td></tr>
<!-- 顯示數據 -->
<c:forEach items="${userList }" var="list">
<tr><td>${list.user_id }</td><td>${list.user_code }</td><td>${list.user_name }</td><td>${list.user_password }</td><td>${list.user_state }</td></tr>
</c:forEach>
</table>
</div>
</body>
</html>
測試：
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
對于同一個頁面布局，幾乎每個人的寫法都不一樣，有人喜歡Flex彈性盒子布局，有的人則喜歡Float浮動布局，有些人喜歡Margin負值布局，等等。從來就沒有一種統一的布局方案，現在大伙寫代碼也就放飛自我，只要能在規定的環境上跑起來，不會亂就行了。但是，身為腦癱正經前端，我們還是有必要分出在不同情況應使用的布局。
這一篇博客比起作為文章，不如作為工具書。當你對布局迷茫時，不妨打開看看。我們可以不求甚解，只需要先把所有布局掌握熟練。
文章目錄
CSS3 終極布局指南
正常布局（語義化布局）
正常布局，按照瀏覽器的內置CSS渲染
應用場景
帶來的問題
挫
不兼容
沒有自適應
解決方案
Float浮動布局
什么是浮動？
浮動元素的排列
浮動解決的布局問題
浮動帶來的問題
父元素高度坍縮
不希望浮動時清除浮動
總結
定位布局
定位的應用
static
relative
absolute
高度坍縮
對比float
總結
fixed
祖先未使用transform:none
使用
sticky 粘性定位
Flex布局
瀏覽器支持
Flex使用介紹
Flex容器屬性
flex-direction 排布方向
flex-wrap 控制換行
flex-flow [排布方向/控制換行]的簡稱
justify-content 子項目在主軸上的排布
align-items 子項目在交叉軸排布
align-content 定義多根軸線排布
Flex子項屬性
order 子項排布靠前排名
flex-grow 子項放大比例
flex-shrink 子項縮小比例
flex-basis
flex
align-self
Grid 布局
參考
聲明
正常布局（語義化布局）
正常布局，按照瀏覽器的內置CSS渲染
大道至簡在遠古時代，CSS還有沒被發明，瀏覽器渲染HTML的時候，只是按照規定好的如標題、段落、表格等格式渲染。且不同的瀏覽器對于相同元素的渲染也是不同的，現在這項傳統藝能保留到了今天。
不過到了今天，正常布局也稍微被W3C重視了一下。在HTML5的規定中，新增加了不少語義化的元素。所謂語義化元素就是讓大家規定它就是來做這件事的。
新增加的語義化元素。
標簽名稱 作用
hearder header 標簽定義文檔的頁面組合，通常是一些引導和導航信息。
nav nav 標簽定義顯示導航鏈接不是所有的成組的超級鏈接都需要放在nav標簽里。nav標簽里應該放入一些當前頁面的主要導航鏈接。 例如在頁腳顯示一個站點的導航鏈接（如首頁，服務信息頁面，版權信息頁面等等），就可以使用nav標簽，當然，這不是必須的。
article article標簽裝載顯示一個獨立的文章內容。例如一篇完整的論壇帖子，一則網站新聞，一篇博客文章等等，一個用戶評論等等 artilce可以嵌套，則內層的artilce對外層的article標簽有隸屬的關系。例如，一個博客文章，可以用article顯示，然后一 些評論可以以article的形式嵌入其中。
section section 標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
aside aside 用來裝載非正文類的內容。例如廣告，成組的鏈接，側邊欄等等。
hgroup hgroup 標簽用于對網頁或區段的標題元素（h1-h6）進行組合。例如，在一個區段中你有連續的h系列的標簽元素，則可以用hgroup將他們括起來。
time time 標簽定義公歷的時間（24 小時制）或日期，時間和時區偏移是可選的。該元素能夠以機器可讀的方式對日期和時間進行編碼，這樣， 舉例說，用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也能夠生成更智能的搜索結果。
mark mark 標簽定義帶有記號的文本。請在需要突出顯示文本時使用 <mark> 標簽。
figure figure標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。
可以看到HTML5規定中增加了不少新的標簽，但是這些標簽大部分并不是為了補充正常的文檔布局的，而是服務于搜索引擎的爬蟲。不要覺得頁面布局只是給人看的！對于布局清晰地頁面，搜索引擎的爬蟲也會給出更高的分數。
應用場景
作為布局的基石。
開發較為單一的頁面，比如電子書閱讀頁面，面向視力障礙人士的報紙頁面等。
帶來的問題
挫
使用瀏覽器默認的CSS意味著你不可定制自己的頁面，對于像<ul>、<table>這樣的標簽，你也只能忍受上世紀的設計風格了。
不兼容
先前說了，每個瀏覽器對于基礎的HTML節點的渲染都不一樣，也就是說你寫的頁面在IE上是一個風格，換到Safari上又是一種風格。
沒有自適應
有一說一，正常布局（語義化）還是用來當基石比較好，對于響應式、自適應那還得看下面伙計的發揮。
解決方案
解決挫的方法就是使用style屬性，也就是使用CSS美化我們的頁面。解決不兼容的問題則需要初始化CSS，大伙應該在不少的頁面的頭部見過一大坨css代碼吧，就像下面Google頁面。(部分)
body{color:#000;margin:0}body{background:#fff}a.gb1,a.gb2,a.gb3,.link{color:#1a0dab !important}.ts{border-collapse:collapse}.ts td{padding:0}#res,#res .j{line-height:1.2}.g{line-height:1.2;text-align:left;}.ti,.bl{display:inline}.ti{display:inline-table}#rhs_block{padding-bottom:15px}a:link,.w,#prs a:visited,#prs a:active,.q:active,.q:visited,.kl:active,.tbotu{color:#1a0dab}.mblink:visited,a:visited{color:#609}.cur,.b{font-weight:bold}.j{width:42em;font-size:82%}.s{max-width:48em}.sl{font-size:82%}
1
頁面初始化也是很重要的，它可以使我們的代碼健壯的運行在各個環境的瀏覽器上。
Float浮動布局
什么是浮動？
如果首先要認識一個物品，認識一個東西的最好方式是了解為什么會產生它，也就是要翻它的歷史?！狽aoTan·Ma·Nong
看上圖，啊，報社最愛的環繞，一堆文字環繞一張圖片，這樣的布局使得頁面緊湊，并且有較好的閱讀體驗。如果我們要在HTML中實現這樣的布局應當怎么設置呢？手動設置換行？不行，缺少靈魂。如果能使文字繞過圖片排列下來就好了。
于是Float屬性出世，它不僅解決了文字環繞問題，并且帶來了新的布局方案。
如上面的布局，我們用代碼實現主要部分。
.side-bar{
float:left;
}
.main-content{
float:left;
}
1
2
3
4
5
6
浮動元素的排列
當一個元素被設置為浮動元素時，首先，它會被移除文檔流，設置float:left|right則元素會向設置方向排列，直到遇到父元素邊框(或者說最大寬度)或者另一個浮動元素時停止。
當設置父元素display:flex時，子元素的浮動值無效！
浮動解決的布局問題
使用浮動我們可以解決傳統的兩列布局、三列布局的自適應。下面代碼是用浮動實現的兩列布局。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>兩列布局</title>
<style>
body,
html {
margin: 0;
background-color: rgb(228, 228, 228);
}
header {
margin-bottom: 20px;
}
footer {
margin-top: 20px;
}
.layout {
height: 50px;
border: 1px solid black;
}
aside {
width: 25%;
float: left;
border: solid 1px black;
height: 500px;
}
article {
width: 70%;
border: solid 1px black;
height: 500px;
float: right;
}
</style>
</head>
<body>
<header class="layout"></header>
<div style="overflow:auto;">
<aside>
</aside>
<article>
</article>
</div>
<footer class="layout"></footer>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
效果如下
浮動帶來的問題
父元素高度坍縮
一般來說新手在學習浮動布局之后，遇到的第一個問題就是父元素高度坍縮。什么是高度坍縮？
看上圖，在父元素的四個子元素均為浮動元素，由于浮動元素的特性浮動元素脫離文檔流，所以父元素不會被撐起高度。
如何解決？答案很簡單，使用BFC塊級格式上下文。當父元素為BFC的時候，內部計算高度會帶上浮動元素的高度。
不希望浮動時清除浮動
使用clear屬性可以使元素清除周圍的浮動。
如上圖，對段落文字清除浮動，導致原本環繞的文字，另起一行。順便解決了高度坍縮的問題。
總結
浮動在帶來方便的同時也引入了新的問題，如果能處理好這些問題那么浮動也可以當做布局的主力，但是都已經9102年了，我們應該追隨CSS3的布局方案，盡量少使用浮動。
定位布局
收拾房子的時候總會把物品按照相應的位置放置，這樣會讓房間看上去更加整潔。所以，我們CSS也是可以這樣做的。
使用position屬性，調整元素的位置。position一共有四種定位類型：定位元素、相對定位、絕對定位、粘性定位，五種取值：static、relative、absolute、fixed、sticky。
名稱 描述 定位類型
static 該關鍵字指定元素使用正常的布局行為，即元素在文檔常規流中當前的布局位置。此時 top, right, bottom, left 和 z-index屬性無效。 定位元素
relative 該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。 相對定位
absolute 不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合并。 絕對定位
fixed 不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed 屬性會創建新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。 絕對定位
sticky 盒位置根據正常流計算(這稱為正常流動中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table 時），該元素定位均不對后續元素造成影響。當元素 B 被粘性定位時，后續元素的位置仍按照 B 未定位時的位置來確定。position: sticky對 table 元素的效果與 position: relative相同。 粘性定位
一般使用position屬性時，會使用其相對定位與絕對定位、粘性定位，它們都使用top、bottom、left、right來調整自身位置，但是調整的基準不一樣。
定位的應用
static
static是元素正常出現在文檔流中的定位，文檔流中的排列為自上而下，自左至右。一般來說block元素自占一行，inline元素橫向排列。
正常情況下在我們的頁面中大部分元素為static定位，對于一些特殊需求我們需要使用其他定位。比如像wiki中的關鍵詞，鼠標移動上去的時候，關鍵詞下面顯示式卡片。
relative
relative是在實現一些特殊布局的時候經常使用的一種定位方式。設置為relative的元素并不會脫離文檔流，但是可以通過top、bottom、left、right調整元素對于默認基準的位置。
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
position: relative;
top: 20px;
left: 20px;
background: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
使用相對定位可以實現一些炫酷的效果。
.content{
text-align: center;
margin: 20px;
}
.card{
position: relative;
display: inline-block;
width: 200px;
height: 200px;
background-color: darkgray;
top: 210px;
right: 170px;
visibility: hidden;
}
span:hover+.card{
visibility:visible;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="content">
<span>鼠標移到我身上！</span>
<div class="card">
</div>
</div>
1
2
3
4
5
6
效果
但是，使用相對定位依然會出現一些問題。relative定位并不會脫離文檔流，所以.content元素的高度為200px。
absolute
與relative定位不同的是absolute是脫離文檔流的，而且相對基準是position屬性不為static的祖先元素，如果祖先都是static則元素相對body定位。并且，對于absolute元素，如果不設置top/bottom/left/right的話依然排列在正常布局位置。
html,
body {
margin: 0;
}
.content {
position: relative;
/ top: 50px; /
margin-top: 50px;
}
.static {
position: static;
}
.relative {
position: relative;
margin: 20px 0;
}
.absolute {
display: inline-block;
width: 50px;
height: 50px;
background-color: lightcoral;
position: absolute;
}
.non-ab {
display: inline-block;
width: 50px;
height: 50px;
background-color: darkblue;
margin-left: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="content">
<div style="height: 50px;"></div>
<div class="static">
<div class="non-ab">
</div>
<div class="absolute">
</div>
</div>
<div class="relative">
<div class="absolute">
</div>
<div class="non-ab">
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
上面的代碼很有意思，有興趣的同學可以放在codepen上面跑一下子。這個例子驗證了absolute的排列方式。當我們知道我們在做什的時候，也就不需要墨守成規（對于absolute元素的父元素統一設置relative屬性）了。
高度坍縮
只要是脫離了文檔流的元素都會出現高度坍縮，所以在使用absolute屬性時，請確保父元素不會因此而改變。
對比float
Float與absolute都會使元素脫離文檔流，但是眾所周知對相同元素設置float與設置absolute會出現不同的效果。這是因為float與absolute本身的排列不一樣。
float：脫離文檔流，排列時以父元素為基準，并且會為占用其他浮動元素的位置。
absolute：脫離文檔流，排列時分情況：第一種情況，對于未設置left、right、top、bottom屬性的元素，排列在正常顯示位置，并不占用空間。第二種情況，設置位置屬性的元素，基于非static祖先元素排列。
上面兩者比較顯著的差異為float會影響下一個float元素，但是absolute元素不會。
總結
說absolute為絕對定位也并不貼切，它也是基于祖先元素定位的，只是脫離了文檔流。我個人還是比較推薦在處理元素相對位置問題上使用absolute屬性的，但前提是您已經深刻理解了absolute的排列方式。
fixed
不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed 屬性會創建新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。
fixed元素也會脫離文檔流，并且和absolute元素一樣，當不設置任何left、top、bottom、right值的時候，元素依然按照正常定位的位置放置。
祖先未使用transform:none
當祖先元素未使用transform:none的時候，fixed元素相對于該祖先元素進行定位。
在上面的圖片中，我設置小黃塊為fiexd屬性，并讓父元素設置為 使用transform:matrix(1, 0, 0, 1, 0, 0);，這時候小黃塊并沒有相對于body進行定位，當滾動條下拉時，小黃塊定位固定在父元素左上角。
使用
fiexd元素一般用在如：to-top按鈕，或者側邊懸浮面板，或者懸浮導航欄之中。
sticky 粘性定位
盒位置根據正常流計算(這稱為正常流動中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table 時），該元素定位均不對后續元素造成影響。當元素 B 被粘性定位時，后續元素的位置仍按照 B 未定位時的位置來確定。position: sticky對 table 元素的效果與 position: relative相同。
上面我們使用了fiexd與transform，發生了我們意想不到的效果，那就是fixed元素并未相對于body進行移動，也沒有在父元素中進行標準的fixed定位。現在我們使用以下sticky屬性來看一下效果。
<style>
.box{
box-sizing: border-box;
height: 150px;
border:solid 3px black;
margin: 0 0 20px 0;
overflow: auto;
}
.block{
width: 50px;
height: 50px;
background-color: orange;
}
.sticky-1{
position:sticky;
top: 0px;
}
</style>
<div class="box box-1">
<p>下面這個小黃塊設置為sticky</p>
<div class="sticky-1 block">
</div>
<p>
hahah
</p>
<p>
hahah
</p>
<p>hahaha</p>
<p>hahaha</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
當我們向下滾動的時候神奇的事情發生了。
小黃塊固定到了父元素的top:0位置了，不僅如此，再向上滑動后，小黃塊又回復了當時的位置，而且占用了文檔本身的位置。
使用這個特性我們可以制作浮動的Header組件，當用戶向下滑動至窗口上側的時候，Header組件也跟隨窗口滑動。
Flex布局
對于前端工程師來說，最讓人頭疼的莫過于自適應布局。對于不同分辨率的設備要做到頁面統一，在CSS3出現之前，還是挺不容易的。還有就是前端工程師頭疼的一個布局問題：垂直居中。
CSS3中新出了一種布局技術：CSS彈性盒子布局，我們來看一下MDN是如何介紹的。
CSS 彈性盒子布局是 CSS 的模塊之一，定義了一種針對用戶界面設計而優化的 CSS 盒子模型。在彈性布局模型中，彈性容器的子元素可以在任何方向上排布，也可以“彈性伸縮”其尺寸，既可以增加尺寸以填滿未使用的空間，也可以收縮尺寸以避免父元素溢出。子元素的水平對齊和垂直對齊都能很方便的進行操控。通過嵌套這些框（水平框在垂直框內，或垂直框在水平框內）可以在兩個維度上構建布局。
接下來，我會使用Flex布局技術，設計一些我們常使用頁面布局，并指出優點與缺點。但是，我們首先要來看一下瀏覽器的支持程度。
瀏覽器支持
特性 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基礎支持 20.0 (20.0) 21.0-webkit 29.0 10.0-ms 11.0 12.10 6.1-webkit
主流的瀏覽器全部支持Flex屬性。注：與社會脫軌的IE9并不支持Flex，如果想寫出兼容IE9的頁面，請不要使用Flex。
Flex使用介紹
使用flex務必清楚一些屬性概念。
Flex容器：對于一個基本元素(不含任何CSS屬性，如div)，設置display:flex，即可創建一個Flex容器。
Flex子項：父元素為Flex容器的元素，稱之為Flex子項，其排布受到父元素影響。注：一定是父元素為Flex容器的元素，祖先不算。
排布方向：指Flex子項在Flex容器中的排布方向。排布方向有兩種：column、row。在Flex容器上使用flex-direction: column|row(默認);即可設置。
主軸：指的Flex容器中是與排列方式相同的方向的軸。如設置Flex容器direction: column;則其主軸為豎直方向。
交叉軸：指的Flex容器中是與排列方式相反的方向的軸。如設置Flex容器direction: column;則其主軸為水平方向。
我們一定要清楚上面的基礎概念，這對深入使用Flex有很大的幫助。下面我會介紹一些Flex常用的屬性，主要分為兩部分：對Flex容器、對Flex子項。
Flex容器屬性
flex-direction 排布方向
flex-direction 屬性指定了內部元素是如何在 flex 容器中布局的，定義了主軸的方向(正方向或反方向)。
flex-direction屬性接受以下值：
row:子項目在flex容器中橫向，從左至右排列。
row-reverse:表現和row相同，也是橫向，但是是從右到左。
column:子項在容器中豎向排列，從上至下。
這里不貼圖了
column-reverse:表現和column相同，子項在容器中豎向排列，從下至上。
這里不貼圖了
flex-wrap 控制換行
CSS flex-wrap 指定 flex 元素單行顯示還是多行顯示 。如果允許換行，這個屬性允許你控制行的堆疊方向。
取值:
nowrap(默認)
flex 的元素被擺放到到一行，這可能導致溢出 flex 容器。 cross-start 會根據 flex-direction 的值 相當于 start 或 before。
wrap
flex 元素 被打斷到多個行中。cross-start 會根據 flex-direction 的值選擇等于start 或before。cross-end 為確定的 cross-start 的另一端。
wrap-reverse
和 wrap 的行為一樣，但是 cross-start 和 cross-end 互換。
flex-flow [排布方向/控制換行]的簡稱
CSS flex-flow 屬性是 flex-direction 和 flex-wrap 的簡寫。
示例：flex-flow: column-reverse wrap;
justify-content 子項目在主軸上的排布
CSS justify-content 屬性定義了瀏覽器如何分配順著父容器主軸的彈性元素之間及其周圍的空間。
justify-content同時受到父容器主軸的影響。
取值：
start
從行首開始排列。每行第一個元素與行首對齊，同時所有后續的元素與前一個對齊。
flex-start（默認）
從行首開始排列。每行第一個彈性元素與行首對齊，同時所有后續的彈性元素與前一個對齊。
flex-end
從行尾開始排列。每行最后一個彈性元素與行尾對齊，其他元素將與后一個對齊。
center
伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最后一個元素到行尾的距離相同。
left
伸縮元素一個挨一個在對齊容器得左邊緣，如果屬性的軸與內聯軸不平行，則left的行為類似于start
right
元素以容器右邊緣為基準, 一個挨著一個對齊,如果屬性軸與內聯軸不平行,則right的行為類似于start.
space-between
在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。
space-around
在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。
space-evenly
flex項都沿著主軸均勻分布在指定的對齊容器中。相鄰flex項之間的間距，主軸起始位置到第一個flex項的間距,主軸結束位置到最后一個flex項的間距，都完全一樣。
看上去與space-around的排布很相似，但其實還是有一些區別的。space-evenly會在每一行均勻分布間隙，而space-around是均勻分布項目。
借一張圖
看上去我們要學的屬性很多，但是其實我們只需要記住我們常用的幾個屬性就行:flex-start、flex-end、space-between、center、space-around、space-evenly。以上這幾個就是我們常用的屬性值，通過設置主軸方向、設置排列方式，我們可以靈活地組織我們的元素。
align-items 子項目在交叉軸排布
CSS align-items屬性將所有直接子節點上的align-self值設置為一個組。 align-self屬性設置項目在其包含塊中在交叉軸方向上的對齊方式。
取值：
normal
這個關鍵字的效果取決于我們處在什么布局模式中：在絕對定位的布局中，對于被替代的絕對定位盒子，這個效果和start的效果的一樣；對于其他所有絕對定位的盒子，這個效果和stretch的效果一樣。 在絕對定位布局的靜態位置上，效果和stretch一樣。對于那些彈性項目而言，效果和stretch一樣。對于那些網格項目而言，效果和stretch一樣，除了有部分比例或者一個固定大小的盒子的效果像start。這個屬性不適用于會計盒子和表格。
flex-start
元素向側軸起點對齊。
flex-end
元素向側軸終點對齊。
center
元素在側軸居中。如果元素在側軸上的高度高于其容器，那么在兩個方向上溢出距離相同。
因為align-items其實和justify-content我這里就不放一些圖片湊字數了。
align-content 定義多根軸線排布
該屬性對單行彈性盒子模型無效。（即：帶有flex-wrap: nowrap）。
CSS的align-content屬性設置了瀏覽器如何沿著伸縮盒子容器（flexbox container）的縱軸和網格容器（Grid Container）的主軸在內容項之間和周圍分配空間。
它的取值和align-items差不多，經常有人會把他們搞混。
align-content一般定義多行的交叉軸排列。
絕大多數情況下我們使用align-items即可實現我們的需求。
Flex子項屬性
order 子項排布靠前排名
CSS order 屬性規定了彈性容器中的可伸縮項目在布局時的順序。元素按照 order 屬性的值的增序進行布局。擁有相同 order 屬性值的元素按照它們在源代碼中出現的順序進行布局。
取值：
<integer>
表示此可伸縮項目所在的次序組。
flex-grow 子項放大比例
CSS flex-grow 屬性定義彈性盒子項（flex item）的拉伸因子
取值：
<number>
默認值0，即如果存在剩余空間，也不放大。負值無效。
flex-shrink 子項縮小比例
CSS flex-shrink 屬性指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大于容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。
總而言之，你定了這個屬性，其他項目會先壓榨你的空間，然后再均勻縮小其他項目。
flex-basis
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
注：分配多余空間之前??！
也就是說你給的flex-basis值大于當前分配空間時，依然會被壓縮。
flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
align-self
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
這個屬性了不得，它也是我們經常用的子項目屬性之一。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
1
2
3
就像上面的圖，他可以決定子項目的交叉軸單獨排列方式。
Grid 布局
未完待續…明天補上
參考
HTML5語義化標簽屬性-HTML5屬性手冊
All About Floats | CSS-Tricks
清除浮動的四種方式及其原理理解
【前端Talkking】CSS系列——CSS深入理解之absolute定位
CSS 彈性盒子布局
Flex 布局教程：語法篇
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
three.js 的簡單實例
三大主件: 渲染器、場景、相機
思想核心: 相機獲取到場景內顯示的內容, 然后再通過渲染器渲染到畫布上面
渲染器: 實例化渲染器的同時生成的一個 Canvas 畫布, 之后將這個畫布添加到了 DOM 當中
場景: 場景只是一個容器, 顯示的內容需要進行添加, 添加一個內容稱作一個網格, 每個網格基本上包括幾何體和材質, 網格也稱之為模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>three</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body onload="init()">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript" src="js/dat.gui.min.js"></script>
<script>
//聲明一些全局變量
var renderer, camera, scene, geometry, material, mesh, stats, rotate = true;
//初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer(); //實例化渲染器
renderer.setSize(window.innerWidth, window.innerHeight); //設置寬和高
document.body.appendChild(renderer.domElement); //添加到dom
}
//初始化場景
function initScene() {
scene = new THREE.Scene(); //實例化場景
}
//初始化相機
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //實例化相機
camera.position.set(0, 0, 15); //初始化的坐標
}
//創建模型
function initMesh() {
geometry = new THREE.BoxGeometry(2, 2, 2); //創建幾何體
material = new THREE.MeshNormalMaterial(); //創建材質
mesh = new THREE.Mesh(geometry, material); //創建網格
scene.add(mesh); //將網格添加到場景
}
//運行動畫
function animate() {
requestAnimationFrame(animate); //循環調用函數
//判斷是否可以旋轉
if(rotate) {
mesh.rotation.x += 0.01; //每幀網格模型的沿x軸旋轉0.01弧度
mesh.rotation.y += 0.02; //每幀網格模型的沿y軸旋轉0.02弧度
}
stats.update(); //更新性能檢測框
renderer.render(scene, camera); //渲染界面
}
//性能檢測框
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//創建調試框
function initGui() {
//控制參數初始值
controls = {
positionX: 0,
positionY: 0,
positionZ: 0,
rotate: true
};
gui = new dat.GUI(); //實例化對象
gui.add(controls, "positionX", -10, 10).onChange(updatePosition);
gui.add(controls, "positionY", -5, 5).onChange(updatePosition);
gui.add(controls, "positionZ", -10, 10).onChange(updatePosition);
function updatePosition() {
mesh.position.set(controls.positionX, controls.positionY, controls.positionZ);
}
gui.add(controls, "rotate").name("旋轉").onChange(function(e) {
rotate = e;
});
}
//初始化函數，頁面加載完成是調用
function init() {
initRenderer();
initScene();
initCamera();
initMesh();
initStats();
initGui();
animate();
}
</script>
</body>
</html>
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
1.獲得內容 - text()、html() 以及 val()
text() - 返回所選元素的文本內容
html() - 返回所選元素的內容（包括 HTML 標記）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1">圣誕快樂，<b>新年快樂</b></p> //給p元素里邊的文本一部分加上b標簽 <button id="b1">顯示文本</button> <button id="b2">顯示html</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#b1").click(function(){ alert( $("#p1").text() ); //獲取文本 }); $("#b2").click(function(){ alert( $("#p1").html() ); //獲取html內容 結果會包含b標簽 }); }); </script>
val() - 返回表單字段的value值
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <input type="text" id="ip" value="nihao"> <button id="but">顯示value值</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ alert($("#ip").val()); 結果返回表單元素的value值（nihao） }); }); </script>
2.獲取屬性 - attr()
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <a id="aa" href="www.baidu.com"></a> <button id="but">顯示元素屬性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ alert($("#aa").attr("href")); }); }); </script>
1設置內容和回調函數 - text()、html() 以及 val()
text() - 設置所選元素的文本內容
html() - 設置所選元素的內容（包括 HTML 標記）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1"></p> <button id="b1">顯示文本</button> <button id="b2">顯示html</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#b1").click(function(){ $("#p1").text("圣誕快樂，<b>新年快樂</b>") ; //設置文本 }); $("#b2").click(function(){ $("#p1").html("圣誕快樂，<b>新年快樂</b>") ; //設置html內容 結果會包含b標簽 }); }); </script>
text()、html()回調函數
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1">新年快樂</p> <button id="b1">顯示文本</button> <button id="b2">顯示html</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#b1").click(function(){ $("#p1").text(function(){ return "happy new year"; //調用函數，返回一個新的文本 } ) ; }); $("#b2").click(function(){ $("#p1").text(function(){ return "happy <b>new</b> year"; //調用函數，返回一個新的文本 } ); }); }); </script>
val() - 設置表單字段的value值和回調函數
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <input type="text" id="ip"> <button id="but">顯示value值</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ $("#ip").val("happy"); }); }); </script>
val（）的回調函數
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <input type="text" id="ip"> <button id="but">顯示value值</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ $("#ip").val(function(){ return "happay"; }); }); }); </script>
2.設置屬性 attr（）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <a id="aa" href="www.baidu.com">11111</a> <button id="but">顯示元素屬性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ alert($("#aa").attr( { "href":"http://news.baidu.com/" } )); //attr()里邊，要加{}號 }); }); </script>
attr（）的回調函數
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <a id="aa" href="www.baidu.com"></a> <button id="but">顯示元素屬性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ alert($("#aa").attr({ "href":function(){return "http://news.baidu.com/" } } )); //attr()里邊，要加{}號 });}); </script>
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
jQuery 擁有可操作 HTML 元素和屬性的強大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
提示：DOM = Document Object Model（文檔對象模型）
DOM 定義訪問 HTML 和 XML 文檔的標準：
“W3C 文檔對象模型獨立于平臺和語言的界面，允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式。”
獲得內容 - text()、html() 以及 val()
三個簡單實用的用于 DOM 操作的 jQuery 方法：
text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值
下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">這是段落中的<b>粗體</b>文本。</p>
<button id="btn1">顯示文本</button>
<button id="btn2">顯示 HTML</button>
</body>
</html>
val()方法例子：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value:"+$("#test").val());
});
});
</script>
</head>
<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>顯示值</button>
</body>
</html>
獲取屬性 - attr()
jQuery attr() 方法用于獲取屬性值。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("url"));
});
});
</script>
</head>
<body>
<p><a url="img/001.jpg" id="w3s">W3School.com.cn</a></p>
<button>顯示 href 值</button>
</body>
</html>
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
局部變量
局部變量：在函數內部聲明的變量，只在函數內部起作用。函數的參數也是局部性的，只在函數內部起作用，對于其他的函數或腳本代碼是不可用的。
函數可以訪問函數內部定義的變量，如：
<p>函數可以訪問函數內部定義的變量:</p>
<button type="button" onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
function myFunction() {
var a = 4;
document.getElementById("demo").innerHTML = a a;
}
</script>
全局變量
在web頁面中全局變量屬于 window 對象，全局變量的作用域是全局性的，即在整個JavaScript程序中，全局變量處處都在。
函數也可以訪問函數外部定義的變量，如：
<p>函數可以訪問定義在函數外的變量：</p>
<button type="button" onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
var a = 4;
function myFunction() {
document.getElementById("demo").innerHTML = a a;
}
</script>
全局和局部變量即便名稱相同，它們也是兩個不同的變量。修改其中一個，不會影響另一個的值。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://m.skdbbs.com