一.js基础
- 逻辑运算符:
- && 操作:从左往右依次判断,返回第一个为false的值,否则返回最后一个值
- || 操作:从左往右依次判断,返回第一个为true的值,否则返回最后一个值
-
for in 循环
- 当遍历是数组, 遍历的变量是索引
- 当遍历是对象, 遍历的变量是属性名/方法名
for index in arr{ arr[index] } -
函数
- 函数定义与调用:
function 函数名([形参1, 形参2...]){ //逻辑代码 [return 返回值] }函数名(实参1, 实参2...) var 函数变量 = function([形象1, 形参2..]){ //逻辑代码 [return 返回值] } 函数变量(实参1, 实参2...)- 全局变量与局部变量
<script> var msg = xxx //全局 function fn(){ msg = yyy //局部 } </script> -
面向对象
- 类定义(构造函数定义)
无参构造器 function User(){ } //创建实例对象 var u = new User(); //设置属性 u.password = "xx" u.username = "xxx" u.run = function(){...} 带参数构造器 function User(username, password){ this.username= username; this.password= password; this.run= funcation(){....} } var u = new User("xx", "yyyy");- this的区别
在构造函数中this表示当前要创建对象
在函数中this表示当前调用该函数的对象
-
内置对象
- Object 类
hasOwnProperty(xxx) //判断该对象是否存在指定属性 - Date类
getFullYear() //获取年 getMonth()+1) //获取月:从0开始算起 getHours() //获取时 getMinutes() //获取分 getSeconds(); //获取秒3.Math类
var num = Math.random(); //获取随机数
4. String类
String.fromCharCode(num); //通过数字转换成字符
5. Array类a:数组定义 var a1 = new Array(size) var a2 = new Array(元素1, 元素2....) var a3 = new Array() var a4 = [元素1, 元素2.....] b:数组操作 length－获得数组的长度； concat－连接数组； join－把数组转换成字符串； pop－删除并弹出一个元素； shift－移出第一个元素； push－放入一个元素； unshift－在前面追加元素； reverse－颠倒数据中的元素顺序； slice－截取数组; sort－排序数组; splice 从数组中添加/删除/替换元素,若是删除操作,则返回被删除的元素。 forEach(function(item,index,arr){}) 循环遍历数组的元素 map(function(item,index,arr){}) 遍历数组元素,并且返回一个对应的数组 - Object 类
-
prototype
给指定的类添加属性或者方法
Array.prototype.set = function(){…} -
BOM操作
- 访问页面url
window.location.href = "指定url" //跳转到指定url连接 window.location.reload() //刷新当前页面- 定时器
a:到指定时间点执行 var timer = setTimeout(function(){ //执行定时逻辑 }, 单位是毫秒时间); b:周期执行的定时器 var timer = setInterval(function(){ //周期执行逻辑 }, 单位是毫秒时间周期) -
DOM操作
- 获取元素3中方法:
- 通过id
document.getElementById(“xxx”); - 通过元素的name属性值
document.getElementsByName(“xxx”) - 通过元素标签名
document.getElementsByTagName(“xxxx”);
- 通过id
- node属性或者方法
firstChild //获取第一个儿子节点 lastChild //获取最后一个儿子节点 childNodes //获取所有儿子节点 parentNode //获取父亲节点 previousSibling //获取上一个兄弟节点 nextSibling //获取下一个兄弟节点 hasChildNodes() //判断是否有儿子节点- 属性操作
- 自定义属性
get/setAttribute - 原生属性操作
get/setAttribute 对象.属性名 对象[属性名] - 操作属性名和默认属性值相同的属性. 如:checked,selected 值 true
- 操作class属性.–>属性名为:className
- 操作style的属性.如:background-color —>backgroundColor
- 操作readonly属性:readonly—>readOnly
- 自定义属性
- 方法操作
hasChildNodes() //判断是否有儿子节点 appendChild(node) //添加子节点 removeChild(node) //删除子节点 replaceChild(oldNode, newNode) //替换子节点 insertBefore(newNode, refNode) //指定子节点的前面插入新的子节点 - 获取元素3中方法:
-
事件处理
- 事件核心对象
事件源：被操作元素
事件名称：操作动作
事件响应函数：操作动作执行后触发逻辑
事件对象:描述这个操作过程的对象 - 事件绑定(处理)
- 元素的属性绑定方法 eg: οnclick=clickMe(this, event)
- 通过js指定事件属性 eg: 对象.οnclick= function(event){…}
- 通过方法绑定事件
eg: IE 对象.attachEvent(“on事件”, 处理函数)
W3C 对象.addEventLinstener(“事件”, 处理函数)
- 事件核心对象
-
ajax操作
- 实例化Ajax对象
var ajax = new XMLHttpRequest(); - 创建Http请求
ajax.open(“post/get”, “url”, true/false); - 监听状态改变响应处理
ajax.onreadystatechange = function(){ if (ajax.readyState == 4 && ajax.status==200) { //处理结果... } }- 发送http请求
ajax.send(); 如果是post请求 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send("参数1="+参数值+"&参数2="+参数值) - 实例化Ajax对象
-
json操作
- json格式
单个对象 {属性1:属性值1, 属性2:属性值2.....} 多个对象 [ {属性1:属性值1, 属性2:属性值2.....}, {属性1:属性值1, 属性2:属性值2.....} ]- springmvc 对json执行
- 使用json插件: jackson
注意:版本匹配: springmvc4 之后要使用 jackson 2.x - springmvc使用json插件
@ResponseBody
在方法上贴有这个标签
- 使用json插件: jackson
作用: 1: 将原先设置好视图转换器废除
2: 使用jackson插件将返回对象转换的json格式字符串返回@RestController
等价 @Controller + @ResponseBody
注意: Controller类中贴有这个表示,表示所有的方法返回值都json格式字符串
3. json最佳事件- 一般来说都给domain对象创建一个toJson方法,
通过map来挑选需要转换成json格式字符串属性 - 也可以创建一个类JsonResult(success, msg) 使用ajax请求
二.jQuery
-
常用的方法
val() / val(参数) //获取或者设置value属性值 html() / html(参数) //获取或者设置innerHTML的值 text() / text(参数 //获取或者设置innerText的值 size() //获取jquery选择器挑中对象个数 get(index) //获取jquery选择器挑中所有对象中指定索引对象 -
jquery对象转换
jQuery --> DOM
( 对 象 ) . g e t ( 0 ) / (对象).get(0) / (对象).get(0)/(对象)[0]
DOM -->jQuery
$(DOM对象) -
选择器
-
基本选择器
$("#id") //通过id选择
$(".className") //通过类样式名选择
$(“元素名”) //通过元素名选择 -
层次选择器
$("祖先 子孙") eg: $("div span") div标签下面所有子孙 span $("父亲 > 儿子 ") eg: $("form > input") form 标签下所有儿子 input $("兄 + 紧跟弟 ") eg: $("label + input") label标签下面紧跟同级兄弟input $("兄 ~ 所有弟 ") eg: $("label ~ input") label标签下面所有同级兄弟input -
过滤选择器
$(":过滤器")
基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单对象属性过滤选择器. -
注意:
- jQuery选择器挑选出来元素都是数组
- 选择器是可以结合使用 eg: $(“祖先 子孙:first”)
-
-
事件绑定
$(“选择器”).bind(“事件”, 响应函数)
$(“选择器”).事件名(响应函数) -
DOM操作
A.append(B) 将B插入A中, 做小儿子
B.appendTo(A) 将B插入A中, 做小儿子
A.prepend(B) 将B插入A中, 做大儿子
B.prependTo(A) 将B插入A中, 做大儿子
A.after(B) 将B插入A后面中, 做小弟
B.insertAfter(A) 将B插入A后面中, 做小弟
A.before(B) 将B插入A前面中, 做大哥
B.inertBefore(A) 将B插入A前面中, 做大哥
empty() 删除所有子元素, 保留自己
remove() 不会保留出本身元素以外其他的事件等
detach() 删除自己但是,会保留其他的相关事件
clone 如果参数为true,元素跟绑定事件一起克隆
repaceAll("被替换的内容")
repaceWith("替换的内容")
attr(属性名)/attr(属性名, 属性值) //获取/ 设置属性
attr(属性名, function(index, attr){....})
prop(属性名)/prop(属性名, 属性值) //获取/ 设置属性
prop(属性名, function(index, attr){....})
css(样式名称)/css(样式名称, 样式值) //获取/ 设置样式
- ajax操作
$.ajax({
type: "POST/GET",
url: "指定url路径",
data: "name=John&location=Boston",
success: function(date){
//请求成功之后处理
}
});
$.get("url", {key:value}, function(data){
//请求成功之后处理
}, "返回数据类型html/text/json/xml")
$.post("url", {key:value}, function(data){
//请求成功之后处理
}, "返回数据类型html/text/json/xml")
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
