简述: 本文主要是为了方便比较js,dom,json,jquery,easyui相关属性的操作,及其方法的使用
js对象------------>Object { name: "小猪猪", age: 18, play: play() }
dom对象:--------><input id="input" type="text" name="username">
json对象: -------->标准格式: '{"name":"小李子","age":23,"dept":{"id":1,"name":"外联部"}}';
非标准去掉' ',不推荐
jquery对象-------> 有 length属性
DOM相关
1.1 获取DOM节点的方式
<script type="text/javascript">
window.onload=function(){
//通过id 获取节点: 只能获取一个
document.getElementById("mydiv");
//通过名字获取节点: 获取多个
document.getElementsByName("input");
//通过标签名获取节点: 获取多个
document.getElementsByTagName("div");
}
</script>
1.2 操作DOM
内置属性与外置属性的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
js 对属性的操作:
内置属性: 该标签本身就存在的属性,ide工具有提示
语法格式:
设置值: dom.属性 = 值;
获取值: dom.属性;
外置属性:
语法格式:
设置值: dom.setAttribute("属性名","属性值");
获取值: dom.getAttribute("属性名")
-->
<script type="text/javascript">
window.onload = function() {
//获取元素节点
var myInput = document.getElementById("input");
//获取内置属性值
var innerValue = myInput.value;
console.debug(innerValue); //123
//设置内置属性值
myInput.value = "abc";
console.debug(myInput.value); //abc
//设置自定义属性值
myInput.setAttribute("add","自定义属性值");
//获取自定义属性值
console.debug(myInput.getAttribute("add")); //自定义属性值
}
</script>
</head>
<body>
<input type="text" name="username" id="input" value="123"/>
</body>
</html>
1.3 dom注册事件的方式
<!--注册事件方式1：直接在html代码中加on开始的事件 推荐使用：兼容性好-->
<input type="button" onclick="btn1()" value="按钮1" />
<!--获取该按钮的dom对象，给dom对象加事件-->
<input type="button" value="按钮2" id="btn2" />
js相关
2.1对象
该js对象不存在的属性可以通过----> js对象.当前不存在的属性 = value; ---->添加成功并赋值
ps:一定要赋值才会添加,jquery与之相同 jquery对象[“当前对象不存在的属性”] = value; ---->添加成功并赋值
<script type="text/javascript">
function Student(name,age){
this.name = name;
this.age = age;
this.play = function(){
console.debug("打豆豆");
}
}
console.debug("____________创建对象____________");
var student = new Student("小猪猪",18);
console.debug(student); //Object { name: "小猪猪", age: 18, play: play() }
console.debug("____________对象取值____________");
console.debug(student.age); //18
console.debug("____________对象存值____________");
console.debug(student.age=20); //20
console.debug("____________方法调用____________");
student.play(); //打豆豆
</script>
2.2 原型共享
语法格式: 类型.prototype.函数名 = 函数();
<script type="text/javascript">
/*如何 为js 进行扩展?
* 方式: 加原型 作用: 原型扩展,全局共享
* 语法格式: 类型.prototype.函数名 = 函数();
*/
Date.prototype.showTimer = function() {
return date.getFullYear()+"年 "+(date.getMonth()+1)+"月 "+date.getDate()+" 日 ";
}
</script>
2.3 数组
2.3.1 数组的创建方式
<script type="text/javascript">
/*js 数组可以看成是java 中的list集合*/
/*
js 声明数组的四种方式
var arr = new Array();
var arr = new Array[4];//创建一个数组长度为4 [undefined][undefined][undefine][undefine]
var arr = new Array("a","b");
var arr = ["小明","小李","小三"]; //推荐
var arr = []; //空数组
* */
</script>
2.3.2 数组的循环
/*js 循环方式:
* 1.普通for循环:
* for(var i=0;i<arr.length; i++){
* console.debug(arr[i]);
* }
*
* 2.使用for in 进行循环
* for(var a in arr) {
* a: 循环的索引
* arr: 数组
* }
*/
2.3.3数组的常用方法
<script type="text/javascript">
arr3 = arr1.concat(arr2); //连接多个数组
var arr3Str = arr3.join("="); //把数组抓换为字符串并且以=号形式分
console.debug(arr3.shift()); //删除并返回第一个元素
console.debug(arr3.pop()); //删除并返回最后一个元素
arr2.push(12); //添加_相当于 java中的list.add
console.debug(arr2.reverse()); //颠倒数组顺序
console.debug(arr2.toString()); //数组转换为字符串默认以 , 号形式进行分割每一个字符: 12,11,10,9,8
</script>
Json 相关
3.1 对象
*json 对象的创建:
var person = {"name":"小猪猪","age":4,"dept":{"id":1,"name":"技术部"}}
*json 对象的取值:
console.debug(person.name); //小猪猪
console.debug(pserson.dept.name);//技术部
*json 数组:
var person = [
{"name":"张三","age":4,"dept":{"id":1,"name":"技术部"}},
{"name":"李四","age":5,"dept":{"id":2,"name":"公关部"}}
];
*json数组的取值:
console.debug(person[0].name); //李四
console.debug(person[1].dept.name); //公关部
3.2 json的标准格式
*Json 标准格式字符串转Json对象
var jsonStr = '{"name":"小李子","age":23,"dept":{"id":1,"name":"外联部"}}';
console.debug(JSON.parse(jsonStr));
3.3 json字符串转json对象的方式
<script type="text/javascript" src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
/*
标准json字符串：key必须用""引起来，如果value是字符串，也必须用""引起来
JSON字符串转JSON对象：
1.eval("("+jsonStr+")"); 不管是否是标准的json字符串都能转
2.JSON.parse(jsonStr); 只能转标准的json字符串
3.$.parseJSON(jsonStr); 只能转标准的json字符串，它是基于第二种的实现
*/
//var jsonStr = {"name":"小猪猪","age":4,"color":"花色"};
var jsonStr = '{"name":"张三","age":22}'; //json格式标准写法
var jsonObj = eval("("+jsonStr+")");
console.debug(jsonObj);//Object { name: "张三", age: 22 }
jsonObj = JSON.parse(jsonStr);
console.debug(jsonObj);//Object { name: "张三", age: 22 }
jsonObj = $.parseJSON(jsonStr);
console.debug(jsonObj);//Object { name: "张三", age: 22 }
</script>
Json & js 对象的操作
总述: 除了创建对象不一致外,Json 与 js 对象属性的操作一致;
<script type="text/javascript">
/*
JS操作对象的三部曲：
1.创建对象
*var obj = new Object();
*var jsonObj={"key":value};
2.给对象属性赋值
*常规赋值: obj/jsonObj.属性=value;
*动态赋值: obj/jsonObj["属性"]=value;
3.删除对象中的属性
*常规删除：delete obj/jsonObj.属性
*动态删除: delete obj/jsonObj["属性"]
4.取值
*常规取值 obj.属性 jsonObj.属性
*动态取值 obj["属性"] jsonObj["属性"]
5.ps: 动态取值,当属性为字符串,省略"" obj[字符串属性]
*/
/**********************************obj对象*********************************************/
function Person(name,age){
this.name = name;
this.age = age;
}
//创建对象
var person = new Person();
//属性赋值
person.name="小猪猪";
person.age=18;
console.debug(person); //Object { name: "小猪猪", age: 18 }
//常规取值
var perName = person.name;
var perAge = person.age;
console.debug(perName+" "+perAge); //小猪猪 18
//动态取值
console.debug(person["name"]+" "+person["age"]); //小猪猪 18
//常规删除
delete person.name;
console.debug(person); //Object { age: 18 }
//动态删除
delete person["age"];
console.debug(person); //Object { }
/**********************************JsonObj对象*********************************************/
//创建对象
var jsonObj = {"name":"小猫咪","age":4,"color":"黑白色"};
//动态赋值
jsonObj["name"]="小花猫";
//常规取值
var jsonName = jsonObj.name;
console.debug(jsonName); //小花猫
//动态取值
var jsonAge = jsonObj["age"];
console.debug(jsonAge); //4
//常规删除
delete jsonObj.name;
console.debug(jsonObj); //Object { age: 4, color: "黑白色" }
//动态删除
delete jsonObj["age"];
console.debug(jsonObj); //Object { color: "黑白色" }
</script>
Jquery相关
4.1 事件注册方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src = "jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
/*
注册方式1 (兼容性好，但是功能不强大(不支持事件冒泡))
jquery对象.事件类型(function(){
})
注册方式2：使用on来注册 on(events,[selector],[data],fn)
jquery对象.on("事件类型",[选择器],function(){
});
注册方式3:使用bind注册事件 bind(type,[data],fn) 其中 [data] 可省略
jquery对象.bind("事件类型",function(){
})
注册方式4:使用one注册事件(绑定事件，触发一次之后，事件自动注销) one(type,[data],fn)
jquery对象.one("事件类型",function(){
});
*/
$(function(){
//方式一
$("#btn1").click(function(){
alert(1);
});
//方式二
$("#btn2").on("click",function(){
alert(2);
});
//注销事件
$("#btn2").off();
//方式三
$("#btn3").bind("click",function(){
alert(3);
});
//注销事件
$("#btn3").unbind();
//方式四:执行一次后自动注销
$("#btn4").one("click",function(){
alert(4);
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="btn1">
<input type="button" id="btn2" value="btn2">
<input type="button" id="btn3" value="btn3">
<input type="button" id="btn4" value="btn4">
</body>
</html>
4.2 jquery扩展
$.fn.属性/函数 = 值; -----> 与 js原型共享相似
4.3 attr 与 data区别
jquery的 attr 与 dom的自定义外置属性类似:
dom 属性操作
- 添加属性: myInput.setAttribute("自定义属性","自定义属性值");
- 获取属性值: myInput.getAttribute("自定义属性");
jquery属性操作:
- 添加属性: jquery对象.attr("自定义属性","自定义属性值");
- 获取属性值: jquery对象.attr("自定义属性");
- attr方式获取的值是json字符串
- data-xxx方式获取的值是对应类型:如下为js对象
<script type="text/javascript">
/*
区别：
*同: data与attr都可以获取标签中的属性
*异:
_attr获取属性的值-->打印的值是json字符串--->取值语法: jquery对象.attr("属性")
_data获取属性的前提:属性名必须是data-xxx---->将值转换为对应的类型(不能转,将以字符串形式显示)
--->取值: jquery对象.data("xxx")
*/
$(function(){
//attr方式取值
var a = $("#username").attr("data-person");
console.debug(a); //{"name":"张三","age":22}
//添加属性
$("#username").attr("my","我是新的");
console.debug($("#username"));
//data-opttion方式取值
var b = $("#username").data("person");
console.debug(b); //Object { name: "张三", age: 22 }
});
</script>
</head>
<body>
<input id="username" type="text" data-age="20" data-sex="true" data-person='{"name":"张 三","age":22}'>
</body>
Jquery & dom 对象互转
<script type="text/javascript">
dom--->jquery: $(dom);
jquery--->dom: jquery对象[0]; 或者 jquery对象.get(0);
//ps: jquery对象有length
</script>
EasyUi 相关
5.1 属性
- 原始方式: 属性名="值";
- 推荐方式: data-options="属性:值,...." ;
<div class="easyui-panel" title="原始方式" iconCls="icon-save" collapsible="true" >
easyui属性_原始
</div>
<div class="easyui-panel" data-options="title:'方式二',iconCls:'icon-save',collapsible:true">
easyui属性_二
</div>
5.2 组件的创建
jquery对象.组件名(“方法名”,[参数]);
5.3 查看组件默认属性/事件及修改’’
- 查看: $.fn.组件名.defaults
- 修改: . f n . p a n e l . d e f a u l t s . 属 性 = 值 ; p s : 不 可 放 在 入 口 函 数 中 .fn.panel.defaults.属性=值; ps:不可放在入口函数中 .fn.panel.defaults.属性=值;ps:不可放在入口函数中(function(){}),否则无法全局修改
7065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
