jQuery基础篇章-2019-06-18,定时广告，隔行变色，全选和不全选案例

最新推荐文章于 2020-05-28 10:24:00 发布

U盘data

最新推荐文章于 2020-05-28 10:24:00 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/qq847196660/article/details/92798310

版权

AA1.jQuery 概念
a.jQuery 核心函数
a-1:当函数用： $(D O M 标签); a - 2 ：当对象用：$ .属性或方法();

//jQuery方式,获取文本框输入的内容
    var $user = $("#user");

补充知识点：
1. $(“标签对象”).click(); jQuery绑定点击事件方法
2. consal.log( 对象 ); 可以打印任何对象日志

BB2: jQuery 常用函数语法
1. $.each(); 隐式遍历数组
2. $.trim(); 标签对象去2端空格
3. $(标签对象).appendTo(标签对象); 标签对象，在拼接一个标签对象
4. $(标签).size(); $(标签).length; 取标签对象的长度
5. $ (标签)[下标值]； $(标签).get(下标值); 取指定标签对象下标位置
6. $(标签).index(); 得到标签元素位于数组的具体下标位置数值
补充：
伪数组 : *是一个Objet 对象 *有length属性 *有数组下标属性 *没有数组的特别方法：例如：foreach();push();

CC3：jQuery 选择器
1.基本选择器参考CSS样式选择器
属性选择器 [type = password] 对于标签的属性进行选择

2.层次选择器
1.后代选择器 ancestor descendant 例： $ (“ul span”) 释义：选中ul下面所有的span标签
2.子代选择器 parent > child 例： $ (“ul > span”) 释义：选中ul下面的子元素span标签
3.下面选择器 prev+next 例： $ (“ul+span”) 释义：选中ul下面的一个span标签
4.兄弟选择器 prev~siblings 例： $ ("ul~ * ") 释义：选中和ul 标签同级的所有标签

3.过滤选择器释义：在所有选择器的基础上进行筛选常用筛选关键字：
1.A标签：first 选择第一个A标签
2.A标签：last 选择最后一个A标签
3.A标签：not(选择器X) 选择A标签下不是X选择器的标签
4.A标签：lt(index):gt(index) 选择所有A标签中的第3个和第2个特别注意：多个过滤器不是同时执行过滤，而是依次执行，所以取元素的下标要先lt大于，在gt小于。
5.A标签：contains(“BB”) 选择A标签中内容是BB的A标签
6.A标签：hidden 选择隐藏的A标签
7.A标签：[title] 选择有title属性的A标签
8.A标签：[title]=“hello” 选择title内容为hello的A标签
9.A标签：even 选择数组中下标为奇数的A标签
10.A标签：first 选择数组中下标为偶数的A标签
4.表单选择器参考过滤+层次。

DD4：jQuery 中的事件20190620
基础事件
**鼠标事件
click() 鼠标事件
mouseover() 鼠标指针移过时移动到对象的子元素也要触发
mouseenter() 鼠标指针进入时移动到对象的子元素不触发
mouseout() 鼠标指针移出时移出到对象的子元素也要触发
mouseleave() 鼠标指针离开时移出到对象的子元素不触发

键盘事件

keydown()	按下键盘时			
		keyup()		释放按键时
		keypress()	显示按下字符时
	**变形：Enter 回车事件**
		绑定键盘事件后，function 方法形参中，传入参数A，A.keyCode == 13  就判定为按下了Enter 回车

window事件:

表单事件:

onchange事件:如果修改表单的内容，且失去焦点，则触发事件
onblur事件：失去焦点就会触发事件

复合事件
hover(函数1，函数2)；移入，移出时的复合函数。传入事件方法1，光标移入时执行的方法。传入的事件方法2，光标移出时执行的方法。
toggle(函数1，函数2); 一般配合点击事件使用，点击一次，切换一次。不带参数，功能是显示或隐藏
toggleClass(“类名”)；一般配合点击事件使用，点击一次，切换一次。增加或者修改标签类名。

常用语法：
$(A标签).html(index,<标签内容C>); 无参代表获取A标签的标签内容，index代表插入进集合下标的位置，向index位置插入标签内容C
$(A标签).removeAttr(属性名); 比如删除样式，就可以跟上style
$(A标签).index(); 取得A标签对象的下标
$(A标签:eq(index); 查找值为index，下标的A标签
$(A标签).bind({事件.function(){}},{事件.function(){}},{事件.function(){}}); 可以绑定，多个点击事件和函数，用，隔开
$(A标签).unbind(“事件名”，“具体函数名”); 如果不传参，就把A标签所有的事件和方法清除
$(A标签).css({“样式类名”：“样式”，“样式类名”：“样式”，“样式类名”：“样式”})；对标签A的样式名称，做出样式修改，可以同时修改多个样式
$(A标签).addClass({“类名” “类名” “类名”})；对标签A的追加类名，可以同时追加多个类名，空格分开
$(A标签).removeClass({“类名” “类名” “类名”})；对标签A的删除类名，可以同时删除多个类名，空格分开
$(A标签).hasClass(B类名)；对标签A进行判断，里面有没有B这个类名

EE5:插入节点 20190621
jquery 节点对象变量。
var A = $(“A标签”)；
var B = $(“A标签”)；

$(A).append(B); 把B标签，追加进A标签中，也就是A标签内
$(A).appendTo(B); 把A标签，追加进B标签中，也就是B标签内
$(A).prepend(B); 把B标签，前置插入到A标签中，也就是A标签内容最前面。
$(A).prependTo(B); 把选择器找到的 A标签，前置插入到B标签中，也就是B标签内容最前面。
$(A).after(B); 把B标签，插入到A标签，结束之后。同辈插入。
$(A).insertAfter(B); 把A标签，插入到B标签，结束之后。同辈插入。
$(A).before(B); 把B标签，插入到A标签开始的前面。同辈插入。
$(A).insertBefore(B); 把A标签，插入到B标签开始的前面。同辈插入。
$(A).remove(内容); 无参就是完全删除标签节点，带参，就是查找这个标签中，有符合内容的标签节点。
$(A).empty(); 清空标签节点的内容。
$(A).replaceWith(B); 把A标签的内容全部替换为B标签的内容
$(A).replaceAll(B); 把B标签的内容全部替换为A标签的内容
$(A).clone(ture/false); 克隆复制找到的A标签，参数为true复制事件和方法，参数为false不复制事件和方法，不传参，默认为false
$(A).attr({属性1：属性值1，属性2：属性值3，属性3：属性值3}); attr() 方法用来获取或设置属性的值。参数1：只传属性获取属性的值参数2：属性：属性值设置属性值
$(A).removeAttr(属性名b); 删除A标签里面的b属性
节点遍历
$(A).children()；获取A标签的所有子元素。（注：不包括其他后代元素）
$(A).next()；获取挨着A标签的下一个元素，只是挨着的下一个
$(A).prev()；获取挨着A标签的上一个元素，只是挨着的上一个
$(A).slibings()；获取除了A标签的所有同辈元素。
$(A).parent()；获取除了A标签的父级元素。
$(A).parents()；获取除了A标签的所有祖先元素。
$(A).find(“标签名B”); 获取A标签里面的B标签
$(A).filter(“条件|函数”) 获取满足函数条件的的标签（注意：比较复杂，具体参考API）
$(A).each(function(index,element){ 遍历内容 }) 遍历标签对象集合
$(A).end(); 获取了A标签里面的一个内部元素后，再.end() 回取A标签（注意：比较复杂，具体参考API）

CSS操作方法
$(A).height() 带参数值为设置，不带参数是取值。高度。
$(A).height() 带参数值为设置，不带参数是取值。宽度。
$(A).offset() 返回以像素单位的top和left坐标，仅对可见元素有效（不懂，看了API也没懂）
$(A).offsetParent() 返回最近的已定位祖先元素。定位元素是指的是元素的CSSposition值，被设置为relative,absolute,fixed的元素。（不懂，看了API也没懂）
$(A).position() 返回第一个匹配元素相对于父元素的位置（不懂，看了API也没懂）
$(A).scrollLeft() 参数可选。设置或返回匹配元素相对滚动条左侧的编移。（不懂，看了API也没懂）
$(A).scrollTop() 参数可选。设置或返回匹配元素相对滚动条顶。（不懂，看了API也没懂）

DOM对象和jQuery对象互转

<script type="text/javascript">
			function fn(){
				//dom方式,获取文本框输入的内容
				var user = document.getElementById("user");
				//alert(user.value);
				
				//jQuery方式,获取文本框输入的内容
				var $user = $("#user");
				//alert( $user.val() );
				
				//DOM对象转成jQuery对象,穿马甲
				//alert(  $(user).val() )
				
				//jQuery对象转成DOM对象,脱马甲
				//jQuery对象本质上是个数组,数组存储的元素是DOM对象
				alert ( $user[0].value );
	
			}
			
		</script>

jQuery选择器

选择器作用: 快速的精准的定位到页码中的html元素

和css选择器一致的

基本选择器

元素选择器 $(“标签名”)
id选择器 $("#id属性值")
class选择器 $(".class属性值")

	<script type="text/javascript">
    //<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
    //jQuery对象调用函数(事件函数)
     $("#b1").click( function(){
     	//css函数,操作样式表,CSS的属性和属性值
     	 $("#one").css("background-color","red");
     });
	  
	// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
	$("#b2").click(function(){
		$("div").css("background-color","red");
	});
	  
	//<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
	$("#b3").click(function(){
		$(".mini").css("background-color","red");
	});
		
	// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
	$("#b4").click(function(){
	/*	$("span").css("background-color","red");
		$("#two").css("background-color","red");*/
        //选择多个标签的时候，用逗号分隔
		$("#two ,span").css("background-color","red");
	});

	</script>

层次选择器

$(“A B”)获取A元素的所有后代B元素(常用)
$(“A>B”)获取A元素的所有后代子元素B
$(“A+B”)获取A元素的同级的后面的下一个B元素
$(“A~B”)获取A元素的同级后面的所有B元素

<script type="text/javascript">
	   //<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
	   $("#b1").click(function(){
	   	  $("body div").css("background-color","red");
	   })
	   
	   //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
		 $("#b2").click(function(){
		 	  $("body>div").css("background-color","red");
		 });
		 
		 //<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 红色"  id="b3"/>
		 $("#b3").click(function(){
		 	  $("#one+div").css("background-color","red");
		 });
		 
		 //<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色"  id="b4"/>
		 $("#b4").click(function(){
		 	  $("#two~div").css("background-color","red");
		 });
		 
		 //<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为红色"  id="b5"/>
		 $("#b5").click(function(){
		 	/**
		 	 *  id="two" 所有的兄弟元素
		 	 *  即有哥哥,也有弟弟
		 	 */
		 	$("#two").siblings("div").css("background-color","red");
		 });
		
	</script>

属性选择器

获得有属性名的元素：$(“A[属性名]”)
获得属性名等于值元素：$(“A[属性名=值]”)
获得属性名不等于值元素：$(“A[属性名!=值]”)
获得属性名以值 9开头元素：$(“A[属性名^=值]”)
获得属性名以值结尾元素： $(" A [属性名$ =值]")
获得属性名含有值元素：$(“A[属性名*=值]”)
**复合属性选择器，多个属性同时过滤：$(“A[属性名!=值][属性名!=值][属性名!=值]”)

	
	<script type="text/javascript">
		 //<input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
		 $("#b1").click(function(){
		 		//属性选择器,选择带有title
		 		$("div[title]").css("background-color","red");
		 });
		 
		// <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
		 $("#b2").click(function(){
		 	  //获取属性值是test的元素
		 	  $("div[title=test]").css("background-color","red");
		 });
		 
		// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
		$("#b3").click(function(){
			 //属性值不等于test
			 $("div[title!=test]").css("background-color","red");
		});
		
		// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
		$("#b4").click(function(){
			 //属性值以te开始的
			  $("div[title^=te]").css("background-color","red");
		});
	
		// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
		$("#b5").click(function(){
			 //属性值是est结束的
			  $("div[title$=est]").css("background-color","red");
		});
		
    // <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
    $("#b6").click(function(){
			 //属性值含有es的
			  $("div[title*=es]").css("background-color","red");
		});
		
		// <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
		 $("#b7").click(function(){
			  $("div[id][title*=es]").css("background-color","red");
		});
	</script>

过滤选择器

获得选择的元素中的第一个元素： :first
获得选择的元素中的最后一个元素： :last
不包括指定内容的元素例如： :not(selecter)
偶数，从 0 开始计数： :even
奇数，从 0 开始技术： :odd
指定第几个： :eq(index)
大于n个： :gt(index)
小于n个： :lt(index)
获得标题（
/
…） :header — 固定写法
获得动画的 :animated —固定写法正在执行的动画

	<script type="text/javascript">
		
// <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
  $("#b1").click(function(){
  	 $("div:first").css("background-color","red");
  });
  
// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
  $("#b2").click(function(){
  	 $("div:last").css("background-color","red");
  });
  
// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
  $("#b3").click(function(){
  	$("div:not(.one)").css("background-color","red");
  });
  
// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
  $("#b4").click(function(){
  	$("div:even").css("background-color","red");
  });
  
// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
  $("#b5").click(function(){
  	$("div:odd").css("background-color","red");
  });
  
// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
  $("#b6").click(function(){
  	$("div:gt(3)").css("background-color","red");
  });
  
// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
  $("#b7").click(function(){
  	$("div:eq(3)").css("background-color","red");
  });
  
// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
  $("#b8").click(function(){
  	$("div:lt(3)").css("background-color","red");
  });
  
// <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
  $("#b9").click(function(){
  	 //所有标题,特指的h1-h6标签 选择器 :header
  	 $(":header").css("background-color","red");
  });
  
// <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 红色"  id="b10"/>		
	$("#b10").click(function(){
		//选择正在执行动画的,选择器 animated
		$(":animated").css("background-color","red");
  });	 
  
  
  function abc(){
  	 $("#mover").slideUp(3000);
  }
  abc();
	</script>

表单选择器

可用： :enabled
不可用： :disabled
选中（单选radio ，多选checkbox）： :checked
选择（下列列表）： :selected

	<script type="text/javascript">
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
  $("#b1").click(function(){
    	//获取多个input标签属性值是 enabled, type属性值是text 返回数组
    	var inputs = $("input[type=text]:enabled");
    	for(var i=0;i<inputs.length;i++){
    		//jQuery对象就是个数组,遍历出来,数组的元素是DOM对象
    		 alert (  $(inputs[i]).val());
    	}
  	
  });
  
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
  $("#b2").click(function(){
    	//获取多个input标签属性值是disabled,返回数组
    	var inputs = $("input[type=text]:disabled");
    	for(var i=0;i<inputs.length;i++){
    		  $(inputs[i]).val("修改后的");
    	}
  	  
  });
  
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
 $("#b3").click(function(){
 	   var inputs = $("input:checked");
 	   alert(inputs.length);
 });
 
// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
/*
 *  html()==DOM对象的innerHTML
 *  text()==DOM对象的innerText
 */
 $("#b4").click(function(){
 	  var inputs = $("option:selected");
 	  for(var i=0;i<inputs.length;i++){
 	  	alert( $(inputs[i]).text());
 	  }
 });		
	</script>

jQuery的DOM操作

jQuery函数的特点:

函数支持方法的调用链,链式编程

函数支持多种调用方式, css(属性名,属性值)赋值, css(属性名)取值\

DOM操作一

<script type="text/javascript">
			//页面加载完成
			$(function(){
				//获取张三
				//dom对象获取值,value属性, jQuery获取值val()函数
				//alert( $("#myinput").val());
				
				//获取标题文本
				//dom对象使用属性innerText,jQuery使用的是text()函数
				alert( $("#mydiv").text()  );
				
				//获取mydiv的后的所有内容
				//dom对象使用属性innerHTML,jQuery使用的是html()函数
				alert( $("#mydiv").html() );
				
			});
		</script>

DOM操作二

<script type="text/javascript">
		/**
		 * 属性操作: 
		 *   DOM对象函数  setAttribute,getAttribute
		 *   jQuery中函数 attr(属性名,属性值)   attr(属性名)
		 */
		
	
		//获取北京节点的name属性值
		//alert( $("#bj").attr("name") );
		//设置北京节点的name属性的值为dabeijing
		$("#bj").attr("name","dabeijing");
		
		//新增北京节点的discription属性 属性值是didu
		$("#bj").attr("discription","didu");
		
		//删除北京节点的name属性并检验name属性是否存在
		$("#bj").removeAttr("name");
		//获得hobby的的选中状态
		
		alert( $("#hobby").prop("checked"));
		 /**
		  *  jQuery新增函数
		  *  prop   property
		  *  prop函数适用于,固有属性:
		  *    checked=checked  selected=selected
		  * 
		  *  attr函数适用于其他的属性
		  */
	</script>

DOM操作三

<script type="text/javascript">
	
		 //<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
		 $("#b1").click(function(){
		 	$("#one").attr("class","second");
		 });
		 
		 //<input type="button" value=" addClass"  id="b2"/>
		  $("#b2").click(function(){
		  	 $("#one").addClass("second");
		 });
		 
		 //<input type="button" value="removeClass"  id="b3"/>
		   $("#b3").click(function(){
		   	 $("#one").removeClass("second");
		 });
		 //<input type="button" value=" 切换样式"  id="b4"/>
		   $("#b4").click(function(){
		   	 $("#one").toggleClass("second");
		 });
		 
		 //<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
	   $("#b5").click(function(){
	   	   alert( $("#one").css("background-color"));
		 });
		 
		// <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
		$("#b6").click(function(){
			$("#one").css("background-color","green");
		 });
	</script>

DOM操作四

<script type="text/javascript">
		/**将反恐放置到city的后面*/
		//$("#city").append($("#fk"));

		/**将反恐放置到city的最前面*/
		$("#city").prepend($("#fk"));	
	</script>

DOM操作五

<script type="text/javascript">
	
	   //删除<li id="bj" name="beijing">北京</li>
	   /**
	    *  DOM中,删除节点,需要父节点删除子节点(浏览器支持)
	    *  jQuery支持自杀
	    */
	   $("#bj").remove();
	   
	   //删除所有的子节点   清空元素中的所有后代节点(不包含属性节点).
	   //测试(id='city')并没有被删除
	   $("#city").empty()
	</script>

隔行变色案例

<script type="text/javascript">
    $(function(){
    /**
    *  偶数行背景色: even
    *  奇数行背景色: odd
    */
    $("tr:gt(1):even").css("background-color","blanchedalmond");
    $("tr:gt(1):odd").css("background-color","brown");

});
	    </script>

全选和全不选

<script type="text/javascript">
    		/**
			 *  点击事件实现功能
			 *  全选和全不选:
			 *    所有的分选框的属性 checked = 总选框的属性checked
			 * checked属于固有属性,函数prop
			 */
            function selectAll(){
            //获取总选框
            //var zong = $("#zong").prop("checked");
            //获取分选框
            $(".itemSelect").prop("checked",$("#zong").prop("checked")  );
			}
		</script>

定时广告

	<script type="text/javascript">
			/**
			 *  页面打开后3秒,显示广告
			 *  动画效果,观看3秒中
			 */
			$(function(){
				setTimeout(function(){
					$("#guanggao").slideDown(3000);
				},3000);
				
				setTimeout(function(){
					$("#guanggao").slideUp(3000);
				},9000);
			});
		</script>

jQuery高级

jQuery全局函数each遍历

$.each() 全局函数each

<script type="text/javascript">
			$(function(){
				//jQuery方式获取option标签
				var $option = $("option");		
				var options = document.getElementsByTagName("option");	
				//jQuery符号$直接调用全局函数each
				/**
				 * 全局函数each的参数
				 * 被遍历的对象
				 * 回调函数,传递索引和元素
				 * 好处: 遍历的容器可以是jQuery对象,也可以是DOM对象
				 */
				$.each(options, function(index,element) {
					alert( $(element).html());
				});
			});
		</script>

jQuery的事件

jQuery绑定事件,事件名字没有on

常用事件:

click 点击事件
blur 失去焦点
change 内容改变
keyup 键盘弹起
mouseover 鼠标悬停
mouseout 鼠标离开

DOM对象绑定事件

<script type="text/javascript">
			window.onload = function(){
				//获取按钮
				var btn = document.getElementById("btn");
				//DOM对象的事件属性
				btn.onclick  = function(){
					alert("按钮被点击");
				}
			}
		</script>

jQuery对象绑定事件

jQuery对象中函数,实现对一个事件源同时绑定多个事件

bind函数,实现绑定事件

	<script type="text/javascript">
		   $(function(){
		   	 //获取按钮,jQuery对象调用函数 bind
		   	 /*$("#btn").bind("click",function(){
		   	 	alert("按钮被点击");
		   	 });*/   	
		   	/*
		   	 * 函数bind同时绑定多个事件
		   	 * bind( {
		   	 * 	 "事件类型":function(){},
		   	 *   "事件类型":function(){}
		   	 * } );
		   	 */
		   	$("#btn").bind({
		   		"click":function(){
		   			alert("绑定点击事件");
		   		},
		   		"mouseover":function(){
		   			alert("绑定鼠标悬停事件");
		   		}
		   	}); 	
		 });
		</script>

jQuery解绑事件3250jQuery对象的函数 unbind

<script type="text/javascript">
			$(function(){
				$("#btn").bind({
					"click":function(){alert("点击事件")},
					"mouseover":function(){alert("鼠标悬停")}
				});
				
				$("#unbtn").click(function(){
					//解除按钮btn的事件绑定
					//unbind()什么参数不传递,解除所有事件
					//$("#btn").unbind();
					
					//解除点击事件
					//$("#btn").unbind("click");
					
					//解除多个事件,参数是一个字符串，多个事件用空格分开
					$("#btn").unbind("click mouseover");
				})
			});
		</script>

事件练习

<script type="text/javascript">
			$(function(){
				//文本框绑定键盘弹起事件
				var text = $("#text");
			text.keyup(function(){
				//取出文本框输入的内容,放在div中
				$("#div").html( text.val() ).css("font-size","30px").css("color","red");
			});
		});
	</script>
</head>
<body>
	<input type="text" id="text"/>
	<div id="div"></div>
</body>

省市联动案例

<script type="text/javascript">
			function selectCity(value){
				/**
				 *  value是传递的标签option的value的属性值
				 *  作为索引使用,到二维数组中,找出对应市
				 *  遍历一维数组
				 *  追加到标签 select中
				 */
				var citys = [
				  ["海淀","昌平","朝阳"],["长春","吉林","延边"],["南京","徐州","苏州"]
				];
				var city = citys[value];
				//获取市区标签
				var cityId = $("#cityId");
				//拼接字符串的操作
				var s = "<option >----请-选-择-市----</option>";
				//jQuery全局函数each遍历
				$.each(city, function(index,element) {
					s+="<option >" +element+ "</option>";
				});
				//字符串放在标签
				cityId.html(s);
			}
		</script>

左右互选案例

<script type="text/javascript">
			$(function(){
				//左向右移动,被选中的,按钮绑定事件
				$("#add").click(function(){
					//获取选中的,层次选择器,后代子标签
					
					$("#second").append($("#first option:selected"));
				});
				
				//左向右移动,全部,按钮绑定事件
				$("#add_all").click(function(){
				
					$("#second").append($("#first option"));
				});
				
				//右向做移动,选择的
				$("#remove").click(function(){
					
					$("#first").append($("#second option:selected"));
				});
				
				//右向左移动,全部的
				$("#remove_all").click(function(){
					
					$("#first").append($("#second option"));
				});
			});
		</script>

validate表单验证插件

插件:

基于一个功能开发的另一个功能,插件

validate基于jQuery开发的一个功能,表单验证功能

对原有的jQuery功能进行扩展,插件不能独立使用

表单验证案例

<script type="text/javascript">
        	$(function(){
        		$("#empForm").validate({
        			//表单验证的规则
        			rules:{
        				//真实姓名,必须填写
        				realname:"required",
        				//登录名,必须填写,长度5-8
        				username:{
        					required:true,
        					rangelength:[5,8]
        				},
        				//密码规则,必须填写,长度6-12
        				psw:{
        					required:true,
        					rangelength:[6,12]
        				},
        				//确认密码,必须填写,和密码一致
        				psw2:{
        					required:true,
        					equalTo:"#psw"
        				},
        				//性别规则,必须选择一个
        				gender:"required",
        				//年龄规则,必须填写,范围26-50之间
        				age:{
        					required:true,
        					range:[26,50]
        				},
        				//学历规则,必须选一个
        				edu:"required",
        				//生日规则,必须填写,格式正确,合法 
        				birthday:{
        					required:true,
        					dateISO:true,
        					date:true
        				},
        				//爱好规则,必须选一个
        				checkbox1:"required",
        				//邮箱规则,必须填写,符号邮件地址规则
        				email:{
        					required:true,
        					email:true
        				}
        				
        			},
        			//验证消息
        			messages:{
        				//真实姓名消息
        				realname:"请填写真实姓名",
        				//登录名消息
        				username:{
        					required:"必须填写登录名",
        					rangelength:"用户名长度必须5-8位"
        				},
        				//密码消息
        				psw:{
        					required:"必须填写密码",
        					rangelength:"密码长度必须6-12位"
        				},
        				//确认密码消息
        				psw2:{
        					required:"必须填写密码",
        					equalTo:"两次密码不一致"
        				},
        				//姓名消息
        				gender:"必须选",
        				//年龄消息
        				age:{
        					required:"必须填写年龄",
        					range:"年龄必须在26-50之间"
        				},
        				//学历消息
        				edu:"请选择一个学历",
        				//生日消息
        				birthday:{
        					required:"必须填写生日",
        					dateISO:"日期格式不正确",
        					date:"日期不存在"
        				},
        				//爱好消息
        				checkbox1:"请选择一个爱好",
        				//邮箱消息
        				email:{
        					required:"必须填写邮箱",
        					email:"邮箱格式不正确"
        				}
        			}
			
        		});
        	});
        </script>

自定义验证规则

标准语法规则, jQuery选择符号$调用插件属性validator

属性调用插件函数 addMethod()

参数:

规则名
回调函数

 <script type="text/javascript">
        	
        	/*
        	 * 匿名函数中具有三个参数
        	 * value   : 文本框输入的值
        	 * element : 文本框标签对象
        	 * param   : 规则后面的参数   range:[5,10]
        	 */
        	//自定义身份证号的15位规则
        	$.validator.addMethod("cart15",function(value,element,param){
        		//文本框输入的值 value判断
        		if(value.length==18)
        		  return true;
        		//定义15位规则,全数字
        		var reg=/^[0-9]{15}$/;
        		
        		return reg.test(value);
        	});
        	
        	//自定义身份证号的是18位规则
        	$.validator.addMethod("cart18",function(value,element,param){
        		 if(value.length==15)
        		   return true;
        		//定义18位规则,前17个数字,最后一位可以是数字,可以是X
        		var reg = /^[0-9]{17}[0-9X]{1}$/;
        		
        		return reg.test(value);
        	});
        	
        	//自定义身份证的长度规则
        	$.validator.addMethod("cartlength",function(value,element,param){
        		if(value.length == 15 || value.length==18)
        			return true;
        		return false;	
        	});

//身份证号规则
cart:{
    required:"必须填写身份证号",
    cartlength:"身份证号码长度只能是15或18位",
    cart15:"15位格式全数字",
    cart18:"18位格式全数字,最后一位可以是X"
}