jQuery基础(一)

本文深入讲解了使用jQuery进行DOM操作的基础知识,包括如何通过jQuery获取元素、DOM与jQuery对象之间的转换、页面加载事件的处理、事件绑定及常用事件的使用。通过实例演示,帮助读者快速掌握jQuery的基本用法。
摘要由CSDN通过智能技术生成

01-获得jQuery对象

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
    </head>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <body>
	    <input type="text" id="username" value="jack"/>
    </body>
    <script>
    	//通过原生js
	    //alert(document.getElementById("username").value)
	
	    //通过jquery 获取jquery对象
	    //var $username=$("#username");
	    var $username=jQuery("#username");
	    alert($username.val());
    </script>
</html>

02-DOM和jQuery对象的转换


<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
	<script src="../js/jquery-1.11.0.min.js"></script>
    <body>
	    <input type="text" id="username" value="jack"/>
    </body>
	    <script>
		    //dom >>>>jquery   $(dom对象)
	    	//1.获取dom对象
	    	//var obj=document.getElementById("username");
	    	//2.转化
	    	//var $user=$(obj);
	    	//alert($user.val());
	    	//alert($user.value);错误的
		
    		//jquery>>>>dom
    		//1.获取jquery独享
	    	var $u=$("#username");
	    	//2.转换
	    	
            //2.1 方式1 
	    	//var obj=$u.get(0);
		
	    	//2.2 方式2
	    	var obj = $u[0];
	    	alert(obj.value);
		
		
	    </script>
</html>

03-页面加载

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			onload=function(){
				alert(12);
			}
			
			/*onload=function(){
				alert(34);
			}*/
			
			$(function(){
				alert("abc");
			})
			
			$(function(){
				alert("ab1c");
			})
			
			$(function(){
				alert("ab3c");
			})
		</script>
	</head>
	<body>
		
	</body>
</html>

04-事件绑定

 

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//派发事件
				$("#bId").click(function(){
					alert(123)
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="bId" value="点击查看" />
	</body>
</html>

05-常见事件

<html>
	<head>
		<meta charset="UTF-8">
		<title>常见事件</title>
		<style type="text/css">
			#e02{
				border: 1px solid #000000;
	  			height: 200px;
	 			width: 200px;
			}
			
		</style>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#e01").blur(function(){
					$("#textMsg").html("文本框失去焦点:blur");
				}).focus(function(){
					$("#textMsg").html("文本框获得焦点:focus");
				}).keydown(function(){
					$("#textMsg").append("键盘按下:keydown");
				}).keypress(function(event){
					$("#textMsg").append("键盘按:keypress");
				}).keyup(function(){
					$("#textMsg").append("键盘弹起:keyup");
				});
				
				var i = 0;
				$("#e02").mouseover(function(){
					$("#divMsg").html("鼠标移上:mouseover");
				}).mousemove(function(){
					//$("#divMsg").html("鼠标移动:mousemove , " + i++ );
				}).mouseout(function(){
					$("#divMsg").html("鼠标移出:mouseout");
				}).mousedown(function(){
					$("#divMsg").html("鼠标按下:mousedown");
				}).mouseup(function(){
					$("#divMsg").html("鼠标弹起:mouseup");
				});
				
				$("#e03").click(function(){
					$("#buttonMsg").html("单击:click");
				}).dblclick(function(){
					$("#buttonMsg").html("双击:dblclick");
				});
				
			});
			
			
			
			
			
		</script>
		
	</head>
	<body>
		<input id="e01" type="text" /><span id="textMsg"></span> <br/>
		<hr/>
		<div id="e02" ></div><span id="divMsg"></span> <br/>
		<hr/>
		<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
	</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值