###JavaScript
- 负责给页面添加动态效果
###语言特点:
- 属于脚本语言,不需要编译 由浏览器解析执行
- 属于弱类型语言
- 基于面向对象
- 安全性高: js语言只能访问浏览器内部数据,不能访问浏览器以外的数据。
- 交互性高: js语言可以直接嵌入到html页面中,可以直接在页面中和用户进行交互.
###如何在html页面中引入JavaScript语
-
内联: 在标签的事件属性中添加js代码,当事件触发时执行.
<input type="button" value="内联按钮" onclick="alert('内联js代码触发!')">
-
内部: 在html页面的任意位置添加script标签,标签体内写js代码,当加载页面时执行.
<script type="text/javascript"> alert("内部js代码触发!"); </script>
-
外部: 在单独的js文件中写js代码,在html页面中通过script标签的src属性引入
<script type="text/javascript" src="first.js"></script>
###JavaScript语法
- 数据类型 变量 运算符 语句 方法 面向对象
###数据类型 - JS语言中只有对象类型
- 常见的对象类型:
- 数值: number 相当于Java中的所有数值类型总和
- 字符串: string JS中使用单引号或双引号修饰字符串
- 布尔值: boolean true/false
- 未定义: undefined 当变量只声明不赋值时为未定义类型
- 自定义: object Person/Student/Hero
###变量的声明和赋值
- JS语言属于弱类型的语言
- Java: int x = 10; String s = “小明”; Person p = new Person();
- JS: var x = 10; var s = “小梦”; var b = true; var p = new Person();
- var和let的区别: var声明的是全局变量,let声明的是局部变量(后添加的,有些程序员一直使用的就是var)
###运算符 + - * / % > < >= <= = == !=
- == 先统一类型再比较值是否相等, ===先比较类型如果类型统一再比较值 “66”===66
- 除法运算: JS中会根据结果自动转换整数和小数
Java: int x = 5; int y = 2; x/y=2;
JS: var x = 5; var y=2; x/y=2.5;
var x = 6; var y=2; x/y=3; - typeof 变量 typeof 66 + 6 = “number”+6 = “number6”;
###语句 if else for while switch case - 用法和Java大体相同
- for循环中的int i改成var i
###方法声明 - Java: public void 方法名(参数列表){方法体}
- JS: function 方法名(参数列表){方法体}
- 常见的四种方法:
- 无参无返回值
- 无参有返回值
- 有参无返回值
- 有参有返回值
- 三种声明方法的方式:
- function 方法名(参数列表){方法体}
- var 方法名 = function(参数列表){方法体}
- var 方法名 = new Function(“参数1”,“参数2”,“方法体”);
###和页面相关的方法
- 通过id获取页面中的元素
abcvar d = document.getElementById("d1");
- 获取和修改元素的文本内容
d.innerText = “啦啦啦”; //修改
d.innerText //获取 - 获取和修改文本框的值
i1.value=“xxx”; //修改
i1.value //获取 - 获取和修改元素的html内容
d1.innerHTML="
xx
"; //修改 d1.innerHTML //获取 d1.innerHTML+="xxx
"; //追加
####JavaScript对象分类
- 内置对象: number,string,boolean等
- 浏览器相关对象BOM: Browser Object Model(浏览器对象模型)
- 页面相关对象DOM: Document Object Model(文档对象模型)
###BOM浏览器相关对象
-
window对象, window的属性称为全局属性,方法称为全局方法,访问时可以省略掉window.
-
window里面常见属性
- location 位置
window.location.href 获取和修改浏览器的请求地址 - history 历史
history.length 获取历史页面的数量
history.back() 返回上一页面
history.forward() 前往下一页面 - screen 屏幕
screen.width
screen.height - navigator 导航/帮助
navigator.userAgent 获取浏览器的版本信息
- location 位置
-
window里面常见的方法
parseInt()/parseFloat() “2.8” 3.14
isNaN() 判断一个变量是否是NaN(Not a Number)
alert() 弹出提示框
confirm() 弹出确认框
prompt() 弹出文本框
开启定时器: var timer = setInterval(方法,时间间隔);
停止定时器: clearInterval(timer);
###只执行一次的定时器
- 格式: setTimeout(方法,时间间隔);
###事件相关 - 什么是事件: 事件就是系统给提供的一些特定的时间点, 事件分为: 鼠标事件,键盘事件,状态改变事件
-
鼠标事件:
- onclick 点击事件
- onmouseover 鼠标移入事件
- onmouseout 鼠标移出事件
- onmousedown 鼠标按下
- onmouseup 鼠标抬起
- onmousemove 鼠标移动
-
键盘事件:
- onkeydown 键盘按下
- onkeyup 键盘抬起
-
状态改变事件:
- onload 加载完成事件
- onresize 窗口尺寸改变事件
- onchange 值改变事件
####事件绑定
-
事件属性
<input type="button" value="事件属性" onclick="myfn()">
-
动态绑定(通过js代码添加事件)
b1.onclick = function(){ alert("动态绑定事件触发!"); }
####事件传递(事件冒泡儿)
- 如果在某一个范围有多个事件需要触发,则事件的传递顺序是从最底层往上层传递(类似于气泡从下往上)
###DOM document Object Model 文档对象模型(和页面相关内容)
- 通过id获取元素
var d = document.getElementById(“abc”); - 获取和修改元素文本内容
innerText - 获取和修改元素HTML内容
innerHTML - 获取和修改文本框的值
input.value
###jQuery
- jq是一个js语言的框架,对原生的js代码进行封装,可以让程序员写的更少但实现的更多.
- 如何引入jq框架, jq就是一个通过js语言所写的框架,实际上就是一个普通的js文件
###js对象和jq对象互相转换
- js转jq
- var jq = $(js);
- jq转js jq对象就是一个数组
var js = jq[0];
###选择器 - 基础选择器
- 标签名选择器 $(“div”)
- id选择器 $("#id")
- class选择器 $(".class")
- 分组选择器 $(“div,#id,.class”)
- 任意元素选择器 $("*")
- 层级选择器
- $(“div span”) 匹配div里面的所有span
- $(“div>span”) 匹配div里面的所有span子元素
- $(“div+span”) 匹配div的弟弟元素span
- $(“div~span”) 匹配div的弟弟们元素span
- 层级相关的方法
- 获取id为abc元素的所有兄弟元素 $("#abc").siblings(“div”)
- 获取id为abc元素的哥哥元素 $("#abc").prev(“div”)
- 获取id为abc元素的哥哥们元素 $("#abc").prevAll()
- 获取id为abc元素的弟弟元素 $("#abc").next()
- 获取id为abc元素的弟弟们元素 $("#abc").nextAll()
- 获取id为abc元素的父元素 $("#abc").parent()
- 获取id为abc元素的子元素们 $("#abc").children()
- 过滤选择器
- $(“div:first”) 匹配所有div中的第一个
- $(“div:last”) 匹配所有div中的最后一个
- $(“div:even”) 匹配所有div中下标为偶数的div
- $(“div:odd”) 匹配所有div中下标为奇数的div
- $(“div:eq(n)”) 匹配下标为n的div
- $(“div:lt(n)”) 匹配下标小于n的div
- $(“div:gt(n)”) 匹配下标大于n的div
- $(“div:not(.abc)”) 匹配class值不是abc的div
- 内容选择器
- $(“div:has§”) 匹配包含p子元素的div
- $(“div:empty”) 匹配空的div
- $(“div:parent”) 匹配非空的div
- $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div
- 可见选择器
- $(“div:visible”) 匹配所有可见的div
- $(“div:hidden”) 匹配所有隐藏的div
- 隐藏显示相关的方法
- $("#abc").hide(); 隐藏
- $("#abc").show(); 显示
- $("#abc").toggle(); 隐藏显示切换
- 属性选择器
- $(“div[属性名]”) 匹配包含xxx属性的div
- $(“div[属性名=‘值’]”) 匹配xxx=xxx的div
- $(“div[属性名!=‘值’]”) 匹配xxx不等于xxx的div
- 子元素选择器
- $(“div:first-child”) 匹配是div并且是第一个并且是子元素
- $(“div:last-child”) 匹配是div并且是最后一个并且是子元素
- $(“div:nth-child(n)”) 匹配是div并且是第n个并且是子元素
- 表单选择器
- $(":input") 匹配表单中的所有控件
- $(":password") 匹配所有密码框
- $(":radio") 匹配所有单选
- $(":checkbox") 匹配所有多选
- $(":checked") 匹配所有选中的单选 多选和下拉选
- $(“input:chekced”) 匹配所有选中的单选和多选
- $(":selected") 匹配选中的下拉选
###创建及添加元素
- 创建元素对象
var d = $(“abc”); - 添加元素
$(“body”).append(d); 最后面
$(“body”).prepend(d); 最前面 - 插入元素
xxx.before(d); 某个元素的前面
xxx.after(d); 某个元素的后面 - 删除元素
xxx.remove();
####获取和修改元素的文本内容 等效innerText
- xxx.text(); //获取
- xxx.text(“xxxx”); //修改
####获取和修改元素的html内容 等效innerHTML - xxx.html(); //获取
- xxx.html(“
xxx
”); //修改
####获取和修改元素的css样式 - xxx.css(“样式名”,“样式值”); //修改
- xxx.css(“样式名”); //获取
var w = xxx.css(“width”); 获取元素的css中width的值 - xxx.css({“样式名”:“值”,“样式名”:“值”});
####获取和修改元素的属性 - xxx.attr(“属性名”,“值”); //修改
- xxx.attr(“属性名”);
var c = xxx.attr(“class”); 获取元素的class属性的值
###事件模拟
- 通过jq代码 让元素的xxx事件触发
$(“input”).trigger(“click”);
###鼠标移入移出事件合并
//添加鼠标移入移出事件
$("div").hover(function(){//鼠标移入
$(this).css("color","red");
},function(){//鼠标移出
$(this).css("color","green");
});
###事件模拟
- 通过jq代码 让元素的xxx事件触发
$(“input”).trigger(“click”);
###鼠标移入移出事件合并
//添加鼠标移入移出事件
$("div").hover(function(){//鼠标移入
$(this).css("color","red");
},function(){//鼠标移出
$(this).css("color","green");
});