JavaScript

1.与html结合

1.方式一

直接在HTML文件的head或者body标签里面写

2.方式二

在外部建立js文件。然后在HTML里面使用src来引用路径

2.js的变量类型

3.js的比较关系运算

4.js的逻辑运算

5.js的数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
      let list = []; //创建数组

      list[2] = "333";
      alert(list[2]);
      alert(list.length);

      alert[0] = true;

      for (let i = 0; i < list.length; i++) {
        alert(list[i]);
      }
    </script>
</head>
<body>

</body>
</html>

##6.函数的两种定义方式

7.js不允许重载

第二个方法会直接覆盖掉第一个方法

##8.js函数的隐形参数

9.js中自定义对象

10.js的事件

###1.事件的注册

2.onload事件

###3. onclick事件

###4.onblur事件

5.onchange事件

6.onsubmit事件

一般在提交之前都要检测合法性，所以说如果不合法，则不会提交
则返回false
那么，可以在function中设置一个错误的返回值然后调用的时候接受

11.DOM模型

案例：实现对输入用户名的检测

用户名只能由数字，字母，下划线来表示，并且在5-12的长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <script type="text/javascript">

    window.onload = function (){
      let sut = document.getElementById("01")
      sut.onblur = function (){
        //获取它的对象
        let text = document.getElementById("01")
      //  获取对象的数值
        let name = text.value

        //正则表达式
        let patt = /^\w{5,12}$/;
        if(patt.test(name)){
          alert("输入合法")
        }
        else{
          alert("输入不合法")
        }
      }
    }

  </script>
</head>
<body>


输入用户： <input name="username" type="text" id="01"><br> //要注意加上name来分组
输入密码： <input name="password" type="password">   //否则就检测失败的
</body>
</html>

12.正则表达式

表达式	作用
new RegExp（）	在括号里写表达式（不需要 “ ”），创建，或者 / .... /
e	是否有字母e
[abc]	是否有字母a或b或c
[a-z]、[0-9]、[A-Z]	表示是否包含。。。一个或多个
/w	字母，数字，下划线

案例

13.DOM对象的使用

###1.验证提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <script type="text/javascript">

    window.onload = function (){
      let sut = document.getElementById("01")
      sut.onblur = function (){
        //获取它的对象
        let text = document.getElementById("01");
      //获取提示的对象信息
          let propmt = document.getElementById("username1")
      //  获取对象的数值
        let name = text.value

        //正则表达式
        let patt = /^\w{5,12}$/;
        if(patt.test(name)){
            propmt.innerHTML = "输入合法"
        }
        else{
            propmt.innerHTML = "输入不合法，请重新输入"
        }
      }
    }

  </script>
</head>
<body>


输入用户： <input name="username" type="text" id="01">
<span id="username1" style="color: red" ></span><br>
输入密码： <input name="password" type="password">
</body>
</html>

2.getElementsByName方法

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

    //全选
    function selectAll(){
      let list = document.getElementsByName("checks");
      for (let i = 0; i < list.length; i++) {
        list[i].checked = true;
      }
    }
    //  全不选
    function selectNotAll(){
      let list = document.getElementsByName("checks");
      for (let i = 0; i < list.length; i++) {
        list[i].checked = false;
      }
    }
    //  反选
    function selectF(){
      let list = document.getElementsByName("checks");
      for (let i = 0; i < list.length; i++) {
        list[i].checked = !list[i].checked;
      }
    }
  </script>
</head>
<body>
喜欢的语言:
java: <input  type="checkbox" name="checks" value="java">
c++: <input type="checkbox" name="checks" value="c++">
js: <input type="checkbox" name="checks" value="js">
python: <input type="checkbox" name="checks" value="python">
<br>

<button onclick="selectAll()">全选</button>
<button onclick="selectNotAll()">全不选</button>
<button onclick="selectF()">反选</button>

</body>
</html>

###3.getElementsByTagName方法

4.节点的常用属性和方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
		//1.查找#bj节点
		document.getElementById("btn01").onclick = function (){
			let rus = document.getElementById("bj")
			alert(rus.innerHTML)
		}
		//2.查找所有li节点
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			let rus = document.getElementsByTagName("li")
			for (let i = 0; i < rus.length; i++) {
				alert(rus[i].innerHTML)
			}
		};
		//3.查找name=gender的所有节点
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			let rus = document.getElementsByName("gender")
			for (let i = 0; i < rus.length; i++) {
				alert(rus[i].value)
			}
		};
		//4.查找#city下所有li节点
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			let rus = document.getElementById("city").getElementsByTagName("li")
			alert(rus.length)
		};
		//5.返回#city的所有子节点
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			alert(document.getElementById("city").childNodes.length)
		};
		//6.返回#phone的第一个子节点
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			alert(document.getElementById("phone").firstChild.innerHTML)
		};
		//7.返回#bj的父节点
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			alert(document.getElementById("bj").parentNode.innerHTML)
		};
		//8.返回#android的前一个兄弟节点
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			alert(document.getElementById("android").previousSibling.innerHTML)
		};
		//9.读取#username的value属性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			alert(document.getElementById("username").value)
		};
		//10.设置#username的value属性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			document.getElementById("username").value = "我是真的服"
		};
		//11.返回#bj的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			alert(document.getElementById("bj").innerText)
		};
	};
</script>
</head>
<body>
<div id="total">
	<div class="inner">
		<p>
			你喜欢哪个城市?
		</p>

		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>

		<br>
		<br>

		<p>
			你喜欢哪款单机游戏?
		</p>

		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>

		<br />
		<br />

		<p>
			你手机的操作系统是?
		</p>

		<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
	</div>

	<div class="inner">
		gender:
		<input type="radio" name="gender" value="male"/>
		Male
		<input type="radio" name="gender" value="female"/>
		Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	</div>
</div>
<div id="btnList">
	<div><button id="btn01">查找#bj节点</button></div>
	<div><button id="btn02">查找所有li节点</button></div>
	<div><button id="btn03">查找name=gender的所有节点</button></div>
	<div><button id="btn04">查找#city下所有li节点</button></div>
	<div><button id="btn05">返回#city的所有子节点</button></div>
	<div><button id="btn06">返回#phone的第一个子节点</button></div>
	<div><button id="btn07">返回#bj的父节点</button></div>
	<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
	<div><button id="btn09">返回#username的value属性值</button></div>
	<div><button id="btn10">设置#username的value属性值</button></div>
	<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

5.补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        //先进行页面加载
        window.onload = function (){
            //通过标签名创建一个节点
            let rus = document.createElement("div");
            //节点得中间值
            rus.innerHTML="你好哈";
            //生成节点
            document.body.appendChild(rus);
        }

    </script>
</head>
<body>

</body>
</html>

JQuery

##1.介绍

下面是网页版的JQuery手册

jquery.cuishifeng.cn

##2.JQuery的使用

<!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="../script/jquery-1.7.2.js"></script>

   <script type="text/javascript">

      $(function (){  //相当于页面加载完成之后
         let rus = $("#btnId");  //绑定id查询标签对象
         rus.click(function (){
            alert("JQuery实现") //点击方法
         })
      })
   </script>
</head>
<body>

   <button id="btnId">SayHello</button>

</body>
</html>

3.问题

4.JQuery核心函数： $

<!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="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

   //核心函数的4个作用

    //1.传入参数为[函数]时：在文档加载完成后执行这个函数
    $(function (){
        alert("页面加载完成")
        //2.传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
        $("<div>" +
            "    <span>01</span>" +
            "    <span>02</span>" +
            "</div>"
        ).appendTo("body")

        //3.传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
        /*
        "#id"  是id选择器
        “标签名”  是标签名选择器
        “.class 属性” 是类型选择器
        * */
        alert($("button").length)


        //4.传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
        let rus = document.getElementById("hh")
        alert(rus)
        alert($(rus))
    })

</script>
</head>
<body>
<button id="hh">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
</html>

5.JQ对象和DOM对象的区分

6.JQuery对象的本质

7.JQ和DOM的使用区别

8.DOM和JQuery的相互转换

DOM -> JQuery

JQuery -> DOM

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

   $(function(){
      //testDiv.css("color","red")
      //testDiv.style.color = "blue";

      let doms = document.getElementsByTagName("button");
      for (let i = 0; i < doms.length; i++) {
         alert(doms[i].innerHTML)
      }
      alert("ddd")

      let doms2 = $("button")
      for (let i = 0; i < doms2.length; i++) {
         alert(doms2[i].innerHTML)
      }

   });

</script>

9.JQuery选择器

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

###2.层级选择器

语句	作用
"body div"	选择 body 内的所有 div 元素
"body > div"	选择 id 为 one 的下一个 div 元素
"#one+div"	选择 id 为 one 的下一个 div 元素
"#two~div"	选择 id 为 two 的元素后面的所有 div 兄弟元素

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   $(document).ready(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>

###3.过滤选择器

语句	作用
":header"	选择所有的标题元素
":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");
      });
   });
</script>

###4.内容过滤选择器

语句	作用
:contains(text)	含有xx文本的元素
:empty	子元素为空的元素
:has(selector)	含有xx元素的元素
:parent	子元素不为空的元素

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

###5.属性过滤选择器

语句	作用
"div[title]"	选取含有属性title
"div[title='test']"	选取属性title值等于'test'
"div[title!='test']"	选取属性title值不等于'test'(*没有属性title的也将被选中)
"div[title[title!='test']"	选取含有 title 属性值, 且title 属性值不等于 tes
"div[title^='te']"	以'te'开始
("div[title$='est']")	以'est'结束
"div[title*='es']"	含有'es'的
"div[id[title*='es']"	选取有属性id的div元素，然后在结果中选取属性title值含有'es'的 div 元素

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

###6.表单过滤选择器

<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(){
         $(":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()+"】"; //先把dom值变成jq再使用val方法 相当于:eles[i].value
         }
         alert(str)
      });
      //5.获取下拉框选中的内容  
      $("#btn5").click(function(){
         var str = "";
         //注意这个选择器的特殊，因为select里面的option是真正的被选择项，
         //所以 :selected 选择器和 select[name='test']选择器的关系是子父关系
         //必须按照基本选择器选择后代的方法选
         var els = $(":selected");
         console.log(els);
         for(var i=0;i<els.size();i++){
            str += "【"+$(els[i]).val()+"】";
         }
         alert(str)
      });
   }) 
</script>

###7.JQ的元素筛选

<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();
				
	/**
					
	过滤
	eq(index|-index) 		              索引值，相当于数组下标
	first() 							  第一个
	last() 								  最后一个
	hasClass(class) 			    检查当前的元素是否含有某个特定的类，如果有，则返回true。
	filter(expr|obj|ele|fn) 			  拦截获取
	is(expr|obj|ele|fn)1.6* 			  检查是否存在
	has(expr|ele) 						  是否包含
	not(expr|ele|fn) 					  不为xx的
	slice(start,[end]) 					  
	
	查找
	children([expr]) 					  子类
	closest(expr,[con]|obj|ele)1.6*   	  
	find(expr|obj|ele) 					  在xx中选择xx
	next([expr]) 						  xx的下一个xx
	nextall([expr]) 					  xx的下所有xx
	nextUntil([exp|ele][,fil])1.6* 		  xx到xx
	parent([expr]) 						  xx的父类
	parents([expr]) 					  xx的所有父类
	parentsUntil([exp|ele][,fil])1.6*  	  
	prev([expr]) 						  xx的上一个xx
	prevall([expr]) 					  xx的上所有xx
	prevUntil([exp|ele][,fil])1.6* 		  xx之前到xx
	siblings([expr]) 					  xx的兄弟
	
	串联
	add(expr|ele|html|obj[,con]) 		  xx加上xx
							
	
	*/
				
				//(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("是否为empty："+$("#one").is(":empty"))
					alert("是否为parent："+$("#one").is(":parent"))
				});
				
				//(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("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>

10.JQuery的属性操作

<script type="text/javascript">
    $(function (){
        // alert($("div").html();)    //获取
        // $("div").html("hahhhhhhhhh");     //设置


        // alert($("div").text())            //获取
        // $("div").text("hhhhhhhhhhhhhhhhhhh");   //设置




        $("#btn").click(function (){
            // alert($("#s").val());     //获取
            $("#s").val("sds")   //设置
        })
    })
</script>

11.JQuery的 attr() 和 prop()

##12.DOM增删改的操作

</script>
<script type="text/javascript">
$(function(){
   //插到末尾
   $("<h1>标题里下</h1>").appendTo("#1")

   //插到开头
   $("<h1>标题里上</h1>").prependTo("#1")

   //插到外面下面
   $("<h1>标题外下</h1>").insertAfter("#1")

   //插到外面上面
   $("<h1>标题外上</h1>").insertBefore("#1")


   // //左被替换成右
   // $("#2").replaceWith("1替换成了")

   // //用左替换所有的右
   // $("<h1>替换</h1>").replaceAll("div")

   // //清空a标签
   // $("div").remove()

   //清空a标签里面的内容
   $("h1").empty()

})
</script>

13.JQ中的Class操作

<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 blueBorder ')
      });
   
      
      $('#btn03').click(function(){
         //toggleClass() - 对被选元素进行添加/删除类的切换操作 
         $divEle.toggleClass('redDiv blueBorder ')
      });
      
      
      $('#btn04').click(function(){
         //offset() - 返回第一个匹配元素相对于文档的位置。
         let post = $divEle.offset();
         console.log(post)
      });
      
   
      
   })
</script>

14.JQuery中的动画

<script type="text/javascript">
   /*     
      第一个是速度，第二个是减速，第三个是function
      基本
      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(1001,function (){
               alert("动画显示")
            })
         });       
         //隐藏  hide()
         $("#btn2").click(function(){
            $("#div1").hide()
         });    
         //切换   toggle()
         $("#btn3").click(function(){
            $("#div1").toggle()
         });    

         //循环动画
         let abc
         $("#btnnew").click((abc = function () {
            $("#div1").toggle(800,abc)
         }))

         //淡入   fadeIn()
         $("#btn4").click(function(){
            $("#div1").fadeIn()
         });    
         //淡出  fadeOut()
         $("#btn5").click(function(){
            $("#div1").fadeOut()
         });    
         
         //淡化到  fadeTo()
         $("#btn6").click(function(){
            
         });    
         //淡化切换  fadeToggle()
         $("#btn7").click(function(){
            
         });    
      })
</script>

15.JQuery对事件的操作

		<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		
			$(function(){
				//1.通常绑定事件的方式
				（1）点击
				 $("h5").click(function () {
				 	alert("hh")
				 })


				 //（2）鼠标的一入一出
				 $("h5").mousemove(function () {
				 	console.log("鼠标移入")
				 })
				
				 $("h5").mouseout(function () {
				 	console.log("鼠标移出")
				 })

				//2.jQuery提供的绑定方式：bind()函数

				 $("h5").bind("click",function () {
				 	alert("hhh")
				 })


				// 3.合并“鼠标移入”和“鼠标移出”事件
				 $("h5").bind("mousemove mouseout",function () {
				 	console.log("鼠标移入")
				 	console.log("鼠标移出")
				 })
				
				// 4.合并单击事件
				 $("h5").bind("click mousemove mouseout",function () {
				 	console.log("鼠标移入")
				 	console.log("鼠标移出")
				 })

				//5.切换元素可见状态


				//6.只绑定一次
				 $("h5").one("click mousemove mouseout",function () {
				 	 	console.log("鼠标移入")
				 	 	console.log("鼠标移出")
				 	 })

			});
		
		</script>

16.事件冒泡

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
   $(function(){
      $("span").click(function () {
         alert("span的点击")
         return false
      })

      $("#content").click(function () {
         alert("div的点击")
      })
   })
</script>

17.JavaScript的事件对象

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

   //1.原生javascript获取 事件对象
   //2.JQuery代码获取 事件对象
   //3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。

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

</script>

案例1：练习选择

<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 (){  //筛选name为items的多选对象，然后在each遍历
            this.checked = !this.checked   //this为当前遍历到的对象，再进行反选赋值
            let count = $(":checkbox[name='items']").length;
            let rus = $(":checkbox[name='items']:checked").length
            if(count == rus){
               $("#checkedAllBox").prop("checked",true)
            }
            else{
               $("#checkedAllBox").prop("checked",false)
            }
         })
      })

      //提交
      $("#sendBtn").click(function (){
         $(":checkbox[name='items']:checked").each(function (){
            alert(this.value)
         })
      })

      //复选框
      $("#checkedAllBox").click(function (){
         let rus = this.checked
         $(":checkbox[name='items']").prop("checked",rus)
      })
   });
   
</script>

##案例2：左到右，右到左

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    div, span, p {
      width: 180px;
      height: 180px;
      margin: 6px;

      border: #000 1px solid;
      float: left;
      font-size: 20px;
      font-family: Verdana;
    }

    div.mini {
      width: 100px;
      height: 100px;
      font-size: 50px;
    }

    div.hide {
      display: none;
    }
  </style>
  <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">

    $(function () {

      //选中添加到右边
      $("button:eq(0)").click(function () {
        $("select[name='sel01'] option:selected").appendTo($("select[name='sel02']"))
      })

      //全部添加到右边
      $("button:eq(1)").click(function () {
        $("select[name='sel01'] option").appendTo($("select[name='sel02']"))
      })


    //选中添加到右边
    $("button:eq(2)").click(function () {
      $("select[name='sel02'] option:selected").appendTo($("select[name='sel01']"))
    })

    //全部添加到右边
    $("button:eq(3)").click(function () {
      $("select[name='sel02'] option").appendTo($("select[name='sel01']"))
    })

    })
  </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>
      <br>
      <button>选中添加到右边</button><br>
      <button>全部添加到右边</button>
    </div>
    <div id="right">
      <select multiple="multiple" name="sel02">
      </select>
      <br>
      <button>选中删除到左边</button> <br>
      <button>全部删除到左边</button>
    </div>
</body>
</html>

案例3 ：表单的提交

<!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 () {
      $("#addEmpButton").click(function () {
         let name = $("#empName").val();
         let email = $("#email").val();
         let salary = $("#salary").val();


         let rus = $("<tr>\n" +
               "<td>"+name+"</td>" +
               "<td>"+email+"</td>" +
               "<td>"+salary+"</td>" +
               "<td><a href=\"deleteEmp?id=003\">Delete</a></td>" +
               "</tr>");


         rus.appendTo("#employeeTable");

         //给添加的a标签绑定删除事件
         rus.find("a").click(function (){
            if(confirm("你确定要删除"+$(this).parent().parent().find("td:first").text()+"吗？")){
               $(this).parent().parent().remove();  //this是a标签 的 Dom ，父类的父类是tr：也就是这一行

            }
            return false;
         })
      })


      //给删除的a标签绑定删除事件
      $("a").click(function () {
         //在那一行find选择td等于first第一个
         if(confirm("你确定要删除"+$(this).parent().parent().find("td:first").text()+"吗？")){
            $(this).parent().parent().remove();  //this是a标签 的 Dom ，父类的父类是tr：也就是这一行

         }
         return false;
      })


      //重置
      $("#reset").click(function (){
         $("#empName").val("");
         $("#email").val("");
         $("#salary").val("");
      })
   })
   
   
</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>

         <tr>
            <td>
               <input id="reset" type="reset" />
            </td>
         </tr>
   </div>

</body>
</html>

案例4：品牌展示

<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")){
            $("div div a span").text("显示全部品牌")
            $("div div").removeClass()
            $("div div").addClass("showmore")
         }
         else{
            $("div div a span").text("隐藏部分品牌")
            $("div div").removeClass()
            $("div div").addClass("showless")
         }

         return false;
      })

   });
</script>

##案例5：图片跟随

<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 == "mouseout"){
            $("#showBig").hide()
         }
         else{
            $("#showBig").offset({ //设置大图片的位置，从event中获取
               left: event.pageX+10,
               top:  event.pageY+10
            })
         }
      })
   });
</script>

JavaWeb第(2)部分：JavaScript 和 JQuery