爱站程序员基地jQuery
jQuery是一个JavaScript库，里面是大量的函数方法，可以帮助我们进行快速的操作DOM
优点
轻量级，文件才几十kb，不会影响
基本兼容主流浏览器
有插件
免费，开源
使用jQuery需要引入下边的文件
<script src=\"js/jQuery.min.js\"></script>
jQuery的入口函数
<div style=\"width: 100px; height: 100px; background-color:pink;\"></div><script>// $是jQuery的别称// 两个等效// $同时也是jQuery的顶级对象,相当于JavaScript的window// 把元素用$包装成jQuery对象，就可以调用jQuery的方法// $(function() {// })jQuery(function() {jQuery(\'div\').hide();})
JavaScript对象与DOM对象互相转换
var div = document.querySelector(‘div’); //是DOM对象
$(‘div’)//是jQuery对象
<script>// DOM对象转换成jQuery对象$(\'div\')// jQuery对象转换成DOM对象$(\'div\')[index] //index是索引号$(\'div\').get(index)</script>
jQuery基础选择器
$(“选择器”)
里面直接写css选择器就行
$(\"#id\") //ID选择器$(\"*\") //全选选择器$(\".class\") //类选择器$(\"div\") //标签选择器$(\"div,p,li\") //并集选择器$(\"li.current\") //交集选择器
jQuery层级选择器
$(“ul>li”) //子代选择器
$(“ul li”) //后代选择器
隐式迭代
遍历内部DOM元素的过程叫隐式迭代
就是不需要进行循环了
jQuery筛选选择器
$(\"li:first\") //获取第一个元素$(\"li:last\") //获取最后一个元素$(\"li:eq(2)\") //获取索引为2的元素$(\"li:odd\") //获得索引为奇数的元素$(\"li:even\") //获得索引为偶数的元素
jQuery筛选方法
<script>$(function() {//查找父级console.log($(\'div\').parent());// 相当于子代选择器console.log($(\'ul\').children(\'li\'));// 相当于后代选择器console.log($(\'ul\').find(\'li\'));// 查找兄弟节点console.log($(\'ul\').siblings(\'li\'));// 查找当前元素之后的同辈元素console.log($(\'li\').nextAll());// 查找当前元素之前的同辈元素console.log($(\'li\').prevAll());// 检查当前元素是否有某个类console.log($(\'div\').hasClass(\'color\'));// 相当于$(\"li:eq(2)\")console.log($(\'li\').eq(2));})</script>
操作css方法
参数只写属性名，返回的是属性值
$(this).css*(“color”);
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不加引号
$(this).css(“color”,“red”);
参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不加引号
$(this).css({“color”:“white”,“font-size”:“20px”});
设置类样式方法
<script>//添加类$(\"div\").addClass(\"current\");//移除类$(\"div\").removeClass(\"current\");//切换类$(\"div\").toggleClass(\"current\");</script>
显示隐藏效果
显示
show(speed,easing,fn)
隐藏
hide(speed,easing,fn)
切换
toggle(speed,easing,fn)
滑动
slideDown(speed,easing,fn)
slideUp(speed,easing,fn)
slideToggle(speed,easing,fn)
每个参数都可以省略，无动画直接演示
speed：可选slow normal fast 或者毫秒数值1000
easing：用来指定切换效果，默认是swing 可用linear
fn：回调函数，在执行完动画后执行
事件切换
hover(over,out)
over鼠标移到元素上触发的函数相当于mousenter
out鼠标移出元素触发的函数相当于mouseleave
<script>$(\"ul>li\").hover(function() {$(this).children(\"ul\").slideDown(200);}, function() {$(this).children(\"ul\").slideUp(200);})// 和上边的等效$(\"ul>li\").hover(function() {$(this).children(\"ul\").slideToggle(200)});</script>
动画排队
动画一旦触发就会执行，如果多次触发，就会造成多个动画效果排队执行
停止排队
stop()
用于停止动画效果
写到动画或效果的前面，相当于停止结束上一次动画
$(\"ul>li\").hover(function() {$(this).children(\"ul\").stop().slideToggle(200);});
淡入淡出效果
fadeTo(speed,opacity,easig,fn)
fadeIn(speed,opacity,easig,fn)
fadeInfadeOut(speed,opacity,easig,fn)
fadeToggle(speed,opacity,easig,fn)
speed：可选slow normal fast 或者毫秒数值1000
easing：用来指定切换效果，默认是swing 可用linear
fn：回调函数，在执行完动画后执行
opacity:指的是透明度，取值0-1
<div style=\"width: 100px; height: 100px; background-color:pink;\"></div><button>dianji</button><button>dianji</button><button>dianji</button><button>dianji</button><script>$(function() {$(\"button\").eq(0).click(function() {$(\"div\").fadeIn(1000);})$(\"button\").eq(1).click(function() {$(\"div\").fadeOu(1000);})$(\"button\").eq(2).click(function() {$(\"div\").fadeToggle(1000);})$(\"button\").eq(3).click(function() {$(\"div\").fadeTo(1000, 0.5);})})</script>
自定义动画
animate(params,opacity,easig,fn)
params是想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性需要采用驼峰命名法
speed：可选slow normal fast 或者毫秒数值1000
easing：用来指定切换效果，默认是swing 可用linear
fn：回调函数，在执行完动画后执行
<button>dianji</button><div style=\"width: 100px; height: 100px; background-color:pink; position: absolute;\"></div><script>$(function() {$(\'button\').click(function() {$(\"div\").animate({left: 500,top: 200,opacity: .3,width: 400}, 500);})})</script>
设置或获取元素自定义属性值attr()
获取属性
attr(“属性”) //类似于getAttribute()
设置属性语法
attr(“属性”,“属性值”) //类似于setAttribute()
<script>$(\"div\").attr(\"index\", 4);console.log($(\"div\").attr(\"index\"));</script>
数据缓存
data()方法可以在指定的元素上存储数据，不会修改DOM元素结构，刷新后数据移除
附加数据
data(“name”,“value”)
获取数据
data(“name”)
与attr()语法类似
遍历元素
jQuery的隐式迭代是对同一类元素做了同样的操作，如果想给同一类元素做不同的操作，需要遍历
<div style=\"width: 100px; height: 100px;\">1</div><div style=\"width: 100px; height: 100px;\">2</div><div style=\"width: 100px; height: 100px;\">3</div><script>$(function() {var arr = [\"red\", \"green\", \"blue\"];$(\"div\").each(function(i, domEle) {console.log(i);console.log(domEle);// 因为不是jQuery对象，所以要转换$(domEle).css(\"backgroundColor\", arr[i])})})</script>
$.each()可以用来遍历对象
index是每个元素的索引号，element遍历内容
<script>$.each({name: \"yy\",age: 20}, function(i, ele) {console.log(i);console.log(ele);})</script>
删除元素
删除匹配的元素（本身）
element.remove()
删除匹配元素集合中所有的子节点
element.empty()
清除匹配的元素内容
element.html(\”\”)
<ul><li>1</li></ul><div style=\"width: 100px; height: 100px; background-color: pink;\">1</div><script>var li = $(\"<li>xinde</li>\"); //创建元素$(\'ul\').append(li); //放在后边// $(\"ul\").prepend(li); //放在前边var div = $(\"<div>xinde</div>\")$(\"div\").after(div);// $(\"ul\").remove(); //删除ul自己// $(\"ul\").empty(); //删除ul的子节点$(\"ul\").html(\"\"); //删除ul的子节点</script>
