常见的JavaScript库

jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto

jQuery基本使用

入口函数

//页面DOM加载完成在执行js方式一
$(decoument).ready(function(){
    
})

//页面DOM加载完成在执行js方式二
$(functon(){
    
})

//相当于原生DOMContentLoaded，与load不同

顶级对象

$是jQuery的别称，代码中使用哪一个都可，通常直接使用$

jQuery对象和DOM对象

1. 用原生JS获取来的对象是DOM对象

2. jQuery方法获取的元素是jQuery对象

3. jQuery的本质是：利用$对DOm对象包装后产生的对象(伪数组形式存储)

4. jQuery对象只能使用jQuery方法，DOM对象只能使用原生JS属性和方法

jQuery对象和DOM对象转换

var myvideo = decoument.querySelector('video');
$('video');

//DOM对象转换为jQuery对象
$(myvideo);

//jQuery对象转换为DOM对象，加索引号(jQuery是伪数组形式存储)
$('video')[index];
$('video').get(index);//index是索引号
/

jQuery常用API

jQuery选择器

//$('选择器'):里面直接写css选择器，加引号
/*
ID选择器：$('#id')
全选择器：$('*')
类选择器$('.class')
标签选择器：$('div')
并集选择器：$('div,p,li')
交集选择器：$('li.current')
*/

隐式迭代

$('div').css('background','pink');
//将匹配元素遍历，每个元素添加css方法

jQuery筛选选择器

/*
获取第一个元素：$('li:first')
获取最后一个元素：$('li:last')
选择指定索引号元素：$('li:eq(n)')
选择索引号为奇数元素：$('li:odd')
选择索引号为偶数元素：$('li:even')
*/

/*
$("li").parent(); //查找父级
$("li").parents('.p-num'); //查找指定祖先元素
$("ul").children("li"); //相当于$("ul>li")
$("ul").find("li"); //相当于$("ul li")
$(".first").siblings("li"); //查找兄弟节点，不包括自身
$(".first").nextAll(); //查找当前元素之后所有同辈元素
$(".last").prevAll(); //查找当前元素之前所有同辈元素
$("div").hasClass("protected"); //检查当前元素是否含有某个特定的类，有返回true
$("li").eq(2); //相当于$("li:eq(2)")
*/

jQuery样式操作

修改css样式

//参数只写属性名，返回属性值
$(this).css('color');
//参数是属性名、属性值、逗号分隔，是设置一组样式，属性必须加引号，值是数字可以不加单位和引号
$(this).css('color','red');
//参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({'color':'white','font-size':'20px'});

设置类样式方法

//添加类（追加，不影响原来的类名）
$('div').addClass('current');
//删除类（同理添加）
$('div').removeClass('current');
//切换类,有该类名去掉，无则加上
$('div').toggleClass('current');

jQuery效果

显示隐藏

//显示，参数都可省略
show(speed,easing,fn);
/*
speed:预定速度字符（'slow'|'normal'|'fast'）或毫秒数值
easing:（Option）用来指定切换效果，默认是'swing'，可用参数'linear'
fn:回调函数，动画完成时执行，每个元素执行一次
*/

//隐藏
hide(speed,easing,fn);
//参数效果参考show()

//切换
toggle(speed,easing,fn);
//参数效果参考show()

//一般情况不加参数

滑动

//下拉
slideDown();
//上拉
slideUp();
//滑动切换
slideToggle();

//事件切换,鼠标经过、离开复合写法
$('.nav').hover(function(){},function(){})
//hover内只有一个函数，鼠标经过离开都触发，$('.nav').hover(function(){})

//动画停止排队，停止动画效果
stop();
//写到动画前面

淡入淡出

//淡入
fadeIn(speed,easing,fn);
//淡出
fadeOut(speed,easing,fn);
//淡入淡出切换
fadeToggle(speed,easing,fn);
//渐进
fadeTo(speed,opacity，easing,fn);
//opacity透明度（必写），值在0~1之间，speed(必写)，其余参数效果参考show()

自定义动画

animate(params,speed,easing,fn);
//params:想要更改的样式属性，以对象形式传递，(必写)。属性名可以不带引号
//其余参数参考show()

设置或获取固有属性值

//获取固有属性
prop("属性");
//设置固有属性
prop("属性","属性值");
//不能获取设置元素自定义属性

//获取自定义属性
attr("属性");
//设置自定义属性
attr("属性"，"属性值");

//数据缓存,存放到元素内存
data(key);
data(key,value);
//加引号，获取data-index H5自定义属性不用写data- 返回的是数字型

内容文本值

//获取元素内容
html();
//设置元素内容
html('内容');
//以上方法含标签等，识别标签

//获取普通元素文本内容
text();
//设置普通元素文本内容
text('内容');

//获取表单值
val();
//设置表单值
val("值");

遍历元素

each(function(index,domEle){***;});
//回调函数有两个参数：index是每个元素的索引号，demEle是每个DOM对象，非jQuery对象
//$(domEle),DOM转jQuery

//$.each(遍历对象，function(index,domEle))
$.each($("div")，function(index,domEle))
//能遍历数组或对象

创建、添加、删除元素

//创建元素
var li = $("<li>新创建的元素</li>")；

//内部添加
$("ul").append(li); //添加到内容最后面
$("ul").prepend(li); //添加到内容最后面

//外部添加
$(".test").after(li); //放在目标元素后
$(".test").before(li); //放在目标元素后

//删除元素
$("ul").remove(); //删除匹配的元素
$("ul").empty(); //删除匹配元素里的子节点
$("ul").html(""); //删除匹配元素里的子节点

尺寸、位置操作

//取得尺寸,括号内填值设置尺寸
width();|height();//获得匹配元素宽高,只有宽高
innerWidth();|innerHeight();//取得匹配元素宽高，包含padding
outerWidth();|outerWidth();//取得匹配元素宽高，包含padding、border
outerWidth(ture);|outerHeight(ture);//取得匹配元素宽高，包含padding、border、margin

//位置
offset(); //相对文档偏移量，括号内添加对象设置位置
offset().top; //相对文档上方偏移量

position(); //相对带有定位的父级的偏移量，只能获取不能设置；无带定位父级，以文档为准

scrollTop(); //被卷去的头部，可设置
scrollLeft(); //被卷去的左侧，可设置

一些常用方法

//截取字符串
substr(从第几位开始截,截几位)；

//计算结果保留几位小数
toFixed(2);//保留两位小数