jQuery基础（一）

最新推荐文章于 2024-09-11 17:55:04 发布

丿tgeuuy

最新推荐文章于 2024-09-11 17:55:04 发布

阅读量124

点赞数 2

分类专栏： Web学习

本文链接：https://blog.csdn.net/zhengjue3343/article/details/88244106

版权

Web学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文深入讲解了使用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>