JQuery的简单入门(一)

最新推荐文章于 2022-05-02 06:27:21 发布

ordinaryday

最新推荐文章于 2022-05-02 06:27:21 发布

阅读量168

点赞数

分类专栏： JQuery 文章标签： JQuery

本文链接：https://blog.csdn.net/jsaber/article/details/79146559

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery 是一个JavaScript的库

jQuery的优势

  ►轻量级（Lightweight） 

  ►强大的选择器 

  ►出色的DOM操作封装 

  ►可靠的事件处理机制 

  ►出色的浏览器兼容性 

jQuery的使用

►下载：http://jquery.com提供了最新的jQuery框架下载。通常只需下载最小的jQuery包（Minified）即可。

目前最新的版本jquery-1.3.2.min.js文件只有55.9 KB

   ►引用： 
 

    ►<script src="jquery.min.js" ></script> 
  
 将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。

jQuery对象

  ►jQuery对象就是通过 jQuery包装 DOM 对象后产生的对象 

  ►jQuery对象是 jQuery独有的. 如果一个对象是 jQuery对象, 那么它就可以使用 jQuery里的方法: $(“#tab”).html(); 

  ►jQuery对象无法使用DOM 对象的任何方法, 同样 DOM对象也不能使用jQuery里的任何方法 

  ►建议约定：如果获取的是jQuery对象, 那么要在变量前面加上 $.   

  §var$variable = jQuery对象 

  §var variable = DOM 对象 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Obj.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	 <script type="text/javascript" src="jquery-3.1.0.js"></script>
	<script type="text/javascript">
		 $(function(){
		 	//dom对象 标签对象(button anchor等) window document 对象 javascript语言中的
		 	var body=document.body;
		 	alert(body);
		 	//jquery对象
		 	//css选择器 jQuery 选择器找到满足选择器条件的dom元素相关的jQuery 对象(jQuery对象其实就是一个包含dom对象的数组)
		 	//jQuery 对象不能调用js的方法 和属性 只能调用jQuery内置的属性和方法
		 	var jqueryobj= $("#s");
		 	alert(jqueryobj.val());
		 	//如果需要调用js的属性和方法需要将jQuery对象转换成dom对象
		 	var domobj=jqueryobj[0];
		 	alert(domobj.value);
		 	
		 	//dom对象转jQuery对象
		 	var d=document.getElementById("e");
		 	var t=$(d);
		 	alert(t.val());
		 	
		 })
	
	</script>
  </head>
  <body>
    <input type="text" id="s" value="233"/>
    <input type="text" id="e" value="emmm"/>
  </body>
</html>

jQuery对象转成DOM 对象

►jQuery对象不能使用DOM 中的方法, 但如果 jQuery没有封装想要的方法, 不得不使用 DOM方法的时候, 有如下两种处

理方法:

►(1) jQuery对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.

►$("#msg")[0]

►(2) 使用 jQuery中的get(index) 方法得到相应的DOM 对象

►$("#msg").get(0)

DOM 对象转成jQuery对象

►对于一个DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery对象就是通过jQuery包装 DOM对象后产生的对象), 就可以

获得一个 jQuery对象. 例如：

►$(document.getElementById(“msg”))

►转换后就可以使用jQuery中的方法了

JQuery的使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>hello.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	
	<script type="text/javascript">
	//$是jQuery的入口 其实就是一个函数 这个函数可以传入不同类型参数 匿名函数 字符串
	//传入的函数 ==window.onload
	// $(function())==var a=funtion(),$(a)
		$(function(){
			alert("你好");
		});
	</script>
  </head>
  <body>
    	<input type="text">
  </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>eq.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	
	<script type="text/javascript">
		
		$(function(){
			var j=$("input");
			//eq是获取选择器中多个jQuery对象中 索引指定的那个
			alert(j.eq(1).val());
			//get返回的是dom对象
			alert(j.get(0).value);
		})
		
	</script>
  </head>
  <body>
  	<input type="text" value="user">
  	<input type="password" value="password">
  </body>
</html>

奇偶行变色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>case.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		$(function(){
			$("tr:odd").css("background","red");
			$("tr:even").not("[type='d']").css("background","green");
		})
	</script>
  </head>
  
  <body>
  	<table>
  		<tr type="d"><th>用户姓名</th><th>用户性别</th><th>用户年龄</th></tr>
  		<tr><td>无名</td><td>男</td><td>100</td></tr>
  		<tr><td>小明</td><td>男</td><td>不明</td></tr>
  		<tr><td>柯南</td><td>男</td><td>万年小学生</td></tr>
  	</table>
  </body>
</html>

JQuery的设值和取值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>css.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
    	.myciv{
			color:red;
		}
    </style>
	<script type="text/javascript">
		
		$(function(){
			//jquery 方法的特点是一般带有一个参数 表示获取该参数的值 两个参数 表示设置值
			alert($("input").attr("type"));
			//attr修改dom对象属性值
			alert($("input").attr("type","password"));
			//addClass添加内部样式到dom元素 class="";
			$("#mydiv").addClass("myciv");
			$("#mydiv").removeClass("myciv");
			//css(键，值)添加行内样式表 style="";
			$("#mydiv").css("color","green");
			//val()获取或者设置文本框的值
			$("input").val("666");
			alert($("#mydiv").html());
			$("#mydiv").html("<font color=red>这是div</font>");
		})		
	</script>
  </head>
  <body>
  	<input type="text">
  	<div id="mydiv">
  		我的div
  	</div>
  </body>
</html>

追加与删除

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>case.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		$(function(){
			$("table").prepend("<tr><td>小明</td><td>男</td><td>不明</td></tr>");
		})
		function save(){
			$("tr[type='data']").remove();
			$("table").append("<tr type=data><td>柯南</td><td>男</td><td>万年小学生</td></tr>");
		}
	</script>
  </head>
  <body>
  	<table>
  		<tr type="d"><th>用户姓名</th><th>用户性别</th><th>用户年龄</th></tr>
  	</table>
  	<button οnclick="save()">添加</button>
  	  
  </body>
</html>

聚焦和失去焦点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>wo.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		$(function(){
			//失去焦点
			$("#us").blur(function(){
				var ustext=$("#us").val();
				if(ustext==null||ustext==""){
					$("#us").val("请输入邮箱地址")
				}
			});
			//聚焦
			$("#us").focus(function(){
  				var ustext = $("#us").val();
  				if(ustext=="请输入邮箱地址"){
  					$("#us").val("");
	  			}
  			});
				//失去焦点
			$("#pwd").blur(function(){
				var ustext=$("#pwd").val();
				if(ustext==null||ustext==""){
					$("#pwd").val("请输入邮箱密码")
				}
			});
			//聚焦
			$("#pwd").focus(function(){
  				var pwdtext = $("#pwd").val();
  				if(pwdtext=="请输入邮箱密码"){
  					$("#pwd").val("");
	  			}
  			});
			
		})
	</script>
  </head>
  
  <body>
    	<input type="text" id="us" value="请输入邮箱地址"/><br>
    	<input type="text" id="pwd" value="请输入邮箱密码"/><br>
    	<input type="button" value="登录"/><br>
    	
  </body>
</html>

绑定事件和解绑事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>case.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	
		$(function(){
				//绑定事件
			$("#a").click(function(){
				alert("a被点击")
			})	
			//解绑事件
			$("#b").click(function(){
				$("#a").unbind("click");
			})	
		})
	</script>
  </head>
  <body>
  	<input id="a" type="button" value="点击">
	<input id="b" type="button" value="清除事件">
  	  
  </body>
</html>

事件的委派

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>case.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	
		$(function(){
			//非委派 相同的选择器绑定的事件 后续添加相同的dom元素  不会绑定该事件
			/*$("input[name='t']").click(function(){
				alert("点击了按钮")
			})*/
			//委派 事件的传播性
			$(document).on("click","input[name='t']",function(){
				alert("点击了按钮");
			})
			
			$("#cr").click(function(){
				//新增按钮
				$(document.body).append("<input name='t' type='button' value='新增按钮'>");
			})
		})	
	</script>
  </head>
  <body>
  	<input name="t" type="button" value="点击1">
	<input name="t" type="button" value="点击2">
  	  <input id="cr" type="button" value="新增按钮l"/>
  </body>
</html>

JQuery的动画效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>case.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	
		$(function(){
			//显示
			$("#a").click(function(){
				//$("div").show();
				//滑动
				//$("div").slideDown(3000);
				//淡入淡出
				$("div").fadeIn(3000);
			})
			
			//隐藏
			$("#b").click(function(){
				//$("div").hide();
				//$("div").sliedeUp(3000);
				$("div").fadeOut(3000);
			})
			
		})	
	</script>
  </head>
  <body>
  	<div ><img src="as.jpg"/></div>
  	<input id="a" type="button" value="显示"/>
  	<input id="b" type="button" value="隐藏"/>
  </body>
</html>

ordinaryday

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery的简单入门(一)

JQuery 是一个JavaScript的库jQuery的优势 ►轻量级（Lightweight）►强大的选择器►出色的DOM操作封装 ►可靠的事件处理机制►出色的浏览器兼容性jQuery的使用►下载：http://jquery.com提供了最新的jQuery框架下载。通常只需下载最小的jQuery包（Minified）即可。目前
复制链接

扫一扫

专栏目录