jQuery:jQuery笔记1

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="huyiwei">
		<meta name="generator" content="HBuilder X">
		<title>jQuery笔记1title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js">script>
		
		
	head>
	<body>
		
		用户名:<input type="text" id="username" />
		<button id="btn1">
			js版本
		button>
		<button id="btn2">
			jQuery版本
		button>
		
		<script type="text/javascript">
			var btn1 = document.getElementById("btn1");
			btn1.onclick = function(){
				var username = document.getElementById("username").value;
				alert(username);
			}
			
			//绑定文档加载完成事件
			$(function(){
				$("#btn2").click(function(){
					//给按钮绑定事件
					//获取input框的值
					var user = $("#username").val();
					alert(user);
				});
			});
			
			//jQuery函数   jQuery对象
			//jQuery(function(){}S);
			//$(function(){}S);  //与上面的那个等价
			console.log($===jQuery);//true
			
			//$:可以做为函数使用,带括号去调用
			//可以作为对象使用,通过$.去调用内部函数

		script>
	body>
html>

你可能感兴趣的:(jQuery,jquery,javascript,前端)