IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS [Share Code] Tìm hiểu JS & jQuery - C2209I

[Share Code] Tìm hiểu JS & jQuery - C2209I

by GokiSoft.com - 14:51 07/06/2023 1,196 Lượt Xem

#vidu.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 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>

#vidu2.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>

Bình luận



Tài Liệu Tham Khảo

Đã sao chép!!!