- Học Lập Trình Từ A - Z (HTML/CSS/JS - Bootstrap/JQuery - AngularJS - PHP/Laravel - Java v.v)
- Đăng Nhập
<!DOCTYPE html>
<html>
<head>
<title>jQuery tutorial</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- framework & library -->
</head>
<body onload="viettenhamlagicungdc()">
<div class="container">
<div class="card">
<div class="card-header bg-info">
Input User Information
</div>
<div class="card-body">
<div class="form-group mb-2">
<label>User Name: </label>
<input type="text" class="form-control" name="username" id="username_id" style="color: red; font-size: 12px;" />
</div>
<div class="form-group mb-2">
<label>Email: </label>
<input type="email" class="form-control" name="email" id="email_id" />
</div>
<div class="form-group mb-2">
<label>Address: </label>
<input type="text" class="form-control" name="address" id="address_id" />
</div>
<div class="form-group">
<button class="btn btn-success">Add User</button>
<button class="btn btn-danger">Clear Data</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function viettenhamlagicungdc() {
var fnameTag = document.getElementById('username_id')
fnameTag.value = "TRAN VAN DIEP"
console.log(fnameTag.type)
console.log(fnameTag.name)
console.log(fnameTag.id)
console.log(fnameTag.style.color)
fnameTag.style.color = "blue"
fnameTag.style.fontSize = '100px'
// fnameTag.type = "number"
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>jQuery tutorial</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- framework & library -->
</head>
<body>
<button class="btn btn-success">Add User First</button>
<div class="container">
<div class="card">
<div class="card-header bg-info">
Input User Information
</div>
<div class="card-body">
<div class="form-group mb-2">
<label>User Name: </label>
<input type="text" class="form-control" name="username" id="username_id" style="color: red; font-size: 12px;" />
</div>
<div class="form-group mb-2">
<label>Email: </label>
<input type="email" class="form-control" name="email" id="email_id" />
</div>
<div class="form-group mb-2">
<label>Address: </label>
<input type="text" class="form-control" name="address" id="address_id" />
</div>
<div class="form-group">
<button class="btn btn-success" id="add-id">Add User</button>
<button class="btn btn-danger" id="clear-id">Clear Data</button>
</div>
</div>
</div>
<div id="test"></div>
<div class="card">
<div class="card-header bg-info">
Display Users
</div>
<div class="card-body">
<table class="table table-bordered">
<thead>
<tr>
<th>User Name</th>
<th>Email</th>
<th>Address</th>
<th style="width: 120px"></th>
<th style="width: 200px"></th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
var count = 0
$(function() {
// //Khi load xong website -> thuc thi logic o day
// var fnameTag = document.getElementById('username_id')
//Khai niem selector: tag name, id, name, class
//id: username_id => jQuery
$('#username_id').val('TRAN VAN DIEP')
console.log($('#username_id').val())
console.log($('#username_id').attr('name'))
console.log($('#username_id').attr('id'))
console.log($('#username_id').attr('class'))
// $('#username_id').attr('name', 'username-edit')
$('#username_id').css('color', 'blue')
$('#username_id').css('font-size', '50px')
$('input').val('Xin Chao')
// $('.btn').css('color', 'yellow')
// $('div.btn').css('color', 'yellow')
// fnameTag.value = "TRAN VAN DIEP"
// console.log(fnameTag.type)
// console.log(fnameTag.name)
// console.log(fnameTag.id)
// console.log(fnameTag.style.color)
// fnameTag.style.color = "blue"
// fnameTag.style.fontSize = '100px'
// // fnameTag.type = "number"
//Xu ly event
$('#add-id').click(function() {
// console.log('testing ...')
// document.getElementById('test').innerHTML += 'test';
// $('#test').append(++count + 'test<br/>')
// $('#test').prepend(++count + 'test<br/>')
// $('#test').after(++count + 'test<br/>')
// $('#test').before(++count + 'test<br/>')
$('#result').append(`<tr>
<td>${$('#username_id').val()}</td>
<td>${$('#email_id').val()}</td>
<td>${$('#address_id').val()}</td>
<td>
<button class="btn btn-warning">Edit User</button>
</td>
<td>
<button class="btn btn-danger">Remove User</button>
</td>
</tr>`)
})
})
function showData() {
console.log('34234234234234234')
}
</script>
</body>
</html>Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.
Website: https://ziczacvn.com
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website