JavaScript和JQuery

学习主题：JavaScript和JQuery
学习目标：
1 掌握js的表单验证
2 熟练敲出制作购物车代码,尽量不要看老师的代码
3 掌握js的prototype
4 掌握jquery的选择器

1.表单验证A

(1)如何可以产生一个4位的随机数验证码

//随机四位数，验证码
var ran = Math.floor(Math.random()*9000+1000);

(2)在案例中是如何控制表单是否提交的

1、onsubmit=”return checkName()”
2、document.fom.submit()
3、var fom = doucument.getElementById(“fom”);
           fom.submit();

2.表单验证B

(1)代码中如何判断性别是否选择的

/************性别校验*************/
			function checkSex(){
				//获取sex对象
				var sex=document.getElementsByName("sex");
				//获取span标签对象
				var span =document.getElementById("sex_span");
				for( var i in sex){
					
					if(sex[i].checked){
						span.innerHTML="性别选择成功";
						span.style.color="green";
						return true;
					}
				}
				span.innerHTML="请选择性别";
				span.style.color="red";
				return false;
			}

(2)代码中如何判断籍贯是否选择的

	/*************籍贯校验***************/
			function checkAdress(){
				//获取籍贯对象
				var sel = document.getElementById("sel").value;
				//获取span对象
				var span =document.getElementById("sel_span");
				if(sel ==0){
					span.innerHTML="请选择籍贯";
					span.style.color="red";
					return false;
				}else{
					span.innerHTML="籍贯选择成功";
					span.style.color="green";
					return true;
				}
			}

(3)代码每一个方法执行完返回true/false

通过这个方法，来返回每一个校验结果，如果有一个为false，则整个表单提交不了。
/***************判断是否可以注册****************/
	function zong(){
var flag=checkName()&&checkPwd()&&checkEmail()&&checkSex()&&checkAdress()&&checkYZM();
				return flag;
			}

3.表单验证C

(1)视频中判断协议是否选中方法,代码（186行）的含义是什么。

只有点击同意协议按钮之后，注册框才能生效可以点击，所以当没有选择同意框，注册框不可用。
     sub.disabled=!Check.checked;

(2)视频中最后书写的zong()这个方法中的&&可以换成& 吗？为什么？
不可以，因为是并列关系

4.自定义对象 prototype

(1)请简述 prototype 的具体的作用
为类创建一块公共空间，方法共用。

(2)视频中user.prototype=new user2();语句的作用是什么？
使user创建的对象可以直接调用user2中的方法。

5.jQuery概述

(1)请说出jQuery的特点
1、选择器功能弱
2、DOM操作繁琐之极
3、浏览器兼容性不好
4、动画效果弱

(2)jQuery使用有几个版本，目前来说哪一个版本使用比较多

1、1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能
不再新增。因此一般项目来说，使用1.x版本就可以了，终版本：1.12.4 (2016 年5月20日)
2、2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3、3.x：不兼容 ie678，只支持最新的浏览器。除非特殊要求，一般不会
用 3.x 版本的，很多老的 jQuery 插件不支持这个版本。目前该版本是官方 主要更新维护的版本。最新版本：3.2.1（2017 年 3 月 20 日）

(3)jQuery的概念是什么
JavaScriptQuery,JavaScript代码库

6.认识jQuery的$

(1)请说出$的作用和意义

$(function)
1.相当于 window.onload=function(){}
2.功能比window.onload更强大
1) window onload一个页面只能写一个,但是可以写多个$() 而不冲突
2) window onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早
3.完整形式是$(document).ready(…….);

$(selector)选择器
jQuery具有强大的选择器功能

(2)window.onload 的作用是什么？和Js中的onload事件有什么区别？

1、window onload一个页面只能写一个,但是可以写多个$() 而不冲突
2、window onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早

(3)视频代码中的这句话是什么意思？ $(“tr:odd”).css(“background-color”,“red”);
tr标签中的单行的css样式中的背景颜色为红色

7.jQuery的选择器A

(1)请说出JS对象和JQ对象之间是如何相互转化的。

			//JS---->JQ
			var zhh=$(var zh=document.getElementById("zh"));
				
				//JQ获取            *ID选择器
				//Object类型      
				var zh1=$("#zh");
				alert(zh1);
				
				//JQ---->JS
				alert(zh1[0]);

(2)请列举本节课中常用基本选择器

//JQ获取        *ID选择器
				//Object类型      
				var zh1=$("#zh");
				alert(zh1);
				
				//JQ---->JS
				alert(zh1[0]);

				//*元素选择器
				var inp=$("input");
				alert(inp.length);

				//*类选择器
				var inp2=$(".inp");
				alert(inp2.length);
				//JS获取值
			alert(inp2[0].value);
				//JQ获取值
				alert(inp2.eq(1).val());
				
				//通用选择器
			$("*").css("background-color","paleturquoise");//整个页面全部变化

(3)请说明 html()和 val()方法之间的区别

     html()：读取和修改元素的HTML标签。对应js中的innerHTML，不能被使用在表单元素。
	 val():  读取或修改表单元素的value值，只能使用在表单元素上。

8.jQuery的选择器B

(1)请问后代选择器和子父选择器的区别
后代选择器包含该标签下所有的标签元素，子父选择器只选择直系子标签。

(2)请问 prev + next 选择器在使用的时候需要注意什么
prev + next代表选择紧挨着prev元素所在标签的标签，中间不能有空格符相隔，必须是紧挨着的标签。

(3)prev ~ next 这个选择器的作用
prev ~ next代表获得prev元素后面同级的所有标签元素。

9.选择器学习C

(1)如何获得ul中所有下标(0开始)为奇数的li对 象

$("ul li:odd").css("background-color","red");

(2)如何获得ul中所有下标(0开始)为偶数的li对象。

$("ul li:even").css("background-color","red");

(3)$(“ul li:lt(4)”).css(“color”,“green”);这个选择器的含义是什么？

改变所有索引下标（从0开始）大于4的标签元素的颜色，改为绿色。