jQuery详细介绍

dexi.Chi 攻城狮

于 2020-01-29 14:55:39 发布

阅读量2k

点赞数 5

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43949154/article/details/104106920

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

jQuery

jQuery

JQuery

流行的js 类库

市场用得比较多两个框架： jQuery 比较适合做一些互联网的应用（例如12306.com等）

JavaScript类库(javascript框架)：
* 定义：封装了很多预定义的对象和实用函数。
* 作用：能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器。
- Web1.0与Web2.0：
  - Web1.0：以内容为中心(门户网站)
  - Web2.0：以人为中心(社交网站)
  - Web3.0：基于移动互联网的社交网站
- 富客户端与瘦客户端：
  - 富客户端：在瘦客户端基础上，加上增删改查功能。
  - 瘦客户端：做页面数据的静态展示。
- jQuery：
  - 官方团队：
    - 核心研发团队：核心内容
    - UI研发团队：UI设计
    - 插件制作团队：支持插件
  - 分类：
    - Web版本：我们主要学习
    - UI版本：集成UI内容
    - mobile版本：针对移动开发
    - qunit：用于js测试
  - 版本：
    - 1.4.2版本：企业开发主流
    - 1.8.3版本：学习研究主流
    - 1.11.0版本：目前最新版本
    - 2.1.0版本：目前最新版本(不再支持IE6.0\7.0\8.0等浏览器)
  - 版本提供两个：
    - 正常版本：代码及注释（学习研究）
    - 压缩版本：代码（开发使用）GZIP
extjs 比较适合做后台管理系统（电商（订单管理），银行，电信）
核心（重点）
主要功能：javascript开发人员查找元素、操作DOM、处理事件、执行动画和开发Ajax的操作。
jQuery 优势：(宗旨：write less ，do more 写更少的代码，做更多的事情)

不污染顶级变量
* 顶级变量(顶级对象)：在jQuery中只有一个对象，jQuery或$
* 不污染：只能做调用操作，不能做增删改操作。
链式操作方式：一次性得到最终结果
隐式迭代：只关注输入和输出内容。
行为层与结构层的分离
* 行为层：逻辑处理
* 结构层：HTML代码标签

bs 架构：性能

1：轻量级（js 库非常小）

2：强大的选择器（获取页面上面的dom 元素
document.getElementById()
操作dom 必须先得到dom
）
3：出色的DOM操作的封装

4：可靠的事件处理机制(对事件进行了一个封装)

5：完善的Ajax（底层封装xmlhttprequest）

6：不污染顶级变量（在jquery 里面只有一个对象 jQuery == $）

7:出色的浏览器兼容性

8:链式操作方式($("#ddd").addClass().removeClass())

9:隐式迭代 (显示迭代:迭代一个数组)
显示迭代（for(var i=0;i<array.length;i++){

}）
隐身迭代屏蔽掉for 操作

10：行为层与结构层的分离

11：丰富的插件支持后期扩展非常方便

12：完善的文档
jQuery 只有一个对象（jQuery == $）一定要搞清楚jQuery 与dom 对象之间的区别于联系
dom对象：dom 对象是浏览器自带对象，dom 对象只能调用dom 里面的属性和方法，
不能调用jQuery 对象里面的属性和方法

jQuery对象：jquery 对象是通过jQuery 包装页面上面的元素或者dom
而产生的一个新的对象，jquery 对象时jQuery 独有的，不能调用dom
对象里面的属性和方法，jQuery 对象是一个数组。

jQuery 对象与dom 对象时可以相互转换的，转换之后它们就可以相互调用了

DOM对象
* DOM解析HTML页面，将页面元素解释为元素节点、属性节点、文本节点。
* 通过DOM解析HTML页面元素，所得到的DOM元素就是DOM对象。
* DOM对象可以使用Javascript中的方法。
JQuery对象
* JQuery对象就是通过JQuery包装DOM对象后产生的，JQuery对象是JQuery独有的。
* 虽然JQuery对象是包装DOM对象后产生的，但是JQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用JQuery里的方法。乱使用会报错。
* 约定：如果获取的是JQuery对象，那么要在变量面前加上$。
DOM对象转成JQuery对象
* 对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个JQuery对象了。(例如： $(DOM对象))
JQuery对象转成DOM对象
* 两种转换方式将一个JQuery对象转成DOM对象：[index] 和 .get(index);
1. JQuery对象是一个数组对象，通过[index]的方法，来得到相应的DOM对象。

2. JQuery本身提供，通过.get(index)方法，得到相应的DOM对象。

选择器（重点：要操作dom 必须先得到dom）（jQuery 给我们提供九种类型的选择器）

1：基本选择器
在这里插入图片描述

 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
  //== window.onload = function(){}
  $(document).ready(function(){
  	  //<input type="button" value="选择 id为 one 的元素." id="btn1"/> 
	  $("#btn1").click(function(){
			$("#one").css("background","red");	
	  });
	   
	  //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
	  $("#btn2").click(function(){
	  		$(".mini").css("background","yellow");
	  });
	  
	  //<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
	  $("#btn3").click(function(){
	  		$("div").css("background","green");
	  });
	  
	  //<input type="button" value="选择 所有的元素." id="btn4"/>
	  $("#btn4").click(function(){
	  		$("*").css("background","blue");
		
	  });
	  
	  //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
	  $("#btn5").click(function(){
	  		//组合选择器..
			$("span,#two").css("background","blue");	
	  });
	  
  });
  </script>

2：层级选择器 (只有当前的这个方法返回的是jQuery 对象才能进行链式操作…)
在这里插入图片描述

 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
		  //<input type="button" value="选择 body内的所有div元素." id="btn1"/>
		  $("#btn1").click(function(){
		  		$("body div").css("background","blue");		
		  });
		  
		  //<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
		  $("#btn2").click(function(){
				$("body>div").css("background","blue");
		  });
		  
		  //<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
		  $("#btn3").click(function(){
				$("#one+div").css("background","blue");
		  });
		  
		  //<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
		  $("#btn4").click(function(){
				$("#two~div").css("background","blue");
		  });
		  
		  //<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>
		  $("#btn5").click(function(){
		  		//只有当前的这个方法返回的是jQuery 对象才能进行链式操作...
				$("#two").siblings("div").css("background","blue");	
		  });
	});
  </script>

(找到一堆页面元素，我们可以对这些元素加过滤条件，找到我们想要的这些元素，然后进行操作)
在这里插入图片描述
3：基本过滤选择器
过滤条件前面添加 : 符号

 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
		  //<input type="button" value="选择第一个div元素." id="btn1"/>
		  $("#btn1").click(function(){
		  		$("div:first").css("background","red");
		  });
		  
		  //<input type="button" value="选择最后一个div元素." id="btn2"/>
		  $("#btn2").click(function(){	
				$("div:last").css("background","green");
		  });
		  
		  //<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
		  $("#btn3").click(function(){  	
				$("div:not('.one')").css("background","green");
		  });
		  
		  //<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
		  $("#btn4").click(function(){
		  		$("div:even").css("background","green");
		  });
		  
		  //<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
		  $("#btn5").click(function(){
		  		$("div:odd").css("background","green");
		  });
		  
		  //<input type="button" value="选择索引值等于3的元素." id="btn6"/>
		  $("#btn6").click(function(){
		  		$("div:eq(3)").css("background","green");	  	
		  });
		  
		  //<input type="button" value="选择索引值大于3的元素." id="btn7"/>
		  $("#btn7").click(function(){
		  		$("div:gt(3)").css("background","green");
		  });
		  
		  //<input type="button" value="选择索引值小于3的元素." id="btn8"/>
		  $("#btn8").click(function(){
		  		$("div:lt(3)").css("background","red");
		  });
		  
		  //<input type="button" value="选择所有的标题元素." id="btn9"/>
		  $("#btn9").click(function(){
		  		$(":header").css("background","red");
		  });
		  
		  //<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
		  function move(){
				$("#mover").slideToggle("slow",move);
		  }
		  move();
		  
		  $("#btn10").click(function(){				
			  $(":animated").css("background","red");
		  });	  
	});
  </script>

4:内容过滤选择器
在这里插入图片描述

 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
		  //<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
		  $("#btn1").click(function(){	  	
				$("div:contains('di')").css("background","red");		
		  });
		  
		  //<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
		  $("#btn2").click(function(){
	  			$("div:empty").css("background","red");
		  });
		  
		  //<input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
		  $("#btn3").click(function(){
		  		$("div:has('.mini')").css("background","red");	  	
		  });
		  
		  //<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
		  $("#btn4").click(function(){
		  		$("div:parent").css("background","red");		
		  });	  
	});
  </script>

5:可见度过滤选择器
在这里插入图片描述

 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
		  //<input type="button" value=" 选取所有可见的div元素"  id="b1"/>
		  $("#b1").click(function(){
		  			$("div:visible").css("background","red");
		  });
		  
		  //<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
		  $("#b2").click(function(){
		  		$("div:hidden").css("background","red").show(2000);
		  });
		  
		  //<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
		  $("#b3").click(function(){
		 			//  <!--文本隐藏域-->
//				 <input type="hidden" value="hidden_1">
//				 <input type="hidden" value="hidden_2">
//				 <input type="hidden" value="hidden_3">
//				 <input type="hidden" value="hidden_4">

				//var $input=$("input:hidden");
					
				//首先我们通过dom 来遍历...
  				//显示迭代来便利..
//				for(var i=0;i<$input.length;i++){
//					alert($input[i].value);
//				}
				//隐式迭代
				$("input:hidden").each(function(index,dom){
						//alert(index);
						//alert(dom.value);				
				})						
		  });
		  
		  //<input type="button" value=" 选取onediv所有的div的, 并打印它们的值"  id="b4"/>
		  $("#b4").click(function(){
		       $("#onediv>div").each(function(index,dom){
					alert($(dom).text());
			   })	
		  });		  
	});
  </script>

6:属性过滤选择器
在这里插入图片描述

 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script type="text/javascript">
  	$(document).ready(function(){
		  //<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
		  $("#btn1").click(function(){
				$("div[title]").css("background","red");	
		  });
		  
		  //<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
		  $("#btn2").click(function(){
			   $("div[title=test]").css("background","red");
		  });
		  
		  //<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
		  $("#btn3").click(function(){
		  		 $("div[title!=test]").css("background","red");
		  });
		  
		  //<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
		  $("#btn4").click(function(){
		  		 $("div[title^=te]").css("background","red");
		  });
		  
		  //<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
		  $("#btn5").click(function(){
		  		 $("div[title$=est]").css("background","red");
		  });
		  
		  //<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
		  $("#btn6").click(function(){
		  		$("div[title*=es]").css("background","red");
		  });
		  
		  //<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
		  $("#btn7").click(function(){
			 $("div[id][title*=es]").css("background","red");
		  });		  
	});
  </script>

7:子元素过滤选择器
在这里插入图片描述

 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script type="text/javascript">
  	$(document).ready(function(){
		  //<input type="button" value="选取每个class为one的div,父元素下的第2个子元素." id="btn1"/>
		  $("#btn1").click(function(){  
				//子元素过滤选择器特殊写法，: 前面加空格...  从1开始计算...
				$("div[class=one] :nth-child(2)").css("background","red");						
		  });
		  
		  //<input type="button" value="选取每个class为one的div, 父元素下的第一个子元素." id="btn2"/>
		  $("#btn2").click(function(){
		  		//第一种写法
		  		//$("div[class=one] :nth-child(1)").css("background","red");
				//第二种写法..
				$("div[class=one] :first-child").css("background","red");
		  });
		  
		  //<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
		  $("#btn3").click(function(){  	
				$("div[class=one] :last-child").css("background","red");
		  });
		  
		  //<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
		  $("#btn4").click(function(){
		  		$("div[class=one] :only-child").css("background","red");
		  });  
	});
  </script>

8:表单对象属性过滤选择器
在这里插入图片描述

 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
		  //<button id="btn1">对表单内 可用input 赋值操作.</button>
		  $("#btn1").click(function(){
				$("input:enabled").val("玺哥");
		  });
		  
		  //<button id="btn2">对表单内 不可用input 赋值操作.</button>
		  $("#btn2").click(function(){
		  		$("input:disabled").val("玺哥");
		  });
		  
		  //<button id="btn3">获取多选框选中的个数.</button>
		  $("#btn3").click(function(){
		    	alert($("input:checked").size());
		  });
		  
		  //<button id="btn4">获取下拉框选中的内容.</button>
		  $("#btn4").click(function(){
		  		//alert($("select>option:selected").length);
				$("select>option:selected").each(function(index,dom){
						//alert($(dom).text());
						var title=$(dom).attr("title");
						alert(title);		
				})			
		  });	  
	});
  </script>

9:表单选择器
在这里插入图片描述

 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[
  $(document).ready(function(){
    var $alltext = $("#form1 :text");
    var $allpassword= $("#form1 :password");
    var $allradio= $("#form1 :radio");
    var $allcheckbox= $("#form1 :checkbox");

	var $allsubmit= $("#form1 :submit");
	var $allimage= $("#form1 :image");
	var $allreset= $("#form1 :reset");
	var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
	var $allfile= $("#form1 :file");
    var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
    var $allselect = $("#form1 select");
    var $alltextarea = $("#form1 textarea");
	var $AllInputs = $("#form1 :input");
	var $inputs = $("#form1 input");
    $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
	        .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
			.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
            .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
			.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
            .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
			.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
			.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
			.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
			.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
			.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
			.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
			.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
			.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
			.css("color", "red")

    $("form").submit(function () { return false; }); // return false;不能提交.
  });
  //]]>
  </script>

dom 操作 (节点的查找)

页面上面的元素分为三种类型的节点

1：元素节点（9 大选择器都是用来找元素节点）

2：属性节点（先找到元素节点，然后调用attr()）

3：文本节点 (先找到元素节点然后调用text())

1.查找结点
在这里插入图片描述

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
	</head>
	<body>
		 <ul>
		 	 <li id="bj"></li>
			 <li id="tj" name="tianjin">天津</li>
		 </ul>
	</body>
    <script type="text/javascript">
		//元素节点的查找
		//怎么查找元素节点的属性节点
		//alert($("#tj").attr("name"));
			
		//文本节点查找  text();
		//alert($("#tj").text());

		//删除属性节点
		$("#tj").removeAttr("name");
		alert($("#tj").attr("name"));
		
		//设置属性节点
		$("#tj").attr("name","tianjin")
		alert($("#tj").attr("name"));
    </script>

2.创建节点
在这里插入图片描述

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
	</head>
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
		 </ul>
	</body>
	<script type="text/javascript">
		//通过jquery dom 创建<li id="tj" name="tianjin">天津</li>		
		//创建元素节点
		var $li=$("<li></li>");
		
		//设置属性节点
		$li.attr("id","tj");
		$li.attr("id","tj");
		//设置文本节点
		$li.text("天津");
		alert('a');
		
		//获取节点
		var $city=$("#city");
		
		//往节点里面追加创建好的节点..
		$city.append($li);
	</script>

3.内部插入节点
在这里插入图片描述

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
	</head>
	 
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		 	 
		  <ul id="love">
		 	 <li id="fk" name="fankong">反恐</li>
			 <li id="xj" name="xingji">星际</li>
		 </ul>
		
		<div id="foo1">Hello1</div> 
       
	</body>
<script type="text/javascript">	
//	向每个匹配的元素的内部的结尾处追加内容
//	$("#bj").append($("#fk"));
//	:将每个匹配的元素追加到指定的元素中的内部结尾处
//	$("#bj").appendTo($("#fk"));
//	prepend(content):向每个匹配的元素的内部的开始处插入内容

//	$("#bj").prepend($("#fk"));

//	prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
//	$("#bj").prependTo($("#fk"));
	
</script>

4.外部插入节点
在这里插入图片描述

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
	</head>
	 
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		
		 <p  id="p3">I would like to say: p3</p>
		 
		 <p  id="p2">I would like to say: p2</p>
		
		 <p  id="p1">I would like to say: p1</p>
       
	</body>
<script type="text/javascript">
//	在每个匹配的元素之后插入内容
//	$("#bj").after($("#p3"));
//  在每个匹配元素 的前面插入内容
//	$("#bj").before($("#p3"));
//	$("#bj").insertAfter($("#p3"));

	$("#bj").insertBefore($("#p3"));
</script>

5.删除节点
在这里插入图片描述

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
	</head>	 
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京<p>海淀区</p></li>
			 <li id="tj" name="tianjin">天津<p>河西区</p></li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		<p class="hello">Hello</p> how are <p>you?</p> 
	</body>
<script type="text/javascript">
			//$("#bj").remove();
			$("#city").remove();	
</script>

6.复制节点
在这里插入图片描述

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
	</head>
	<body>
		<button>保存</button><br>	
	    <p>段落</p>
	</body>
    <script type="text/javascript">
		//button增加事件
		$("button").click(function(){
			$("p").append($("button").clone(true));	
		});
//clone 克隆某个元素的副本，但是这个副本不具备任何的行为，不具备任何的时间
///如果需要把时间也克隆过去，需要在clone(true));
    </script>

7.替换节点
在这里插入图片描述

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
	</head>
	<html>
	    <p>段落</p>
		<p>段落</p>
		<p>段落</p>
		<button>保存</button>
	</html>
<script type="text/javascript">
//	将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
//	$("button").replaceWith($("p"));
		$("button").replaceAll($("p"));
</script>

8.属性操作
在这里插入图片描述
9.样式操作

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
		<style type="text/css">
		   .one{
			    width: 200px;
			    height: 140px;
			    margin: 40px;
			    background: red;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
		
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>	
	</head>
	<body>
		 <input type="button" value="采用属性增加样式"  id="b1"/>
		 <input type="button" value=" addClass"  id="b2"/>
		 <input type="button" value="removeClass"  id="b3"/>
		 <input type="button" value=" 切换样式"  id="b4"/>
		 <input type="button" value=" hasClass"  id="b5"/>		
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>	   	
		<br>
		<div id="mover">
		 	  动画
		</div>
		<br>
		<span class="spanone">    span
		</span>
	</body>
<script type="text/javascript">
	//<input type="button" value="采用属性增加样式"  id="b1"/>
		$("#b1").click(function(){
			  $("#mover").css("background","red");
		});
		
	//<input type="button" value=" addClass"  id="b2"/>
		$("#b2").click(function(){
				$("#mover").addClass("mini");
			
			
		});
	
	//<input type="button" value="removeClass"  id="b3"/>
		$("#b3").click(function(){
			/*
			 * removeClass():
			 * 	* 不传参数:删除所有样式
			 * 	* 传递参数:删除指定样式
			 */	
			  $("#mover").removeClass();
			//$("#mover").removeClass();
		});
	
	//<input type="button" value=" 切换样式"  id="b4"/>
		$("#b4").click(function(){
			$("#mover").toggleClass("one");
		});
	
	//<input type="button" value=" hasClass"  id="b5"/>
		$("#b5").click(function(){
			//hasClass():判断某个元素是否含有某个指定样式
			$("#mover").addClass("mini");
			alert($("#mover").hasClass("mini"));
		});
</script>

10.遍历节点
在这里插入图片描述

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
	</head>
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="nj" name="nanjing">南京
			 	</li>
		 </ul>
	</body>
	<script type="text/javascript">
		//该方法只考虑子元素而不考虑任何后代元素.
		//alert($("#city").children().length);
		//取得相邻元素的下一个同级元素
		//alert($("#bj").next().text());
				
		//alert($("#tj").prev().text());
		
		//alert($("#bj").siblings().length);

		//find
		//选获取元素通过find 找到对应的标签的子元素的集合...
		alert($("#city").find("li").length);			
	</script>

11.包裹节点

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200129140945896.png#pic=100x100

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200129141053875.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0OTE1NA==,size_16,color_FFFFFF,t_70

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 
	</head>
	<body>
		<strong title="jQuery">jQuery</strong>
		<strong title="jQuery">jQuery</strong>
	</body>
	<script type="text/javascript">
		//jQuery代码如下：
	    // $("strong").wrap("<b></b>");
		  $("strong").wrapAll("<b></b>");
		  <br><<strong title="jQuery">jQuery</strong>
			<strong title="jQuery">jQuery</strong></br>
	</script>

jQuery 当中的事件

//页面加载完毕执行 window.οnlοad=function(){
}
//页面加载完毕执行 $(function(){
})
$().ready(function(){
})
区别：window.onload 与 $(function(){}) 都是用来作于界面渲染完毕之后的初始化操作…
window.onload 需要等待页面上面所有的元素都绘制完毕之后才执行，包含图片。
$(function(){}) 页面上面所有的dom 元素绘制完毕之后就执行，不包含图片。
在这里插入图片描述
1：事件绑定

<script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
    	  $(function(){
		  	  $("#bindbutton").click(function(){  	
				   $("div").bind("mouseover",function(){	   	
					   // $(this).css("background","blue");
						alert("a");
				   })	
			  })  
			  $("#unbindbutton").click(function(){
			  	//解绑所有的时间..
				//$("div").unbind();	
				  $("div").unbind("mouseover");		
			  })
		  })	
    </script>
	<style type="text/css">
			.redclass{
				height:300px;
				width:300px;
				background:red;
			}
	</style>
  </head>
  
  <body>
    		<div  class="redclass">
				asdfasdfasd
    		</div>
			
			<input type="button" value="绑定事件" id="bindbutton">
			
			<input type="button" value="解绑事件" id="unbindbutton">
  </body>

2：移除事件
在这里插入图片描述

3：移除指定事件指定函数
在这里插入图片描述

4：事件切换：hover()
在这里插入图片描述

<script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
	<script type="text/javascript">
			$(function(){
				//鼠标悬停事件 
				  $("ul>li").mouseover(function(){
				  		$(this).css("background","red");
				  });
				   $("ul>li").mouseout(function(){
				  		$(this).css("background","white");
				  })
				 $("ul>li").hover(function(){
				 	$(this).css("background","red");
				 },function(){
					$(this).css("background","white");
				 })				
			})	
	</script>
  </head>
  	<style type="text/css">	
			ul{	
				height:200px;
				width:200px;
				border:1px solid red;
			}
  			ul li{
				list-style:none;			
  			}
  	</style>
  <body>
    		<ul>
    			<li>郑州</li>
				<li>许昌</li>
				<li>洛阳</li>
				<li>周口</li>
				<li>新乡</li>
				<li>南阳</li>
				<li>日本</li>
				<li>大阪</li>
    		</ul>
  </body>

5：事件切换：toggle()
在这里插入图片描述

JQuery的getscript与getjson

1：getscript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>getScript  异步去加载服务端的一段脚本文件...</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="../../js/jquery-1.4.2.js"></script>
	<script type="text/javascript">
		$(function(){
			
			  $("#getScript").click(function(){
					$.getScript("../../js/test.js")
			  })
		})
	</script>
	
	<style type="text/css">
		div{
			background:red;
			height:300px;
			width:300px;
			border:3px solid #abcdef;
			display:none;
		}
	</style>
  </head>
  
  <body>
  		<div></div>
    <input type="button"  id="getScript"  value="getScript 方法的调用">
  </body>
</html>

2：getjson

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>getJSON 访问服务端，服务端返回的数据格式必须是json 的数据格式...</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="../../js/jquery-1.4.2.js"></script>
	<script type="text/javascript">
		$(function(){
			
			  $("#getJSON").click(function(){
			  	
					$.getJSON("data.json",function(data){
							//alert(data);
							//alert(data);
							//jQuery 在解析json 的时候要求key 上面需要有双引号...
							var length=data.length;
							alert(length);
					});
				
			  })
			
		})
		
		
	</script>
  </head>
  
  <body>
    <input type="button"  id="getJSON"  value="getJSON 方法的调用">
  </body>
</html>

Jquery的异步表单提交

form.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>jQuery 异步提交表单</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="../../js/jquery-1.4.2.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#formbutton").click(function(){
				 //发送异步的ajax 请求...
				  
				//将表单里面的选项序列化成一个字符串...	 
				
				//第一种方式...
				//var data=$("#form1").serialize();
						
				//序列化成一个数组...
				var data=$("#form1").serializeArray();
				
				//在做调试代码的时候我们一般使用alert
				//但是alert 它只能打印字符串，或int 类型的数据，不能打印对象里面比较详细的信息...
				//alert(data);
				
				//浏览器给我们提供了一个对象叫console.info 可以打印对象里面更加详细的信息..
				
				console.info(data);		
				for(var i=0;i<data.length;i++){
					alert(data[i].name);
					alert(data[i].value);
				}
				 $.ajax({
				 	 url:"../../formServlet",						 	 
//						 data:{
//						 	username:$("#username").val(),
//							password:$("#password").val(),
//							email:$("#email").val(),
//						 },

					//通过ajax 方法提交的时候有两种数据格式，一种字符串
					// data:data,
					
					 //一个是json		 
					 data:data,
					 type:"POST",
					 success:function(data){				
					 }
				 })
			})
		})
	</script>	
  </head>
  <body>
   		<form id="form1">
				用户名：<input type="text" name="username" id="username"><br><br>
				密&nbsp;&nbsp;码：<input type="password" name="password" id="password"><br><br>
				邮&nbsp;&nbsp;箱：<input type="text" name="email" id="email"><br><br>
				<input  type="button" value="异步提交表单" id="formbutton"/>
   		</form>
  </body>
</html>

formServlet.java

package cn.itcast.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FormServlet extends HttpServlet {

	/**
	 * The doGet method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
		out.println("<HTML>");
		out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
		out.println("  <BODY>");
		out.print("    This is ");
		out.print(this.getClass());
		out.println(", using the GET method");
		out.println("  </BODY>");
		out.println("</HTML>");
		out.flush();
		out.close();
	}

	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		
		String username=request.getParameter("username");
		String password=request.getParameter("password");
		
		String email=request.getParameter("email");
		
		System.out.println(username);
		
		System.out.println(password);
		System.out.println(email);
		PrintWriter out = response.getWriter();
		
	}

}

Jquery的ajax load交互

ajaxload.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>ajax 异步加载...</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="../../js/jquery-1.4.2.js"></script>
	
	<script type="text/javascript">
		//js   window.onscroll
//			window.οnscrοll=function(){
//				
//				
//			}	
		//jQuery
		$(window).scroll(function(){
			  
			  var t=document.documentElement.scrollTop;
			
			  //alert(t);
			  
			  if(t>0  && t<800){
			  		
				loadImage("1");
			  }
			  
			   if(t>800  && t<1600){
			  		
				loadImage("2");
			  }
			  
			   if(t>1600  && t<2400){
			  		
				loadImage("3");
			  }
			  
			   if(t>2400  && t<3200){
			  		loadImage("4");
				
			  }
			  
			   if(t>3200  && t<4000){
			  		
				loadImage("5");
			  }
			  if(t>4000  && t<4800){
			  		loadImage("6");
				
			  }  
			  function loadImage(imageType){
			  		$.ajax({
						url:"../../imageServlet",
						type:"POST",
						data:{
							imageType:imageType
						},
						success:function(data){
							var area="#area_"+imageType;
							var image="<img src='../../"+data+"'>";
							$(area).html(image);
						}
					})
				
			  }
		})	
	</script>
	<style type="text/css">
			#message{
					height:4800px;
			}	
			#message div{
				height:800px;
				border:30px solid red;
			}
	</style>	
  </head>
  <body>
  		<div id="message">
  			<div id="area_1"></div>
			<div id="area_2"></div>
			<div id="area_3"></div>
			<div id="area_4"></div>
			<div id="area_5"></div>
			<div id="area_6"></div>
  		</div>
  </body>
</html>

imageServlet.java

package cn.itcast.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ImageServlet extends HttpServlet {

	/**
	 * The doGet method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
		out.println("<HTML>");
		out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
		out.println("  <BODY>");
		out.print("    This is ");
		out.print(this.getClass());
		out.println(", using the GET method");
		out.println("  </BODY>");
		out.println("</HTML>");
		out.flush();
		out.close();
	}

	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		System.out.println("itcast");
		String imageType=request.getParameter("imageType");
		if("1".equals(imageType)){
			
			out.println("image/1.jpg");
		}
		if("2".equals(imageType)){
					
			out.println("image/2.jpg");
				}
		if("3".equals(imageType)){
			
			out.println("image/3.jpg");
		}
		
		if("4".equals(imageType)){
			
			out.println("image/4.jpg");
		}
		if("5".equals(imageType)){
			out.println("image/5.jpg");
			
		}
		if("6".equals(imageType)){
			
			out.println("image/6.jpg");
		}
		
	}

}

百度地图的调用(个人喜好)

baiduMap.html

<!--
	现在的互联网企业都是开放平台，百度的搜索接口，微信的朋友圈我们调用，sina 微博我们可以调
地图应用是一个比较常用  lbs
	 网页里面也可以实现地图调用，百度地图..主要是用移动端， 房地长网站，旅游网站...
	 
	 使用js 去调用一下百度地图...
-->
<!DOCTYPE html>
<html>
<head>
	<title>普通地图&全景图</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4qXTGvclMqTZXkLsU3twnMA7"></script>
	<style type="text/css">
		body, html{width: 80%;height: 80%;overflow: hidden;margin:0;}
		#panorama {height: 50%;overflow: hidden;}
		#normal_map {height:50%;overflow: hidden;}
	</style>
</head>
<body>
	<div id="panorama"></div>
	<div id="normal_map"></div>
	<script type="text/javascript">
	//全景图展示
	var panorama = new BMap.Panorama('panorama');
	panorama.setPosition(new BMap.Point(116.343964,40.064279)); //根据经纬度坐标展示全景图
	panorama.setPov({heading: -40, pitch: 6});

	panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变
		var pos = panorama.getPosition();
		map.setCenter(new BMap.Point(pos.lng, pos.lat));
		marker.setPosition(pos);
	});
	//普通地图展示
	var mapOption = {
			mapType: BMAP_NORMAL_MAP,
			maxZoom: 18,
			drawMargin:0,
			enableFulltimeSpotClick: true,
			enableHighResolution:true
		}
	var map = new BMap.Map("normal_map", mapOption);
	var testpoint = new BMap.Point(116.343964,40.064279);
	map.centerAndZoom(testpoint, 18);
	var marker=new BMap.Marker(testpoint);
	marker.enableDragging();
	map.addOverlay(marker);  
	marker.addEventListener('dragend',function(e){
		panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
		panorama.setPov({heading: -40, pitch: 6});}
	);
	</script>
</body>
</html>

双向通讯

在这里插入图片描述

dexi.Chi 攻城狮

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery详细介绍

文章目录jQuery流行的js 类库bs 架构：性能选择器（重点：要操作dom 必须先得到dom）（jQuery 给我们提供九种类型的选择器）dom 操作 (节点的查找)jQuery 当中的事件JQuery的getscript与getjsonJquery的异步表单提交Jquery的ajax load交互百度地图的调用(个人喜好)双向通讯jQuery流行的js 类库市场用得比较多两个框架：...
复制链接

扫一扫