JS基础数据对象
1.0 Array 对象
var arr = [1,2,5,9]; // [1,2,5,9]
var arr = new Array(2,5,9); // [2,5,9]
1.1 属性
arr.length
1.2 方法
arr.concat(); // 连接多个数组,并返回新数组
arr.join(); // 用参数连接每一个数组内容,并返回一个连接后的字符串;
// 如果传入空字符串"",则返回每项直接连接的字符串
arr.pop(); // 删除数组的最后一项并返回结果
arr.push(); // 在数组最后加入一个或多个内容并返回新的长度
arr.reverse(); // 将数组内容的前后顺序反转
arr.shift(); // 删除数组首元素并返回其值
arr.unshift(); // 向数组的开头添加一个或多个元素,并返回新的长度
arr.slice(); // 切片操作
arr.splice(start, num, [...insert]);// 从start索引开始(包含),删除num个元素,并插入insert元素
// splice方法可以用于删除、插入和替换数组元素
arr.sort([sortFunction]); // 排序
2.0 String 对象
var str = 'abcd';
var str = new String("acfg");
2.1 属性
str.length
2.2 方法
str.charAt(); // 查找并返回索引位置上的字符
str.charCodeAt(); // 查找并返回索引位置上的字符的编码值:a=97,A=65
str.indexOf(); // 顺序 查找并返回字符串上第一次出现的索引位置,未找到返回-1
str.lastIndexOf(); // 倒序 查找并返回字符串上第一次出现的索引位置,未找到返回-1
str.split(); // 以传入参数分割字符串,并返回分割后的数组;
// 如果传入空字符串"",则每个字符均被分割;如果传入参数不存在,则返回整字符串的数组
str.substr(m, n); // 从索引位置m开始,获取n个字符,并返回子字符串;
// 如果n参数省略,则返回从m起到最后的子串
str.substring(m, n); // 获取并返回索引位置从m到n的子字符串;
// 如果n参数省略,则返回从m起一直到最后的子串
str.toLowerCase(); // 将字符串中的字母转换成小写形式
str.toUpperCase(); // 将字符串中的字母转换成大写形式
2.3 占位符
var variable = 'string';
console.log("This is {{variable}}"); // This is string
3.0 Math 对象
3.1 属性
Math.E; // 自然常数e
Math.PI; // 圆周率 Π
3.2 方法
Math.pow(m, n); // 求m的n次方
Math.abs(n); // 求n的绝对值
Math.sqrt(n); // 求n的算数平方根
Math.round(n); // 求n的四舍五入值
Math.floor(n); // 求n的向下取整值:不大于n的最大整数
Math.ceil(n); // 求n的向上取整值:不小于n的最小整数
Math.random(); // 获取一个[0,1)区间的随机数
4.0 Date 对象
var dt = new Date(); // 创建一个当前时间的时间日期对象
var dt = new Date("1999/9/9 6:6:6"); // 创建一个指定的时间日期对象
var dt = new Date(1999,9,9,6,6,6); // 创建一个指定的时间日期对象
// 注意:月份从0开始(0~11)=>(1月~12月)
var dt = new Date(2345678954321); // 创建一个指定的时间日期对像
// 注意:从1970.01.01 00:00:00开始记录的毫秒数:时间戳
4.1 方法
Date.toLocaleString(); // 转换成本地时间格式
Date.getFullYear(); // 获取年份 -> 年
Date.getMonth(); // 获取月份 -> 月
Date.getDate(); // 获取日期 -> 日
Date.getHours(); // 获取时 -> 时
Date.getMinutes(); // 获取分 -> 分
Date.getSeconds(); // 获取秒 -> 秒
Date.getMilliseconds(); // 获取毫秒
Date.getDay(); // 获取星期
Date.getTime(); // 获取时间戳(1970年1月1日0时0分0秒起)
Date.setFullYear(); // 设置年份
Date.setMonth(); // 设置月份
Date.setDate(); // 设置日期
Date.setHours(); // 设置时
Date.setMinutes(); // 设置分
Date.setSeconds(); // 设置秒
Date.setMilliseconds(); // 设置毫秒
DOM事件
5.0 事件
5.1 鼠标事件
onclick; // 单击
ondblclick; // 双击
onmouseover; // 鼠标移入
onmouseout; // 鼠标移出
onmousedown; // 鼠标(左键)按下
onmouseup; //鼠标(左键)松开
5.2 表单事件
onfocus; // 获得焦点
onblur; // 失去焦点
onsubmit; // 提交
onchange; // 发生改变
onreset; // 重置
5.3 键盘事件
onkeydown;
onkeyup;
onkeypress;
5.4 窗口事件
onload
; //页面加载完成事件:attention please
<script> window.onload=init </script>
// 注意:页面加载完成后自动调用onload
,即运行init()
;若window.onload=init()
,则在加载脚本时就会运行init()
。<body onload="init()"> ... </body>
// 页面加载完成后运行init()
,分号""
内相当于匿名函数
5.5 event
变量对象
保存事件发生时的相关信息
event
必须通过参数形式传递给事件函数
event.clientX
;事件发生时鼠标坐标
event.clientY
;
event.target || event.srcElement
5.6 this
变量对象
当前元素对象
如果多个页面元素具有相同的触发事件和事件处理函数,那么使用 event 和 this 对象可以大大简化代码复用
6.0 ECMAscript, BOM, DOM
6.1 window
: 最高级对象
所有属性方法都属于window
下,可以使用window.
调用,也可以省略,直接调用
BOM: 浏览器对象模型(brower object model),浏览器内置对象 document DOM: 文本对象模型(document object model) frames history location navigator screen DOM: 网页便签对象 anchors: 锚点 forms: 表单 images: 图片 links: 外部链接 location: 资源定位 applets: 程序引入 embeds: 嵌入内容 window方法:window下属性和方法可省去对象window,直接调用 window.alert(); // 警告弹窗 window.prompt(str,defaultStr); // 输入弹窗:str提示文本,default默认输入; // 确认得到str(包括空字符串),取消得到null window.comfirm(); // 确认/选择弹窗:确认得到true,取消得到false window.open(link, name, setting); //打开新窗口 => setting: width, height, left, right, scrollbars, toolbar... window.close(); // window.close(); close(); self.close(); // js代码执行的close,只能关闭由js代码打开的窗口 window.setTimeout(function, delay); // 创建单次定时器:经过指定delay毫秒后运行function window.setInterval(function, delay); // 创建循环定时器:每经过指定delay毫秒后运行function window.clearTimeout(time object); // 清除指定单次定时器对象 window.clearInterval(time object); // 清除指定循环定时器对象 // 注意:要清除定时器,必须给定时器命名 var tim=setTimeout(),匿名定时器无法清除!
6.2 location对象
location.href; // 获取当前页面的url地址
location.assign(url); // 加载新的url,会产生历史缓存,可以返回
location.reload(); // 重新加载当前页面(刷新)
location.replace(url); // 加载新的url,不可以再返回初始页面
6.3 history对象
history.length; // 获取与当前页面相关的浏览历史中不同url地址数,相同的url不会重复计数
history.back(); // 返回历史记录中(当前页面)的上一个页面;相当于浏览器中的返回按钮
history.forward(); // 前往历史记录中(当前页面)的下一个页面;相当于浏览器中的前进按钮
history.go(n); // 跳转到历史记录中指定的页面;n=-1时相当于back()
6.4 screen对象
screen.height; // 获取屏幕高度
screen.width; // 获取屏幕宽度
screen.availHeight; // 获取除去任务栏的高度
screen.availWidth; // 获取除去任务栏的宽度
6.5 navigator对象
6.5.1 属性
navigator.appCodeName; // 代码名,“Mozilla”
navigator.appName; // 浏览器名称,“Netscape”
navigator.appVersion; // 浏览器平台和版本信息
navigator.userAgent; // 用户代理头:浏览器详细信息,包含了以上某些项
navigator.appMinorVersion;
navigator.browserLanguage;
navigator.cookieEnabled;
navigator.cpuClass;
navigator.onLine;
navigator.platform;
navigator.systemLanguage;
navigator.userLanguage;
6.6 DOM对象
.parentNode; // 父节点
.childNodes; // 子节点
.firstchild; // 第一个子节点
.nextSibling: // 下一个兄弟节点【必须是同父级关系】
.previousSibling; // 前一个兄弟节点【必须是同父级关系】
JQuery语法
7.0 JQuery对象:选择器,核心,DOM,事件,动画,插件,ajax
/*核心语法:$("selector[:filter]").action();*/
注意:JQuery
对象的普通操作返回都是JQuery
对象,以便进行链式操作
重点:jQuery
对象的函数参数中内置参数this
,指代当前对象的DOM
节点
7.1 选择器(“selector[:filter]”)
- 层级选择
ancestor descendant
//ancestor
祖先元素下的所有descendant
后代元素
parent>child
//parent
元素下的所有child
子元素
prev+next
// 前元素prev
后紧挨着的下一个兄弟元素next
prev~sibling
// 前元素prev
后的所有sibling
兄弟元素 - 内容选择
:contains(str)
// 匹配含有str
内容的元素
:empty
// 匹配空标签元素
:has(selector)
// 匹配含有selector
子元素的父元素,不限层级
:parent
// 匹配作为父元素的元素,即含有子内容的元素(innerHTML非空),非空标签 - 基本选择
:first
// 选择第一个匹配元素
:last
// 选择最后一个匹配元素
:even
// 选择索引为偶数的匹配元素
:odd
// 选择索引为奇数的匹配元素
:eq(index)
// 选择索引为index
的匹配元素
:gt(index)
// 选择索引大于index
的匹配元素
:lt(index)
// 选择索引小于index
的匹配元素
:header
// 选择h标签元素
:not(selector)
// 选择除去selector
之外的其它匹配元素 - 属性选择
[attr]
// 选择具有attr
属性的元素
[attr='value']
// 选择具有attr
属性且attr="value"
的元素
[attr!='value']
// 选择具有attr
属性且attr!="value"
的元素
[attr^='value']
// 选择具有attr
属性且attr
值以"value"
开头的元素
[attr$='value']
// 选择具有attr
属性且attr
值以"value"
结尾的元素
[attr*='value']
// 选择具有attr
属性且attr
值包含"value"
子字符串的元素
[attr1][attr2][attr3]
- 伪类选择
type child
:first-child
// 第一个子元素
:first-of-type
// 第一个子元素
:last-child
// 最后一个子元素
:last-of-type
// 最后一个子元素
:nth-child(n)
// 第n个子元素
:nth-of-type(n)
// 第n个子元素
:nth-last-child(n)
// 倒数第n个子元素
:nth-last-of-type(n)
// 倒数第n个子元素 - 可见性
:hidden
:visible
- 表单选择
:input
// 所有input
标签
:text
// text属性的input
标签
:password
//password
属性的input
标签
:redio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
- 表单属性
:enabled
:disabled
:checked
:selected
7.2 属性操作
.attr("attrName", "attrValue"); //设置属性
.attr("attrName"); //获取属性值
.attr({keys:"values"}); //同时设置多个属性
.attr(key, fn()); //将key属性设置为函数fn()返回值
removeAttr('attrName'); //删除属性attrName
7.3 CSS类
.addClass("className"); //添加class属性值className,已有class值不会重复添加
.removeClass("className"); //删除class属性值className
.toggleClass("className"); //切换class属性值className,即(根据是否已有className)循环添加和删除className
.html(); //相当于 .innerHTML
.html("code&text"); //相当于 .innerHTML="code&text"
.text(); //相当于 .innerText
.text('txt'); //相当于 .innerText="txt"; 如果txt内容含有标签元素,会被转化成实体字符
.val(); //获取表单元素的value值
.val("value"); //设置表单元素的value值
7.4 对象访问
.length; //获取对象集合长度
.size(); //获取对象集合长度
.each(fn(index, element)); //index:当前索引下标;element:当前DOM元素;内置this也表示当前DOM元素
7.5 文档操作
- 内部插入:父子级关系
$(a).append($(b)); // 元素a末尾处添加子元素b
$(b).appendTo($(a)); // 元素b添加到父元素a末尾处
$(a).prepend($(b)); // 元素a开头处添加子元素b
$(b).prependTo($(a)); // 元素b添加到父元素a开头处
- 外部插入:兄弟级关系
$(a).after($(b)); // 元素a后面添加同级元素b
$(b).insertAfter($(a)); // 元素b添加到同级元素a后面
$(a).before($(b)); // 元素a前面添加同级元素b
$(b).insertBefore($(a)); // 元素b添加到同级元素a前面
- 包裹
$(a).wrap(tag); // 用tag标签元素包裹(每一个)a元素
$(a).unwrap(); // 取消(每一个)a元素的包裹元素
$(a).wrapAll(tag); // 将(所有)a元素整体包裹
$(a).wrapInner(tag); // 将父元素a的每个子元素用tag标签元素包裹
- 替换
$(a).replaceWith(HTML); // 将(每一个) a元素 用HTML内容替换
$(HTML).replaceAll($(a)); // 将所有(每一个)a元素用HTML内容替换
- 删除
$(a).empty(); // 删除a元素内容(innerHTML)
$(a).remove(); // 删除整个a元素
- 克隆
$(a).clone(); // 获取一个a元素的克隆
注意:调用对象必须是jQuery
对象,操作的参照对象也必须是明确的已有对象
7.6 事件
- 加载事件
$(document).ready(fn);
$(fn); // 简写
window.onload=fn; // JS
JS:把页面上的DOM
和资源加载完成之后执行
JQ:把页面上的DOM
完成之后就会执行;JQ
来源于JS
,但超越JS
- 事件切换
.hover(fn, fn)
; // 鼠标悬浮之上和鼠标离开切换触发 - 普通事件
.click(fn)
; // 点击事件
.dblclick(fn)
; // 双击事件
.focus(fn)
; // 获焦事件
.blur(fn)
; // 失焦事件
.change(fn)
;
.mouseover(fn)
;
.mouseout(fn)
;
.mousedown(fn)
;
.mouseup(fn)
;
.mousemove(fn)
; - 事件处理(绑定)
.bind("event", fn)
; / /给Jquery
对象绑定新事件
.bind({"event1":fn1, "event2":fn2})
; //给Jquery
对象绑定多个事件
.unbind("event")
; //给Jquery
对象解除绑定指定事件,没有event
参数时解除所有事件的绑定
.on("event", fn)
;
.on({"event1":fn1, "event2":fn2})
;
.off("event")
;
.one("event", fn)
; //给Jquery
对象绑定仅触发一次的事件,触发后自动解除
7.7 查找元素
.parent(); // 获取当前元素的父元素
.find("selector"); // 获取当前元素下的selector元素
.next(); // 获取下一个兄弟元素
.prev(); // 获取前一个兄弟元素
.closest("selector"); // 获取最近的selector元素,重点!!!可以在特殊域内快速获取当前元素的父元素等操作
注意:对象集合
.get(); // 获取对象的数组DOM形式
.filter(); // 筛选出符合条件的对象集合,可以传入选择器或函数(true/false)
.map(); // 对集合中的每一个DOM节点进行操作,返回内容有fn()决定
注意:Jquery
对象的多数单对象方法也可以用于对象集合的操作,并返回集合中每个对象的操作结果的集合
7.8 动画
.show([time, fn]); // time:动画时间(默认十分迅速);fn:动画完成后的回调函数
.hide([time, fn]);
.toggle([time, fn]); // show/hide自动切换
.slideUp([time, fn]); // 上滑隐藏
.slideDown([time, fn]); / /下拉显示
.slideToggle([time, fn]); // Up/Dowm自动切换
.fadeIn([time, fn]); // 淡入显示
.fadeOut([time, fn]); // 淡出隐藏
.fadeToggle([time, fn]); // In/Out自动切换
.fadeTo([time, Alpha, fn]); // 改变透明度带Alpha
AJAX网络请求
7.9 AJAX
$.ajax({
type: 'GET', // 一般单纯请求资源,通常创建固定相关的新东西
url: 'url',
success: function(data){ // 成功获取数据后回调函数
$.each(data, function(index, element){
// 数据处理
});
}
error: function() {
// 请求失败时的回调函数
}
});
$.ajax({
type: 'POST', // 一般提交数据并请求相应资源,通常创建跟提交相关的新东西
url: 'url',
data: {k: v}
success: function(newData){ // 成功响应被获取数据后回调函数
$.each(data, function(index, element){
// 数据处理
});
}
error: function() {
// 请求失败时的回调函数
}
});
$.ajax({
type: 'DELETE', // 一般请求删除某项数据(根据url例如id信息等辨别),通常删除数据
url: 'url',
success: function(result){ // 成功响应后回调函数
// 执行相关的DOM操作
}
error: function(error) {
// 请求失败时的回调函数
}
});
-
error信息:
- error.status // 响应状态码(404…)
- error.readyState // 当前状态,0-未初始化,1-正在载入,2-已经载入,3-数据进行交互,4-完成。
- error.statusText // 状态码信息(Not Found…)
- error.responseText // 响应文本信息,服务器返回内容
扩展:$(selector).delegate(childSelector, event[, data], function)
方法(data
:可选,规定传递到函数的额外数据)
为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用delegate()
方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
$.ajax({
type: 'PUT', // 一般提交并更新某项数据(根据url例如id信息等辨别),通常编辑更新数据
url: 'url',
data: {k: v}
success: function(newData){ // 成功响应被获取数据后回调函数
// 相关DOM操作
}
error: function() {
// 请求失败时的回调函数
}
0.0 特殊
修改class属性
==> .style.className
修改float属性
==> .style.cssFloat