JavaScript简介
JavaScript是一种广泛用于客户端网页开发的语言,用来操作html页面元素;浏览器事件捕获和相应、表单验证、检测浏览器信息等。
六种数据类型:(字符串类型String、数字类型number、布尔类型boolean、空类型null、未定义undefined、对象object)
命名规范:
1.变量必须使用字母、下划线"_"或者美元符"$"开始。
2.JS中区分大小写,例:myString和mystring是不一样的,表示的是两个变量。
3.Js容忍重复定义变量或者无"var"声明变量
4.不能使用JavaScript保留关键字作为变量名。
javaScript保留关键字:
abstract | arguments | boolean | break | byte |
case | catch | char | class* | const |
continue | debugger | default | delete | do |
double | else | enum* | eval | export* |
extends* | false | final | finally | float |
for | function | goto | if | implements |
import* | in | instanceof | int | interface |
let | long | native | new | null |
package | private | protected | public | return |
short | static | super* | switch | synchronized |
this | throw | throws | transient | true |
try | typeof | var | void | volatile |
while | with | yield |
boolean类型:该类型只有两个值,true和false。javaScript中所有类型的值都有与这两个boolean值等价的值,下边是转换规则:
数据类型 | 转换为true的值 | 转换为false的值 |
Boolean | true | false |
String | 任何非空字符串 | " "(空字符串) |
Number | 任何非零数字值(包括无穷大) | 0和NaN |
Object | 任何对象 | null |
Undefined | n/a(不适用) | undefined |
null类型只有一个值,即null。null用来表示尚未存在的对象。
对象Object
对象是包含属性和方法的特殊数据类型。
访问对象的属性。objectName.propertyName(属性名)
访问对象的方法。objectName.methodName() (方法名)
添加对象的属性: objectName.propertyName=value
表达式
表达式是一种JS短语,可以使JS解析器用来产生一个值。是js代码的最小单位,是js代码运行的基础铺垫。
运算符
一元加法: +"20";//输出20,一元加法会将字符串转为数字
一元减法: -"20";//输出-20,一元减法会将字符串转为数字,并对数字取反
前增量:var a=1;alert(a++);// 1 在变量被使用后,自增1.
后增量:var a=1;alert(++a);// 2 在变量被使用前,自增1
delete:删除对象中开发者定义的属性或方法
var a=new Object;
a.name="javaScript";
delete a.name;
运算符in
in运算符后边必须是对象
in运算符判断的是某个属性是否属于某个对象
运算符typeof
typeof:主要是用来检测并返回变量所属的基本数据类型
隐式转换
JavaScript属于弱类型语言,在计算时,不同类型之间可进行隐士转换。
计算过程中,数据类型发生了改变
"10"*23;//230 "10" * "23" //230 "String"-1;//NaN
true+1;//2 false+1;//1 null+1;//1 undefined+1;//NaN
var a={x:1};
a*2;// NaN
"10"+23 //"1023" true+"1" //"true1" null+"1" //"null1"
undefined+"1" // "undefined1"
只有undefined、null、NaN、0、" " 空字符串会被转换为false,其余都为true
!10 //false !"10" //false !{x:1} //false !null//true !undefined//true !NaN//true !0//true
&&运算符:
0&&"1" //0 1&&"0" //" 0" null&&true //null NaN&&true //NaN
|| 运算符:
" " || "1" //"1" "1 " || "" // "1" 0|| null //null 0|| undefined //undefined
比较运算符
比较符两边都是数字,直接比较大小
比较符两边都是字符串,则进行字符串的Unicode编码比较
"0 "<1 //true " "<=0 //true "hello"=="world" //false
function functionName(a,b){ } | 函数声明 |
var functionName=function(){ } | 函数表达式 |
(function(){ })(); | 立即调用函数表达式 |
函数声明 | 函数表达式 |
var a=sum(1,2); console.log(a); function sum(a,b) { return a+b; } | var a=sum(1,2); console.log(a);//sum is not a function var sum=function (a,b) { return a+b; } |
注意:函数声明的函数对象在JavaScript代码加载时会 被前置
局部变量:
在函数内部使用var声明的变量、只能在函数内部访问,在函数运行完毕后便会删除。
function fun() { var a=1; var b=2; console.log(a+b); } console.log(a)//a is not defined |
全局变量:
在函数外声明的变量,在网页中的所有脚本和函数都可以访问。
注意:
在函数内部未使用var声明的变量会成为全局变量。
fun() function fun() { a=1; var b=2; console.log(a+b);//3 } console.log(a)//1 |
语句
bolck语句
用于组合多个语句,一对花括号定义。
{ var a=1; var b=4; alert(a+b); } | if(true){ var a=1; var b=4; alert(a+b); } |
注意:JavaScript没有块级作用域 | |
if(true){ var a=1; var b=4; alert(a+b); } alert(a) | function test() { var c=1; } test() alert(c)//Uncaught ReferenceError: c is not defined |
For in语句(遍历对象属性)
注意:无法保证顺序遍历 |
var a={x:1,y:2}; for (var i in a){ alert(i)//i是对象的属性 alert(a[i])//获取对象的属性值 } |
浏览器对象window的方法
window对象表示浏览器中打开的窗口。
所有javaScript 全局对象、函数以及变量均自动成为window对象的成员
方法 | 描述 | 使用示例 |
alert() | 显示带有一段消息和一个确认按钮的警告框 | alert("hello word") |
close() | 关闭浏览器窗户 | window.close() |
confirm() | 显示带有一段消息以及确认按钮(true)和取消按钮(false)的对话框 | var a=confirm("Press a button"); |
open() | 打开一个新的浏览器窗口 | window.open("http://www.baidu.com") |
prompt() | 显示可提示用户输入的对话框 | var name=prompt("Please enter your name") |
浏览器对象window的属性
属性 | 描述 |
document | Html文档对象 |
history | 窗口访问历史信息对象 |
innerheight | 窗口的文档显示区的高度 |
innerwidth | 窗口的文档显示区的宽度 |
location | 用于窗口或框架的访问地址 |
parent | 访问父窗口对象 |
top | 返回最顶层的先辈窗口对象 |
设置和获取元素属性 getAttribute()
jQuery是一个JavaScript函数库
jQuery使用户可以更加方便地处理HTML节点元素、事件、实现动画效果,而且方便地为网站提供AJAX交互。
$(selector)
用来选择html文档中的DOM元素
selector是选择器,类似JavaScript中的getElementByID
$(html)
创建DOM元素,并设置元素的属性
html参数是待创建的DOM元素的html标签字符串
$(function() {} )
在DOM结构绘制完毕后就执行.
是$(document).ready(function () {}) 的简写
元素选择器
$("标签名称") $("*")选取全部元素 $("parent>child") 子选择器 $("parent child")后代选择器
$("prev+next") 相邻兄弟元素选则器 获取prev选择器获取的元素后第一次满足next选择器筛选元素
相邻兄弟选择器所选择到的元素,必须在同一个父元素下
筛选选择器
选择器 | 以class属性为例 | 描述 |
$("selector[attr='value']") | $("div[class='p1']") | 匹配class属性值为p1的所有div元素 |
$("selector[attr|='value']") | $("div[class|='p1']") | 匹配class属性值以'p1‘字符串开头的所有div元素 |
$("selector[attr*='value']") | $("div[class*='p1']") | 匹配class属性值包含'p'字符串的所有div元素 |
$("selector[attr~='value']") | $("div[class~='p1']") | 匹配class属性的多个值中包含p1属性的div元素 |
$("selector[attr!='value']") | $("div[class!='p1']") | 匹配class属性不包含或者不等于p1的所有div元素 |
$("selector[attr^='value']") | $("div[class^='p1']") | 匹配class属性值以p1开头的所有div元素 |
$("selector[attr$='value']") | $("div[class$='p1']") | 匹配class属性值以p1结尾的所有div元素 |
元素属性操作
attr():获取和设置元素属性 removeAttr():移除元素的某属性
表达式 | 描述 |
attr("id") | 获取某属性的值 |
attr("class","domain") | 设置某属性的值 |
removeAll(属性名) | 移除指定的元素属性 |
$("selector").text() 设置或返回所选元素的文本内容
$("selector").html() 设置或返回所选元素的内容(包括HTML标记)
$("selector").val() 设置或返回表单字段的值
<div id="p1" class="cc aa" ></div> | |
$("selector").addClass("aa") | 添加"aa"样式 |
$("selector").removeClass("aa") | 移除"aa"样式 |
$("selector").toggleClass("aa") | 切换"aa"样式类, 在存在"aa"样式时去除,不存在时添加 |
样式操作css()
<div id="p1" style="height: 100px;width: 100px;border: 1px solid #000000"></div> | |
$("selector").css("height") | 获得div的高度 |
$("selector").css("height","200px") | 设置div的高度 |
jQuery操作DOM对象
插入DOM节点对象
var div=$("<div id='p1' class='cc'>hello world</div>")
将创建DOM对象插入到指定元素内部
$("selector").prepend(div) $("selector").append(div)
插入到指定元素内部的开头 插入到指定元素内部的结尾处
将创建的DOM对象插入到指定元素前后
$("selector").before(div) $("selector").after(div)
插入到指定元素前 插入到指定元素后
删除DOM节点对象
$("selector").remove() $("selector").empty()
删除选择器选中的元素,包括其所有子元素和文本 清空选择器选中元素的内部所有元 素,包括文本,不包括元素自身。
隐藏和显示DOM节点对象
$("selector").hide(); $("selector").show();
隐藏选择器选中元素即所有的子元素 在选择器选中元素为隐藏状态态 时,显示该元素
向上遍历DOM树
$("selector").parent()
获取直接父元素
$("selector").parents() $("selector").parentsUntil(selector01)
获取所有父元素 获取两选择器选择元素之间的所有元素
向下遍历DOM树
$("selector").children $("selector").find("selector01")
获取选中元素的所有直接子元素 在selector选中的元素的所有子元素中查找 与selector01匹配的元素
水平遍历DOM树
$("selector").siblings(); $("selector").next();
获取元素的所有同胞元素,不包括自身 获取元素的下一同胞元素
$("selector").nextAll(); $("selector").nextUtil("selector01");
获取元素之后的所有同胞元素 返回两个选择器对于元素之间的所有 同胞元素
鼠标点击事件
$("selector").click()
触发或者设置选中元素的点击事件
鼠标悬浮事件
$("selector").hover()
鼠标经过元素上方时触发
表单事件
$("selector").focus() $("selector").blur()
元素获得焦点时触发 元素失去焦点时
Ajax
其核心有JavaScript、XMLHTTPRequest,通过XMLHTTPRequest对象来向服务器发出异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面
$.ajax({ });
type:请求类型,get或post,默认为post
url:请求的地址
async:设置一个boolean值,默认为true,值为true时,请求为异步,false时则为同步。
data:设置一个对象,连同请求一起发送到服务器
dataType:预期服务器返回的数据类型,一般采用json格式,也可以不设置。
success:设置一个函数,在请求成功之后的回调函数,函数的出入参数为后台返回的数据
error:设置一个函数,在请求失败时调用。