js
js引入
三种方法：
- 直接在元素中，使用onclick属性-*不使用
- 在
<body>中加入script标签 - 将内容放入.js文件中，在
<body>中使用script引入
<srcipt type="text/javascript" src="hello.js"></script>
注释
JSDoc注释规则
----必须以 /** 开始
@constructor 构造函数声明注释
@param 参数注释----参数标签可表示一个参数的参数名、参数类型和参数描述的注释。
@return 返回值注释
@example 示例注释
@overview 对当前代码文件的描述。
@copyright 代码的版权信息。
@author <name> [<emailAddress>] 代码的作者信息。
@version 当前代码的版本。
变量
var 变量名
-区分大小写
-首字符必须是字母、_、或$
-非关键字或保留字，如var
var name = "bottle";
var price = 49;
var diameter = 6.7;
var isKeepWarm = true;
或者
var name = "bottle",
price = 49,
diameter = 6.7,
isKeepWarm = true;
局部变量和全局变量
局部只能在定义变量的当前方法中访问
全局变量可以随意使用
数据类型简介
-基本数据类型
-Object
typeof
Number类型
- 数值类型
整数、浮点数、NaN
NaN–not a number，非数字
任何操作都会返回NaN
与任何值都不相等，包括自身 - 数值转换
Number()，parseInt()-忽略小数点，parseFloat()-多个小数点只取第一个。
把非数值转换为数值。第一个可以用于任何数据类型，后两个则专门用于把字符串转化为数值。 - 数值范围
- 数学函数
Math函数–round\random\sqrt\max\sin
String类型
- 拼接
- 长度
- 索引
console.log(type.length);//长度
console.log(type[0]);//第一个字，兼容性有问题
console.log(type.charAt(0));//第一个字
Boolean类型
判断
true\false
Null和Undefined类型
Null：数据为空 -object
Undefined：变量声明了，但是没有初始化 -undefined
Object类型
var bottle = {
name: 'bottle',
price: '49',
isKeepWarm: true
}
console.log(bottle.name);//读
bottle.name = ‘cup’;//改
bottle.color = ‘blue’;//写
console.log(bottle[‘is keep warm’]);//特殊读
数组简介
var bottles = [’ ‘,’ ‘,’ ‘,’ ‘];
var bottles = new Array(’ ‘,’ ‘,’ ‘,’ ‘);//构造函数
console.log(bottles[0]);//读
bottles[1]=’’;//写
bottles.push(’ ‘);数组末尾添加一个元素
bottles.pop();数组末尾删除一个元素
bottles.shift();数组开头删除一个元素
bottles.unshift(’ ');数组开头添加一个元素
slice(1,4);//从开始到结束（不包括结束），复制
splice(1,3);//从1开始，截取3个，剪切
a.concat(b);//合并
reverse();//倒序
sort();//默认升序排序------sort可以传入函数后进行降序和随机排序
函数
函数声明----在程序的任何地方声明了都可以调用
关键字 函数名 (参数){
函数内容
返回值
}
函数表达式----要先声明才能调用
把函数赋值给一个变量
比较运算符
===严格相等
!==严格不相等
//非严格相等----先类型转换，再比较
3==‘3’//true
3!==‘3’//false
//严格相等----不会进行类型转换（推荐使用）
3===‘3’//false
3!==‘3’//true
流程控制
if语句
if(条件)执行1 else 执行2
三元运算符
判断条件？（条件为真时执行）：（条件为假时执行）
switch语句
switch(){
case:
内容;
break;
default:
内容;
}
循环语句
记得设置条件变化，不然容易死循环
-while语句–先判断再执行
while(条件){
循环体;
}
-do-while语句–先执行再判断
do{
循环体;
}while(条件)
-for语句–先判断后执行
for([循环前的初始化操作];[判断表达式];[每次循环后执行的代码]){
循环执行的代码;
}
-break和continue语句
break用于跳出整体的循环
continue用于跳出当前执行的循环
-for-in语句
for(var 变量 in 对象){
循环执行的代码;
}
BOM（Browser Object Model 浏览器对象模型）
location--地址栏
最有用的bom对象之一
提供了文档相关的信息
导航
归属：window、document
属性和方法：href、path、assign()、reload()
navigator--客户端
客户端的相关信息
userAgent 浏览器的用户代理字符串
platform 浏览器所在系统平台
history--用户访问记录
保存着用户上网的记录
从窗口被打开的那一刻算起
length 数量
go() 跳转
forward() 前进
back() 后退
window
global全局作用域
将游离的变量、函数变成window对象的属性和方法
系统对话框
alert–没有结果
confirm–有结果，选项
prompt–有结果，输入内容
DOM(Document Object Model-文档对象模型)
它是一套针对 HTML 文档的 API （应用程序编程接口）。
html树—>DOM树—>页面
DOM 是 JS 和 HTML 的桥梁
DOM节点
node是一个对象
十二种类型（重点4个）
DOCUMENT_NODE
Document类型
nodeType 9
ndoeName #document
- 不是html元素
- 挂靠各种常用的api
ELEMENT_NODE
Element类型
nodeType 1
ndoeName 元素的标签名
- html元素
- 属性
- 创建/删除元素
createElement(tagName)–创建
TEXT_NODE
Text类型
nodeType 3
ndoeName #text
- data和nodeValue
- 创建文本节点
DOCUMENT_FRAGMENT_NODE
DocumentFragment类型
nodeType 11
ndoeName #document-fragment
- 作为仓库来使用
DOM查找
document.getElementById();//一个元素 按id查找
[document|Element].getElementsByClassName()//HTML Collection 多个元素 按类查找
[document|Element].getElementsByTagName()//按元素查找
[document|Element].querySelector()–CSS选择器
[document|Element].querySelectorAll()–CSS选择器
DOM新增和删除
insertBefore();前面插入
appendChild();后面追加
新增多个元素时使用循环语句
或者使用DocumentFragment当仓库
removeChild();删除一个元素
删除多个先用querySelectorAll()查找，然后循环删除
property和attribute
属性，property
特性，attribute
区别
- 公认的attribute会映射到property
- 读写方式
- 特别的值，如class,style等
DOM修改样式
style = ‘color : red; background-color : #ddd’;
class
DOM内容修改
文本节点
innerHTML和outerHTML
DOM遍历
function traversal(dom){
var len = dom.length;
var i = 0;
var d = null;
for( ; i < len; i++){
d = dom[i];
console.log(d);
if(d.children){
traversal(d.childNodes);
}
}
}
traversal(document.querySelector('ul').children);
事件
事件模型
事件捕获，处于目标，事件冒泡
事件处理程序
- 添加
h1.addEventListener(type,handle,false) - 作用域
this - 删除
h1.removeEventListener(type,handle)
事件类型
鼠标类
click
mousedown
mouseup
mouseenter
mouseleave
mouseover
mouseout
mousemove
键盘类
keydown
keypress
keyup
UI类事件
load
unload
resize
scroll
jQuery
jQuery引入
本地文件<script src="js/jquery.min.js"></script>
内容分布式网络CDN
//非压缩版<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
//压缩版
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery中的$
$ === jQuery
$()---->jQuery对象 类数组带有额外方法
$(string)
$(dom element)
jQuery选择器---->（实现）CSS选择器
基本选择器
$(tag)----按标签选择
$(.class)----按类名选择
$(#id)----按id选择
$(*)----匹配所有元素
组合选择器
$(selector1,selector2)----多元素选择器
$(selector1 selector2)----后代元素选择器
$(selector1>selector2)----子元素选择器
$(selector1+selector2)----毗邻元素选择器
其他选择器
$(selector:first-child) 选取第一个子元素
$(selector:last-child) 选取最后一个子元素
$(selector:eq(index)) 选取集合中第index个子元素
$(atttribute=value) 选取属性值为value的元素
遍历DOM元素
//获取父元素
$('#me').parent();
//获取所有父元素和祖先元素
$('#me').parents();
//使用.eq()函数获取相应元素
$('#me').parents().eq(0);//获取父亲
$('#me').parents().eq(1);//获取爷爷
//使用.parents(selector)来精确查找
$('#me').parents('.fat');
$('#me').parents('.oldest');
//获取所有的兄弟元素
$('#me').siblings();
//通过使用selector来精确查找
$('#me').siblings('.tall');
//使用.children()获取子元素
$('#grandPa').children();
//使用.find(’*’)获取所有子孙元素
$('#grandPa').find('*');
//使用.find(selector)精准获取子孙元素
$('#grandPa').find('.youngest');
添加和移除DOM元素
添加
append/appendTo 在被选元素的结尾插入内容
prepend/prependTo 在被选元素的开头插入内容
after/insertAfter 在被选元素之后插入内容
before/insertBefore 在被选元素之前插入内容
移除
empty
remove
jQuery事件监听
触发事件的目标元素
触发的事件名称
事件触发时的回调
事件对象
$('#target').on('click',function(event) {
console.log('target');
$('body').css('background','#ff0');
});//----推荐使用
//jQuery快捷方法click
$('#target').click(function(event) {
console.log('target');
$('body').css('background','#ff0');
});
事件委托
jQuery内部存在隐形迭代，提供了链式操作
// 原始版
$('div').hide(); //隐藏页面上所有的div元素
$('div').text('new content'); //更新所有div元素内的文本
$('div').addClass("updatedContent"); //在所有的div元素上添加值为updatedContent的class属性
$('div').show(); //显示页面上所有的div元素
// 重写版，链式
$('div').hide().text('new content').addClass("updatedContent").show();
// 缩进版
$('div')
.hide()
.text('new content')
.addClass("updatedContent")
.show();
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
