Web前端学习（6）_jQuery

电玩女神 2022-06-13 09:18 216阅读 0赞

**Web前端学习（6）\_jQuery**

> 这篇写关于jQuery的相关内容。

1. jQuery：就是一个是js类库,对常用的方法和对象进行了封装

> 1.1 我们之前DOM编程:var obj = Document.getElementById(id); 此处获取的obj是什么对象---dom对象
> 
>   
> 
> 
> 1.2 要使用Jquery中里面已经封装好的一些方法和属性的的话,首先获取变迁的jQuery对象,然后通过里面封装的一些方法和属性对jQuery对象进行操作
> 
>   
> 
> 
> 语法：$("选择器")===>获取元素  -- 获取的是标签元素对应的jQuery对象
> 
> 注意：使用jquer的一些方法首先要导入jquer的类库，类似于如下语句：
> 
>     <script src="../js/jquery-1.11.0.min.js"></script>
> 
> 这里导入src的后面不能再写语句了！  
>   
>

2. jQuery和html的整合

> jquery是单独的js文件
> 
> 通过script标签的src属性导入即可
> 
>   
> 
> 
> 2.1 获取一个jquery对象

> $("选择器")  或者 jQuery("选择器")
> 
>     <script>
>     	//1.使用原生js代码获取我们上面的input标签
>     	var user = document.getElementById("username");
>     	alert(user.value);
>     	
>     	//2.使用jQuery的方式获取我们上面的input标签对象,注意,此时我们获取的是jQuery对象
>     	var $username = $("#username");
>     	//调用jQuery对象的val()方法获取value属性值
>     	//alert($username.val());
>     	
>     	//3.使用另一种方式获取jQuery对象
>     	var $name = jQuery("#username");
>     	//alert($name.val());
>     	
>     </script>
> 
>   
> 
> 
> 2.2 dom对象和jquery对象之间的转换
> 
> dom对象===>jquery对象
> 
> $(dom对象)  
> jquery对象===>dom对象  
> 方式1:jquery对象\[index\]
> 
> 方式2:jquery对象.get(index)
> 
>     <script>
>     	//dom-->>jQuery对象   ,转换方式$(dom对象)
>     	var user = document.getElementById("username");
>     	//var $username = $(user);
>     	alert($username.val());
>     	
>     	//jQury对象--->>dom对象
>     	//方式1: jQuery对象.get(index);
>     	var $username = $("#username");
>     	//var user1 = $username.get(0);
>     	alert(user1.value);
>     	
>     	//jQury对象--->>dom对象
>     	//方式2: jQuery对象[index]
>     	var user3 = $username[0];
>     	alert(user3.value);
>     </script>
> 
>   
>   
> 2.3 页面加载
> 
> js:window.οnlοad=function()\{\}//在一个页面中只能使用一次
> 
> jquery 在一个页面中可以使用多次
> 
> 方式1: $(function()\{...\})  
> 方式2: $(document).ready(function()\{\});
> 
>     <script type="text/javascript">
>     			window.onload = function(){
>     				//这里面的代码所有都是在html页面加载成功之后才执行的
>     				//alert("页面加载成功了");
>     				//给一个标签施加事件的另一种方式(派发事件)
>     				//格式:dom对象.事件名称=fucntion(){....}
>     				var button = document.getElementById("bt");
>     				button.onclick = function(){
>     					//alert("点击了");
>     				}
>     			}
>     			
>     			//使用jQuery中的代码,实现页面加载成功的事件
>     			//方式1:
>     			//第二个页面家在成功之后要执行的事件
>     			//注意:当我们使用jQuery中的方式执行页面加载成功之后的事件的时候,可以执行多个
>     			$(function(){
>     				//alert("页面加载成功了");
>     			})
>     			
>     			//使用jQuery方式执行页面加载成功之后的事件
>     			//方式2:
>     			$(document).ready(function(){
>     				alert("页面加载成功了");
>     			})
>     		</script>
> 
>   
> 2.4 派发事件
> 
> $("选择器").click(function()\{...\});  
> 等价于 原生js中
> 
> dom对象.οnclick=function()\{....\}  
> 掌握事件:（1）focus （2）blur （3）change （4）click
> 
>     <script type="text/javascript">
>     			$(function(){
>     				//需求：给e01加上失去焦点和获取焦点事件，键盘按下和键盘弹起的事件
>     				$("#e01").blur(function(){
>     					$("#textMsg").html("失去焦点");
>     				}).focus(function(){
>     					$("#textMsg").html("获取焦点");
>     				}).keydown(function(){
>     					$("#textMsg").html("键盘按下");
>     				}).keyup(function(){
>     					$("#textMsg").html("键盘弹起");
>     				})
>     						
>     				//需求：给e02加上鼠标移入和鼠标移出的事件，
>     				$("#e02").mousemove(function(){
>     					$("#divMsg").html("鼠标移入");
>     				}).mouseout(function(){
>     					$("#divMsg").html("鼠标移出");
>     				})
>     							
>     				//需求：给e03加上单击和双击的事件
>     				$("#e03").click(function(){
>     					$("#buttonMsg").html("单击事件");
>     				}).dblclick(function(){
>     					$("#buttonMsg").html("双击事件");
>     				})
>     			})
>     		</script>
> 
>   
>   
> 2.5 jquery中效果
> 
> 隐藏或展示：
> 
> show(毫秒数)   
> hide(毫秒数)
> 
> 滑入或滑出：

> slideDown(毫秒数):向下滑入  
> slideUp(毫秒数):向上滑出  
> 淡入或淡出：  
> fadeIn(int):淡入  
> fadeOut(int):淡出  
> 
> 
>     <script type="text/javascript">
>     		
>     		$(function(){
>     			$("#b1").click(function(){
>     				//show(毫秒数):通过多少时间显示
>     				//hide(毫秒数):通过多少时间隐藏
>     				//toggle(毫秒数):如果隐藏则显示,如果显示则隐藏
>     				$("#b1Div").toggle(2000);
>     			})
>     			$("#b2").click(function(){
>     				//slideDown(毫秒数):通过多少时间从上到下划入
>     				//slideUp(毫秒数):通过多少时间,从下往上划出
>     				//slideToggle(毫秒数):如果划入则划出,如果划出则划入
>     				$("#b2Div").slideToggle(2000);
>     			})
>     			$("#b3").click(function(){
>     				//fadeIn(毫秒数):通过多少时间单入
>     				//fadeOut(毫秒数):通过多少时间淡出
>     				//fadeToggle(毫秒数):如果淡入则淡出如果淡出则淡入
>     				$("#b3Div").fadeToggle(2000);
>     			})
>     			
>     		})
>     		
>     	</script>
> 
>   
>

3. 选择器总结

> 3.1 基本选择器
> 
> $("\#id值")  $(".class值")  $("标签名")  $("\*")
> 
> 获取多个选择器 用逗号隔开：$("\#id值,.class值")
> 
>     <script>
>     	$(function(){
>     		/*基本选择器
>     		$("#id值")  $(".class值")  $("标签名")  
>     		理解:获取多个选择器 用逗号隔开
>     		$("#id值,.class值")*/
>     		
>     		//<input type="button" value="选择 id为 one 的元素." id="btn1"/> 
>     		$("#btn1").click(function(){
>     			$("#one").css("background-color","aqua");
>     		})
>     		//<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
>     		$("#btn2").click(function(){
>     			$(".mini").css("background-color","aqua");
>     		})
>     		//<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
>     		$("#btn3").click(function(){
>     			$("div").css("background-color","aqua");
>     		})
>     		//<input type="button" value="选择 所有的元素." id="btn4"/>
>     		$("#btn4").click(function(){
>     			$("*").css("background-color","aqua");
>     		})
>     		//<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
>     		$("#btn5").click(function(){
>     			$("span,#two").css("background-color","aqua");
>     		})
>     	})
>     </script>
> 
>   
> 
> 
> 3.2 层次选择器 
> 
> a b:a的所有b后代

> a>b:a的所有b孩子(不包括孙子)  
> a+b:a的下一个兄弟(大兄弟)  
> a~b:a的所有弟弟们
> 
>     <script>
>      	$(function(){
>      		/*层次选择器 
>     		a b:a的所有b后代
>     		a>b:a的所有b孩子(不包括孙子)
>     		a+b:a的下一个兄弟(大兄弟)
>     		a~b:a的所有弟弟们*/
>      		//<input type="button" value="选择 body内的所有div元素." id="btn1"/>
>      		$("#btn1").click(function(){
>     	  		$("body div").css("background-color","blueviolet");
>     	  	})
>      		// <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
>       		$("#btn2").click(function(){
>     	  		$("body>div").css("background-color","blueviolet");
>     	  	})
>       		//<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
>       		$("#btn3").click(function(){
>     	  		$("#one+div").css("background-color","blueviolet");
>     	  	})
>       		//<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
>     	  	$("#btn4").click(function(){
>     	  		$("#two~div").css("background-color","blueviolet");
>     	  	})
>      	})
>     
>     </script>
> 
>   
> 
> 
> 3.3 基本过滤选择器  
> :frist 第一个  
> :last 最后一个  
> :odd  索引奇数  
> :even 索引偶数  
> :eq(index) 指定索引  
> :gt(index) >索引大于哪一个值  
> :lt(index) <索引小于哪一个值
> 
>     <script type="text/javascript">
>      	$(function(){
>      		/*基本过滤选择器
>     		:frist 第一个
>     		:last 最后一个
>     		:odd  索引奇数
>     		:even 索引偶数
>     		:eq(index) 指定索引
>     		:gt(index) >索引大于哪一个值
>     		:lt(index) <索引小于哪一个值*/
>     	  	//<input type="button" value="选择第一个div元素." id="btn1"/>
>     	  	$("#btn1").click(function(){
>     	  		$("div:first").css("background-color","blueviolet");
>     	  	})
>       		//<input type="button" value="选择最后一个div元素." id="btn2"/>
>       		$("#btn2").click(function(){
>     	  		$("div:last").css("background-color","blueviolet");
>     	  	})
>       		//<input type="button" value="选择索引值为偶数 的div元素." id="btn3"/>
>       		$("#btn3").click(function(){
>     	  		$("div:even").css("background-color","blueviolet");
>     	  	})
>       		//<input type="button" value="选择索引值为奇数 的div元素." id="btn4"/>
>       		$("#btn4").click(function(){
>     	  		$("div:odd").css("background-color","blueviolet");
>     	  	})
>       		//<input type="button" value="选择索引值等于3的div元素." id="btn5"/>
>       		$("#btn5").click(function(){
>     	  		$("div:eq(3)").css("background-color","blueviolet");
>     	  	})
>       		//<input type="button" value="选择索引值大于3的div元素." id="btn6"/>
>       		$("#btn6").click(function(){
>     	  		$("div:gt(3)").css("background-color","blueviolet");
>     	  	})
>      	});
>      </script>
> 
>   
> 
> 
> 3.4 内容过滤:  
> :has("选择器"):包含指定选择器的元素
> 
>     <script type="text/javascript">
>      	$(function(){
>      		/* 内容过滤
>     		:has("选择器"):包含指定选择器的元素*/
>     		//<input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/>
>     		$("#btn1").click(function(){
>     	  		$("div:has('.mini')").css("background-color","blueviolet");
>     	  	})
>      	});
>      </script>
> 
>   
> 
> 
> 3.5 可见过滤:  
> :hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none  
> :visible   
> 
> 
>     <script type="text/javascript">
>      	$(function(){
>      		/*可见过滤
>     		:hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
>     		:visible */
>     		
>     		//<input type="button" value=" 选取所有可见的div元素"  id="b1"/>
>     		$("#b1").click(function(){
>     	  		//:visible 
>     	  		$("div:visible").css("background-color","red");
>       		})
>       		//<input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
>       		$("#b2").click(function(){
>      			//:hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
>      			$("div:hidden").css("background-color","red").show(1000);
>      		})
>      	});
>      </script>
> 
>   
> 
> 
> 3.6 属性过滤器  
> \[属性名\]  
> \[属性名="值"\]
> 
>     <script type="text/javascript">
>      	$(function(){
>      		/*属性过滤器
>     		[属性名]
>     		[属性名="值"]*/
>     		//<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
>     		$("#btn1").click(function(){
>     		  	$("[title]").css("background-color","red");
>     		})
>     		  
>     		//<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
>     		$("#btn2").click(function(){
>     			$("[title='test']").css("background-color","red");
>     		
>      		});
>      	})
>      </script>
> 
>   
> 
> 
> 3.7 表单过滤:  
> :input  所有的表单子标签  input select textarea button  
> input   仅仅获取input标签  
> 
> 
>     <script type="text/javascript">
>      	$(function(){
>      		/* 表单过滤
>     		:input  所有的表单子标签  input select textarea button
>     		input   仅仅获取input标签*/
>     		
>      		 //1.获取form标签中的所有的子标签
>      		alert($("#form1 :input").size());
>      		//这种获取方式,不仅可以获取到form标签中的input标签,还可以获取到其中的button,textarea
>      		
>      		//2.仅仅获取input标签
>      		alert($("#form1 input").size());
>      	})
>      </script>
> 
>   
> 
> 
>   
>