黑马程序员技术交流社区
标题: 【石家庄校区】笔记 [打印本页]
作者: 庞帅 时间: 2018-5-3 14:32
标题: 【石家庄校区】笔记
本帖最后由 庞帅 于 2018-5-3 15:43 编辑
JS的基本语法：
Ø ECMASCRIPT语法：
1. 区分大小写
2. 弱变量类型语言（与Java不同）：
变量没有具体类型
Var i=3；
Var s=”abc”;
3. 每行结尾分号可有可无
Ø 数据类型：
1. 原始类型5个
Undefined:未定义类型
Boolean
Number
String
Null
2. 引用类型：
对象类型，默认值是null
Ø Js的运算符与Java基本一致
除= = =全等于：是类型和值都一致的情况下才为true
Ø Js与Java的语句一致
校验与轮播：
Ø JS的通常开发的步骤：
Js通常都由一个事件触发
触发一个函数，定义一个函数
获得操作对象的控制权
修改要操作的对象的属性和值
例：定义函数:
* function 函数名称(){
// 函数体
}
* window.onload = function(){
}
常用事件：onclick,ondblclick,onmouseover,onmouseout,onload...
Ø 注册页面的校验：
JS的引入方式：
1. 直接编写：<script></script>
2. 编写到。JS文件中，之后引入html文件中
v JS校验正则表达式有两个方法：
Match（）：正则表达式
Test（）：字符串
Ø 轮播：
Onload:页面加载
定时器：
Setinterval():每隔多少毫秒执行某个表达式（循环）
*setInterval(“change(),5000”);
Settimeout():隔多少秒执行该表达式（只执行一次）
*setTimeout(“change(),5000”);
CSS的显示和隐藏属性：
Dispaly:none :隐藏 block显示
Browser对象：
Ø Window的对象：
alert：弹出对话框---一般做调用
setinterval():每隔多少毫秒执行某个表达式（循环）
settimeout():隔多少秒执行该表达式（只执行一次）
clearinterval（）：清除由setinterval()设置的timeout
cleartimeout()：清除由settimeout()设置的timeout
config：弹出一个确认对话框
prompt：可输入的对话框
open：弹出一个窗口
Ø Navigator对象：包含的是浏览器的信息
Ø Sceen对象：用来获得屏幕信息
Ø History对象：浏览器的历史对象
Back（）：上一个
Forward()：下一个
Go():加载某个具体页面
History.go(-1);
Ø Location对象：包含URL中的信息
Location.href=”可以用作页面的跳转”;
JS的输出：
*document.getElementById(“”).innerHTML=”html的代码”（属性）
*document.write(“”)：写出文档输出
Ø JS事件：
* onfocus:获得焦点.
* onblur:失去焦点.
* onsubmit:提交的时候.
Ø JS事件的总结：
* onload:一张页面或一幅图完成加载（框架或对象事件）
* onclick:单击事件（鼠标事件）
* onsubmit:确认按钮被点击提交（表单事件）
* onfocus:元素获得焦点（表单事件）
* onblur：元素失去焦点（表单事件）
* onchange:下拉列表改变事件.
* ondblclick:双击某个元素的事件.（鼠标事件）
Ø 鼠标的操作事件：
* onmousemove：鼠标被移动
* onmouseout：鼠标从某元素移开
* onmouseover：鼠标移到某元素之上
* onmousedown：鼠标按钮被按下
* onmouseup：鼠标按键被松开
Ø 键盘操作事件：
* onkeydown:某个键盘按键被按下
* onkeyup:某个键盘的按键被松开
* onkeypress:某个键盘按键被按下并松开
Ø 使用JS获得表格的行数：
* 获得到控制的表格元素:
* var tab1 = document.getElementById(“tab1”);
*获得表格的所有行数
* var len = tab1.rows.leng th;
Ø 表格中的tbody和thead标签：
Thead：居中加粗
Tbody：一个表格中可以有多个
例：* 获得到控制的表格元素:
* var tab1 = document.getElementById(“tab1”);
*获得tbody中的所有行数
* var len = tab1.tbodies[0].rows.length;
DOM简介：
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
Ø DOM的使用：
知道document，element，attribute中的属性和方法
Element对象：标签
Attribute：属性
Node：节点（包括Element，Attribute，document，text。。。）
Document：整个html文档加载到内存中
Ø 获得页面元素的三种方式及要点：
document.getElementById():通过id获得元素（一个）
document.getElementsByName()：通过name属性获得元素集合
document.getElementsByTagName()：通过标签名获得元素集合
Ø 创建元素：
* document.createElement();-- 创建元素
* document.createTextNode();-- 创建文本
例：var btn=document.createElement()：创建元素（标签）
var btn=document.createTextNode("Hello World")：创建文本
Ø 添加节点：
* element.appendChild();-- 在最后添加一个节点.
* element.insertBefore();-- 在某个元素之前插入.
例：document.getElementById("").appendChild()：在最后添加一个节点
document.getElementById("").insertBefore(newItem,existingItem)：在某个元素之前插入
Ø 删除节点：
Element.removeChild（）：删除元素
例：var list=document.getElementById("myList"); list.removeChild(list.childNodes[0]);
JS中创建数组：
new Array();
New Array(size);
New Array(element0,element1,...,elementn);
JS的内置对象：
Date：GetTime(返回1970.1.1至今的毫秒数)/缓存
JS的全局函数：
* parseInt()：解析一个字符串并返回一个整数
* parseInt(“11”);
* parseFloat()：解析一个字符串并返回一个整数
* parseFloat(“32.09”);
编码和解码的方法：
解码：
编码：
eval函数：
* 将一段内容当成是JS的代码执行.
//var sss = “alert(‘aaaa’)”;
//eval(sss);
JQuery
是JS的框架（JS的类库）。对传统的JS进行了封装
Js常用框架：
jQuery，Extjs,DWR,prototype...
$相当于JQuery
JQ的使用：
语法：
Ø 引入Jquery的js文件.
<script src="../../js/jquery-1.11.3.min.js"></script>
Ø JQuery的入口函数:
// 传统的JS的方式：页面加载的事件只能执行一次.
/*window.onload = function(){
alert("aaa");
}
window.onload = function(){
alert("bbb");
}*/
// JQuery的方式：
//$（）相当于页面加载的事件,可以执行多次.效率比window.onload要高.
// window.onload 等页面加载完成后执行该方法.
// $(function(){}):等页面的DOM树绘制完成后进行执行.
// $相当于JQuery
$(function(){
alert("aaa");
});
||
||
//也是入口函数
/*$(document).ready(function(){
alert("aaa");
});*/
$(function(){
alert("bbb");
});
JS对象和JQ对象的转换：
window.onload = function(){
// 传统JS方式：
var d1 = document.getElementById("d1");
// JS对象的属性和方法:
// d1.innerHTML = "JS对象的属性";
// d1.html("aaaaaa");
// 将JS对象转成JQ的对象.
$(d1).html("JS对象转成JQ对象");
}
$(function(){
var $d1 = $("#d1");
// $d1.html("JQ对象的属性");
// 转成JS的对象:
// 一种方式
// $d1[0].innerHTML = "将JQ的对象转成JS对象";
// 二种方式:
$d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";
});
JQ显示和隐藏：
JQ的效果操作:
Ø * show();
* 使用一:Jq对象.show();
* 使用二:Jq对象.show(“slow”); // slow,normal,fast
* 使用三:Jq对象.show(毫秒值); // 1000
* 使用四:Jq对象.show(毫秒值,function(){});
Ø * hide();
* 使用一:Jq对象.hide();
* 使用二:Jq对象.hide(“slow”); // slow,normal,fast
* 使用三:Jq对象.hide(毫秒值); // 1000
* 使用四:Jq对象.hide(毫秒值,function(){});
Ø * slideDown();--向下滑动
* 使用一:Jq对象.slideDown();
* 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideDown(毫秒值); // 1000
* 使用四:Jq对象.slideDown(毫秒值,function(){});
Ø * slideUp();--向上滑动
* 使用一:Jq对象.slideUp();
* 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideUp(毫秒值); // 1000
* 使用四:Jq对象.slideUp(毫秒值,function(){});
Ø * fadeIn();--淡入
* 使用一:Jq对象.fadeIn();
* 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeIn(毫秒值); // 1000
* 使用四:Jq对象.fadeIn(毫秒值,function(){});
Ø * fadeOut();--淡出
* 使用一:Jq对象.fadeOut();
* 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeOut(毫秒值); // 1000
* 使用四:Jq对象.fadeOut(毫秒值,function(){});
toggle(); --单击切换函数（用于绑定两个或多个处理器函数，用来响应onclick）
JQuery的选择器：
Ø id选择器：
* 用法:$(“#id”)
Ø 类选择器：
* 用法:$(“.类名”)
Ø 元素选择器：
* 用法:$(“元素名称”)
Ø 通配符选择器：
* 用法:$(“*”)
Ø 并列选择器：
* 用法:$(“选择器,选择器,选择器”)
层级选择器：
Ø 后代选择器：使用空格所有后代包含孙子及以下的元素
Ø 子元素选择器：使用>第一层的元素（儿子）
Ø 下一个元素:使用+下一个同辈元素
Ø 兄弟元素:使用~后面所有的同辈元素
<script>
$(function(){
// 后代选择器:
$("#but1").click(function(){
$("body div").css("background","#bbffaa");
});
// body下的第一层div元素
$("#but2").click(function(){
$("body > div").css("background","#bbffaa");
});
// 查找下一个同辈的元素
$("#but3").click(function(){
$("#three + div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("#two ~ div").css("background","#bbffaa");
});
});
</script>
基本过滤选择器：
Odd:奇数行
Even:偶数行
：get(index)
<script>
$(function(){
$("#but1").click(function(){
$("#threediv:first").css("background","#bbffaa");
});
$("#but2").click(function(){
$("#threediv:last").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div:odd").css("background","#bbffaa");
});
$("#but4").click(function(){
$("div:even").css("background","#bbffaa");
});
//获取第n个元素
$("#but5").click(function(){
$("#threediv:eq(1)").css("background","#bbffaa");
});
});
</script>
内容选择器：
<script>
$(function(){
$("#but1").click(function(){
$("div:contains('1')").css("background","#bbffaa");
});
});
</script>
属性选择器：
Attribute
Attribute=value
例：Div[title = ‘aaa’]
表单选择器：不常用
<script>
$(function(){
$("#but1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#but2").click(function(){
// $(":text").css("background","#bbffaa");
//属性选择器
$("input[type='text']").css("background","#bbffaa");
});
});
</script>
：表单属性选择器不常用
{Checked:
Selected:}较常用
JQuery改变页面样式方法：
Css
addClass
JQuery改变页面属性：
HTML代码/文本/值：
事件：
Ø 事件切换：
Hover：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
toggle()：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click 事件。
Ø 事件处理：
on():在选择元素上绑定一个或多个事件的事件处理函数。
bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数。
$('#foo').bind(click dblclick, function() {
......
});
Ø 委托事件：
Delegate():指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序， 并规定当这些事件发生时运行的函数。
undelegate()：删除由 delegate()方法添加的一个或多个事件处理程序。
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |