<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    //引入jquery
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    
    <script type="text/javascript">
      //用原生方法实现
        // window.onload = function () {
            // var btnObj = document.getElementById("btnId");
            // // alert(btnObj);//[object HTMLButtonElement] ====>>> dom 对象
            // btnObj.onclick = function () {
            // alert("js 原生的单击事件");
            // }
        // }

        $(function () { // 表示页面加载完成之后，相当window.onload = function () {}
            var $btnObj = $("#btnId"); // 表示按id查询标签对象
            $btnObj.click(function () { // 绑定单击事件
                alert("jQuery 的单击事件");
            });
         });
    </script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>

  常见问题？
1、使用 jQuery 一定要引入jQuery库吗？答案：是，必须
2、jQuery中的$是什么？答案：它是一个函数
3、怎么为按钮添加点击响应函数的？答案：
   1、使用 jQuery 查询到标签对象
   2、使用标签对象.click( function(){} );

jQuery核心函数

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。 $() 就是调用 $ 这个函数。

1 、传入参数为 [ 函数 ] 时：表示页面加载完成之后。相当于window.onload = function(){}

2 、传入参数为 [ HTML 字符串 ] 时：会创建这个 html 标签对象

3、传入参数为 [ 选择器字符串 ] 时：

$(“#id 属性值”); id 选择器，根据 id 查询标签对象

$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象

$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象

4、传入参数为 [ DOM 对象 ] 时：会把这个 dom 对象转换为 jQuery 对象

//核心函数的4个作用
	//传入参数为[函数]时：在文档加载完成后执行这个函数
    $(function () {
        alert("页面加载完成之后，自动调用");
    });

	//传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
    $(function () {
        $("    <div>"+
            "<span>div-span1</span>"+
            "<span>div-span2</span>"+
            "</div>").appendTo("body");
    });

	//传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象

	//传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回,写法可以通过jquery的选择器优化
    $(function () {
        var elementById = document.getElementById("btn1");
        alert(elementById);//dom对象，[object HTMLButtonElement]
        alert($("elementById"));//[object Object]
    });

jQuery对象和dom对象区分

Dom对象和jQuery对象区分

Dom对象
1.通过 getElementById()查询出来的标签对象是 Dom 对象
2.通过 getElementsByName()查询出来的标签对象是 Dom 对象
3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
4.通过 createElement() 方法创建的对象，是 Dom 对象
DOM 对象Alert出来的效果是：[object HTML标签名Element]

jQuery 对象

5. 通过 JQuery 提供的 API 创建的对象，是 JQuery 对象

6. 通过 JQuery 包装的 Dom 对象，也是 JQuery 对象

7. 通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象

jQuery 对象 Alert 出来的效果是：[object Object]

问题： jQuery 对象的本质是什么？

jQuery 对象是dom 对象的数组 + jQuery 提供的一系列功能函数。

<script type="text/javascript">
	$(function(){
		//testDiv.css("color","red")
		//testDiv.style.color = "blue";
		var arr = [12,"abc","true"];
		var $btns = $("button");
		for (var i = 0; i < $btns.length; i++) {
			alert($btns[i]);//[object HTMLButtonElement]
		}
	});
</script>
</head>
<body>
	
	<div id="testDiv">Atguigu is Very Good!</div>
	
	<button id="dom2dom">使用DOM对象调用DOM方法</button>
	<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
	<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
	<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>

</body>

jQuery对象和Dom对象使用区别

jQuery 对象不能使用 DOM 对象的属性和方法,DOM 对象也不能使用 jQuery 对象的属性和方法

	$(function(){
		//testDiv.css("color","red")
		//testDiv.style.color = "blue";
		document.getElementById("testDiv").innerText = "hello";//DOM 对象的属性和方法
		$("testDiv").innerText = "hello1";//jQuery 对象不能使用 DOM 对象的属性和方法
		$("testDiv").click(function () {
			alert("click()是jQuery对象的方法");
		});

		document.getElementById("testDiv").click(function () {//DOM对象也不能使用 jQuery 对象的属性和方法

		})
	});

Dom对象和jQuery对象互转

1 、 dom 对象转化为 jQuery 对象（ * 重点）

1 、先有 DOM 对象

2 、 $( DOM 对象 ) 就可以转换成为 jQuery 对象

2 、 jQuery 对象转为 dom 对象（ * 重点）

1 、先有 jQuery 对象

2 、 jQuery 对象 [ 下标 ] 取出相应的 DOM 对象（ jQuery 对象是dom 对象的数组）

<script type="text/javascript">
	$(function(){
		alert($("button")[0]);//[object HTMLButtonElement]
	});
</script>

jQuery选择器

基本选择器

#ID 选择器：根据 id 查找标签对象

.class 选择器：根据 class 查找标签对象

element 选择器：根据标签名查找标签对象

* 选择器：表示任意的，所有的元素

selector1 ， selector2 组合选择器：合并选择器 1 ，选择器 2 的结果并返回

p.myClass表示标签名必须是 p标签，而且class类型还要是myClass

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function () {
				//1.选择 id 为 one 的元素,显示样式效果 "background-color","#bbffaa"
				$("#btn1").click(function () {
					//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>

层级选择器

ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素

parent > child 子元素选择器：在给定的父元素下匹配所有的子元素（一层）

prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素

prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

		<script type="text/javascript" src="../script/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>

过滤选择器

基本过滤器：

:first 获取第一个元素

:last 获取最后个元素

:not(selector) 去除所有与给定选择器匹配的元素

:even 匹配所有索引值为偶数的元素，从 0 开始计数

:odd 匹配所有索引值为奇数的元素，从 0 开始计数

:eq(index） 匹配一个给定索引值的元素

:gt(index) 匹配所有大于给定索引值的元素

:lt(index) 匹配所有小于给定索引值的元素

:header 匹配如 h1, h2, h3 之类的标题元素

:animated 匹配所有正在执行动画效果的元素

		<script type="text/javascript" src="../script/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");
				});

				//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>

内容过滤器：

:contains(text) 匹配包含给定文本的元素

:empty 匹配所有不包含子元素或者文本的空元素

:parent 匹配含有子元素或者文本的元素

:has(selector) 匹配含有选择器所匹配的元素的元素

		<script type="text/javascript" src="../script/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>

属性过滤器：

[attribute] 匹配包含给定属性的元素。

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

[attribute*=value] 匹配给定的属性是以包含某些值的元素

[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。

<script type="text/javascript" src="../script/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!='test']").css("background", "#bbffaa");
		});
	});
</script>

表单过滤器:

:input 匹配所有 input, textarea, select 和 button 元素

:text 匹配所有文本输入框

:password 匹配所有的密码输入框

:radio 匹配所有的单选框

:checkbox 匹配所有的复选框

:submit 匹配所有提交按钮

:image 匹配所有 img 标签

:reset 匹配所有重置按钮

:button 匹配所有 input type=button按钮

:file 匹配所有input type=file文件上传

:hidden 匹配所有不可见元素display:none或input type=hidden

表单对象属性过滤器：

:enabled 匹配所有可用元素

:disabled 匹配所有不可用元素

:checked 匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象

:selected 匹配所有选中的 option

		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){				
				//1.对表单内 可用input 赋值操作
				$("#btn1").click(function(){
					//val()可以操作表单项的value属性值。可以设置和获取
					$(":text:enabled").val("New Value");
				});
				//2.对表单内 不可用input 赋值操作
				$("#btn2").click(function(){
					$(":text:disabled").val("New Value Too");
				});
				//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
				$("#btn3").click(function(){
					alert($(":checkbox:checked").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);

					//新遍历方式
					//each方法是jQuery对象提供用来遍历元素的方法
					//在遍历的function函数中，有一个this对象，这个this对象就是当前遍历的dom对象
					$eles.each(function () {
						//alert($eles[i].value)
						alert(this.value);
					})
				});


				//5.获取下拉框选中的内容  
				$("#btn5").click(function(){
					
					var $options = $("select option:selected");
					$options.each(function () {
						alert(this.value);
					})
				});
			})	
		</script>

jQuery元素筛选

eq() 获取给定索引的元素功能跟 :eq() 一样

first() 获取第一个元素功能跟 :first 一样

last() 获取最后一个元素功能跟 :last 一样

filter(exp) 留下匹配的元素

is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回， true

has(exp) 返回包含有匹配选择器的元素的元素功能跟 :has 一样

not(exp) 删除匹配选择器的元素功能跟 :not 一样

children(exp) 返回匹配给定选择器的子元素功能跟 parent>child 一样find(exp) 返回匹配给定选择器的后代元素功能跟ancestor descendant一样

next() 返回当前元素的下一个兄弟元素功能跟 prev + next 功能一样

nextAll() 返回当前元素后面所有的兄弟元素功能跟 prev ~ siblings 功能一样

nextUntil() 返回当前元素到指定匹配的元素为止的后面元素

parent() 返回父元素

prev(exp) 返回当前元素的上一个兄弟元素

prevAll() 返回当前元素前面所有的兄弟元素

prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素

siblings(exp) 返回所有兄弟元素

add() 把add()匹配的选择器的元素添加到当前 jquery 对象中

		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();

				
				//(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[class='one']").css("background-color","#bfa");
				});
				
				
				//(9)find()在body中选择所有class为mini的div元素
				$("#btn9").click(function(){
					//find()  选出所有的后代元素
					$("body").find("div[class = 'mini']").css("background-color","#bfa");
				});
				//(10)next() #one的下一个div
				$("#btn10").click(function(){
					//next()  选择下一个兄弟元素
					$("#one").next("div").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>

jQuery操作

jQuery属性操作

html() 它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。text() 它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。

val() 它可以设置和获取表单项的 value 属性值。跟 dom 属性 value 一样

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

        $(function () {
             //不传参数，是获取，传递参数是设置
             alert( $("div").html() );// 获取
             $("div").html("<h1>我是div中的标题 1</h1>");// 设置

             //不传参数，是获取，传递参数是设置
             alert( $("div").text() ); // 获取
             $("div").text("<h1>我是div中的标题 1</h1>"); // 设置

            // 不传参数，是获取，传递参数是设置
            $("button").click(function () {
                alert($("#username").val());//获取
                $("#username").val("超级程序猿");// 设置
            });
        });
    </script>
</head>
<body>
    <div>我是div标签 <span>我是div中的span</span></div>
    <input type="text" name="username" id="username" />
    <button>操作输入框</button>
</body>
</html>

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

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

        $(function () {

            // 批量操作单选
            $(":radio").val(["radio2"]);
            // 批量操作筛选框的选中状态
            $(":checkbox").val(["checkbox3","checkbox2"]);
            // 批量操作多选的下拉框选中状态
            $("#multiple").val(["mul2","mul3","mul4"]);
            // 操作单选的下拉框选中状态
            $("#single").val(["sin2"]);

           //一次性操作           
             $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
        });

    </script>
</head>
<body>
<body>
    单选：
    <input name="radio" type="radio" value="radio1" />radio1
    <input name="radio" type="radio" value="radio2" />radio2
    <br/>
    多选：
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>

    下拉多选 ：
    <select id="multiple" multiple="multiple" size="4">
        <option value="mul1">mul1</option>
        <option value="mul2">mul2</option>
        <option value="mul3">mul3</option>
        <option value="mul4">mul4</option>
    </select>
    <br/>

    下拉单选 ：
    <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
    </select>
</body>
</body>
</html>

attr()可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled等等，attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj

prop()可以设置和获取属性的值, 只推荐操作 checked 、 readOnly 、 selected 、 disabled 等等

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

        $(function () {
            //attr
             alert( $(":checkbox:first").attr("name") ); // 获取
             $(":checkbox:first").attr("name","abc") ; // 设置

            // $(":checkbox").attr("checked" );// 没有checked时返回undefined,官方觉得返回undefined是一个错误
             $(":checkbox").prop("checked");// 获取
             $(":checkbox").prop("checked",false );// 设置
            //自定义属性
             $(":checkbox:first").attr("abc","abcValue");
              alert( $(":checkbox:first").attr("abc") );
                  });
    </script>
</head>
<body>
<body>
    <br/>
    多选：
    <input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2

练习：全选，全不选，反选

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/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遍历的函数中有一个this对象，这个this对象是当前正在遍历到的dom对象
				this.checked = !this.checked;
			})

			//遍历完之后，检查是否满选
			//获取全部的球类个数
			var allCount = $(":checkbox[name='items']").length;
			//获取选中的个数
			var checkCount = $(":checkbox[name='items']:checked").length;
			$("#checkedAllBox").prop("checked",allCount==checkCount);
		})

		// 【提交】按钮单击事件
		$("#sendBtn").click(function () {
			$(":checkbox[name='items']:checked").each(function () {
				alert(this.value);
			})
		})

		// 给【全选/全不选】绑定单击事件
		$("#checkedAllBox").click(function () {
			//在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象.
			//通过this得到其选中状态，也即是球类复选框需要对应的状态
			$(":checkbox[name='items']").prop("checked",this.checked);
		})

		//满足当球类都选择或都不选择时【全选/全不选】状态相应改变
		//给全部球类绑定单击事件
		$(":checkbox[name='items']").click(function () {
			//球类各自选项点击后进行判断是否满足全选或非全选
			//获取全部的球类个数
			var allCount = $(":checkbox[name='items']").length;
			//获取选中的个数
			var checkCount = $(":checkbox[name='items']:checked").length;
			$("#checkedAllBox").prop("checked",allCount==checkCount);
		})
	});
	
</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操作

内部插入：

appendTo() a.appendTo(b) 把a插入到b 子元素末尾，成为最后一个子元素

prependTo() a.prependTo(b) 把a插到 b 所有子元素前面，成为第一个子元素

外部插入：

insertAfter() a.insertAfter(b) 得到 ba

insertBefore() a.insertBefore(b) 得到 ab

替换 :

replaceWith() a.replaceWith(b) 用b替换掉 a

replaceAll() a.replaceAll(b) 用a替换掉所有 b

删除：

remove() a.remove(); 删除a标签

empty() a.empty(); 清空a标签里的内容

练习1：选项从左到右，从右到左练习

<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 () {
			//【选中添加到右边】
			$("button:eq(0)").click(function () {
				$("select:eq(0) option:selected").appendTo($("select:eq(1)"));

			})
			//【全部添加到右边】
			$("button:eq(1)").click(function () {
				$("select:eq(0) option").appendTo($("select:eq(1)"));
			})
			//【选中删除到左边】
			$("button:eq(2)").click(function () {
				$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
			})
			//【全部删除到左边】
			$("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>

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

<!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.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
		// 创建一个用于复用的删除的 function 函数
		//删除新创建的a标签和已经存在的a标签
		var deleFun = function(){
			// 在事件响应的function函数中，有一个this对象。这个this对象是当前正在响应事件的dom对象。
			var $trObj = $(this).parent().parent();
			var name = $trObj.find("td:first").text();
			/*
			** confirm是JavaScript <br/>* truefalse是语言提供的一个确认提示框函数。
			你给它传什么，它就提示什么当用户点击了确定，就返回当用户点击了取消，就返回*/
			if(confirm("是否删除"+ name +"标签")){
				$trObj.remove();
			}

			// return false; 可 以 阻止元素的默认行为。此处默认行为是a跳转
			return false;
		}

		//给Submit按钮绑定单击事件
		$("#addEmpButton").click(function () {
			//获取输入框，姓名，邮箱，工资的内容
			var name = $("#empName").val();
			var email = $("#email").val();
			var salary = $("#salary").val();

			// 创建一个行标签对象，添加到显示数据的表格中
			var $trObj = $("<tr>  " +
					"   <td>"+name+"</td>  " +
					"   <td>"+email+"</td>  " +
					"   <td>"+salary+"</td>  " +
					"   <td><a href='#'>Delete</a></td>  " +
					"  </tr>");
			// 添加到显示数据的表格中
			$trObj.appendTo($("#employeeTable"));

			// 给添加的行的a标签绑上事件,注意此处调用函数的形式
			$trObj.find("a").click(deleFun);
		})
		
		$("a").click(deleFun);
	})
</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>

CSS样式操作

addClass() 添加样式

removeClass() 删除样式

删除元素的class值；传递一个具体的class值，就会删除具体的某个class a.removeClass()：移除所有的class值

toggleClass() 有就删除，没有就添加样式。

offset() 获取和设置元素的坐标。

		
		var $divEle = $('div:first');
		
		$('#btn01').click(function(){
			//addClass() - 向被选元素添加一个或多个类
			$divEle.addClass("redDiv blackDiv");
		});
		
		$('#btn02').click(function(){
			//removeClass() - 从被选元素删除一个或多个类 
			$divEle.removeClass()
		});

		
		$('#btn03').click(function(){
			//toggleClass() - 对被选元素进行添加/删除类的切换操作 
			//切换就是如果具有该类那么删除，如果没有那么添加上
			$divEle.toggleClass("redDiv");
		});
		
		$('#btn04').click(function(){
			//offset() - 返回第一个匹配元素相对于文档的位置。
			var os = $divEle.offset();
			//注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距
			alert("顶边距："+os.top+" 左边距："+os.left);
			
			//调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left
			//offset({ top: 10, left: 30 });
			 $divEle.offset({
				 top:50,
				 left:60
			 }); 
		});

jQuery动画

基本动画

show() 将隐藏的元素显示

hide() 将可见的元素隐藏。

toggle() 切换，可见就隐藏，不可见就显示。

以上动画方法都可以添加参数。

1 、第一个参数是动画执行的时长，以毫秒为单位

2 、第二个参数是动画的回调函数 ( 动画完成后自动调用的函数 )

淡入淡出动画

fadeIn() 淡入（慢慢可见）

fadeOut() 淡出（慢慢消失）

fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明， 1 完成可见， 0.5 半透明

fadeToggle() 淡入/淡出切换

<script type="text/javascript">
	/* 	
		基本
		show([speed,[easing],[fn]]) 
		hide([speed,[easing],[fn]]) 
		toggle([speed],[easing],[fn]) 
		滑动
		slideDown([spe],[eas],[fn]) 
		slideUp([speed,[easing],[fn]]) 
		slideToggle([speed],[easing],[fn]) 
		淡入淡出
		fadeIn([speed],[eas],[fn]) 
		fadeOut([speed],[eas],[fn]) 
		fadeTo([[spe],opa,[eas],[fn]]) 
		fadeToggle([speed,[eas],[fn]])
		*/
		$(function(){
			//显示   show()
			$("#btn1").click(function(){
				$("#div1").show(1000);
			});		
			//隐藏  hide()
			$("#btn2").click(function(){
				$("#div1").hide(1000);
			});	
			//切换   toggle()
			$("#btn3").click(function(){
				$("#div1").toggle(1000);
			});	
			
			
			//淡入   fadeIn()
			$("#btn4").click(function(){
				$("#div1").fadeIn(500);
			});	
			//淡出  fadeOut()
			$("#btn5").click(function(){
				$("#div1").fadeOut(500);
			});	
			
			//淡化到  fadeTo()
			$("#btn6").click(function(){
				$("#div1").fadeTo("slow",Math.random());
			});	
			//淡化切换  fadeToggle()
			$("#btn7").click(function(){
				$("#div1").fadeToggle("slow","linear");
			});	
		})
</script>

练习：品牌展示

1. 点击按钮的时候，隐藏和显示卡西欧之后的品牌。

2. 当显示全部内容的时候，按钮文本为“显示精简品牌” 然后，小三角形向上。所有品牌产品为默认颜色。

3. 当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌” 然后小三形向下。并且把佳能，尼康的品牌颜色改为红色（给 li 标签添加 promoted 样式即可）

<!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{
				$("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>

jQuery事件操作

$( function(){} ); 和 window.onload = function(){} 的区别？

他们分别是在什么时候触发？

1、$( function(){} )浏览器的内核解析完页面的标签创建好的DOM 对象之后就会马上执行。

2、window.onload = function(){}除了要等浏览器内核解析完标签创建好的DOM 对象，还要等标签显示时需要的内容加载完成。

他们执行的次数？

1、window.onload = function(){}只执行最后注册的 function 函数，前面会覆盖。

2、jQuery 是把注册的 function 函数，依次顺序全部执行。

<script type="text/javascript">
    //只执行原生js的页面加载完成之后--3
	window.onload = function () {
		alert("原生js的页面加载完成之后--1")
	}
	window.onload = function () {
		alert("原生js的页面加载完成之后--2")
	}
	window.onload = function () {
		alert("原生js的页面加载完成之后--3")
	}
    
    //依次执行
	$(function () {
		alert("jquery的页面加载完成 之后--3")
	});
	// jquery的页面加载完成 之后
	$(function () {
		alert("jquery的页面加载完成 之后--1")
	});
	$(function () {
		alert("jquery的页面加载完成 之后--2")
	});

常用事件处理方法

click()它可以绑定单击事件，以及触发单击事件

$("h5").click(function () { // 传function是绑定事件
	alert('h5单击事件 == click方法绑定')
 });

$("button").click(function () {
		$("h5").click(); // 不传function是触发事件.点击按钮触发h5的单机事件
 });

mouseover() 鼠标移入事件 mouseout() 鼠标移出事件

//鼠标移入
$("h5").mouseover(function () {
    console.log("你进来了")
});

//鼠标移出
 $("h5").mouseout(function () {
	console.log("你出去了")
});

bind()可以给元素一次性绑定一个或多个事件。

// 使用bind绑定事件
$("h5").bind("click mouseover mouseout",function () {//绑定多个用空格隔开 事件名
    console.log("这是bind绑定的事件"); 
});

one()使用上跟 bind一样。但是one方法绑定的事件只会响应一次。

$("h5").one("click mouseover mouseout",function () {//不会重复响应相同的事件
    console.log("这是one绑定的事件");
});

unbind()跟 bind方法相反的操作，解除事件的绑定

$("h5").unbind("click mouseover");
$("h5").unbind();//都删除

live()也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效

// 使用live绑定的单击事件
$("h5").live("click",function () {
    alert('h5单击事件 == live方法绑定');
});
$('<h5 class="head">什么是jQuery?</h5>').appendTo( $("#panel") );//新创建h5标签

$("button").click(function () {
    $("h5").click(); // 不传function是触发事件
});

事件的冒泡

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

那么如何阻止事件冒泡呢？

在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

<script type="text/javascript">
    $(function(){
        $("#content").click(function () {
        alert('我是div');
    });

        $("span").click(function () {
        alert('我是span');

        return false;
        });
    })
</script>
</head>
<body>
    <div id="content">
			外层div元素
			<span>内层span元素</span>
			外层div元素
    </div>
<body>

javaScript事件对象

事件对象，是封装有触发的事件信息的一个javascript对象。

我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。

获取javascript 事件对象

在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event 。

这个 event 就是 javascript 传递参事件处理函数的事件对象。

比如：

1.原生 javascript获取事件对象

window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
    console.log(event);
    }
}

2.jQuery 代码获取事件对象

$(function () {
    $("#areaDiv").click(function (event) {
    console.log(event);
    });
});

3.使用bind同时对多个事件绑定同一个函数。

怎么获取当前操作是什么事件?通过事件对象包含的事件类型判断

$("#areaDiv").bind("mouseover mouseout",function (event) {
    if (event.type == "mouseover") {
        console.log("鼠标移入");
    } else if (event.type == "mouseout") {
        console.log("鼠标移出");
    }
});

练习: 事件图片跟随

<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) {
        if (event.type == "mouseover") {
            $("#showBig").show();
        } else if (event.type == "mousemove") {
            console.log(event);
            $("#showBig").offset({
                left: event.pageX + 10,//+10避免图片闪烁问题
                top: event.pageY + 10
        });
        } 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>

原文链接：https://blog.csdn.net/u014681502/article/details/119510326