整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
BFC為塊級格式化上下文 屬于普通流，是一塊獨立的渲染區域，BFC的特性容器里面的元素不會影響外邊元素布局，當然外部的元素也不能影響內部元素的布局。
1.根元素，既HTML元素（當前文檔中 html 標簽就是一個BFC）。
2.浮動元素：float值為left 、right。
3.overflow不為visable，為auto scroll hidden。
4.絕對定位元素position：absolute、fixed。
5.行內塊元素display 的值為inline-block、table、flex、inline-flex、grid、inline-grid。
1.垂直外邊距重疊問題,解決外邊距塌陷的問題（盒子垂直方向的距離由 margin 決定。屬于同一個BFC的兩個相鄰盒子的 margin 會發生重疊）：
1) :父子元素的外邊距塌陷問題：
<style>
.boxs {
width: 300px;
/* overflow: hidden; */ 解決辦法
background-color: red;
}
.box1 {
width: 100px;
height: 100px;
background-color: blue;
margin-right:20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="boxs">
<div class="box1"></div>
</div>
</body>2）解決第二種兄弟元素之間外邊距塌陷：
兩個兄弟上下元素設置margin:20px;按照我們想的應該兩個元素相距40px才對是吧，但實際上兩個元素相距20px。
問題分析：默認情況下，兩個相鄰的box的margin會發生重疊的原因，是因為box1和box2都屬于html，而html是BFC。因為BFC里面規定了，屬于同一個BFC的兩個相鄰box的margin會發生重疊，所以box1和box2重疊了，也就是外邊距重疊。
解決方案：重疊之后，想要不重疊，可以給后面的元素添加一個父元素并且添加聲明overflow: hidden; 來解決（添加其他聲明也可以，只要可以觸發BFC即可）。
可以解決的原因是因為，當給box2添加了父元素并且添加了overflow:hidden;之后，這個父元素boxs就是BFC了，當前的結構里面box1屬于BFC html，box2屬于BFC boxs，這個時候box1和box2就不屬于同一個BFC了，那么也就不會發生重疊了。
2.去除浮動：
問題：li標簽浮動，ul高度會塌陷，給ul添加overflow:hidden后，就可以繼續包裹li標簽，為什么？
問題分析：為什么ul添加了 overflow:hidden;就可以解決高度塌陷，是因為添加了之后，就觸發ul為BFC，而BFC里面規定了，計算BFC高度的時候，浮動元素也參與計算。
ul未觸發BFC時，li浮動時，ul高度塌陷。
3.自適應兩欄布局。
box1浮動，box2會到box1下面，發生了重疊，可以在box2添加overflow:hidden;觸發BFC，可以實現右邊盒子自適應。
一篇我們講解了JAVAscript 的基礎知識、特點及基本語法以及組成及基本用途，本期就給大家帶來了JAVAweb的第二個知識點jquery，大數據開發基礎之JAVAjquery，這是本篇文章的主要內容，會給大家帶來jquery選擇器、事件及驗證框架。
一、Jquery簡介
jquery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫(或JavaScript框架)。JQuery是對JavaScript的封裝，用于簡化js代碼，jquery的文檔非常豐富，因為jquery輕量級的特性，文檔并不是很復雜，隨著新版本的發布，能夠很快被翻譯成多種語言，這也為jquery的流行提供了條件。
（1）jquery設計宗旨：
write Less，Do More-也就是寫更少的代碼，做更多的事情。
jquery封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
（2）jquery核心特性：
1、有高效靈活的css選擇器，并且，能夠對CSS選擇器進行擴展;
2、兼容各種主流瀏覽器;
例如：IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等等。
3、有獨特的鏈式語法和短小清晰的多功能接口;
4、擁有便捷的插件擴展機制和豐富的插件;
（3）JQuery語法
$(選擇器).action()
$(document).ready();//當DOM節點加載后（不需要節點的內容（比如圖片，視頻等）加載完成）立即執行。
常用語法
css(“屬性”,“屬性值”); //設置元素的css屬性值
addClass(“類名”);//給元素增加類名
next();//該元素其后緊鄰的同輩元素
html();//獲取元素的html內容
（4）JQuery基本操作
1.事件綁定
$("#id").click(function(){事件出發后需要執行的代碼});
2.入口函數
$(function(){需要執行的代碼});
3.樣式控制
$("#id").css("屬性名","屬性值");
二、jquery選擇器
過濾選擇器
使用 : ，表示在冒號前面的選擇器中篩選出符合冒號后特征的元素
：first表示選擇第一個元素
：last 表示選擇最后一個元素
：even 表示選擇索引是偶數的元素（索引從0開始）
：odd 表示選擇索引是奇數的元素
：eq(index) 表示選擇索引值等于index 的元素
：gt(index)表示索引大于index的元素
：lt(index)表示索引小于index的元素
：not(selector)選擇不匹配selector選擇器的元素
：header 選擇標題元素
：focus 選擇當前獲取焦點的元素
：visable 選擇所有可見的元素
：hidden 選擇所有隱藏的元素
三、jquery事件
（1）bind(type,[data],fn)：為每個匹配元素的特定事件綁定對應的事件處理函數，各參數含義如下：
①type表示事件類型，多個事件類型使用空格分隔；
②data表示傳遞給綁定函數的額外數據對象，函數中使用event.data接收（了解）；
③fn表示綁定的函數；
（2）unbind(type,[data|fn]])：刪除每個匹配的元素上已綁定的事件，如果沒有參數，則刪除該元素上綁定的所有事件，
（3）one(type,[data],fn)：該方法可以為元素綁定處理函數，當處理函數觸發一次后, 立即被刪除，即在每個對象上, 事件處理函數只會被執行一次。
（4）trigger(type,[data])：觸發每一個匹配元素上某類事件，type表示一個或多個事件類型， data表示傳入函數的數據
（5）keydown([[data],fn]) ：當鍵盤或按鈕被按下時觸發keydown事件。
（6）submit([[data],fn])：提交表單時觸發submit 事件，該事件只適用于表單元素。
以上就是大數據開發基礎之JAVA jquery的全部內容了，關于jquery還有個驗證框架，驗證框架需要具體實例，也不好展示，所以文章中沒有驗證框架這一節，希望大家有時間自己去驗證下。
希望大家點個關注，及時收取最新文章推送。
有問題的歡迎在評論區留言，如有侵權請告知。
者：余澈
在 Taro Next 預覽版（Alpha）版本之后，我們沒有停下迭代的步伐，經過兩個月的開發和數百次提交之后，我們謹慎但堅定地發布 Taro Next 測試（Beta） 版，Beta 版發布后，社區很多開發者使用上了 Taro Next，他們的幫助和贊譽加上我們內部項目使用的良好反饋，Beta 發布一個月之后，我們非常自信地發布了候選版（RC）版本。
在穩定的 Beta 版本里，Taro 也添加了更多的功能：
H5 編譯支持是我們版本升級最重要的理由之一。這意味著原來開發者寫的小程序應用，現在可以直接運行在 Web 中。添加 H5 支持非常簡單，只需要在項目根目錄安裝 @tarojs/webpack-runner，運行 taro build —type h5 —watch 即可：
$ npm i -D @tarojs/webpack-runner@next
$ taro build —type h5 —watch和小程序一樣，Taro Next 的 H5 端相較于之前版本的 Taro 是一次徹底的重寫：基礎組件現在全部使用 Web Components 構建，路由系統也完全與前端框架解耦，因此在 H5 端 Taro 也實現了跨框架。不管開發者使用的是 React、Vue 還是 Nerv，都可以同時運行在各種小程序和 H5 上。
早在 Taro 1.2 發布 時，我們就提供微信小程序轉 Taro 的功能，轉換后的微信小程序應用會變成一個多端應用。現在這個功能也完全兼容 Taro Next 的新架構，并且轉換后的代碼提供 React 和 Vue 兩種選項。和以前一樣，只需要在微信小程序項目根目錄執行命令 taro convert ：
$ taro convert選擇想要轉換后的框架即可：
在小程序中渲染 HTML 字符串通常會使用 wxparse 這樣的第三方庫，但 wxparse 的 API 復雜，拓展性弱，內部實現不準確，最重要的是現在已經停止了維護。比起 wxparse，Taro Next 的 HTML 字符串渲染提供以下的特性：
你可以訪問文檔渲染 HTML了解更多信息。
在 React 社區有一個著名的 CSS-in-JS 解決方案: styled-components。但遺憾的是，styled-components 使用 <style> 標簽來動態地控制樣式，在小程序端沒有類似的方案。但在 Taro 中我們可以通過 linaria 實現同樣的功能，linaria 主要提供以下特性：
其中零運行時對于打包體積有要求的小程序尤為重要。
你可以訪問文檔使用 CSS-in-JS了解更多信息。
當我們渲染數據量非常大的列表時，框架會根據數據嘗試全量渲染視圖，這就可能會產生性能問題導致視圖無法響應操作一段時間。為了解決這個問題，我們可以采用另一種方式：比起全量渲染數據生成的視圖，可以只渲染 當前可視區域(visable viewport) 的視圖，非可視區域的視圖在用戶滾動到可視區域再渲染：
正常渲染和虛擬列表的區別
在開發者工具的直觀效果
類似的技術在 Android 開發被稱之為 RecyclerView，在 React Native 叫做 VirtualizedList，我們統一命名為虛擬列表（Virtual List），這個組件現在內置在 Taro 中，在 React/Vue 或各種小程序及 H5 皆可使用：
import VirtualList from '@tarojs/components/virtual-list'你可以訪問文檔長列表渲染了解更多信息。
自 2.2 開始，Taro 引入了插件化機制，允許開發者通過編寫插件的方式來為 Taro 拓展更多功能或者為自身業務定制個性化功能。
該特性在 Taro next 中也可以使用了，官方提供了一個簡易的數據 mock 插件 @tarojs/plugin-mock 供大家參考。相關接口和介紹可以通過 官方文檔 -> 進階指南 -> 插件功能 找到。
在 Beta 版本發布之后，除了 React Native 端兼容這一特性在迭代，我們主要的精力投入到 Taro 本身的開源治理和項目治理中，為了保證重大特性更新和架構更改能夠順利推進，我們推出了 Taro 的 RFC 流程機制，這將讓 Taro 的進化更加透明公開，同時更多的社區參與勢必讓 Taro 更加完善。
期間，我們也對文檔進行了升級，新文檔相比舊版調整了部分目錄讓信息更合理，查找更方便，內容也更完善，同時也讓閱讀體驗更加友好。
RC 版本，幾乎就不會加入新的功能了，主要著重于除錯，而后我們將發布正式版。也就是說：
如果你更為關注小程序端及 H5 端的開發，現在就是加入 Taro Next 最好的時機！
感謝 skywalker512 大佬
感謝 cncolder 大佬
歡迎關注凹凸實驗室博客：aotu.io
或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
