jQuery学习笔记1
常见的JavaScript库
jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto
jQuery基本使用
入口函数
//页面DOM加载完成在执行js方式一
$(decoument).ready(function(){
})
//页面DOM加载完成在执行js方式二
$(functon(){
})
//相当于原生DOMContentLoaded，与load不同
顶级对象
$是jQuery的别称，代码中使用哪一个都可，通常直接使用$
jQuery对象和DOM对象
-
用原生JS获取来的对象是DOM对象
-
jQuery方法获取的元素是jQuery对象
-
jQuery的本质是：利用$对DOm对象包装后产生的对象(伪数组形式存储)
-
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);//保留两位小数
