第一章:js基础
1、引入js:
外部,内部,行内
2、语法
变量: var 注意变量类型可以变化;注意区分大小写;命名规则;
数据类型:
undefined:未定义
null
string
boolean,object,number
使用typeOf()可以查看数据类型
3、数组
定义: var 数组名 = new Array(长度);
var 数组名 = new Array(值1,值2,....);
var 数组名 = {值1,值2....};
注意:可以直接跳过中间元素赋值;
length:长度,sort():排序,push():在最后添加元素
4、for(var i in nums){}
注意i代表的是数组下标而不是数组值
5、运算符:
== :值比较
=== :先比较类型在比较值
6、函数
系统函数:parseInt();解析整数
parseFloat();解析小数
isNaN(); 判断是否为数值
自定义函数:
function 函数(参数列表){
[return 表达式]
}
调用: onclick(事件名) = 函数();
第二章 BOM对象:
1、window对象:open(),close()
2、history:back()向后,forward()向前,go(),有历史才可以跳转
3、location:
location.href = "url";//js跳转
host,hostname,reload(),replace();
4、document对象
referrer:拿到跳转过来的url;
URL:本窗体的url;
方法:
根据id拿元素getElementById("Id");
根据名字拿元素的集合:getElementsByName("name");
根据标签拿元素的集合:getElementsByTagName("tagName标签名字");
每个元素都有innerHTML属性。
5、定时函数
var id = setInterval("函数名()",毫秒时间);
关闭:clearInterval(id);
var id = setTimeout("函数名()",毫秒时间);
关闭:clearTimeout(id);
第三站:DOW解析
1.三种DOM:BOW core,HTML-DOM,CSS-DOM
2.访问节点
(1)getElement....系列方法
(2)层级关系:父子兄弟
firstChild,lastChild,ChildNodes,nextSibling,PreviousSibling;不忽略空节点
firstElementChild,lastElementChild,children子, nextElementSibliing,previpusElementSibling;拿到元素节点
信息:nodeName,nodeValue,nodeType
节点类型:文档,元素,属性,文本,注释
3.操作节点
创建:document.createElement("节点名");
插入:父节点.appendChild(子节点)儿子
父节点.insertBefore(插入的节点,参考节点)
复制:节点.cloneNode(deep);
删除:父节点.removeChild(子节点);
替换:父节点.replace(新节点,旧节点)
4.操作样式
设置样式:
节点.style.样式名="样式值"
注意:样式名驼峰命名;
节点.className = "类名";
第四章:js面向对象
1.js创建对象的两种方式
(1)var obj = new Object();
obj.属性/方法 = "值";
(2)字面量赋值 var obj = {键值对};
2.构造函数
普通函数+this;
3.原型:原型是一个对象
prototype;原型;
类似于java中static
4.两种继承方式
1.借用构造函数:
父对象.call(this,参数列表);
父对象.apply(this,[参数数组]);
2.用原型-->>原型链
子对象.prototype = new 父对象();
实际使用:组合两种方式。
第五章:jQuery初识
1.结构
$(document).ready(function()){
//代码
});
$:工厂函数
document:选择器
ready:方法
2.常用的方法
css():设置样式
addClass():加类样式
hide():隐藏
show():显示
mouseover():鼠标悬浮//mouseenter();
mouseout():鼠标离开//mouseleve();
click();点击
dblclick():双击
children():子元素
next():下一个元素
3.jQuery风格:$,链式操作(点点点点下去),隐式迭代.
第六章:jQuery选择器
1.基本选择器
标签,类,Id,并集,交集,全局
2.层次选择器
后代:父选择器 空格 后代选择器
字选择器:父选择器>后代选择器
相邻兄弟:选择器+兄弟选择器
同辈兄弟:选择器~兄弟选择器
3.属性选择器
[attr],[attr=value],[attr^=value],
[attr$=value],[attr*=value],[attr!=value]
4.过滤选择器
:first,:last,:odd,:even
:not(),:eq(index),lt(index),gt(index)
:header,:focus(获取焦点)
可见性:
:visible,显示的
:hidden,隐藏的
5.on():绑定事件
find():遍历
is():判断
第七章:事件和动画
1.事件
鼠标事件:click,mouseover,mouseout,mouseenter,mouseleave,mousedown,
mouseup
键盘事件:keydown-->keypress-->keyup
判断是什么键:e.keyCode=="13";
绑定事件:
bind():可以绑定一个,可以绑定多个一类事件不能一次绑定在bind中,
但是可以用多个bind去绑定。
unbind([类型],"函数名")
不是说bind的事件才能unbind()
复合事件:
hover(enter,leave);
toggle();控制显示隐藏
toggleClass();/控制类的有无
2.动画
显示隐藏:show(speed),hide(speed);
淡入淡出:fadeIn(speed),fadeOut(speed);
延伸:slideUp(speed)收起来,slideDown(speed)放起来
speed:normal,slow,fast,毫秒数
自定义动画
animate({动画的属性},speed时间,callback回调函数)
第八章:jQuery操作DOM
1.样式操作
css(),addClass(),removeClass(),toggleClass,hasClass()
2.内容操作
html(),text,val()text会把标签也会作为字符串
3.节点操作
创建:$(html)
插入:
内部插入:append(),prepend()
外部插入:aftef(),before()
删除:删除后不保留事件:remove()
删除后保留事件:detach()
清空节点:empty();
替换节点:replaceWith()
复制节点:clone(true/false)带不带事件的复制
遍历节点:
子节点:chi13:43 2018/1/11ldren(),find();
兄弟:next(),prev(),siblings(),nextAll()
前辈:parent(),parents()
其他遍历:
each(),first(),last(),eq(),filter()(),end()
Css-DOM操作
width():取宽度
height():取高度
offset():偏移
scroll():滚动条
scrollTop():滚动条上边距离上边距离
scrollLeft():滚动条左边距离
原文:https://www.cnblogs.com/whyshi1995/p/9085127.html