By GokiSoft.com| 14:51 07/06/2023|
Học JS

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

#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>
Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó