Java EE day11学习总结
今天主要学习Javascript+jQuery入门到进阶
思维导图：
一．JavaScript
1.W3C:HTML 结构标准 / CSS 表现标准 / JavaScript 行为标准
2.世界上第一款浏览器 94年网景(Netscape Communications Corporation)公司开发。
95年和sun公司开发出Java;网景和sun进行了深度的合作 java+script= javascript
3.2003年之前，js其实很少有人使用，因为js就是垃圾广告的代名词。
4.2004年，一家伟大的公司彻底改变了js的命运，这就公司就谷歌，因为谷歌推出了一种
技术，这种技术一直沿用至今，仍然都是目前主流的技术(AJAX)
5.ajax:异步加载,异步交互（异步阻塞）
6.js是什么?
js一个可以嵌入到HTML网页当中，是基于对象和事件驱动的脚本语言
7.js的特点?
（1）对于用户有非常良好的交互性
（2）具备非常强的安全性(对于用户)，JS没有任何的权限可以访问你的系统资源和磁盘
（3）是跨平台，因为是基于浏览器的
8.js能做什么?
（1）js能够实时动态的修改你的CSS和你的HTML代码
（2）能够动态的校验数据
9.js的组成
（1）DOM(文档对象模型)
（2）BOM(浏览器对象模型)
10.怎么去使用js?
（1）行内
<input type="button" value="我是个没用的东西" οnclick="alert('我被点击了')"/>
（2）内部
<script type="text/javascript"/>
alert('它被加载了');
</script>
（3）外部
<script type="text/javascript" src="../js/js_demo.js"/>
JS代码放在哪儿？
原则上,你JS放任意位置都没问题，但是在不影响功能的前提下，建议越晚加载越好
11.JS的基本语法
（1）typeof获取当前数据的类型
（2）js当中的原始数据类型:
number:数字
string:字符串类型
boolean:布尔类型
null:空类型
underfind:未定义
number/string/boolean 伪数据类型(等同于java的自动拆装箱)
（3）类型转型:
number/boolean类型转成string
toString();
string/boolean转number
parseInt();
parseFloat();
string转成number parseInt(x) 字符串必须开头包含数字，最后的结果就是开头的数字
（4）强制类型转换:
Boolean(),强转布尔
数字如果转成布尔,false即0 true即1
字符串如果转成布尔，空内容即false,有内容及true
Number()
布尔转数字，true即1 false即0
字符串转数字，不能转
(5)引用数据类型
java:Object ob = new Object();
js:var ob = new Number();
(6)运算符:
赋值运算:
var x = 5;
算数运算:
+ - * /(操作跟java一致，你们不让我讲)
逻辑运算:
&& ||
比较运算:
< > <= >= != == ===
全等:需要数据类型和数据值完全匹配
三元运算:
3 > 2 ? 3 : 2;
void运算:
<a href="javascript:void(0)">点击我跳转</a>
类型运算符：
typeof:获取数据类型
instanceof:判断某一个数据是否为某种数据类型
7.逻辑语句:
(1)if
if(x > 5){
alert("大于");
}
(2)if else
if(x > 5){
alert("大于");
}else{
alert('小于');
}
(3)switch(){
case "css":
alert("xxx");
break;
default:
alert("xxx");
}
(4)for
for(var a = 0;a < 5;a++){
alert(a);
}
(5)for in
var arr = [1,56,1,5,"s"];
for(s in arr){
//alert(s);//索引编号
alert(arr[s]);
}
8.JS的内建对象
(1)Number
创建 Number 对象的语法：
var myNum = new Number(value);
var myNum = Number(value);
属性跟方法:
toString 把数字转换为字符串。
valueOf 返回一个 Number对象的基本数字值。
(2)Boolean
创建 Boolean 对象的语法：
var boo = new Boolean(value); //构造函数
var boo = Boolean(value); //转换函数
属性跟方法：
toString 把数字转换为字符串。
valueOf 返回一个 Number对象的基本数字值。
(3)String 对象
创建 String 对象的语法：
var str = new String(value);
var str = String(value);
属性跟方法:
length:字符串的长度
charAt():返回在指定位置的字符。
charCodeAt():返回在指定的位置的字符的 Unicode 编码。
indexOf():检索字符串。
lastIndexOf():逆向返回字符串的索引(数组的索引仍然从0开始)
split():根据正则表达式来切割字符串
substr():从起始索引号提取字符串中指定数目的字符。
substring():提取字符串中两个指定的索引号之间的字符。
toLocaleUpperCase():把字符串转换为大写。
toLocaleLowerCase():把字符串转换为小写。
(4)Array 对象
var arr = new Array();//创建一个空数组
var arr = new Array(size);//创建一个指定长度的数组
var arr = new Array(element0, element1, ..., elementn);//创建数组并且实例化
var arr = [];//创建一个空数组
var arr = [5,5,515,"toobug"];//创建数组并且实例化
属性跟方法:
length:设置或返回数组中元素的数目。
join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop():删除并返回数组的最后一个元素
push():向数组的末尾添加一个或更多元素，并返回新的长度。
reverse():颠倒数组中元素的顺序。
sort():对数组的元素进行排序(字典顺序)
(5)Date 对象
var myDate = new Date();
var myDate=new Date(毫秒值);
属性跟方法：
getFullYear():获取年份
getMonth():获取月份 0-11
getDate():获取日 1-31。
getDay():获取星期 0-6 (0代表星期天)
getTime():获取时间(返回的是毫秒数)
toLocaleString(毫秒数):根据毫秒数来格式化日期时间
(6)RegExp 对象
var email = new RegExp(pattern, attributes);
属性跟方法:
test:检索字符串中指定的值。返回 true 或 false。
9.函数的定义
(1)js是如何去定义函数的
<1>普通函数:
语法:function 函数名(参数列表){函数体}.
举例:
function method(){
alert("haha");
}
method();
<2>匿名函数:
function(参数列表){函数体}
举例:
var method = function(){
alert("haha");
}
method();
<3>对象函数：
语法:new Function(参数列表,函数体);
注意:参数名称必须使用字符串，最后一个默认为函数体必须要以字符串形式表示
示例:
var fn = new Function("num","s","s3","alert(num+s+s3)");
fn(15,25,34);
(2)函数参数的问题:
<1>形参不要使用var去进行修饰
<2>形参的个数不一定和实参的个数一致，但是只能多不能少
<3>函数当中，默认会有一个arguments将参数封装成一个数组
for(var i = 0;i < arguments.length;i++){
alert(arguments[i])
}
(3)返回值：
<1>js也是存在返回值的，只不过没有java那么强烈的要求
<2>js在定义函数的时候，没有必要像Java一样去声明返回值类型
<3>js可以通过return进行返回，return后面可以写语句，但是不会执行
10.JS的事件
事件源:
响应行为:
事件:
(1)js的常用事件
<1>onclick:点击事件
<input type="button" value="点击" οnclick="fn();"/>
function fn(){
alert('我被点击了');
}
<2>onchange:域内容被改变的事件
<select id="city">
<option value="hn">湖南</option>
<option value="gd">广东</option>
<option value="fj">福建</option>
</select>
<select id="area">
<option value="hn">湘潭</option>
<option value="gd">长沙</option>
<option value="fj">株洲</option>
</select>
<script>
/*获取省级select的节点*/
var select = document.getElementById("city");
select.onchange = function() {
/*根据获取的节点，来获取所改变的value*/
var v = select.value;
/*根据value来判断用户改变的是什么*/
switch(v){
case 'hn':
/*获取城市select的节点*/
var area = document.getElementById("area");
/*改变元素节点下*/
area.innerHTML = '<option>湘潭</option>'+
'<option>长沙</option>'+
"<option>株洲</option>";
break;
case 'gd':
var area = document.getElementById("area");
area.innerHTML = '<option>深圳</option>'+
'<option>广州</option>'+
"<option>东莞</option>"+
"<option>清远</option>";
break;
case 'fj':
var area = document.getElementById("area");
area.innerHTML = '<option>台湾</option>'+
'<option>厦门</option>'+
"<option>福州</option>"+
"<option>清远</option>";
break;
}
}
</script>
<3>onfocus:元素获得焦点
<4>onblur:元素失去焦点
var userName = "root888";
var text = document.getElementById("text");
//获得焦点
text.onfocus = function() {
var span = document.getElementById("action");
span.innerHTML = "请输入6-11位的账号";
span.style.color = "green";
}
//失去焦点
text.onblur = function() {
var span = document.getElementById("action");
if(text.value == null &&
text.value == ""){
span.innerHTML = "请输入您的账号";
span.style.color = "red";
}else{
var user = /^[A-z0-9_]{6,11}$/;
if(user.test(text.value)){
if(userName == text.value){
span.innerHTML = "您的账号已经存在";
span.style.color = "red";
}else{
span.innerHTML = "账号可用";
span.style.color = "green";
}
}else{
span.innerHTML = "请输入6-11位的账号";
span.style.color = "red";
}
}
}
<5>onmouseout 鼠标从某元素移开
<6>onmouseover 鼠标被移到某元素之上
<div class="c1" id="d1"></div>
var d1 = document.getElementById("d1");
d1.onmouseover = function(){
this.style.backgroundColor = "green";
}
d1.onmouseout = function(){
this.style.backgroundColor = "red";
}
<7>onload:加载完毕事件
等待某个页面加载完毕所触发的事件
window.onload = function(){
var s = document.getElementById("s");
alert(s);
alert("HTML加载完毕");
}
(2)事件的绑定方式:
<1>将时间的响应行为和HTML代码内嵌到一起
<input type="button" value="button" οnclick="alert('我被点击了')" />
<2>将事件的响应行为和函数进行封装
<input type="button" value="button" οnclick="fn()" />
function fn(){
alert('它被点击了')
}
<3>将事件的行为和HTML代码完全分离
<input type="button" id="btn" value="button"/>
var btn = document.getElementById("btn");
btn.onclick = function(){
alert('我被点击了');
}
(2)this关键字:
this经过的事件进行传递的整个元素标签的所有属性
<input name="b_name" type="button" value="button" οnclick="fn(this)" />
function fn(t){
alert(t.value)
}
11.js的BOM
window对象:
alert():显示带有一段消息和一个确认按钮的警告框。
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
有返回值:确认即true/取消则false
for (;;) {
var v = confirm("你好吗？");
if(v == true){
break;
}
}
open() 打开一个新的网页。
window.open("http://www.baidu.com");
open("http://www.baidu.com");
open可以打开新的本地文件也可以打开新的url地址
prompt():显示可提示用户输入的对话框。
有返回值，如果输入框有数据则返回数据，如果输入框没有数据或者点击取消则返回的null
for(;;) {
var p = prompt("请确认", "请输入");
if(p == "admin") {
alert("您可以浏览网页");
break;
}
}
12.定时器:
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
setTimeout(js代码(函数),毫秒数);
setTimeout(
function(){
alert("你好吖")
}
,2000);
clearTimeout():取消由 setTimeout() 方法设置的 timeout。
var timer;
var fn = function(){
alert("toobug");
timer = setTimeout(fn,2000);
};
var closer = function(){
clearTimeout(timer);
}
fn();
13.根据id值来获取元素节点(重要):
document.getElementById("id的值")
14.根据元素的name值来获取元素节点(重要)
document.getElementsByName("name的值");
返回的一个数组
测试长度:inputName.length
遍历这个name的所有元素节点:
for(var i = 0;i < inputName.length;i++){
var inputNode = inputName[i];
alert(inputNode.value);
}
为每个文本框(<input type="text">)增加change事件,当值改变时,输出改变的值
for(var i = 0;i < inputName.length;i++){
var inputNode = inputName[i];
inputNode.onchange = function(){
alert(this.value);
}
}
15.根据标签名获取元素节点(重要)
document.getElementsByTagName("input");
返回的是一个数组:
测试长度:inputNodes.length
遍历value的值
for(var i = 0;i < inputNodes.length;i++){
alert(inputNodes[i].value)
}
输出type="text"中 value属性的值 不包含按钮(button)
for(var i = 0;i < inputNodes.length;i++){
var inputNode = inputNodes[i];
if(inputNode.type == "text"){
alert(inputNode.value)
}
}
16.判断该元素是否允许存在子节点(了解)
document.getElementById("tid_1");
edu.hasChildNodes();允许返回true/不允许则返回false
17.通过元素来获取具体的内容值(有点印象)
var node = document.getElementById("tid_1");
获取该元素的首个子节点:node.firstChild;
获取该元素的元素标签名:node.nodeName
获取该元素的类型:node.nodeType 返回1则为元素节点 返回2则为属性节点
获取该元素的内容值:node.nodeValue 返回该元素节点的内容
18.获取指定元素的属性值(重要)
var xj = document.getElementById("xj");
alert(xj.getAttribute("value"))
19.给指定元素添加属性值(重要)
var xj = document.getElementById("xj");
alert(xj.setAttribute("属性名","属性值"))
20.点击按钮或者标签来切换图片
<body>
<input type="button" value="点我换图片" id="btn" />
<img src="../img/j.jpg" id="img1" />
</body>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
var img = document.getElementById("img1");
img.src = "../img/y.jpg";
}
</script>
21.实现图片自动轮播
(1)不需要准备任何的事件
(2)怎么去实现轮播？ 2.1定时器
(3)怎么切换图片
<script>
var index = 0; //2
function changeImg(){
//1.获得是哪个元素进行图片的切换
var img = document.getElementById("img1");
//2.计算出要切换到第几张图片
var curIndex = index%3 + 1;//0 1 2
img.src ="../img/"+curIndex+".jpg"//1
//每次切换完毕进行加1
index = index + 1;
}
function init(){
setInterval("changeImg()",1000);
}
</script>
<body οnlοad="init()">
<div>
<img src="../img/1.jpg" width="100%" id="img1">
</div>
</body>
22.定时弹出广告
<script>
function init(){
setTimeout("show()",3000);
}
function show(){
//获取需要操作广告的元素
var img = document.getElementById("img1");
//显示广告
img.style.display = "block";
//3秒之后再关闭广告
setTimeout("hide()",3000);
}
function hide(){
//获取需要操作广告的元素
var img = document.getElementById("img1");
//显示广告
img.style.display = "none";
//3秒之后再关闭广告
}
</script>
<img src="../img/y.jpg" id="img1" style="display: none;" />
23.实现表格的隔行换色 rows
二.jQuery
1.什么是jQuery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
2.jQuery的特点是什么?
(1)轻量级，依赖的程序少，占用的资源少
(2)js代码和HTML代码实现完全分离
(3)jQuery是免费和开源的
(4)jQuery的版本分类
(5)WE版本:我们主要用的就是他
(6)UI版本:一般我们做后端几乎不用，集成部分UI组件
(7)mobile版本:针对移动端进行开发的(常用)
3.jQuery的优点
(1)兼容各种浏览器
(2)JQ的语法简介明了，适合程序员进行二次开发和维护
(3)JQ提供了大部分的API让开发者自由的编写插件，而且具备很多已经成熟的框架给开发者使用
(4)JQ的文档非常齐全，基本上不懂的 文档都有解释
4.jQuery的语法
(1)jQuery的导入和加载
<!--第一步:导入jQuery库-->
<script src="../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!--第二步:-->
<script type="text/javascript">
/*文档加载完成事件*/
jQuery(document).ready(function(){
alert("它被加载了");
});
/*jQuery简写成$符号*/
$(document).ready(function(){
alert("它被加载了");
});
/*最常用，简写*/
$(function(){
alert("它被加载了")
});
</script>
(2)jQuery的查找元素
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#div1").html("toobug");
alert($("#div1"));
});
</script>
(3)jq和js的相互转换
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
//js转成jq
function changeJs(){
var div = document.getElementById("div1");
div.innerHTML = "js成功修改了代码啊";
div.html = "jq成功修改了代码啊";
//js转成jq
$(div).html("jq成功修改了代码啊");
}
//jq转成js
$(function(){
$("#btn2").click(
function(){
var $div = $("#div2");
$div.html("JQ成功修改了代码");
//jq转换成js
var $div = $("#div2");
var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML = "js成功修改了代码";
}
);
});
<script>
(4)jq的图片显示和隐藏(包含动画)步骤的分析:
<1>导入jq的相关文件
<2>完成文档加载事件:$function()
<3>确定相关的操作事件(点击事件)
<4>触发事件的函数
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//给按钮绑定事件
$("#btn1").click(
function(){
//$("#img1").show();
//$("#img1").slideDown(1000);
//$("#img1").fadeIn(1000);
$("#img1").animate({width:"800px",opacity:"1"},6000);
});
//给按钮绑定事件
$("#btn2").click(
function(){
//$("#img1").hide();
//$("#img1").slideUp(1000);
//$("#img1").fadeOut(1000);
$("#img1").animate({width:"1800px",opacity:"0.1"},6000);
});
});
</script>
（5）JQ的网页定时弹出广告的
步骤的分析:
<1>导入jq的相关文件
<2>完成文档加载事件:$function()
<3>确定相关的操作事件(不需要时间)
<4>需要一个定时器[setTimeout(fn,毫秒值)
<5>编写显示广告的代码
<6>在显示广告的代码里面写一个隐藏广告的代码
<script>
//显示广告
function showAd(){
$("#img1").slideDown(2000);
setTimeout("hideAd()",3000);
}
//隐藏广告
function hideAd(){
$("#img1").slideUp(2000);
}
//定时器启动
$(function(){
setTimeout("showAd()",3000);
});
</script>
5.选择器
让我们能够更加精确的找到我们需要的元素
(1)基础选择器
<1>ID选择器:$("#two")
<2>类选择器:$(".mini")
<3>标签选择器:$("div")
<4>通配符选择器:$("*")
<5>选择器1,选择器2:$(".mini,span")
基础选择器案例
$(function(){
//给按钮触发绑定事件 找出ID为two的元素
$("#btn1").click(function(){
$("#two").css("background-color","red");
});
//找出mini类的所有元素
$("#btn2").click(function(){
$(".mini").css("background-color","yellow");
});
//找出所有div元素
$("#btn3").click(function(){
$("div").css("background-color","salmon");
});
//通配符选择器
$("#btn4").click(function(){
$("*").css("background-color","forestgreen");
});
//找出mini类 和 span元素
$("#btn5").click(function(){
$(".mini,span").css("background-color","forestgreen");
});
});
(2)层级选择器
<1>后代选择器 A B:A选择器下面的B后代元素(爷孙)
<2>子代选择器:A>B:A元素内部的所有 B子元素(父子，直接子代)
<3>相邻兄弟选择器:A+B;获得A元素后面的第一个兄弟B(兄弟)
<4>找出所有的弟弟:A~B:获得A元素下面的所有兄弟B(兄弟)
$(function(){
//找出body下面的子div
$("#btn1").click(function(){
$("body > div").css("background-color","red");
});
//找出body下面的所有div
$("#btn2").click(function(){
$("body div").css("background-color","yellow");
});
//找出id为one的相邻兄弟div
$("#btn3").click(function(){
$("#one+div").css("background-color","salmon");
});
//找出id为two的所有弟弟div
$("#btn4").click(function(){
$("#two~div").css("background-color","forestgreen");
});
});
6.jQuery的基础过滤器
eq(index):获取指定索引 first() ：获取第一个 last() ：获取最后一个 gt(index):大于某个索引 lt(index):小于某个索引 even:获取偶数，从0开始计数，比如查找表格的1,3,5,4，(即索引值0、2、4) odd：获取基数 not(selector)：去除所有与匹配选择器的元素
header:获取所有的标题元素(h1 h2)
$(function(){
//过滤出所有div中第一个元素
$("#btn1").click(function(){
$("div:first").css("background-color","red");
});
//过滤出所有div中偶数位的div
$("#btn2").click(function(){
$("div:even").css("background-color","yellow");
});
//过滤出所有div中奇数位的div
$("#btn3").click(function(){
$("div:odd").css("background-color","salmon");
});
//过滤出所有div中找出索引大于2
$("#btn4").click(function(){
$("div:gt(2)").css("background-color","forestgreen");
});
});
7. 对表格进行全选及全不选
$(function(){
$("#checkAll").click(function(){
//获取当前状态
// alert(this.checked);
// $("input[checked='checked']:gt(0)").prop("checked" ,this.checked);
// $("tbody > tr > td > input").prop("checked",this.checked);
$("input").prop("checked",this.checked);
});
});