jQuery

jQuery介绍

jQuery的Hello程序

dom对象就是用来描述标签的对象
1.用JS原生的方法给按钮绑定单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sayHello</title>
  <script>
    window.onclick=function(){
     //1.获得标签对象
      var btObj = document.getElementById("bt01");
      //2.对象.事件名=function()
        btObj.onclick=function(){
            alert("js原生的单击事件");
        }
    }


  </script>
</head>
<body>
<button id="bt01">sayHello</button>
</body>
</html>

JS类库实现
1.我们需要先引入Jquery类库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sayHello</title>
  <script type="text/javascript" src="jquery-1.7.2.js"></script><!--导入jquery文件-->
   <script type="text/javascript">
       alert($)//输入$的值，用于验证是否导入jquery文件成功
   </script>

</head>
<body>
<button id="bt01">sayHello</button>
</body>
</html>

此时输出的$是一个函数，说明jquery文件导入成功了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sayHello</title>
  <script type="text/javascript" src="jquery-1.7.2.js"></script><!--导入jquery文件-->
   <script type="text/javascript">
       $(function(){//表示页面加载完成之后，相当于window.onload= function()
          var $btnobj = $("#btnId");//表示按Id查询对象
          $btnobj.click(function(){//绑定单机事件
              alert("hello world");
          });
       });
   </script>

</head>
<body>
<button id="btnId">sayHello</button>
</body>
</html>

jQuery的Hello程序常见问题

jquery的函数核心介绍

在window.onload{}里面的代码将会在页面加载完成之后自动调用
功能1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$核心函数的功能</title>
  <script type="text/javascript" src="jquery-1.7.2.js"> </script>
    <script type="text/javascript">
        //相当于调用了window.onload= function()的function函数
    $(function(){alert("hello");
    });

    </script>
</head>
<body>

</body>
</html>

在页面加载完成后将立即执行
功能2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$核心函数的功能</title>
  <script type="text/javascript" src="jquery-1.7.2.js"> </script>
    <script type="text/javascript">
      //2.当我们传入html字符串时，会创建这个html标签对象
      $(function (){
          $("<div>hello world<div></div>").appendTo("body");
      });
    </script>
</head>
<body>

</body>
</html>

注意点

1.html字符串不是仅仅是标签名（如"div",而是这个标签，包含起始和文字（如"
hwllo</div"））
2.和传统的方式相比，这个可以一步就位，传统的方式还要给新创建的标签赋值
3.还用像这种创建的多层标签也可以一步到位
功能3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$核心函数的功能</title>
  <script type="text/javascript" src="jquery-1.7.2.js"> </script>
    <script type="text/javascript">
    //当传入选择器字符串时：根据这个字符串查找元素节点对象

    $(function (){

        //1.当传入id属性值
 alert(    $("#bt001").length);
        //2.当传入标签名
         alert(   $("button").length);
        //3。class属性值
        alert($(".hello").length)
 


    });

    </script>
</head>
<body>
<button id="bt001"></button>
<button class="hello"></button>
<button></button>
<button></button>
</body>
</html>

功能4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$核心函数的功能</title>
  <script type="text/javascript" src="jquery-1.7.2.js"> </script>
    <script type="text/javascript">
   //当传入Dom对象时，会将dom对象转换成jquery对象
   //1.dom对象
   $(function(){
       var btObj = document.getElementById("bt001");
       alert(btObj);//[object HTMLButtonElement]
       //2.jquery对象

       alert(   $(btObj));//[object Object]
   });
    </script>
</head>
<body>
<button id="bt001"></button>
<button class="hello"></button>
<button></button>
<button></button>
</body>
</html>

如何区分jquery对象和dom对象

jquery对象的本质

$核心函数的功能 ``` **jQuery 对象的本质可以理解为一个类数组对象（类似于数组但不是真正的数组），它实际上是一个包含了 DOM 元素的数组或数组样对象。这些元素可以是通过选择器选中的一个或多个 DOM 元素。** - 这个数组可能有多个dom对象，也可能是一个，要看使用的是什么选择器 ## jquery对象和dom对象使用区别

jquery对象和dom对象的相互转换

基础选择器

基本选择器的学习参考下面的文件
注意；

练习部分
需求演示
html和css代码已经完成，我们补充JS代码(jquery)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">

				//1.选择 id 为 one 的元素 "background-color","#bbffaa"
				$(function (){
					$("#btn1").click(function (){//按钮绑定click事件
						//css方法可以用来设置和获取样式
			         $("#one").css("background-color","#bbffaa");
					});
					//2.选择 class 为 mini 的所有元素
				$("#btn2").click(function (){

					$(".mini").css("background-color","#bbffaa");

				});
					//3.选择 元素名是 div 的所有元素
					$("#btn3").click(function (){
						$("div").css("background-color","#bbffaa");
					});
					//4.选择所有的元素
					$("#btn4").click(function(){
						$("*").css("background-color","#bbffaa");
					});
					//	//5.选择所有的 span 元素和id为two的元素
					$("#btn5").click(function (){
						$("span,#two").css("background-color","#bbffaa");
					});
				});

		</script>
	</head>
	<body>
<!-- 	<div>
		<h1>基本选择器</h1>
	</div>	 -->	
		<input type="button" value="选择 id 为 one 的元素" id="btn1" />
		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
		<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
		<input type="button" value="选择 所有的元素" id="btn4" />
		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
		
		<br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span class="one" id="span">^^span元素^^</span>
	</body>
</html>

层级选择器

注意

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){//是$(function(){})的全写形式
				//1.选择 body 内的所有 div 元素（选择全面元素的所有后代）
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

				//2.在 body 内, 选择div子元素  
				$("#btn2").click(function(){
					$("body > div").css("background", "#bbffaa");
				});

				//3.选择 id 为 one 的下一个 div 元素 
				$("#btn3").click(function(){
					$("#one +div").css("background", "#bbffaa");
				});

				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two ~ div").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>	
	
<!-- 	<div>
		<h1>层级选择器:根据元素的层级关系选择元素</h1>
		ancestor descendant  ：
		parent > child 		   ：
		prev + next 		   ：
		prev ~ siblings 	   ：
	</div>	 -->
		<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
		<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
		<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
		<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素^^</span>
	</body>
</html>

运行结果和前面的一样

基本过滤选择器

使用jquery 查询，哪怕只查询到一个对象，也会封装成Jquery对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
			});
			
			$(document).ready(function(){
				//1.选择第一个 div 元素  
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});

				//2.选择最后一个 div 元素
				$("#btn2").click(function(){
					$("div:last").css("background", "#bbffaa");
				});

				//3.选择class不为 one 的所有 div 元素
				$("#btn3").click(function(){
					$("div:not(.one)").css("background", "#bbffaa");//先得到所有的div标签，然后去除class为one的div
				});

				//4.选择索引值为偶数的 div 元素
				$("#btn4").click(function(){
					$("div:even").css("background", "#bbffaa");
				});

				//5.选择索引值为奇数的 div 元素
				$("#btn5").click(function(){
					$("div:odd").css("background", "#bbffaa");
				});

				//6.选择索引值为大于 3 的 div 元素
				$("#btn6").click(function(){
					$("div:gt(3)").css("background", "#bbffaa");
				});

				//7.选择索引值为等于 3 的 div 元素
				$("#btn7").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});

				//8.选择索引值为小于 3 的 div 元素
				$("#btn8").click(function(){
					$("div:lt(3)").css("background", "#bbffaa");
				});

				//9.选择所有的标题元素
				$("#btn9").click(function(){
					$(":header").css("background", "#bbffaa");
				});

				//10.选择当前正在执行动画的所有元素
				$("#btn10").click(function(){
					$(":animated").css("background", "#bbffaa");
				});
				//11.选择没有执行动画的最后一个div
				$("#btn11").click(function(){
					$("div:not(:animated):last").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>		
<!-- 	<div>
	:first 			
	:last 			
	:not(selector) 	
	:even 			
	:odd 			
	:eq(index)		 
	:gt(index) 		
	:lt(index) 		
	:header 		
	:animated 		
	</div> -->
		<input type="button" value="选择第一个 div 元素" id="btn1" />
		<input type="button" value="选择最后一个 div 元素" id="btn2" />
		<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
		<input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
		<input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
		<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
		<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
		<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
		<input type="button" value="选择所有的标题元素" id="btn9" />
		<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />		
		<input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
		
		<h3>基本选择器.</h3>
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>

内容过滤选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
	
				anmateIt();				
			});
			
			/** 
			:contains(text)   
			:empty 			  
			:has(selector) 	
			:parent 			
			*/
			$(document).ready(function(){
				//1.选择 含有文本 'di' 的 div 元素
				$("#btn1").click(function(){
					$("div:contains(di)").css("background", "#bbffaa");
				});

				//2.选择不包含子元素(或者文本元素) 的 div 空元素
				$("#btn2").click(function(){
					$("div:empty").css("background", "#bbffaa");
				});

				//3.选择含有 class 为 mini 元素的 div 元素
				$("#btn3").click(function(){
					$("div:has(.mini)").css("background", "#bbffaa");
				});

				//4.选择含有子元素(或者文本元素)的div元素
				$("#btn4").click(function(){
					$("div:parent").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>		
		<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
		<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
		<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
		<input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
		
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>

属性过滤选择器

注意：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div,span,p {
	width: 140px;
	height: 140px;
	margin: 5px;
	background: #aaa;
	border: #000 1px solid;
	float: left;
	font-size: 17px;
	font-family: Verdana;
}

div.mini {
	width: 55px;
	height: 55px;
	background-color: #aaa;
	font-size: 12px;
}

div.hide {
	display: none;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	/**
[attribute] 			
[attribute=value] 		
[attribute!=value] 		 
[attribute^=value] 		
[attribute$=value] 		
[attribute*=value] 		
[attrSel1][attrSel2][attrSelN]  
	
	
	*/
	$(function() {
		//1.选取含有 属性title 的div元素
		$("#btn1").click(function() {
			$("div[title]").css("background", "#bbffaa");
		});
		//2.选取 属性title值等于'test'的div元素
		$("#btn2").click(function() {
			$("div[title=test]").css("background", "#bbffaa");
		});
		//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
		$("#btn3").click(function() {
			$("div[title!=test]").css("background", "#bbffaa");
		});
		//4.选取 属性title值 以'te'开始 的div元素
		$("#btn4").click(function() {
			$("div[title^=te]").css("background", "#bbffaa");
		});
		//5.选取 属性title值 以'est'结束 的div元素
		$("#btn5").click(function() {
			$("div[title$=est]").css("background", "#bbffaa");
		});
		//6.选取 属性title值 含有'es'的div元素
		$("#btn6").click(function() {
			$("div[title*=es]").css("background", "#bbffaa");
		});
		
		//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
		$("#btn7").click(function() {
			$("div[id][title*=es]").css("background", "#bbffaa");
		});
		//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
		$("#btn8").click(function() {
			$("div[title][title!=test]").css("background", "#bbffaa");
		});
	});
</script>
</head>
<body>
	<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
	<input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
	<input type="button"
		value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
	<input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
	<input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
	<input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
	<input type="button"
		value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."
		id="btn7" />
	<input type="button"
		value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />

	<br>
	<br>
	<div class="one" id="one">
		id 为 one,class 为 one 的div
		<div class="mini">class为mini</div>
	</div>
	<div class="one" id="two" title="test">
		id为two,class为one,title为test的div
		<div class="mini" title="other">class为mini,title为other</div>
		<div class="mini" title="test">class为mini,title为test</div>
	</div>
	<div class="one">
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini"></div>
	</div>
	<div class="one">
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini" title="tesst">class为mini,title为tesst</div>
	</div>
	<div style="display: none;" class="none">style的display为"none"的div</div>
	<div class="hide">class为"hide"的div</div>
	<div>
		包含input的type为"hidden"的div<input type="hidden" value="123456789"
			size="8">
	</div>
	<div id="mover">正在执行动画的div元素.</div>
</body>
</html>

表单过滤选择器

可用与不可用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				
				
		/**
		:input 		
		:text 		
		:password 	
		:radio 		
		:checkbox 	
		:submit 	
		:image 		
		:reset 		
		:button 	
		:file 		
		:hidden 	
		
		表单对象的属性
		:enabled 		
		:disabled 		
		:checked 		
		:selected 		
		*/
					
					
				//1.对表单内 可用input 赋值操作
				$("#btn1").click(function(){

					$("input:enabled").val("New Value");
				});
				//2.对表单内 不可用input 赋值操作
				$("#btn2").click(function(){
					$("input:disabled").val("New Value Too");
				});
				//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
				$("#btn3").click(function(){
					alert($("input:checkbox").size())
				});
				//4.获取多选框，每个选中的value值
				$("#btn4").click(function(){
					//传统的遍历方法
					var str = "";
					var eles = $(":checkbox:checked");
					/*
					console.log(eles);
					for(var i=0;i<eles.size();i++){
						str += "【"+$(eles[i]).val()+"】";
					}
					alert(str)*/
					//jquery的遍历方法
					//each方法是juqery对象提供的用来遍历的方法
					//在遍历的function函数中，有一个this对象，这个this对象就是当前遍历到的dom对象
					eles.each(function (){
                     alert(this.value);
					});

				});
				//5.获取下拉框选中的内容  
				$("#btn5").click(function(){
					var str = "";
					//注意这个选择器的特殊，因为select里面的option是真正的被选择项，
					//所以 :selected 选择器和 select[name='test']选择器的关系是子父关系
					//必须按照基本选择器选择后代的方法选
					var els = $("select option:selected");
					/*console.log(els);
					for(var i=0;i<els.size();i++){
						str += "【"+$(els[i]).val()+"】";
					}
					alert(str)*/
					//jquer遍历方式
					els.each(function(){
						alert(this.value);
					});
				});
			})	
		</script>
	</head>
	<body>
		<h3>表单对象属性过滤选择器</h3>
		 <button id="btn1">对表单内 可用input 赋值操作.</button>
  		 <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
		 <button id="btn3">获取多选框选中的个数.</button>
		 <button id="btn4">获取多选框选中的内容.</button><br /><br />
         <button id="btn5">获取下拉框选中的内容.</button><br /><br />
		 
		<form id="form1" action="#">			
			可用元素: <input name="add" value="可用文本框1"/><br>
			不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
			可用元素: <input name="che" value="可用文本框2"/><br>
			不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
			<br>
			
			多选框: <br>
			<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
			<input type="checkbox" name="newsletter" value="test2" />test2
			<input type="checkbox" name="newsletter" value="test3" />test3
			<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
			<input type="checkbox" name="newsletter" value="test5" />test5
			
			<br><br>
			下拉列表1: <br>
			<!--下拉框多选由multiple属性控制-->
			<select name="test" multiple="multiple" style="height: 100px" id="sele1">
				<option>浙江</option>
				<option selected="selected">辽宁</option>
				<option>北京</option>
				<option selected="selected">天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
			
			<br><br>
			下拉列表2: <br>
			<select name="test2">
				<option>浙江</option>
				<option>辽宁</option>
				<option selected="selected">北京</option>
				<option>天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
		</form>		
	</body>
</html>

元素筛选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>DOM查询</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
				
	/**
					
	过滤
	eq(index|-index) 			
	first() 					
	last() 						
	hasClass(class) 			
	filter(expr|obj|ele|fn) 	
	is(expr|obj|ele|fn)1.6* 	
	has(expr|ele) 				
	not(expr|ele|fn) 			
	slice(start,[end]) 			
	
	查找
	children([expr]) 			
	closest(expr,[con]|obj|ele)1.6*   
	find(expr|obj|ele) 				
	next([expr]) 					
	nextall([expr]) 				
	nextUntil([exp|ele][,fil])1.6* 	
	parent([expr]) 					
	parents([expr]) 				
	parentsUntil([exp|ele][,fil])1.6*  
	prev([expr]) 					
	prevall([expr]) 				
	prevUntil([exp|ele][,fil])1.6* 	
	siblings([expr]) 				
	
	串联
	add(expr|ele|html|obj[,con]) 	
							
	
	*/
				
				//(1)eq()  选择索引值为等于 3 的 div 元素
				$("#btn1").click(function(){
					$("div").eq(3).css("background-color","#bfa");
				});
				//(2)first()选择第一个 div 元素
				 $("#btn2").click(function(){
					 //first()   选取第一个元素
					$("div").first().css("background-color","#bfa");
				});
				//(3)last()选择最后一个 div 元素
				$("#btn3").click(function(){
					//last()  选取最后一个元素
					$("div").last().css("background-color","#bfa");
				});
				//(4)filter()在div中选择索引为偶数的
				$("#btn4").click(function(){
					//filter()  过滤   传入的是选择器字符串
					$("div").filter(":even").css("background-color","#bfa");
				});
				 //(5)is()判断#one是否为:empty或:parent(判断是否为空或者非空)
				//is用来检测jq对象是否符合指定的选择器
				$("#btn5").click(function(){

					alert($("#one").is(":empty"));
				});
				
				//(6)has()选择div中包含.mini的
				$("#btn6").click(function(){
					//has(selector)  选择器字符串    是否包含selector
					$("div").has(".mini").css("background-color","#bfa");
				});
				//(7)not()选择div中class不为one的
				$("#btn7").click(function(){
					//not(selector)  选择不是selector的元素
					$("div").not(".one").css("background-color","#bfa");
				});
				//(8)children()在body中选择所有class为one的div子元素
				$("#btn8").click(function(){
					//children()  选出所有的子元素
					$("body").children("div.one").css("background-color","#bfa");
				});
				
				
				//(9)find()在body中选择所有class为mini的div元素
				$("#btn9").click(function(){
					//find()  选出所有的后代元素
					$("body").find("div.mini").css("background-color","#bfa");
				});
				//(10)next() #one的下一个div
				$("#btn10").click(function(){
					//next()  选择下一个兄弟元素
					$("#one").next().css("background-color","#bfa");
				});
				//(11)nextAll() #one后面所有的span元素
				$("#btn11").click(function(){
					//nextAll()   选出后面所有的元素
					$("#one").nextAll("span").css("background-color","#bfa");
				});
				//(12)nextUntil() #one和span之间的元素
				$("#btn12").click(function(){
					//
					$("#one").nextUntil("span").css("background-color","#bfa")
				});
				//(13)parent() .mini的父元素
				$("#btn13").click(function(){
					$(".mini").parent().css("background-color","#bfa");
				});
				//(14)prev() #two的上一个div
				$("#btn14").click(function(){
					//prev()  
					$("#two").prev("div").css("background-color","#bfa")
				});
				//(15)prevAll() span前面所有的div
				$("#btn15").click(function(){
					//prevAll()   选出前面所有的元素
					$("span").prevAll("div").css("background-color","#bfa")
				});
				//(16)prevUntil() span向前直到#one的元素
				$("#btn16").click(function(){
					//prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
					$("span").prevUntil("#one").css("background-color","#bfa")
				});
				//(17)siblings() #two的所有兄弟元素
				$("#btn17").click(function(){
					//siblings()    找到所有的兄弟元素，包括前面的和后面的
					$("#two").siblings().css("background-color","#bfa")
				});
				
				
				//(18)add()选择所有的 span 元素和id为two的元素
				$("#btn18").click(function(){
	
					//   $("span,#two,.mini,#one")
					$("span").add("#two")
							.add(".mini").add("#one").css("background-color","#bfa");
					
				});
				


			});
			
			
		</script>
	</head>
	<body>		
		<input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
		<input type="button" value="first()选择第一个 div 元素" id="btn2" />
		<input type="button" value="last()选择最后一个 div 元素" id="btn3" />
		<input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
		<input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
		<input type="button" value="has()选择div中包含.mini的" id="btn6" />
		<input type="button" value="not()选择div中class不为one的" id="btn7" />
		<input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
		<input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
		<input type="button" value="next()#one的下一个div" id="btn10" />
		<input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
		<input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
		<input type="button" value="parent().mini的父元素" id="btn13" />
		<input type="button" value="prev()#two的上一个div" id="btn14" />
		<input type="button" value="prevAll()span前面所有的div" id="btn15" />
		<input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
		<input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
		<input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />

		
		<h3>基本选择器.</h3>
		<br /><br />
		文本框<input type="text" name="account" disabled="disabled" />
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other"><b>class为mini,title为other</b></div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<span id="span1">^^span元素 111^^</span>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span2">^^span元素 222^^</span>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>

Juqery的属性和操作

html(),text(),val()方法

html方法
text()方法和html方法相似，只是text方法只能操作文本
val只能设置和获取表单项的val值

注意：下拉单选和下拉多选是获取select标签而不是option

val方法的重要用法：val 方法同时设置多个表单项的选中状态：

说明：这个用法目前觉得毫无逻辑可言（为什么通过设置设置value属性就可以有这个效果）
具体实现过程看笔记即可

attr()和prop()方法

attr传入一个参数表示获取属性值，传入2个参数表示设置属性值
prop也一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="jquery-1.7.2.js"></script>
  <script type="text/javascript">

  $(function (){
    //attr
  //alert( $(":checkbox:first").attr("name"));//获取属性值:checked
  //$(":checkbox:first").attr("name","aaaaaaa");//设置属性值:此时name的值就变成了aaaaaaa
      //alert( $(":checkbox:first").attr("name"));//获取属性值:checked
   //当我们使用attr获取和设置checked的属性值
    ///  alert($(":checkbox").attr("checked"));//checked
      //而当该标签没有checked属性的时候将返回undifined,官方认为这是错误
      //破冰之法：用prop方法来解决这个问题
      alert($(":checkbox").prop("checked"));//返回ture
      //如果没有checked属性,则返回false




  });

  </script>
</head>
<body>
<input checked="checked" name="checkbox" type="checkbox" value="checkbox1">checkbox1 <br>
<input  name="checkbox" type="checkbox" value="checkbox2">checkbox2
</body>
</html>

疑问：

1.设置成功了

2.获取属性值

但是真实的情况是只是获取到了第一个标签的name属性值
练习：全选和全部不选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="../jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function(){
// 给全选绑定单击事件
			$("#checkedAllBtn").click(function () {
				$(":checkbox").prop("checked",true);
			});
// 给全不选绑定单击事件
			$("#checkedNoBtn").click(function () {
				$(":checkbox").prop("checked",false);
			});
// 反选单击事件
			$("#checkedRevBtn").click(function () {
// 查询全部的球类的复选框
				$(":checkbox[name='items']").each(function () {
// 在 each 遍历的 function 函数中，有一个 this 对象。这个 this 对象是当前正在遍历到的 dom 对象
					this.checked = !this.checked;
				});
// 要检查 是否满选
// 获取全部的球类个数
				var allCount = $(":checkbox[name='items']").length;
// 再获取选中的球类个数
				var checkedCount = $(":checkbox[name='items']:checked").length;
// if (allCount == checkedCount) {
// $("#checkedAllBox").prop("checked",true);
// } else {
// $("#checkedAllBox").prop("checked",false);
// }
				$("#checkedAllBox").prop("checked",allCount == checkedCount);
			});
// 【提交】按钮单击事件
			$("#sendBtn").click(function () {
// 获取选中的球类的复选框
				$(":checkbox[name='items']:checked").each(function () {
					alert(this.value);
				});
			});
// 给【全选/全不选】绑定单击事件
			$("#checkedAllBox").click(function () {
// 在事件的 function 函数中，有一个 this 对象，这个 this 对象是当前正在响应事件的 dom 对象
// alert(this.checked);
				$(":checkbox[name='items']").prop("checked",this.checked);
			});
// 给全部球类绑定单击事件
			$(":checkbox[name='items']").click(function () {
// 要检查 是否满选
// 获取全部的球类个数
				var allCount = $(":checkbox[name='items']").length;
// 再获取选中的球类个数
				var checkedCount = $(":checkbox[name='items']:checked").length;
				$("#checkedAllBox").prop("checked",allCount == checkedCount);
			});
		});
	</script>
</head>
<body>
<form method="post" action="">
	你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
	<br />
	<input type="checkbox" name="items" value="足球" />足球
	<input type="checkbox" name="items" value="篮球" />篮球
	<input type="checkbox" name="items" value="羽毛球" />羽毛球
	<input type="checkbox" name="items" value="乒乓球" />乒乓球
	<br />
	<input type="button" id="checkedAllBtn" value="全 选" />
	<input type="button" id="checkedNoBtn" value="全不选" />
	<input type="button" id="checkedRevBtn" value="反 选" />
	<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>

评价：这个练习很好，存在多层逻辑的绑定关系，适合经常复习

dom的增删改

对标签进行增删改
注意：括号里面也可以放选择器

注意：在该视频的讲解中子元素仅仅是下一级的子元素，不包含孙子元素

发现一个规律：如果我们查询到的对象是一个juquery数组，其实这些对象可以一起进行操作，而不用进行遍历单个操作

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		select {
			width: 100px;
			height: 140px;
		}
		
		div {
			width: 130px;
			float: left;
			text-align: center;
		}
	</style>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		//页面加载完成之后
	$(function (){
	//1.第一个按钮：选中添加到右边
	$("button:eq(0)").click(function (){
		$("select:eq(0) option:selected").appendTo("select:eq(1)");


	});

    //2.全部添加到右边
	$("button:eq(1)").click(function (){
		$("select:eq(0) option").appendTo("select:eq(1)");


	});
	//3.选中添加到左边
		$("button:eq(2)").click(function (){
			$("select:eq(1) option:selected").appendTo("select:eq(0)");
		});
		//4.全部添加到左边
		$("button:eq(3)").click(function (){
			$("select:eq(1) option").appendTo("select:eq(0)");

		});


	})	;

		
	
	</script>
</head>
<body>

	<div id="left">
		<select multiple="multiple" name="sel01">
			<option value="opt01">选项1</option>
			<option value="opt02">选项2</option>
			<option value="opt03">选项3</option>
			<option value="opt04">选项4</option>
			<option value="opt05">选项5</option>
			<option value="opt06">选项6</option>
			<option value="opt07">选项7</option>
			<option value="opt08">选项8</option>
		</select>
		
		<button>选中添加到右边</button>
		<button>全部添加到右边</button>
	</div>
	<div id="rigth">
		<select multiple="multiple" name="sel02">
		</select>
		<button>选中删除到左边</button>
		<button>全部删除到左边</button>
	</div>

</body>
</html>

练习：动态添加和删除表格记录

效果说明：
1.当添加删除表格项时，弹出是否删除，点击确定则删除表格中的该项
2.当在下面的表单中添加相应的内容则将数据添加进表格中

1.解决添加问题

1.点击submit按钮后上面的表格将添加一行数据
2.这个数据由下面表单的内容得到，我们应该获取表单数据并将数据添加到上面的表格中
2.解决删除问题
要点：
1.我们将获得的a标签同时绑定click(因为他们要实现的功能一致)
2.通过寻找点击a标签的父元素来决定谁进行相应
3.注意相应之后的提示语（具体提示正在删除哪个行）
注意：a标签比较特殊，在输出a标签时将输出其地址

在事件响应的function函数中有一个this对象，这个this对象是当前正在相应的dom对象
重点：有个问题
发现当我们从表单从新添加后，删除这个添加项时却删除不了
原因：当我们页面加载完成之后就进行了事件的绑定，而我们新添加的项是在页面加载完成之后操作的，所有新添加的行没有进行事件的绑定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/ .css" />
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function (){
		//创建一个用于复用删除的函数
		var delectFun = function (){
			//confirm是JS提供的一个提示框函数，传入什么将提示什么
			//当用户点击了确定将返回true,当用户点击了不确定将返回false

			//在事件响应的function函数中有一个this对象，这个this对象是当前正在相应的dom对象

			//通过点击的a标签找到他的父元素，然后删除对应的行即可
			trObje =	$(this).parent().parent();//找到tr对象
			//找到name所在的标签并获取text
			var name = trObje.find("td:first").text();
			if(confirm("你确定要删除"+name+"吗")){
				trObje.remove();
			}



			//发现在点击操作后还是会进行跳转（跳转为a的默认行为，return false可以阻止标签的默认行为）
			return false;
		}


	//给submit绑定单击事件
	$("#addEmpButton").click(function (){
		//获取表单的输入内容
		var name = $("#empName").val();
		var email = $("#email").val();
		var salary = $("#salary").val();
      //利用上面获取的数据创建表格的行并添加到表格中
	$trObje =	$("<tr>" +
				"<td>"+name+"</td>" +
				"<td>"+email+"</td>" +
				"<td>"+salary+"</td>" +
				"<td><a href=\"deleteEmp?id=003\">Delete</a></td>");

       $trObje.appendTo("#employeeTable");//添加到表格中
		//给添加的行的a标签绑上事件
		$trObje.find("a").click(delectFun);


	});

   //给a标签绑定单击事件
	$("a").click(delectFun)	;




	});

</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>

注意：
在上面的代码中我们创建了一个复用函数用来简化代码，然后调用复用函数的方式和此时不同相应的函数中的this对象不同
所以我们需要用这种调用方式来保证this是相同的

css样式操作

样式说明
获取和设置元素的坐标
可以通过在控制台打印出来坐标值

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
	div{
		width:100px;
		height:260px;
	}
	
	div.whiteborder{
		border: 2px white solid;
	}
	
	div.redDiv{
		background-color: red;
	}
	
	div.blueBorder{
		border: 5px blue solid;
	}
	
</style>

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	

	$(function(){
		
		var $divEle = $('div:first');
		
		$('#btn01').click(function(){
			//addClass() - 向被选元素添加一个或多个类
			$divEle.addClass('redDiv blueBorder');
		});
		
		$('#btn02').click(function(){
			//removeClass() - 从被选元素删除一个或多个类 
			$divEle.removeClass("redDiv");//写类名为参数则是具体删除哪个样式，不写则是都删除
		});
	
		
		$('#btn03').click(function(){
			//toggleClass() - 对被选元素进行添加/删除类的切换操作 
			$divEle.toggleClass('redDiv')
		});
		
		
		$('#btn04').click(function(){
			//offset() - 返回第一个匹配元素相对于文档的位置。
			var pos = $divEle.offset();
			console.log(pos);

			$divEle.offset({
				top:100,
				left:50
			});

		});
		
	
		
	})
</script>
</head>
<body>
	<table align="center">
		<tr>
			<td>
				<div class="border">
				</div>
			</td>
			
			<td>
				<div class="btn">
					<input type="button" value="addClass()" id="btn01"/>
					<input type="button" value="removeClass()" id="btn02"/>
					<input type="button" value="toggleClass()" id="btn03"/>
					<input type="button" value="offset()" id="btn04"/>
				</div>
			</td>
		</tr>
	</table>
	
	
	
	<br /> <br />
	
	
	<br /> <br />
	
	
	
</body>
</html>

动画操作

show显示只对隐藏的元素有效，hide隐藏只对显示的元素有效

透明度：0：不可见，1：完全可见

练习：品牌展示

效果说明：

下面链接上面的文字和角标的不同是由上面的品牌是否隐藏或者显示决定的

样式写法说明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 12px;
	text-align: center;
}

a {
	color: #04D;
	text-decoration: none;
}

a:hover {
	color: #F50;
	text-decoration: underline;
}

.SubCategoryBox {
	width: 600px;
	margin: 0 auto;
	text-align: center;
	margin-top: 40px;
}

.SubCategoryBox ul {
	list-style: none;
}

.SubCategoryBox ul li {
	display: block;
	float: left;
	width: 200px;
	line-height: 20px;
}

.showmore , .showless{
	clear: both;
	text-align: center;
	padding-top: 10px;
}

.showmore a , .showless a{
	display: block;
	width: 120px;
	margin: 0 auto;
	line-height: 24px;
	border: 1px solid #AAA;
}

.showmore a span {
	padding-left: 15px;
	background: url(img/down.gif) no-repeat 0 0;
}

.showless a span {
	padding-left: 15px;
	background: url(img/up.gif) no-repeat 0 0;
}

.promoted a {
	color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function() {
		// 基本初始状态
		$("li:gt(5):not(:last)").hide();

		// 给功能的按钮绑定单击事件
		$("div div a").click(function () {
			// 让某些品牌，显示，或隐藏
			$("li:gt(5):not(:last)").toggle();
			// 判断 品牌，当前是否可见
			if( $("li:gt(5):not(:last)").is(":hidden") ){
				// 品牌隐藏的状态 ：1 显示全部品牌    == 角标向下 showmore
				$("div div a span").text("显示全部品牌");

				$("div div").removeClass();
				$("div div").addClass("showmore");

				// 去掉高亮
				$("li:contains('索尼')").removeClass("promoted");

			} else {
				// 品牌可见的状态：2 显示精简品牌	 == 角标向上 showless
				$("div div a span").text("显示精简品牌");

				$("div div").removeClass();
				$("div div").addClass("showless");

				// 加高亮
				$("li:contains('索尼')").addClass("promoted");
			}

			return false;
		});
	});
</script>
</head>
<body>
	<div class="SubCategoryBox">
		<ul>
			<li><a href="#">佳能</a><i>(30440) </i></li>
			<li><a href="#">索尼</a><i>(27220) </i></li>
			<li><a href="#">三星</a><i>(20808) </i></li>
			<li><a href="#">尼康</a><i>(17821) </i></li>
			<li><a href="#">松下</a><i>(12289) </i></li>
			<li><a href="#">卡西欧</a><i>(8242) </i></li>
			<li><a href="#">富士</a><i>(14894) </i></li>
			<li><a href="#">柯达</a><i>(9520) </i></li>
			<li><a href="#">宾得</a><i>(2195) </i></li>
			<li><a href="#">理光</a><i>(4114) </i></li>
			<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
			<li><a href="#">明基</a><i>(1466) </i></li>
			<li><a href="#">爱国者</a><i>(3091) </i></li>
			<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
		</ul>
		<div class="showmore">
			<a href="more.html"><span>显示全部品牌</span></a>
		</div>
	</div>
</body>
</html>

要点：
1.在初始阶段将一些品牌隐藏
2.将链接绑定单击事件，让他隐藏与展示轮换
3.重点在于通过品牌状态来角标的变换（通过改变样式来实现）

jquery事件操作

原生JS和jequery页面加载完成之后的区别

jquery中常用的事件处理方法

click等方法（这些关于事件的方法都可以用来绑定或者是触发事件）
live方法

事件的冒泡

事件对象

事件对象的应用

练习：事件图片跟随

通过观察需要三个事件
1.鼠标移入
2.鼠标移出
3.鼠标在图片里面移动
对于为什么鼠标在图片上面移动时，大图片会出现频闪

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<style type="text/css">
		body {
			text-align: center;
		}
		#small {
			margin-top: 150px;
		}
		#showBig {
			position: absolute;
			display: none;
		}
	</style>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#small").bind("mouseover mouseout mousemove",function (event) {
				//1.鼠标移入图片展示大图片
				if (event.type == "mouseover") {
					$("#showBig").show();
					//2.鼠标在图片上移动改变大图片的坐标
					//将此时大图片的坐标变成此时触发移动事件鼠标的坐标
				} else if (event.type == "mousemove") {
					console.log(event);
					$("#showBig").offset({
						//+10让他远离大图片
						left: event.pageX+10 ,
						top: event.pageY+10
					});
					//3.鼠标移出图片隐藏图片
				} else if (event.type == "mouseout") {
					$("#showBig").hide();
				}
			});
		});
	</script>
</head>
<body>
<img id="small" src="img/small.jpg" />
<div id="showBig">
	<img src="img/big.jpg">
</div>
</body>
</html>

posted @ 2023-08-22 12:31 一往而深，阅读(35) 评论(0) 编辑收藏举报

刷新页面返回顶部