整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
VvvebJs是一個開源的網頁拖拽自動生成的JavaScript庫，你可以以簡單拖拽的方式生成自己需要的網頁樣式，內置jquery和Bootstrap，你可以拖拽相關的組件進行網頁的構建，非常的方便，而且可以實時修改代碼，功能豐富，使用簡單，界面友好，特別適合一些專注于展示的網頁設計，需要的朋友不可錯過！
https://github.com/givanz/VvvebJs
默認情況下，編輯器附帶Bootstrap 4和Widgets組件，可以使用任何類型的組件和輸入進行擴展。
如下代碼：
<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>
<script src="libs/builder/components-widgets.js"></script>
<script>
$(document).ready(function()
{
Vvveb.Builder.init('demo/index.html', function() {
//load code after page is loaded here
Vvveb.Gui.init();
});
});
</script>
要初始化編輯器，調用Vvveb.Builder.init。第一個參數是要加載以進行編輯的URL，它必須位于相同的子域中才能進行編輯。第二個參數是頁面加載完成時調用的函數，默認情況下調用編輯器Gui.init();
Component Group是一個組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對象僅用于在編輯器左側面板中對組件進行分組。例如，Widgets組件組只有兩個組件視頻和地圖，并被定義為如下
Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];
Component是一個對象，它提供可以在畫布上放置的html以及在選擇組件時可以編輯的屬性，例如Video Component，具有Url和Target屬性的html鏈接Component定義為：
Vvveb.Components.extend("_base", "html/link", {
nodes: ["a"],
name: "Link",
properties: [{
name: "Url",
key: "href",
htmlAttr: "href",
inputtype: LinkInput
}, {
name: "Target",
key: "target",
htmlAttr: "target",
inputtype: TextInput
}]
});
在Component屬性集合中使用Input對象來編輯屬性，例如文本輸入，選擇，顏色，網格行等。例如，TextInput擴展Input對象并定義為：
var TextInput = $.extend({}, Input, {
events: {
"keyup": ['onChange', 'input'],
},
setValue: function(value) {
$('input', this.element).val(value);
},
init: function(data) {
return this.render("textinput", data);
},
}
);
輸入還需要一個在編輯器html（在editor.html中）定義為<script>標簽的模板，其id為vvveb-input-inputname，例如對于文本輸入為vvveb-input-textinput，定義：
<script id="vvveb-input-textinput" type="text/html">
<div>
<input name="{%=key%}" type="text" class="form-control"/>
</div>
</script>
以上是借助瀏覽器翻譯工具，對官網的文檔進行簡單的翻譯，可能會有些不夠準確的地方，感興趣的小伙伴可以直接查看相關文檔！
VvvebJs是一個非常強大的網頁可視化生成構建工具，讓不懂網頁設計的小伙伴們也能夠通過拖拽來生成美觀大方的網頁出來，讓設計網頁就像設計圖片一樣，VvvebJs特別適合展示型網頁，甚至可以不需要代碼就能完成一項復雜的網頁設計，總體來說，VvvebJs是一個值得嘗試的工具！
Query創建Dom元素
代碼如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2 "http://www.w3.org/TR/html4/loose.dtd">3 <html>4 <head>5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">6 <title>jQuery創建Dom元素 - Liehuo.Net</title>78 <script src="jquery-1.4.2.min.js" type="text/javascript"></script>9 <script language="javascript" type="text/javascript">10 $(function(){11 var oNewp = $("<p>我測試成功了</P>");12 oNewp.insertAfter("#target");13 });14 </script>151617 </head>1819 <body>20 <p id="target">21 網絡學院 www.wfuyu.com 22 </p>23 </body>24 </html>25
需要注意的幾點：
$(fuction(){
})此句就相當于window.onload函數，缺一不可。
總結：時刻要細心。
JQuery 是將 JS 的一些代碼塊進行封裝，方便使用。
1.JQ的引入
（1）link 導入
先進入 https://www.bootcdn.cn/ 網站進行查找，找到后復制到一個 js 中，進行引用。
（2）直接復制標簽
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>1. JQ 獲取元素
$('.p1').eq(1).text('今天天氣真好')
$('.p1').html('<h>天氣真熱</h>')2.JS 轉 JQ
$(ap1).text('天好冷')3. JQ 轉 JS
var ap3 = $('.p1')
ap3[0].innerText = '金地是'
ap3.get(1).innerText = '多少金幣' //get() 傳下標4. JQ JS 都可用
$('ul li').each(function (){
console.log($(this).text());
// console.log(this.innerText);
console.log($(this).index()); //jq 獲取下標
})<button>添加</button>
<button>刪除</button>1. 添加 class
//添加class
$("button").eq(0).click(function (){
$("div").addClass("div1")
})2. 刪除 class
（1）removeClass
//刪除class
$("button").eq(1).click(function (){
$("div").removeClass("div1")
})（2）removeAttr
//刪除屬性和屬性值
$("button").eq(1).click(function (){
$("div").removeAttr("class")3. 修改 class
（1）toggleclass
//無則增 有則增
$("button").eq(0).click(function (){
$("div").toggleClass("div1")（2）attr
//無則增 有則改
$("button").eq(0).click(function (){
$("div").attr("class","div1")
$("div").attr("class","div2")
})4.獲取 value
$("input").eq(0).val('666');1. 獲取盒子寬高
（1）獲取寬
console.log($("div").width());（2）獲取內邊框加寬
$("div").innerWidth()（3）獲取內邊框，邊框外邊距和寬的寬度
$("div").outerWidth()2. JQ 修改 CSS
// jq修改css
$("div").css("background","blue")
$("div").css({
"background":"pink",
"width":"150px"
})3.定位元素（父級元素一定要有定位）
$(".div2").position()4.定位瀏覽器窗口
$(".div2").offset()1.單擊事件
$("div").click(function (){
console.log(1);
})2.雙擊事件
$("div").dblclick(function (){
console.log(2);
})3.劃入事件
$("div").mouseenter(function (){
console.log(3);
})4.劃出事件
$("div").mouseout(function (){
console.log(4);
})5.劃入劃出事件
$("div").hover(
function (){
console.log(3);
},function (){
console.log(5);
}
)6.綁定事件
$("button").click(function (){
$("p").on("click",function (){
$("p").css('background','red')
})
})7.綁定多個事件
$("p").on({
"mouseenter":function (){
$(this).css('background','yellow')
},
"mouseout":function (){
$(this).css('background','blue')
}
})8.清除事件
$("button").click(function (){
$("p").off()
})1. 隱藏
$("button").eq(0).click(function (){
// $("div").hide(1000)
$("div").slideUp(1000)
})2.顯示
$("button").eq(1).click(function (){
$("div").show(1000)
// $("div").slideDown(1000)
})3.取反
$("button").eq(2).click(function (){
$("div").slideToggle(1000)
// $("div").slideDown(1000)
})4.淡出事件
$("button").eq(3).click(function (){
$("div").fadeOut(1000)
})5.淡入事件
$("button").eq(4).click(function (){
$("div").fadeIn(1000)
})6.淡入淡出取反事件
$("button").eq(5).click(function (){
$("div").fadeToggle(1000)
})7.動畫效果
$("button").eq(6).click(function (){
$("div").delay(100).animate({
"width":"130px",
"height":"130px",
"top":"50px",
"left":"20px",
})
})8.停止
$("button").eq(7).click(function (){
$("div").stop(1000)
})附（今日份學習）：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
