一.JavaScript基础
1.常规方法
document.write("内容") :书写内容到网页中
window.alert("内容") :网页警告弹窗
2.使用方法
⒈行内样式 -使用几率较小 例:<input type="button" onclick="javascript:alert("弹窗信息")"/>
⒉内部样式 -基本不使用 例:<head><script>alert("弹窗信息")</script></head>
⒊外部引入 -推荐使用 例:<head><script type="text/javascript" src="js/***.js"></script></head>
3.变量的声明和赋值 & 重点学习字符串
⒈变量的声明区别于java,所有的变量类型都用var来声明.例:var i=1;
⒉变量的隐式类型:
a:undefined 解释:所有声明但未被赋值的或者被赋值为undefined的变量 都属于此类型
b:number 解释:所有数字类型 整型和浮点型
c:string 解释:所有的String 和 char 都属于这种类型
d:boolean 解释:值只有 true & false
e:object 解释:所有new 的对象 数组 和 赋值为null的都为此类型
⒊方法
a:检测var类型变量所属类型的方法
typeOf(变量名) 返回值 可以用一个 var 变量名来接收 用write(变量名)来书写到网页中
typeOf 变量名 也是一样的用法
b:字符串长度
字符串.length 返回值 为number类型 区别于java(此方法后带()) JS不用带()
c:查找某个字符在字符串中的位置
字符串.indexOf('字符','开始位置') 返回值 number 类型 存在返回下标index值 不存在返回-1 开始位置不写默认从头开始查找
d:查找字符串中某个下标的字符
字符串.charAt(index) 返回值 string 存在返回string类型的字符 不存在 返回一个string类型的空格
e:截取字符串
字符串.substring(index,index) 前闭后开 截取字符串中的内容 同理java同方法
f:拆分字符串
字符串.split('字符') 按某个字符 拆分字符串 返回一个字符串数组 同理java同方法
...更多方法请参考w3cSchool帮助文档
⒋变量名的取名规范
和java一样,驼峰命名规则
⒌引申知识点
a:NaN的出现
NaN(Not a Number) 和 数字的概念等同 同属于number类型
b:控制台打印
console.log("我是普通的信息")
console.error("我是错误信息")
console.warn("我是警告信息")
c:弹窗信息
window.alert("我是告警框") //警告框 无返回值 或者 说 返回 undefined
window.prompt("你看我是啥?") //输入框 返回输入信息
window.confirm("你看我又是啥?") //确认框 返回布尔类型 点击确定返回 true 点击取消 返回 false
6.学习数组
声明:
var myArray = new Array(5);声明并创建一个长度为5的数组
var myArray = ["0","1","2","3","4"];声明长度为5的数组 并同时赋值 区别于java(用花括号) JS(用方括号)
var myArray = new Array("0","1","2","3","4");声明长度为5的数组 并同时赋值
注意: 此数组不同于java的数组 java数组长度一旦定义 不可更改 JS的数组长度可变
例: myArray 的长度为5 但是 myArray[5]=7 后 长度就变为6了 被扩容
方法:
常用方法:
a:排序 sort()
b:添加新元素 push(数据) 返回值是新的数组长度
c:长度 length 返回number类型的值
d:组合元素 join("连接内容") 返回一个string 类型的 返回值
e:删除指定元素 splice(index,num),第一个参数从下标位置开始删除,第二个参数是从下标位置开始删除多少个元素
...更多方法请参阅w3cSchool帮助文档
7.学习运算符
a:算数运算符 + - * / % ++ --
b:赋值运算符 = -= +=
c:比较运算符 > < >= <= == != === !==
d:逻辑运算符 && || !
8.循环语句
a:普通型for 循环 参考java
b:while 循环 参考java
c:for in结构 不同于 java的for each
9.流程控制-参考java
if(条件){ JavaScript语句 }else{ JavaScript语句 }
10.自定义函数
格式:a.无参function methodName(){} b.有参function methodName(i){} c.有返回值function methodName(i){return i}
变量式定义:var methodName = function{} 调用此方法必须在定义之后调用,否则报语法错误
总结:未定义返回值的返回值是undefined
11.系统函数
常用:parseInt() 解析number类型的变量成整型数字 parseFloat() 解析number类型的变量成浮点数字 isNaN() 判断变量是否是数字类型
12.事件 http://www.w3school.com.cn/jsref/dom_obj_event.asp
onLoad 直接加载 onclick 单击事件 onDlClick 双击事件 onMouseOver 鼠标指针悬停事件 onKeyDown 键盘按下事件 onchange 改变事件
BUG:onLoad事件 页面加载完毕后 如果 调用document.write()方法的时候会把原页面的内容清空
13.数学运算技巧
除了加法运算意外 所有的数字和字符串数字之间的运算 都可以返回数字
如果是加法 可以直接 parseInt() 或 parseFloat() 解决字符串和数字的转换 但是...你不能确定输入的到底是整型还是浮点数
所以 加法时可以用 输入的 数字类型的字符串变量-0 转换成数字 再进行计算
二.JavaScript 操作BOM对象
1.window对象 参考-http://www.w3school.com.cn/jsref/dom_obj_window.asp
常用方法: a.prompt() b.alert() c.confirm() d.close() e.open() 等...
常用属性:
a.history(back()后退 forward()前进 go(-1 0 or 1))
b.location(="url" reload()刷新 replace()替换) 属性:host 主机名+端口号 hostname 主机名 href 完整的URL
c.screen 等...
备注:C:WindowsSystem32driversetc hosts文件 添加虚拟域名 例: 127.0.0.1 www.t190.com
2.document对象
属性:referrer 返回载入当前文档的URL 如果文档不是URL访问的,返回null ; URL 返回当前文档的URL
方法:参考-http://www.w3school.com.cn/jsref/dom_obj_all.asp
a:getElementById() 通过ID获得具体的Element
b:getElementByName() 返回带有指定名称的对象的集合 ☞name=""的内容
c:getElementByTagName() 返回带有指定标签名的对象的集合 ☞input div 之类的标签名
d:write() 向文档写文本,HTML表达式或JavaScript代码
3.JavaScript 内置对象
Date 对象:
参考:http://www.w3school.com.cn/jsref/jsref_obj_date.asp
Array 对象:
参考:http://www.w3school.com.cn/jsref/jsref_obj_array.asp
String 对象:
参考:http://www.w3school.com.cn/jsref/jsref_obj_string.asp
Math 对象:
参考:http://www.w3school.com.cn/jsref/jsref_obj_math.asp
3.1 题外话: 修改某个节点的样式 可以 例如:element.style.color="pink"; 改变颜色,其他样式同理
4.window 对象的定时器方法
a:setTimeout 只定时执行1次 语法:window.setTimeout("JS代码","单位为毫秒的时间");
var flag 接收语法返回值标记 停止单次定时器方法:clearTimeout(flag);
b:setInterval 无限循环定时执行 语法:window.setInterval("JS代码","单位为毫秒的时间");
var flag 接收语法返回值标记 停止循环定时器方法:clearInterval(flag);
三.JavaScript 操作DOM对象
1.访问节点: 通过Document.getElementByXXX()获得一个指定节点-->再通过以下属性节点访问节点:
第一部分:节点属性
a:parentNode 返回节点的父节点
b:childNodes 返回子节点集合,可以for循环遍历
c:firstChild 返回节点的第一个子节点, 空白内容算第一个文本节点
d:lastChile 返回最后一个子节点 同上
e:nextSibling 返回下一个节点 空白内容算第一个文本节点
f:previousSibling 返回上一个节点 同上
第二部分:元素属性
a:firstElementChild 第一个是元素的子节点,避开空节点
b:lastElementChild 最后一个是元素的子节点,避开空节点
c:nextElementSibling 下一个是元素的弟节点,避开空节点
d:previousElementSibling 上一个是元素的兄节点,避开空节点
第三部分:操作节点的属性
a:getAttribute("属性名字") 获得属性的值
b:setAttribute("属性名字","属性值") 用来设置属性的值
节点分很多种:常规: 标签节点 属性节点 文本节点
nodeType 1 2 3
nodeName 标签名 属性名 #text
nodeValue null 属性值 文本内容
对应的: Element Attribute Text
考虑浏览器兼容 用 || 例如:var node=node.firstChild || node.firstElementChild;
2.创建和访问节点
a:createElement(TagName) 创建一个节点
b:FatherNode.append(ChildNode) 添加子节点到父节点的末尾
c:insertBefore(A,B) 将A节点添加到B节点之前
d:cloneNode(Node) 复制指定的节点,返回新节点
3.删除和替换节点
a:removeChild(TagName) 操作删除某个父节点的指定子节点
b:replaceChild(newChild,oldChild) 替换某个父节点的指定子节点为新的子节点
4.操作节点样式
a:获取并修改 style属性 例: 获取节点 .style.color="red"; 说明:获取的是内部样式的style属性
b:获取并修改 className属性 例: 获取节点 .className="myClass";
c:获取外部样式style属性
语法:元素.currentStyle.样式属性; IE浏览器支持
语法:document.defaultView.getComputedStyle(元素,null).属性; 非IE浏览器支持
5.获取元素位置 一般是只读属性...........
参考:http://www.w3school.com.cn/jsref/dom_obj_all.asp
例子:document.offsetHeight 获取元素的高度
注意:兼容性问题,获得滚动条时:document.documentElement.scrollTop || document.body.scrollTop
6.补充知识点:
onclick事件除了直接放在 input标签内 还可以 : 事件源.onclick=function(){JS代码};
滚动条事件 window.onScroll = function(){};
四.JavaScript对象及初始面向对象
1:内置对象 例:Date String Array 类等...
2:自定义对象
方法1:var newObj=new Object(); //创建对象 newObj.name="xxx";//添加属性并赋值 newObj.method=function(){JS代码} //添加方法
方法2:var newObj={name:"",sex:"",method:function(){JS代码}}
3:构造函数:
语法:function Person(name,sex){this.name=name;this.sex=sex;this.method=function(){js代码}} 也可以不传参直接赋值
4:判断对象是否属于某个类对象
语法:dog.constructor==Dog;//狗实例的构造函数就是Dog构造函数|| dog instanceOf Dog;//true || dog instanceOf Objcet;//true
小结:new Object和字面量定义的对象都是object类型 而构造函数 的对象的源类型是function
注意: JavaScript 没有java中方法重载的概念,后面定义的同名方法,会覆盖前面的同名方法
5.原型对象
每个对象都含有一个prototype属性,prototype就是这个对象的原型对象;
用处:a:继承 b:添加属性 & 方法
☆☆☆☆☆☆:继承的应用:对象B.prototype=对象A 从而让B含有A的所有属性和方法 后续B的操作不影响A 但是A的prototype属性操作影响B
原型对象小结:相当于java的组合使用,并不等同于继承extends 就是说B instanceOf A 返回false | B.prototype instanceOf A 返回true
☆☆☆☆☆☆:创建子类对象时,想给继承于父类的属性赋值时,使用父类.call(this,属性1,属性2); //类似于java的super(属性1,属性2);
6.语法结构:
a: for in 例:for(str in person){alert ;/(str)} 拿出对象person身上所有的属性
b: with结构 例:with(person){alert(name+age+sex)} 拿出对象person身上属性对应的值
五.初始jQuery
1.jquery的引用: 就是一个js文件,直接引入js外部样式 <script src="jquery库文件" type="text/javascript"></script>
2.jquery语法结构: $(selector).action() selector:选择器 action():方法
选择器 例:$(document).ready() $(".className") $("#idName") $("div")
3.常见API方法:
a:.css("styleName","value")添加单个样式 .css({"styleName":"value","styleName":"value"...})添加多个样式
b:.html(value)更改或获取元素文本内容
c:.addClass("className")引用现有类样式
d:.show() 显示元素块
e:.hide() 隐藏元素块
4.javascript 和 jquery的互相转换:
a:js 转 jquery 格式: var $obj = $(js对象)
b:jquery 转 js对象 格式: var obj = $(js对象)[下标]5
5.jquery 中 this的运用: 一般jquery中事件操作自己时会用到 只会使用$(this) this代表的是js对象;
六.jQuery选择器
1.基本选择器
a:标签选择器:$("tagName")
b:类选择器:$(".className")
c:ID选择器:$("#idName")
d:全局选择器:$("*")
e:并集选择器:$("tagName,.className,#idName")
2.层次选择器
a:后代选择器:$("body div")
b:子选择器:$("body>div")
c:相邻元素选择器:$("div+img")
d:同辈元素选择器:$("div~img")
3.属性选择器
a:选取包含指定属性的元素:$("[attribute]")
b:选取包含指定属性是指定值的元素:$("[attribute=value]")
c:选取包含指定属性不是指定值的元素:$("[attribute!=value]")
d:选取包含指定属性以指定值结尾的元素:$("[attribute$=value]")
e:选取包含指定属性以指定值开始的元素:$("[attribute^=value]")
f:选取包含指定属性包含指定值的元素:$("[attribute*=value]")
g:复合属性选择器:$("p[name=first].className#idName") ***不包含空格的写法,要满足多个条件,如果有空格就是后代选择器了***
4.基本过滤选择器
a:选取第一个元素 : $("div:first")
b:选最最后一个元素 : $("div:last")
c:选取除去某个元素以外的元素 : $("div:not(.class)") 注意:括号里填元素
d:选取索引是偶数的所有元素 : $("div:even")
e:选取索引是基数的所有元素 : $("div:odd")
f:选取指定索引号的元素 : $("div:eq(0)")
g:选取大于指定索引号的元素 : $("div:gt(0)")
h:选取小于指定索引号的元素 : $("div:lt(0)")
i:选取所有标题元素 : $(":header") 例如:h1~h6
j:选取当前获取焦点的元素 : $(":focus")
k:选择所有动画元素 : $(":animated")
5.可见性选择器
a:选取所有可见的元素 : $(":visible")
b:选取所有隐藏的元素 : $(":hidden")
6.内容选择器
a: 选取包含指定文本内容的所有元素 : $(":contains(text)")
b: 选取所有不包含子元素和文本的元素 : $(":empty")
c: 选取包含指定元素的元素 : $(":has(selector)")
d: 匹配含有子元素或者文本的元素 : $(":parent")
7.子元素选择器
a: 选取所有后代的第几个子元素 : $("div:nth-child(index)")
b: 选取所有后代的第一个子元素 : $("div:first-child") 区别: :first 只选取第一个子元素
c: 选取所有后代的最后的子元素 : $("div:last-child") 区别: :last 只为第一个子元素匹配
d: 选取只包含一个子元素的元素 : $("ul:only-child") 如果ul中包含第二个子元素 ,那它不会被选中
8.表单选择器
a:选中所有的表单元素 $("::input")
b:选中所有的文本表单元素 $(":text")
... ... 剩下的同理.查阅API帮助文档
9.表单对象属性选择器
a:可用的表单元素 $(":enabled")
b:不可用的表单元素 $(":disabled")
c:被选中的表单元素 $(":checked")
d:匹配所有选中的option元素 : $(":selected")
阶段小结:
a:<转义字符>:
用处:字符串中,用到了某些特殊含义的字符作为字符串的一部分时
java中 : 用 例如:
xml中 : 用 & 例如:< >
html中 : 和 xml 一样
jQuery : 用 \ 例如:\#a
b:<选择器的书写规范>:
选择器的书写规范很严格,多一个和少一个空格的效果都不一样,都会影响实际的选择
---多一个空格 代表后代 少一个空格 代表并且---
七.Jquery 中的事件与动画
1.鼠标事件
a:点击事件 click()
b:鼠标移过事件 mouseOver()
c:鼠标移出事件 mouseOut()
d:鼠标移入事件 mouseEnter()
e:鼠标离开事件 mouseLeave()
2.键盘事件
a:键盘按下事件 keyDown()
b:键盘释放事件 keyUp()
c:产生可打印字符时事件 keyPress()
String.fromCharCode(event.keyCode); 获得实际按下的键盘按键
3.绑定事件和解绑事件
a:绑定事件 bind("mouseOver",function(){Jquery代码})
b:解绑事件 之前用了bind,就直接调unbind()方法 之前直接用的事件,就传参调用unbind("事件类型")
4.复合事件
a:鼠标移入移出复合函数 : hover("方法1","方法2"),方法1是移入时除法的函数,方法2是移出时触发的函数
b:带参 : toggle(fn1,fn2,fn3...) 第一次点击执行函数1,第二次点击,执行函数2,以此类推,直到方法执行完毕,从头开始重新循环
c:无参 : toggle(),显示的元素,被隐藏 ; 隐藏的元素,单击被显示 .
d:切换样式 : toggleClass("className"); 区别于addClass("className"),前者直接替换样式,后者是增加一个样式 多个样式用空格隔开
e:移除样式 : removeClass(),传参:移除指定类名,不传参,移除所有类名
5.动画
a:显示和隐藏 : show() 和 hide() 传参:时间 单位:毫秒 改变宽高和透明度的显示和隐藏
b:显示和隐藏 : fadeIn() 和 fadeOut() 传参:时间 单位:毫秒 改变透明度的显示和隐藏
c:显示和隐藏 : slideDown() 和 slideUp() 传参:时间 单位:毫秒 改变高度的显示和隐藏
6.自定义动画
元素.animate({attr:"value",attr:"value"...},time); 时间单位:毫秒 颜色改变需要下载插件
八.使用jQuery 操作 DOM
前言:jQuery操作DOM时分为三类:DOM-core(核心),HTML-DOM和CSS-DOM
1.样式操作
a:设置和获取 : 设置 css() 单个添加用, 多个添加用{: , :} 前面有提到 获取 css(name) 返回value值
b:添加和移除 : 添加 addClass("className") 移除 removeClass("className")
c:切换样式 : toggleClass("className")
d:判断是否包含样式 : hasClass("className") 返回值:布尔
2.HTML 代码操作
a:获取和更改HTML代码 : html() 无参,返回值是HTML代码 html("content") 有参,更改HTML代码
b:获取和更改标签内容 : text() 无参,返回值是text文本内容 text("content") 有参,更改text文本内容
c:获取和更改属性值 : val() 无参,获取属性值 val("value") 有参,设置value值
3.节点的操作
a:查找节点: $(selector) 各种选择器,之前已经学习过了
b:创建节点: 语法:$(html) 例:var $newNode = $("<p></p>");
c:插入节点:
c.a:父子添加:
c.a.1 加到最后Father.append(Son) 或 Son.appendTo(Father)
c.a.2 加到首位Father.prepend(Son) 或 Son.prependTo(Father)
c.b:同辈添加:
c.b.1 加到旧元素后面 old.after(new) 或 new.insertAfter(old)
c.b.2 加到旧元素之前 old.before(new) 或 new.insertBefore(old)
d:删除节点: 语法:remove() 例子:删除A元素 A.remove() 语法:empty() 例子:清空A的所有子节点 A.empty()
e:替换节点: 语法:replaceWith() 例子:用B替换A A.replaceWith(B) 语法:replaceAll() 例子:B替换所有的A B.replaceALL(A)
f:复制节点: 语法:clone() 例子:克隆A节点 A.clone(boolean) 返回一个新节点 传参:true 复制所有包括事件 false 不克隆事件
4.属性的操作:
a:获取属性值: 语法:attr("attrName") 例如:var value=attr("href")
b:设置属性值: 语法:单个attr("attrName","value"),多个attr({"attrName":"value","attrName":"value"})
c:删除属性 : 语法:removeAttr("attrName")
5.遍历子元素
a:查询子元素 : children() 无参,返回所有的子元素集合 有参,填选择器,找指定标签的子元素
b:查询后代元素 : find(selector) 找到后代中的某个或某些-指定元素
6.遍历同辈元素
a:查找弟弟 : next() 直系弟弟元素
b:查找哥哥 : prev() 直系哥哥元素
c:查找所有兄弟 : siblings() 包括哥哥们和弟弟们
7.遍历前辈元素
a:查找父亲 : parent() 父元素
b:查找祖先元素 : parents() 所有祖先元素,直到html根元素
8.其他遍历方法
a:显示迭代 : each() 方法 区别于 隐式迭代
b:end() 方法 结束链式操作改变的元素集,返回最近的上一个元素集状态,样式操作不影响
9.CSS-DOM 操作
a:设置或返回匹配元素的样式属性 : css()
b:返回匹配元素的高度属性 : height()
c:返回匹配元素的宽度属性 : width()
d:返回匹配元素的top和left坐标 : offset()
e:返回最近的已定位祖先元素 : offsetParent()
f:返回第一个匹配元素相对于父元素的位置 : position()
g:设置或返回匹配元素相对滚动条顶部的偏移 : scrollTop()
h:设置或返回匹配元素相对滚动条左侧的偏移 : scrollLeft()
九.表单校验
1.思路:通过表单选择器,表单属性过滤器提取每个表单提交的值,进行验证
2.实现:javascript通过 onSubmit()事件,判断,返回值false不提交,返回true提交,jquery通过submit()事件
3.表单验证常用的方法和事件
a:事件 onblur 失去焦点, onfocus获得焦点
b:方法 blur() 移开焦点触发方法参数 focus() 在文本域中设置焦点 触发方法参数 select()选取文本域中的内容触发方法参数
4.正则表达式:
a:定义 var reg = /^表达式格式$/;
b:匹配 reg.test(str) 返回布尔值
c:字符串的方法:match()找到正则表达式的匹配 search()检索域正则表达式匹配的值 replace()替换匹配表达式的值 split()按表达式分割
d:正则表达式的常用符号:参考帮助文档