JavaScript
作用:
- 给页面添加动态效果
语言特点:
- 属于脚本语言,不需要编译直接执行
- 基于面向对象
- 属于弱类型语言
– 强类型:int x=10; String name=“张三”; int y;
– 弱类型:var x=10; var name=“张三”; - 安全性高: js语言只能访问浏览器内部的数据不能访问浏览器以外的数据.
- 交互性高: js语言可以直接嵌入到html页面中,可以让用户脱离后端服务器只在前端页面和页面
内容进行交互.
JavaScript对象分类:
- 内置对象: number/string/boolean等
- 浏览器相关对象BOM: Browser Object Model 浏览器对象模型
- 页面相关对象DOM: Document Object MOdel 文档对象模型
1.如何在html页面中引入JavaScript代码
- 内联： 在标签的事件属性中添加js代码,当事件触发时执行
– 事件: 就是系统提供的一些特定时间点, 点击事件:就是元素被点击时的时间点 - 内部： 在html页面中的任意位置写script标签,在标签体内写js代码.
- 外部： 在单独的js文件中写js代码,在html页面中通过script标签的src属性引入, 以后工作中用
的最多,好处是可以多个页面复用同一个文件, 可以将html代码和js代码分离便于维护和升级.
2.JS和Java的对比(区别)
- JS与java是两个公司开发不同的两个产品，java是sun公司推出面向对象开发的程序设计语言，特别适合于Internet应用程序的开发。JS是Netscape公司的产品，是一种可以嵌入到web页面中国基于对象的解释性语言，它的前身是Live Script,JAVA的前身是Oak语言。
- 基于对象和面向对象，Java是一种真正面向对象开发的语言，即使开发简单的程序，也必须设计对象。JS是一种脚本语言，它是基于对象开发的语言，并且提供了很多内部对象。
- java必须经过编译，然后再执行；JS是一种解释性语言，源码不需要经过编译，由浏览器解释执行
- java采用强类型变量检查，所有变量在编译之前必须先声明；JS中变量声明，采用弱类型，变量在使用前不需要声明，而是解释器在运行时检查其数据类型。
2.1 Java的特点 ：
面向对象的开发：继承、封装、多态 、（抽象）
2.2 JS的特点：
基于对象：有对象但不支持严格的继承、封装、多态
-
JS中没有继承的概念，但是它有原型的概念。
每个对象都有一个prototype属性，用来指定该对象的原型对象，类似于继承。
（原型对象是保存共享属性值和共享方法的对象，在js中原型可以是任意类型，） -
封装
JS中有不严格的封装，对象中封装的属性和方法是可以任意访问、修改的。 -
多态
JS中的所有对象都是Object，即他们的根原型是Object。
JS不像Java的多态那样严谨，JS中的对象可以赋值给任意类型的其他对象。
3.变量声明和赋值
- java:
int x =10; String s = "abc"; x="xyz";(报错 类型不匹配)
Person p = new Person();
- JavaScript:
var x=10; var s="abc"; x="xyz";可以执行 var p = new Person();
4.数据类型
- 在JavaScript中只有对象类型
- 常见的对象类型:
– 数值:number 相当于java中所有数值类型的总和
– 字符串:string 可以用单引号或双引号修饰
– 布尔值:boolean true/false
– 未定义:undefined 当变量只声明不赋值时,此变量的类型为未定义.
– 自定义:object Person Car Hero - 数字+字符串：数字转换为字符串
数字+布尔值：true:1,false:0
字符串+布尔值：布尔值转换为true或false
布尔值+布尔值：布尔值转换为1或者0
5.运算符
+ - * / % > < >= <= != = == ===
1.和java大体相同
************************************
*java中5/2结果是2，js中5/2结果是2.5*
************************************
2.== 和 ===, == 先统一等号两边变量的类型再比较值, ===先比较类型是否相等,相等后再比较值.
"666"==666 true "666"===666 false
3.typeof x 获取变量的类型
“==”与“===”的区别
==:只比较两者的内容，如果类型相同的话就返回true
===:先比较类型，类型相同再比较内容，内容相同就返回true
6.和页面相关的方法
- 通过标签id 获取标签对象
var d = document.getElementById(“id”); - 获取和修改元素的文本内容
d.innerText = “xxx”; 修改元素的文本内容
d.innerText 获取 - 获取和修改文本框的值
var i = document.getElementById("i1");
//获取文本框的值
//alert(i.value);
//修改文本框的值
i.value="按钮点击了";
- 修改元素的HTML内容
//修改
d1.innerHTML="<h1>abc</h1>";
//追加内容
d1.innerHTML+="<h2>xyz</h2>";
NaN: Not a Number 不是一个数
7.方法声明及调用
java: public 返回值类型 方法名(参数列表){方法体}
JS: function 方法名(参数列表){方法体}
- 三种声明方法的方式:
function 方法名(参数列表){方法体}
var 方法名 = function(参数列表){方法体}
var 方法名 = new Function(“参数a”,“参数b”,“方法体”);
8.BOM浏览器相关内容
-
window: 该对象里面的属性和方法称为全局属性和全局方法,访问时可以省略掉window.
window.alert() window.parseInt() window.isNaN() -
window对象中场景的方法
– window.isNaN() 判断变量是否是NaN
– window.parseInt()和window.parseFloat() 将字符串转成整数和转成浮点数
– window.alert() 弹出提示框
– window.confirm() 弹出确认框
– window.prompt() 弹出文本框
– window.setInterval(方法,时间间隔) 开启定时器
– window.clearInterval(timer) 停止定时器
– window.setTimeout(方法,时间间隔) 开启只执行一次的定时器 -
window中常见的属性
– (1) location:位置- *location.href;* 获取和修改当前浏览器的地址 - *location.reload();* 刷新页面– (2)history: 历史
- *history.length;* 获取当前窗口的历史页面数量 - *history.back();* 返回上一页面 等效左箭头 - *history.forward();* 前往下一页面 等效右箭头 - *history.go(n);* n正值代表前进 n负值代表后退 0代表刷新 -– (3)screen 屏幕
- screnn.width/height 获取屏幕的分辨率– (4)navigator 导航帮助
- navigator.userAgent; 获取浏览器的版本信息
9.事件
- 什么是事件: 系统给提供的一些特定的时间点, 事件包括:鼠标事件/键盘事件/状态改变事件
- 鼠标事件:
- onclick 点击事件
- onmouseover 鼠标移入事件
- onmouseout 鼠标移出事件
- onmousedown 鼠标按下事件
- onmouseup 鼠标抬起事件
- onmousemove 鼠标移动事件
- 键盘事件:
- onkeydown 键盘按下事件
- onkeyup 键盘抬起事件
- 状态改变事件
- onload 页面加载完成事件
- onchange 值改变事件
事件绑定
-
如何给元素添加事件?
- 事件属性绑定
<input type="button" value="事件属性绑定" onclick="alert('触发!')">- 动态绑定
btn.onclick = function(){ alert("动态绑定事件触发!"); }- 事件取消
<!-- 在事件中执行return false可以终止事件 --> <a href="http://www.baidu.com" onclick="return confirm('您确认离开此页面吗?')">百度</a>-
事件传递(事件冒泡)
当某一个位置有多个元素的事件需要触发,则事件响应的顺序是从最底层往上层传递,类似气泡从下往上所以称为事件冒泡.
10.DOM文档对象模型
- 和页面相关的内容
- 通过id获取元素 document.getElementById(“id”)
- 获取和修改元素的文本内容 innerText
- 获取和修改元素的html内容 innerHTML
- 获取和修改文本框的值 i.value
11.jQuery框架
- 作用: 和JavaScript一样给页面添加动态效果,其实就是对部分原生JavaScript语言的封装,可以让程序员写的更少但实现的更多.
js: var d = document.getElementById("id");
jQuery: $("#id")
-
引入方式: 由于jQuery就是通过JavaScript语言所写,框架本身就是一个js文件,所以和引入普通的js文件一样通过script标签的src属性引入到HTML页面即可.
-
通过id获取元素对象,此时获取到的是jQuery对象 和js对象不一样 $("#id")
js对象和jq对象互相转换
- js对象和jq对象不是一种对象,各自的方法不能混着调用
- js转jq : var jq = $(js);
- jq转js: var js = jq[0]; jq对象实际上就是一个数组,里面装着js对象
jQuery的选择器
- 基础选择器 写法和css一样
- $("div") 标签名选择器 - $("#id") id选择器 - $(".class") 类选择器 - $("div,#id,.class") 分组选择器 - $("*") 任意元素选择器 - 层级选择器
– 层级相关的方法:- $("div span") 匹配div里面的所有span包括子孙后代 - $("div>span") 匹配div里面的span子元素 - $("div+span") 匹配div的弟弟span - $("div~span") 匹配div的弟弟们span1. $("#abc").next("span") 匹配id为abc元素的弟弟span元素 2. $("#abc").nextAll() 匹配id为abc元素的弟弟们元素 3. $("#abc").prev() 匹配id为abc元素的哥哥元素 4. $("#abc").prevAll() 匹配id为abc元素的哥哥们元素 5. $("#abc").siblings() 匹配id为abc元素的所有兄弟元素 6. $("#abc").parent() 匹配id为abc元素的父元素 7. $("#abc").children() 匹配id为abc元素的所有子元素们
扫一扫
506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
