爱站程序员基地1.JavaScript基础
1.javaScript:一种基于对象和事件驱动的，具有安全性能的脚本语言
2.作用:减轻服务器压力 ，为页面提供更加良好的动态效果
3.javaScript的组成: ECMAScript :脚本语言的标准
DOM:文档对象模型
BOM:浏览器对象模型
4.javaScript的执行原理
浏览器发送请求 ——服务器响应返回含有javaScript的页面—— 浏览器解析HTML和JavaScript并显示效果
5.引入javaScript的三种方式
行内 通过事件 onXXX=“javascript:js代码” 添加
内部 直接写在页面内的 内
外部 将js代码写在新建的XXX.js文件中 在页面内通过script标签 的src属性引入
6.变量的声明方式
var 变量名 =值; 或 var 变量名； 变量名=值;
这里的var可以省略 但是不推荐
变量命名规范:数字 字母 _ $ 组成 其中 数字不能作为开头
javaScript区分大小写
7.数据类型
undefined :未定义类型 只定义 未赋值 如 var width;
null:空值 值与undefiend相同 但 类型不同 为object
number:数值型 可以存放整数与浮点数 特殊值：NaN 表示非数字
string:字符串 可以使用单引号或双引号
boolean: 布尔 true false
object:对象类型
typeof(变量)：检测变量的数据类型
8.字符串的常用方法
length:长度
toLowerCase() 与toUpperCase() 转换成 小写与大写
charAt(下标) 查找指定下标的字符
indexof(字符) 查找指定字符首次出现的下标 lastIndexof（） 查找最后一次出现的下标 找不到返回-1
substring(开始位置,结束位置) 截取指定下标的字符串 有头无尾
toString() 将其他类型的数据转换成字符串
9 数组
定义数组 var 数组名=new Array(长度)
var 数组名=new Array(数据1，数据2,…)
var 数组名=[数据1，数据2,…]
length 长度
数组名.join(“连接符”) ：用连接符将数组数据连接成一个字符串
字符串.split(“分隔符”) : 使用分隔符将字符串拆分成数组
数组名.sort() 对数组进行排序
数组名.push(新元素) 在数组末尾添加新元素 并返回新的数组长度
10.运算符
+的时候注意不同的数据类型可能导致拼接 有时需要类型转换
比较值是否相同 如 1“1”的结果为true
=为恒等于 比较值与类型是否都相同 如 1=\”1\”的结果为false
11.控制结构
简写的for(var i in 数组或集合) {} 注意 i是数组的元素下标 访问元素需要写成 数组名[i]
break 跳出当前循环 continue 结束本次循环 执行下次循环 通常结合if语句做拦截代码
//单行注释 /* 多行注释*/
12 .常用的输入输出
警告框 alert(字符串) 只有 一个参数 有一个确定按钮 无返回值 可以暂停代码查看某些变量
提示框：prompt（提示信息，默认的值） 有确认取消按钮 点击确认 返回数值或字符串 点击取消返回null
当省略第二个参数 在文本框会出现undefined
13.函数 类似于Java中的方法 分为系统函数与自定义函数
系统函数： parseInt(字符串) 将字符串转换为整数 从前往后找到数字就能转 不是数字就返回NaN
parseFloat(字符串) 将字符串转换为浮点数 其他同上
isNaN(数据) 判断数据是否为非数字 或不是数字
自定义函数: function 函数名(参数){
代码
return 返回值 //根据自己需求随意加
}
注意 参数前不能加var
调用方法一般结合事件触发 事件=“函数名()”
匿名函数: var 变量名=function(){ 代码} 调用方式 变量名(); 不推荐使用
14变量的作用域
全局变量:不在函数内定义的变量 整个页面都可以使用
局部变量：在函数内定义的变量 只有当前函数可以使用
当重名时 遵循就近原则
15常用的事件：
onload :页面加载 onclick :单击 onchange :改变值事件 onmouseover:鼠标移入 onkeydown:键盘按下
2.JavaScript操作DOM对象
1.BOM:浏览器对象模型 提供了独立于内容 可以与浏览器进行互动的对象结构
结构： window :窗口对象
history： 历史对象 location：地址对象 document:文档对象
2.window
属性: history 用户访问过的URL
location 当前的URL
window.属性名=“属性值“
常用方法: alert() 警告框 prompt() 提示框 confirm() 确认框
open() 打开窗口 close()关闭窗口
setTimeout() 定时函数 setInterval() 周期定时函数
-
confirm 确认框 一个参数 返回 true或false 有确认 取消按钮 在需要确认问题时使用
4.open(弹出窗口的路径,目标窗口名称,窗口特征) 打开新窗口
目标窗口名称:_self _blank 目标位置的名字
窗口特征:width 宽 height 高 fullscreen 是否全屏 … 赋值时 yes|no 或 1|0
close() : 关闭当前窗口
5.history 历史对象
forward() 前进到下一个地址 等价于 go(1)
back() 返回上一个地址 等价于go(-1)
go(n) 跳转到第n个地址 -
location 地址对象
属性 host端口号 hostname 主机名 href 可以设置地址 常用 location.href=‘地址’
方法 reload() 刷新 replace（‘新地址’） 用新文档替换当前文档
7.document 文档对象
属性 referrer 来源地址 url 当前地址
方法 getElementById() 通过id查找元素对象 只返回一个元素对象
getElementsByName() 通过name查找元素对象 返回元素对象的集合 通过[下标]访问
getElementsByTagName() 通过标签名查找元素对象 返回元素对象集合 通过[下标]访问
对具有value属性的元素 可以通过value来设置/获取 value值
innerHtml 设置/获取 一对标签中间的html代码 包含标签 与文字
innerText 设置/获取 一对标签中的文本 只包含文字
write() 向文档写文本 HTML代码 或javaScript代码
8.javaScript常用的内置对象
Array 数组 String 字符串 Date 日期 Math 数学计算
9.Date 日期对象
var 变量=new Date() ——当前日期
var 变量=new Date(参数)——指定日期 参数为给定日期的格式
getDate() 一个月中的某一天 1~31
getDay() 周几 注意：周日用0表示
getHours() 小时 getMinutes（） 分钟 getSeconds()秒
0~23 0~59 0~59
getMonth() ——月份 特别注意 由于取值范围为0~11 所以获得月份时要+1！！！
getFullYear()-年份 4位
getTime() 1970年至今的毫秒数
10.Math对象
ceil() 向上取整 如 ceil(1.1)得到2
floor()向下取整 如 floor(1.9)得到1
round()四舍五入 如 round(1.4)为1 round(1.5)为2
random() 产生0-1之间的随机数 不包含0和1
11.定时函数
setTimeout(‘调用的函数’,等待的毫秒数) 在指定毫秒后调用一次函数
setInterval(‘调用的函数’,等待的毫秒数) 每隔指定毫秒后调用一次函数
清除定时函数
var 对象=setTimeout(…) clearTimeout(对象)
清除间隔定时函数
var 对象setInterval(…) clearInterval(对象)3.JavaScript操作DOM对象
1.DOM-文档对象模型
分类 : DOM-core :核心 HTML-DOM :处理HTML CSS-DOM:处理样式
2.节点之间的关系
文本
A节点为B ，C 的父节点 B,C为A的子节点
B和C 为兄弟（同辈）节点 B里的 ‘文本’ 成为文本节点 C内的属性成为属性节点
3.根据层次关系访问节点 要用到节点属性
parentNode 返回一个父节点
childNodes 返回子节点的集合 []
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个兄弟节点 previousSibling 上一个兄弟节点
由于以上属性会将空格当成文本节点而影响我们访问节点 我们需要用到element属性
firstElementChild lastElementChild nextElementSibling previousElementSibling
element属性会忽略空格 与文本 只能找标签元素
考虑浏览器兼容问题时常采用 如 firstElementChild.XXX|| firstChild.XXX这种写法
附：children属性可以代替childNodes 也不会考虑文本
4.节点信息
nodeName 节点名称 元素为标签名 属性为属性名 文本为#text 文档为#document
nodeValue节点值 元素节点和文档节点不可用 文本为其文本值 属性为其属性值
nodeType节点类型 元素 1 属性2 文本3 注释 8 文档9
5.操作节点
操作节点属性: setAttribute(“属性”,“属性值”) /getAttribute(“属性名”) 设置/获取节点的属性值
注意 获取属性时 找不到返回null
创建节点: document.createElement(标签名)
追加节点: 父节点.appendChild(子节点) 将子节点追加到父节点的末尾
插入节点: 父节点.insertBefore(A,B) 将A插入到B之前
克隆节点: 节点.cloneNode(true/false) true克隆节点本身，属性，内容
false只克隆本身 属性
删除节点: 父节点.removeChild(子节点) 通过父节点删除
remove() 直接删除本节点
替换节点: 父节点.replaceChild(A,B) 用A替换B
6.操作元素属性
display ： none 隐藏 block 显示;
style属性 通过style可以找到常用的css属性 如fontSize 这里的属性会将 ‘-’ 去除
className属性: 可以先用class做好样式 然后通过className进行添加 推荐
获取样式属性时：节点.style.属性 只能获取行内样式
节点.currentStyle.属性 只能在IE浏览器使用
document.defaultView.getComputedStyle(节点,null).属性 在除IE以外浏览器使用
7.HTML元素属性
scrollTop 滚动条的垂直位置
scrollLeft 滚动条的水平位置
获取滚动距离: document.documentElement.属性 或 document.body.属性
标准浏览器 谷歌浏览器4.初识jQuery
1.jQuery是javaScript的程序库之一
jQuery能做的 javaScript都能做 但是jQuery效率高
反过来 javaScript能做的 jQuery不一定能做
优势： 1.体积小 2.强大的选择器 3.出色的DOM封装 4.可靠的事件处理机制
5.出色的浏览器兼容性 6.隐式迭代 7.丰富的插件支持
2.使用Jquery 必须要进行导入操作 -
$(document).ready(function(){ }) 当页面的DOM文档绘制完毕后即刻执行，同一个页面可以写多个
可简写为 $(function(){ })
window.onload 必须页面所有内容加载完毕才执行 只能写一个 无简写
4.Jquery的 语法结构
$(selector).action();
$() 工厂函数 selector ：选择器 action():绑定的方法
5.JQuery 操作页面元素
addClass(“类名”) 为元素添加class 类样式 click()单击方法 mouseover()鼠标移入 mouseout()鼠标移开
css(“属性”,“属性值”) 为元素添加一个样式
css({“属性1”:“属性值1” , “属性2”:“属性值2”,…}) 同时添加多个样式
show()显示元素 hide()隐藏元素
6 代码风格
等同于JQuery如等同于JQuery 如等同于JQuery如(document)等同于 JQuery(document)
链式操作：可以减少重复代码 通过.多次对同一对象或其余对象进行操作
常结合以下方法使用: next() 下一个兄弟 prev()上一个兄弟 siblings()所有兄弟 chlidren()子元素
隐式迭代:可以减少不必要的循环 内部自动遍历所有元素
-
JQuery对象就是通过包装DOM对象后产生的 ，只有JQuery对象才能使用JQuery的方法
DOM对象转换为JQuery对象 var 变量名=变量名=变量名=(DOM对象) 就可以使用JQuery的方法
JQuery转换为DOM对象 var 变量名=$对象[0] 或者 $对象.get(0)5. jQuery选择器
1.选择器的分类
css选择元素时： 基本选择器 层次选择器 属性选择器
条件过滤选取元素: 基本过滤选择器 可见性过滤选择器
2.基本选择器
标签 选择器——标签名 类选择器—— .类名 id选择器——#id名
并集选择器——选择器1，选择器2… 全局选择器 —— * 表示 所有元素
3.层次选择器
后代选择器: A B A元素里的所有B元素 B为A的后代 空格后代
子选择器 ： A>B A元素里的子级B元素 B为A的子元素 >子
相邻选择器 ： A+B 与A紧邻的下一个B元素 类似于next() +紧邻
同辈选择器： A ~B A元素之后的所有B同辈元素 ~兄弟
4.属性选择器 注意 一定有[]
[属性名] 选取带有指定属性的元素 如 [href] 含有href属性的元素
[属性=属性值] 选取指定属性值的元素 如[href =’#’] href为#的元素
[属性 !=属性值] 选取不不等于某个属性值的元素
[属性^=属性值] 选取以特定值为开头的元素 如[href^=‘en’] href以en为开头的元素
[属性=属性值]选取以特定值结尾的元素如[href=属性值] 选取以特定值结尾的元素 如[href=属性值]选取以特定值结尾的元素如[href=’.jpg’] href以.jpg为结尾的元素
[属性*=属性值] 选取包含某特定值的元素 如$[href*=txt] href包含txt 的元素
5.基本过滤选择器 注意一定有 : 选取元素时从下标0开始数
:header 选取所有标题元素 如 :header 获得h1~h6
:first 选取第一个元素 如 li:first 第一个li
:last 选取最后一个元素 如 li:last 最后一个li
:even 选取下标为偶数的元素 :odd 选取下标为奇数的元素
:gt(下标) 选取大于给定下标的元素 如 li:gt(1) 下标为1的之后的li元素 不包含1
:lt(下标) 选取小于给定下标的元素 如 li:lt(1) 下标为1的之前的li元素 不包含1
:not(选择器) 选取除给定选择器匹配的其他元素 如$(“li:not(.three)”) 选取class不是three的li元素
:focus 选取获取焦点的元素
:animated 选取所有的动画元素
:eq(下标) 选取等于给定下标的元素 如li:eq(0) 下标为0的li元素
6.可见性过滤选择器 有 :
:visible 选取所有可见的元素
:hidden 选取所有隐藏的元素
推荐 find(选择器) 查找某元素的指定后代元素 如 父节点.find(“p”) 为查找父元素中的所有后代p
7.代码规范
当遇到一些带有特殊符号的id或class的名字时 可以采用 \\对特殊字符进行转义
如 id=‘a#a’ 获取时应写成 #a\\#a
6.jQuery中的事件与动画
1.JQuery中的事件
基础事件：鼠标 键盘 window 表单
复合事件:鼠标悬停 鼠标连续点击
2.鼠标事件
click() 单击 mouseover() 鼠标移过 mouseout()鼠标移出 移入或移出子元素时也会触发事件
mouseenter() 鼠标进入 mouseleave()鼠标离开 移入或移出子元素时不会触发事件
3.键盘事件
keydown() 键盘按下 keyup() 键盘释放 keypress() 产生可打印字符时触发
4.浏览器事件
resize() 调整浏览器窗口尺寸时触发
上机1： index() 查找某对象在相同的一组元素中的下标位置 如 $(‘li’).index(this) 查找当前所选中li的 下标
5. 绑定事件
绑定单个事件 bind(“事件名”,function(){} )
绑定多个事件 bind({ 事件1:function(){} , 事件2:function(){},… })
在绑定事件时 可以将事件的函数赋给变量 如 bind(“click”,aa=function(){ } ) 以方便以后解绑
解除绑定 unbind(“事件名”,事件的变量) 如unbind(“click”,aa) //解除单个事件
unbind() 解除所有事件
扩展: 绑定事件的其他方式 由于bind无法实现动态绑定 可以用其他方式替换
live() 动态绑定 比较老不推荐
on() 支持动态绑定 推荐 解绑时可以用off()
one()只能绑定一次性的事件 即只能生效一次
6. 复合事件
hover() 相当于鼠标的移入和移出事件的组合 用法 hover(fun1,fun2)
注意: 这里的移入移出是指 mouseenter 和mouseleave
toggle() 鼠标连续单击事件不带参数 : toggle() 会使元素在显示与隐藏之间自动切换带参数: toggle(fn1,fn2,fn3,....) 每次单击元素时 会自动按顺序调用给定的fn函数 到末尾从头开始toggleClass(\"类名\") 可以对元素的类样式进行切换
7.JQuery的动画
a. 控制元素的显示与隐藏
show(时间,fn) hide(时间,fn)
时间以毫秒为单位 默认为0 也可以自定义 fast slow normal 来设置动画的快 慢 正常
fn为执行完事件后才执行的函数
b.改变元素透明度
fadeIn(时间,fn) 淡入 fadeOut(时间,fn) 淡出
c.改变元素高度
slideUp(时间,fn)缩短 slideDown(时间,fn)拉伸
注意：fast 0.2秒 normal 0.4秒 slow 0.6秒 写的时候注意加双引号 如\”fast\”
d.自定义动画
animate({param},时间,fn)
param为我们定义的css属性
7.使用jQuery操作DOM
1.DOM操作分类:
DOM Core HTML-DOM CSS-DOM
2.Jquery可以对DOM进行的操作
样式操作 ， 内容及value值 ，节点操作，节点属性操作 ，节点遍历,css-DOM操作
3.样式操作
css(“属性”,“属性值”) 设置单个样式 css({“属性1”:“属性值1”,“属性2”:“属性值2”,…})设置多个样式
css(“属性”) 获取样式的值
addClass(“类名”)追加一个或多个类样式 removeClass(“类名”)移除类样式
toggleClass(“类名”) 切换类样式 hasClass(“类名”) 判断元素是否具有某类样式 返回 true/false
4.内容及value值
html(内容)/html() 设置/获取 元素内部的HTML内容(带标签)与文字
text(内容)/text() 设置/获取 元素内部的文字(标签也会被转换成文字)
val(值)/val() 设置或获取 表单元素的value值 focus()获得焦点 blur()失去焦点
5.节点操作
工厂函数 $()的用法 $(选择器) ——查找节点 $(DOM对象)——转换为JQuery对象 $(html)——创建节点
创建节点 $(html)
插入节点
内部插入:
$(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之前
删除节点
remove() 删除节点 detach() 删除节点并保留节点绑定的事件和数据 empty() 清空节点内容
替换节点
$(A).replaceWith(B) 使用B替换A B.replaceAll(A) B替换A
复制节点
clone(true/false) true:会复制元素的事件 false:不会复制事件
6.属性操作
attr(“属性名”) 获取属性值 attr(“属性名”,“属性值”) 设置单个属性 attr({“属性”:“属性值”,…}) 设置多个属性
removeAttr(“属性名”) 删除属性
7.节点遍历
children() 获取某节点的所有子元素 children(选择器) 可以指定要找的子元素
next() 下一个相邻元素 prev()上一个相邻元素 siblings()所有同辈(兄弟)元素
parent()查找父元素 parents() 查找所有祖先元素
注意 以上方法均可以在（）内添加选择器来指定要查找的特定元素
each(function(i,ele){}) 遍历元素 可以替代循环 i为下标 ele为当前的元素(使用时可以写成$(ele)) 均为可选参数
end( ) 结束当前的链式操作 并将元素还原为之前的(上一个)状态 比如 $(“ul”).children(“li”).end() 此时选中的仍然是ul
8.CSS-DOM
css()设置样式 height()设置高度 width()设置宽度 offset() 设置top与left的坐标 scrollLeft()/scrollTop() 设置或返回水平/垂直方向的偏移量
8.表单验证
1.为什么使用表单验证
减轻服务器的压力 保证输入的数据符合要求
2.表单验证的步骤
a.获取表单元素的值 一般为String类型 使用val()
b.使用javaScript的一些方法对数据进行判断
c.在表单提交之前 调用submit()方法对提交的信息进行验证 此处触发了onsubmit事件
3.表单选择器 -专门查找表单元素的选择器
:input :text 文本框 :password 密码框 :radio 单选按钮 :checkbox复选框 :submit 提交按钮
:reset 重置按钮 :button 普通按钮 :file 文件域 :image 图像域 :hidden 隐藏元素
表单属性过滤器-查找特殊的表单元素
:enabled 所有可用元素 :disabled 所有不可用元素
:checked 被选中的元素 :selected 被选中的option选项
4.常用的验证表单元素的方法
val() indexof(字符) 在字符串中查找给定的字符 返回找到的下标 找不到返回-1
length 长度 substring(a,b) 截取从下标a开始的字符串到b结束 不包含b
isNaN() 判断是否为非数字 数字为false
重要 ： submit() 表单提交时调用的方法 需要根据我们提供的返回值true/false 决定是否提交表单信息
5.表单校验提示特效的相关方法、
focus() 获取焦点 blur()失去焦点 select() 突出显示输入区域的内容
6.正则表达式
定义 普通方式 var reg=/表达式/附加参数 附加参数一般为 m i g 也可以不给
构造函数 var reg=new RegExp(“表达式”,“附加参数”)
模式 简单模式 由普通字符组合来的表达式 只能匹配具体的参数 如/cat/ 表示包含cat
复合模式 由通配符组成的表达式 可以匹配更加抽象的规则模式 /^\\w+$/ 相当于1次以上的[A-Za-z0-9]
常用方法 test() 检测数据是否符合正则表达式 返回true/false
exec() 检测字符串中指定的值 找到返回该值 找不到返回null
附加参数 i 不区分大小写匹配 m 进行多行模式匹配 g 进行全局匹配 重点
String对象的常用方法
match(reg) 检测匹配的值 返回该值 找不到返回null
search(reg) 查找下标 找不到返回-1 replace(reg,字符)检测正则并替换为指定值 split(‘字符’) 拆分
正则表达式中的常用符号 重点
/…/ 模式的开始和结束 ^以…开始 $ 以…结束 复合模式起手-/^…$/
\\s 空白字符 \\S 非空白字符 \\d 数字 相当于[0-9] \\D 非数字
\\w 数字字母_ 相当于[A-Za-z0-9_] \\W 非 数字 字母 _ . 换行符之外的任意字符
正则表达式中的重复符号 重点
{n} 匹配前一项n次 {n,}匹配前一项至少n次 {n,m} 匹配前一项n到m次 包括n和m
*相当于{0,} 匹配0次或多次 +相当于{1,} 匹配1次或多次 ? 相当于{0,1} 匹配0次到1次
绑定事件时 jquery是用方法绑定的 如 blur() focus() 在调用方法时触发相应的事件
DOM 是用事件绑定的 如 οnblur=\”\” οnfοcus=\”\” 重点
邮箱的正则: \\w+@\\w+(.[a-zA-Z]{2,3}){1,2} 会默写 重点
7.html5 的新特性
placeholder : 当输入域为空时自动提供提示信息 输入内容时消失
required : 输入域必填
pattern：在输入域设置正则 自动进行匹配
validity属性可以帮我们找到validityState对象 使用其内部的属性完善错误提示信息 属性有8个
valueMissing :输入内容为空时 返回true 表示出错 以下同理
typeMismatch:输入值与type类型不匹配 返回true
patternMismacth:输入值与给定的正则不匹配 返回true
tooLong:输入的内容超过输入域限定的长度 返回true
customerError: 使用其setCustomerValidity()方法自定义错误信息
到这儿jQuery的基础就掌握不少了吧！
