Câu hỏi trắc nghiệm Bootstrap & JQuery
-
Thế Giới Giải Mã
Bí ẩn nhân loại Leonardo Da Vinci
-
Thế Giới Giải Mã
Anh hùng thầm lặng Nikola Tesla
-
Thế Giới Giải Mã
Thần đèn Thomas Edison
-
Thế Giới Giải Mã
Người thôi miên Adolf Hitler
Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts
10 September 2021
09 November 2018
Tự động tìm kiếm ID trong Html bằng JQuery
$("div[id^='hk']").addClass("z-index-0 hiden");
// Tìm id có chứa đoạn chữ hk trong file Html
23 August 2017
Check Unicode Kanji Halfwidth and Fullwidth (Japanese)
Check Unicode Kanji
Check length chữ Kanji Fullsize Halfsize (Japanese)
Java
import java.io.UnsupportedEncodingException; /** * * @author lonelyCat */ public class demo { public static void main(String[] args) { String fullKana = "ナ"; String halfKana = "ﾅ"; String kanji = "使"; try { System.out.println("=====fullKana==Shift_JIS===" + fullKana.getBytes("Shift_JIS").length); System.out.println("=====halfKana==Shift_JIS===" + halfKana.getBytes("Shift_JIS").length); System.out.println("=====kanji==Shift_JIS===" + kanji.getBytes("Shift_JIS").length); System.out.println("=====fullKana==UTF8===" + fullKana.getBytes("UTF8").length); System.out.println("=====halfKana==UTF8===" + halfKana.getBytes("UTF8").length); System.out.println("=====kanji==UTF8===" + kanji.getBytes("UTF8").length); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } } }
run: =====fullKana==Shift_JIS===2 =====halfKana==Shift_JIS===1 =====kanji==Shift_JIS===2 =====fullKana==UTF8===3 =====halfKana==UTF8===3 =====kanji==UTF8===3 BUILD SUCCESSFUL (total time: 0 seconds)
// REFERENCE UNICODE TABLES:
// kanji_codes.unicode.shtml
// unicode.html
//
// TEST EDITOR:
// tools/regex
//
// UNICODE RANGE : DESCRIPTION
//
// [\u3000-\u303F] : punctuation
// [\u3040-\u309F] : hiragana
// [\u30A0-\u30FF] : katakana
// [\uFF00-\uFFEF] : Full-width roman characters and half-width katakana
// [\u4E00-\u9FAF] : CJK unifed ideographs - Common and uncommon kanji
//
// Non-Japanese punctuation/formatting characters commonly used in Japanese text
// 2605-2606 : Stars
// 2190-2195 : Arrows
// u203B : Weird asterisk thing- Japanese style punctuation:
[\u3000-\u303f] - Hiragana:
[\u3040-\u309f] - Katakana:
[\u30a0-\u30ff] - Roman characters + half-width katakana:
[\uff00-\uffef] - Kanji:
[\u4e00-\u9faf]|[\u3400-\u4dbf]
31 July 2017
LÀM SAO ĐỂ CHẠY JQUERY?
LÀM SAO ĐỂ CHẠY JQUERY?
JQuery 2017
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function init() {
if (false) {
window.alert("Update thành công!");
location.replace("https://www.google.com.vn");
} else {
window.alert("Error!");
}
}
$(document).ready(function () {
$("#loginBtn").click(function () {
if (confirm("Chúc mừng bạn login thành công!")) {
document.update.submit();
}
});
});
$(function () {
$("#submitBtn").click(function () {
if (confirm("Bạn có muốn update không?")) {
document.update.submit();
}
});
$("#cancelBtn").click(function () {
if (confirm("Bạn có chắc chắn thoát trang này không?")) {
//Quay ve dau?
}
});
});
</script>
</head>
<body onload="init()">
<form name="update" action="https://giai-ma.blogspot.com" method="GET">
<input type="button" value="Login" id="loginBtn"/>
<input type="button" value="OK" id="submitBtn"/>
<input type="button" value="Cancel" id="cancelBtn"/>
</form>
</div>
</html>
23 July 2017
JQuery: Tạo css background cho thẻ tr bằng thuộc tính tr:even với HTML + JQuery
JQuery tạo css background cho thẻ tr even
JavaScript 2017
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function () { $("tr:even").css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Web Page</h1> <table border="1"> <tr> <th>Company</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbköp</td> <td>Sweden</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> </table> </body> </html>
JQuery: Tạo css background cho thẻ tr bằng thuộc tính tr:odd với HTML + JQuery
JQuery tạo css background cho thẻ tr odd
JavaScript 2017
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function () { $("tr:odd").css("background-color", "red"); }); </script> </head> <body> <h1>Welcome to My Web Page</h1> <table border="1"> <tr> <th>Company</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbköp</td> <td>Sweden</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> </table> </body> </html>
JQuery: Set giá trị cho id với kiểu TEXT, HTML, VAL
JQuery Set text html val
JavaScript 2017
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function () { $("#btn1").click(function () { $("#test1").text("Hello world!"); }); $("#btn2").click(function () { $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function () { $("#test3").val("giai-ma.blogspot.com"); }); }); </script> </head> <body> <p id="test1">This is a paragraph.</p> <p id="test2">This is another paragraph.</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> <button id="btn1">Set Text</button> <button id="btn2">Set HTML</button> <button id="btn3">Set Value</button> </body> </html>
JQuery: Click button Toggle
JQuery Click Toggle
JavaScript 2017
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function () { $("button").click(function () { $("p").toggle(); }); }); </script> </head> <body> <button>Toggle between hiding and showing the paragraphs</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html>
JQuery: Chuyển động khối thẻ DIV bằng Animate & JQuery thay đổi tính chất CSS
JQuery Animate
JavaScript 2017
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
Run demo
22 July 2017
JQuery: onkeyup Bắt sự kiện nhập giá trị vào input không cần Enter với HTML + JQuery
Bắt sự kiện nhập giá trị vào input không cần Enter với HTML + JQuery
JQuery 2017
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, count = 1, row;
input = $("#soHoaDon").val();
table = document.getElementById("tb1");
tr = table.getElementsByTagName("tr");
row = table.rows.length;
// loop
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByClassName("tdHDMH1")[0];
if (td) {
if (td.innerHTML == input) {
$('#thueGTGT').val(tr[i].getElementsByClassName("tdHDMH1")[1].innerHTML);
} else {
count++;
}
}
}
if (count == row) {
if (input.length != 0) {
alert('Số hóa đơn này không tồn tại!');
$('#thueGTGT').val("");
} else {
$('#thueGTGT').val("");
}
}
}
</script>
</head>
<br/>
<body>
<h3>Nhập số hóa đơn ==> hiển thị Thuế VAT</h3>
Số hóa đơn: <input type="text" name="soHoaDon" id="soHoaDon" onkeyup="myFunction()" />
Thuế VAT: <input type="text" name="thueGTGT" id="thueGTGT" /><hr/>
<table id="tb1" border="1">
<tr>
<th>Số hóa đơn</th>
<th>Thuế VAT</th>
</tr>
<tr>
<td class="tdHDMH1">1</td>
<td class="tdHDMH1">1100</td>
</tr>
<tr>
<td class="tdHDMH1">2</td>
<td class="tdHDMH1">2200</td>
</tr>
<tr>
<td class="tdHDMH1">3</td>
<td class="tdHDMH1">3300</td>
</tr>
</table>
</body>
</html>
Run demo
JQuery: keypress focus event.keyCode Bắt sự kiện nhấn nút ENTER tìm kiếm giá trị trong bảng, lấy giá trị trên bảng với thẻ Input với HTML + JQuery
Sự kiện bấm nút Enter compare giá trị nhập với giá trị trong bảng Đưa con trỏ focus tới input khác
JQuery 2017
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<br/>
<body>
<h3>Nhập số hóa đơn bấm enter ==> không load lại form ==> Đưa con trỏ đến input số lượng</h3>
<form action="abc">
Số hóa đơn: <input type="text" id="soHoaDon" />
Số lượng: <input type="text" id="soLuong" />
Thuế VAT: <input type="text" id="thueGTGT" /><hr/>
</form>
<table id="tb1" border="1">
<tr>
<th>Số hóa đơn</th>
<th>Thuế VAT</th>
</tr>
<tr>
<td class="tdHDMH1">1</td>
<td class="tdHDMH1">1100</td>
</tr>
<tr>
<td class="tdHDMH1">2</td>
<td class="tdHDMH1">2200</td>
</tr>
<tr>
<td class="tdHDMH1">3</td>
<td class="tdHDMH1">3300</td>
</tr>
</table>
<!--Phải để code jquery chạy dưới cùng-->
<script type="text/javascript">
$('#soHoaDon').keypress(function (event) {
//Bắt sự kiện nhấn nút Enter
if (event.keyCode == 13 || event.which == 13) {
event.preventDefault(); //Không cho load form
var input, filter, table, tr, td, i, count = 1, row;//Khai báo biến
input = $("#soHoaDon").val();//Lấy value từ id
table = document.getElementById("tb1");
tr = table.getElementsByTagName("tr");
row = table.rows.length;//lấy số dòng của bảng
// loop
for (i = 0; i < tr.length; i++) {
//Dòng i lấy đối tượng với class tdHDMH1 thứ nhất trả về true | false
td = tr[i].getElementsByClassName("tdHDMH1")[0];
if (td) {
//Lấy giá trị thẻ td thứ nhất compare với input vừa nhập vào trả về true | false
if (td.innerHTML == input) {
//Set giá trị của td thứ hai vào id thueGTGT
$('#thueGTGT').val(tr[i].getElementsByClassName("tdHDMH1")[1].innerHTML);
//Chuyển con trỏ sang id soLuong
$('#soLuong').focus();
} else {
//Nếu giá trị nhập vào không có trong table thì đếm count + 1
count++;
}
}
}
//Lấy number count đếm được compare với length row lấy được ở trên
if (count == row) {
//Nếu nhập vào có chứa ký tự thì
if (input.length != 0) {
alert('Số hóa đơn này không tồn tại!');
$('#thueGTGT').val("");
} else {
//Nếu ko nhập gì reset id thueGTGT rỗng
$('#thueGTGT').val("");
}
}
}
});
</script>
</body>
</html>
Run demo
JQuery: keypress và focus Nhập value bấm enter tự động chuyển thẻ input thứ hai HTML + JQuery
Nhập bấm enter tự động chuyển thẻ input thứ hai
JQuery 2017
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<br/>
<body>
<h3>Nhập số hóa đơn bấm enter ==> không load lại form ==> Đưa con trỏ đến input thuế VAT</h3>
<form action="abc">
Số hóa đơn: <input type="text" name="soHoaDon" id="soHoaDon" onkeyup="myFunction()" />
Thuế VAT: <input type="text" name="thueGTGT" id="thueGTGT" /><hr/>
</form>
<script type="text/javascript">
$('#soHoaDon').keypress(function (event) {
if (event.keyCode == 13 || event.which == 13) {
$('#thueGTGT').focus();
event.preventDefault(); //preventDefault() Không load lại form
}
});
</script>
</body>
</html>
JQuery: Click để lấy giá trị trên table và set màu background cho các lần click HTML + JQuery
Click để lấy giá trị trên table & set background
JQuery 2017
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<!--Có thể để code jquery chạy trên cùng-->
<script type="text/javascript">
$(function () {
$('#tb1 tr').click(function (e) {
//Backgroud Click row
$('.onRow').click(function () {
$(this).parents('#tb1').find('.onRow').each(function (index, element) {
$(element).removeClass('onColor');
});
$(this).addClass('onColor');
});
//Get values row
var soHoaDon = $(this).closest('.onRow').find('td:nth-child(1)').text();
var thueGTGT = $(this).closest('.onRow').find('td:nth-child(2)').text();
$('#choose').click(function (e) {
/*e.preventDefault();*/ //==> preventDefault() không load lại form nếu làm việc với form
$('#soHoaDon').val(soHoaDon);
$('#thueGTGT').val(thueGTGT);
});
});
});
</script>
<style>
.onColor{
background: red;
}
</style>
</head>
<br/>
<body>
<h3>Chọn row trên table ==> bấm OK ==> Lấy giá trị từ bảng hiển thị lên input</h3>
<form action="abc">
Số hóa đơn: <input type="text" id="soHoaDon"/>
Thuế VAT: <input type="text" id="thueGTGT"/><hr/>
</form>
<table id="tb1" border="1">
<tr>
<th>Số hóa đơn</th>
<th>Thuế VAT</th>
</tr>
<tr class="onRow">
<td>1</td>
<td>1100</td>
</tr>
<tr class="onRow">
<td>2</td>
<td>2200</td>
</tr>
<tr class="onRow">
<td>3</td>
<td>3300</td>
</tr>
</table>
<input type="button" id="choose" value="OK">
</body>
</html>
Run demo
JQuery: Lấy giá trị của từng dòng trên TABLE bằng Click Event JQuery
Click để lấy giá trị trên table
JQuery 2017
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<!--Có thể để code jquery chạy trên cùng-->
<script type="text/javascript">
$(function () {
$('#tb1 tr').click(function (e) {
var soHoaDon = $(this).closest('.onRow').find('td:nth-child(1)').text();
var thueGTGT = $(this).closest('.onRow').find('td:nth-child(2)').text();
$('#choose').click(function (e) {
/*e.preventDefault();*/
$('#soHoaDon').val(soHoaDon);
$('#thueGTGT').val(thueGTGT);
});
});
});
</script>
</head>
<br/>
<body>
<h3>Chọn row trên table ==> bấm OK ==> Lấy giá trị từ bảng hiển thị lên input</h3>
<form action="abc">
Số hóa đơn: <input type="text" id="soHoaDon"/>
Thuế VAT: <input type="text" id="thueGTGT"/><hr/>
</form>
<table id="tb1" border="1">
<tr>
<th>Số hóa đơn</th>
<th>Thuế VAT</th>
</tr>
<tr class="onRow">
<td>1</td>
<td>1100</td>
</tr>
<tr class="onRow">
<td>2</td>
<td>2200</td>
</tr>
<tr class="onRow">
<td>3</td>
<td>3300</td>
</tr>
</table>
<input type="button" id="choose" value="OK">
</body>
</html>
Run demo
02 May 2017
jQuery: Validate form đơn giản nhất với jQuery
Validate thường với jQuery
jQuery 2017
$(document).ready(function() {
$("#save").on('click', function() {
// BƯỚC 1: Lấy dữ liệu từ form
var soHoaDon = $('#soHoaDon').val();
var ngayHoaDon = $('#ngayHoaDon').val();
var chietKhau = $('#chietKhau').val();
var thueGTGT = $('#thueGTGT').val();
var thanhTien = $('#thanhTien').val();
// BƯỚC 2: Validate dữ liệu
var flag = true;
if (soHoaDon.length <= 0){
$('#message').text('');
$('#error').text('Số hóa đơn không được để trống!');
flag = false;
return flag;
}
else{
$('#error').text('');
}
if (ngayHoaDon.length <= 0){
$('#message').text('');
$('#error').text('Ngày hóa đơn không được để trống!');
flag = false;
return flag;
}
else{
$('#error').text('');
}
if (chietKhau.length <= 0){
$('#message').text('');
$('#error').text('Chiết khấu không được để trống!');
flag = false;
return flag;
}
else{
$('#error').text('');
}
if (thueGTGT.length <= 0){
$('#message').text('');
$('#error').text('Thuế GTGT không được để trống');
flag = false;
return flag;
}
else{
$('#error').text('');
}
if (thanhTien.length <= 0){
$('#message').text('');
$('#error').text('Thành tiền không được để trống');
flag = false;
return flag;
}
else{
$('#error').text('');
}
//Nếu flag là true thì cho phép là gì đó trong biếu thức logic này
if(flag){
addHoaDon();//Gọi hàm thực thi nếu falg true
}
});
});
html
jQuery 2017
//CSS định dạng màu cho id hiển thị
#message{
text-align: center;
color: blue;
}
#error{
text-align: center;
color: red;
}
//Nội dung hiển thị lên đây
<p id="message"></p><p id="error"></p>
//Form nhập
<form action="" method="" >
<input type="text" id="soHoaDon" placeholder="Nhập số hóa đơn"/>
....
<input type="button" id="save" value="luu">
</form>
