Những ngày gần đây nhiều người đang thảo luận về Vanilla JS một khuôn khổ KB ZERO, nó là cơ bản đồng bằng / default JavaScript như kem vani (hương vị mặc định) và nó không phải là thực sự là một thư viện hay một khuôn khổ. Ngày nay phương pháp JavaScript DOM đã được cải thiện rất nhiều, nó là rất mạnh mẽ trong hoạt động tốc độ mỗi giây. Vì vậy mà bạn không cần phải sử dụng bất kỳ thư viện bên ngoài như Jquery vv .. Nếu bạn đang làm việc cho đơn giản ứng dụng điện thoại di động hoặc web, tôi đề nghị sử dụng sau các kịch bản JavaScript đơn giản.
Thuật ngữ Vanilla ice đề cập đến JavaScript nguyên hay đồng bằng.
Bắt đầu Vanilla - Các tài liệu đã sẵn sàng tổ chức sự kiện
Mã chạy sau khi trình duyệt kết thúc việc tải các tài liệu, bao gồm cả hình ảnh và quảng cáo banner.
document.addEventListener('DOMContentLoaded', function()
{
//JavaScript methods go here.
});
Nhấn tổ chức sự kiện
Có đồng bằng mã JavaScript, đây linkID là tên ID của thẻ neo. Bạn có thể ngăn chặn các hành vi mặc định bằng cách gọi e.preventDefault ();
document.addEventListener('DOMContentLoaded', function()
{
//Click Event Code
document.querySelector("#linkID").addEventListener("click", function(e)
{
alert("Click event triggered");
e.preventDefault();
});
});
//HTML Code
<a href="#" id="linkID">Click Event</a>
Hide & Show Div
Các div Khối dần biến mất khi nhấp hide Link.
document.querySelector("#hideLink").addEventListener("click", function()
{
document.getElementById('divBlock').style.display = 'none'
});
document.querySelector("#showLink").addEventListener("click", function()
{
document.getElementById('divBlock').style.display = ''
});
//HTML Code
<a href="#" id="hideLink">Hide</a> --- <a href="#" id="showLink">Show</a>
<div id="divBlock">
</div>
Thêm & Lớp
Áp dụng và loại bỏ một Class HTML.
CSS Mã
Bạn phải bao gồm sau mã CSS trong các HEAD tag của tài liệu :
.hidden{display:none}
Bạn có thể sử dụng đoạn mã sau trong hàm HTMLElement.classList, điều này cho phép để thêm hoặc loại bỏ các lớp của một phần tử.
document.getElementById('divBlock').classList.add('hidden');
document.getElementById('divBlock').classList.remove('hidden');
//HTML Code
<a href="#" id="hideLink">Hide</a> --- <a href="#" id="showLink">Show</a>
<div id="divBlock">
</div>
Chuyển đổi lớp :
Phương pháp này chỉ đơn giản là bật tắt khả năng hiển thị của các yếu tố, ở đây các mã được thêm và loại bỏ các lớp ẩn.
document.querySelector("#toggle").addEventListener("click", function()
{
document.getElementById('divBlock').classList.toggle('hidden');
});
//HTML Code
<a href="#" id="hideLink">Toggle</a>
<div id="divBlock">
</div>
Chuột Trên & Chuột Out
Thay đổi hành vi div dựa trên những khoảnh khắc chuột.
Mã HTML
<div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div>
JavaScript
Lưới là tên class của thẻ div. Sử dụng gọi các phần tử DOM chọn này :
//MouseOver
[].forEach.call(document.querySelectorAll(".grid"), function(el) {
el.addEventListener("mouseover", function() {
this.classList.add('hover');
});
});
//MouseOut
[].forEach.call(document.querySelectorAll(".grid"), function(el) {
el.addEventListener("mouseout", function() {
this.classList.remove('hover');
});
});
CSS Code :
.grid
{
width:180px; height: 100px;
background-color:#333333;display: block;cursor:pointer;
float:left;margin-right: 10px
}
.hover
{
background-color: #cc0000 !important
}
POST Update và Delete Records với Vanilla JS
Một dự án trình diễn đơn giản, bạn ngay lập tức có thể tải lên và xóa nguồn tin mà không làm mới trang.
Mã HTML
Cập nhật hộp với kết quả nguồn tin :
<textarea id="updateText"></textarea> <input type="button" id="updateButton" value="POST" /> <div id="newsFeed"> //Record One <div class="feed"> The Wall Script http://thewallscript.com <a href="#" class="delete">X</a> </div> //Record Two <div class="feed"> 9lessons Blog http://9lessons.info <a href="#" class="delete">X</a> </div> ........ ........ ........ </div>
Ajax viết :
Chứa mã JavaScript querySelector ( "# updateButton") addEventListener ("click", function () {} - updateButton là tên ID của nút Sử dụng document.getElementById ("UPDATETEXT") giá trị;... Gọi giá trị cập nhật textbox tôi. đã được đơn giản hóa một chức năng gọi là vanillaGetPost, bạn sẽ tìm thấy điều này trong vanilla Functions.js
//Update content.
var newsFeed=document.getElementById('newsFeed');
document.querySelector("#updateButton").addEventListener("click", function()
{
var p = document.createElement("div"),
newsFeed = document.getElementById("newsFeed"),
content = document.getElementById("updateText").value;
var html ;
var data='update='+content;
vanillaGetPost('POST', 'post.php', data, function(data)
{
var updateText= document.getElementById("updateText");
html='<a class="delete" href="#" onclick="deleteButton(this)" title="Delete">X</a>';
p.innerHTML = data+html; //User update with delete button HTML code.
newsFeed.insertBefore(p, newsFeed.firstChild);
vanillaFadeEffect('fadeIn',newsFeed.firstChild, 1000);
updateText.value='';
updateText.focus();
});
});
post.php
Bạn phải viết kết nối cơ sở dữ liệu để chèn cập nhật.
<?php
if($_POST['update'])
{
echo htmlentities($_POST['update']);
// Write database connection here.
}
?>
Xóa ghi :
Sử dụng this.parentNode gọi mẹ DIV DOM và áp dụng hiệu ứng fadeOut
//Delete click event
[].forEach.call(document.querySelectorAll(".delete"), function(el)
{
el.addEventListener("click", function() {
var parent = this.parentNode;
vanillaFadeEffect('fadeOut',parent, 1000); //vanillaFunctions.js
});
});
Mã JavaScript :
Bạn có thể bao gồm tất cả các mã ở đây.
<script src="js/vanillaFunctions.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function()
{
//Textarea focus
window.onload = function() {
document.getElementById("updateText").focus();
};
var newsFeed=document.getElementById('newsFeed');
//Delete click event
.......
.......
.......
//Update content.
.......
.......
.......
});
function deleteButton(id)
{
var parent = id.parentNode;
//Delete Ajax
vanillaFadeEffect('fadeOut',parent, 1000);
}
</script>
Chức năng Ajax cho POST và GET phương pháp.
function vanillaGetPost(type, url, data, success)
{
if(type=='GET')
{
url=url+'?'+data;
data='';
}
var r = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
r.open(type, url, true);
r.onreadystatechange = function () {
if (r.readyState > 3 && r.status === 200){
success(r.responseText);
}
};
r.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
r.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
r.send(data);
return r;
}
Vani Fade Effect Chức năng
FadeIn và fadeOut hiệu ứng hình ảnh động.
function vanillaFadeEffect(effect, element, speed)
{
var A=0;
if(effect === 'fadeOut')
A=1;
if ( ! element.style.opacity)
element.style.opacity = parseInt(A);
var start = null;
window.requestAnimationFrame(function animate(timestamp) {
start = start || timestamp;
var progress = timestamp - start;
if(effect === 'fadeOut')
element.style.opacity = 1 - progress / speed;
else
element.style.opacity = progress / speed;
if (progress >= speed) {
if(effect === 'fadeOut')
element.style.display = 'none';
else
element.style.display = '';
}
else
{
window.requestAnimationFrame(animate);
}
});
}
