一、类名处理
元素添加类名:
dom.className = "a,b,c"
dom.setAttribute = ("class",a,b,c)
获取类名列表
dom.classList
box.classList.remove("b");
box.classList.add("c");
二、jquery
1. jquer拖拽
$("#box p.mp").draggable({
axis:"x", // 约束在水平方向移动,y垂直方向移动
containment:'parent', //在父元素中移动
grid:[20,10], // 每次移动的长度
drag:function(event,ui) {
// 拖拽事件的回调
console.log(ui);
console.log(ui.position.left,ui.positon.top)
// 输出的是p在父元素中的位置变化
}
});
$("#box").resizable();
2. jquery事件
$("#box").click(funcion(){});
$("#box").mouseclick(function(){});
排他思想
$("button").click(function(){
// 排他
// $("button").eq($(this).html()-1).addClass("cur").siblings().removeClass("cur");
$(this).addClass("cur").siblings().removeClass("cur");
});
$("button").each(function(index,item){
$(item).html(index);
});
3. jquery插件
jquery插件有很多,所谓的插件就是依赖于jQuery库而存在的字库
4. jquery获取元素尺寸
$("#box").width(); 获取计算后的高度
getComputerStyle dom
$("#box").innerWidth(); 获取计算后元素内容加padding的宽度
$("#box").outerWidth(); 盒子真实宽度
$("#box").outerWidth(true); 盒子真实宽度加margin
5.jquery获取元素干净位置
offset()
top left right bottom
6.jquery鼠标滚轮事件
在jquery中没有鼠标滚轮事件,需要使用插件
jquery-1.12.3.min.js
7.jquery窗口方法
$(window).scrollTop(); 卷屏高度
$(window).width(); 窗口宽度
$(window).height(); 窗口高度
三、object类型
对象类型(Object)
基本数据类型:Number String Boolean Null Undefined
对象类型:Array Object RegExp Function
数据存储类型:txt json xml
1. 对象的创建方式
1) 字面量创建
var obj = {};
2) new 构造函数方式创建
var obj = new Object();
obj.name = "张三",
obj.age = 13
注:两种创建方式各有各的加值方式,不允许杂糅,各用各的,虽然没有问题,但这是不规范的
{} 是对象的组织形式,界定符
对象:一切皆对象,对象就是一个包含无序属性的集合
2. 对象键值对中键的命名方式
1) 数字 字母 下划线 以及 特殊字符
2) 如果是字母下划线开头可以不用引号
但如果是数字字母或特殊字符开头的必须加引号
eg: "@qwe", "222", "2wef", " ", " 2we#", " var", "in", "float"
3) 对象与json的区别
对象的键可以写引号(特殊情况下必须写),
写的话单引号双引号都可以,但是json的键必须是双引号
4) 构造函数实例化
使用 new Object() 方式构造函数,就是使用构造函数 Object() 来实例化对象
5) 对象的值
对象的值可以是任何数据类型:数字 字符串 正则 数组 对象 函数 null undefined ……
6) this 在不同地方的指向
函数中的this指向函数的拥有者
1) 直接使用() 调用的函数指向window
2) 函数绑定到事件处理程序,其中this指向事件源
3) 在定时器中调用的this指向window
4) 在对象的方法中使用this指向调用方法的这个对象
6) call apply bind 调用函数,this指向人工设置的对象