By GokiSoft.com| 09:01 07/01/2022|
Học JS

[Video] Tìm hiểu jQuery căn bản - Khóa học lập trình HTML/CSS/JS 



<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery for beginer</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<style type="text/css">
		.container {
			width: 500px;
			background-color: orange;
			padding: 15px;
			margin: 0px auto;
			margin-bottom: 20px;
		}

		.container input {
			width: 100%;
			font-size: 16px;
			margin-bottom: 15px;
		}

		/*.search {
			display: flex;
		}*/

		.search input {
			margin-right: 10px;
			display: none;
			float: right;
			width: 80% !important;
		}

		.search svg {
			float: right;
		}
	</style>
</head>
<body>

<div class="container" style="height: 25px">
	<form method="get">
		<div class="search">
			<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16" style="color: black" onclick="toggleSearch()">
			  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
			</svg>
			<input required type="text" name="q" id="q_id" class="form-control" placeholder="Enter searching ...">
		</div>
	</form>
</div>

<div class="container">
	<form method="get" action="https://www.google.com.vn/search">
		<input required type="text" name="q" id="q_id" class="form-control" placeholder="Enter searching ...">
		<button type="submit">Search</button>
	</form>
</div>

<div class="container">
	<form method="post" onsubmit="return onSubmit()">
		<input required type="text" name="fullname" id="fullname_id" class="form-control" placeholder="Enter full name">
		<input required type="email" name="email_name" id="email_id" class="form-control" placeholder="Enter email">
		<button type="submit">Submit</button>
		<button type="reset">Reset</button>
	</form>
</div>

<script type="text/javascript">
	function toggleSearch() {
		console.log('testing ...')
		$('#q_id').slideToggle()
	}

	function onSubmit() {
		//Mapping Tags (HTML) <-> JS (jQuery)
		//selector: id, tag name, name, class name, any properties of tag
		// $('selector')
		//ID
		var fname = $('#fullname_id').val()
		console.log(fname)
		//Thay doi thuoc tinh cua tag, sua css cua tag
		$('#fullname_id').css('background-color', '#bef5f7')
		$('#fullname_id').css('font-size', '20px')

		//Tag name -> button -> gom 2 button
		$('button').css('font-size', '30px')
		$('button').css('color', 'red')

		//Class Name: form-control -> gom 2 input
		$('.form-control').css('color', 'red')

		//Name: email_name -> gom 1 input
		var email = $('[name=email_name]').val()
		console.log('email: ' + email)

		//JS
		// document.getElementById -> ID: fullname_id, email_id
		// document.getElementsByTagName -> Tag: form, input, button, div, .v.v.
		// document.getElementsByName -> Name: fullname, email_name
		// document.getElementsByClassName -> Class Name: form-control

		return false
	}
</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 đó