<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery基础/选择器</title>
<script src="jquery.min.js"></script>
<style>
.box{
width: 100px;
height: 100px;
background: pink;
}
<!-- 定义动画 -->
@keyframes 动画名称{
0%{
transform: scale(0);
}
50%{
transform:scale(1.5)；
}
100%{
transform:scale(0);
}
}
<!-- .v-enter-active{ transform-origin: left center; animation: 动画名称 动画持续时长; } -->
<!-- .v-leave-active{ transform-origin: left center; animation: 动画名称 动画持续时长 reverse; ) //reverse表示反向执行 -->
<!-- .fade-enter-active{ 如果不定义name，动画的类名就是默认的v-enter-active -->
.enter { <!-- transition重新定义了enter-active的类名为enter 那么就可以用enter代替.fade-enter-active -->
transform-origin: left center;
animation: 动画名称 动画持续时长;
}
.fade-enter-active{
transform-origin: left center;
animation: 动画名称 动画持续时长;
}
</style>
</head>
<body>
<div class="box">
</div>
<ul>
<li>大比分输给</li>
<li>那我如果不我</li>
<li>那我</li>
<li>引号6额</li>
<li>了就人工</li>
</ul>
<!-- 动画 -->
<transition name="fade" enter-active-class="enter" :duration="enter:1000, leave:5000"> <!-- 这里的自定义类名，直接把类名加进来就行，所以可以在这里使用animate.css里面的动画效果，引入animate.css,将动画对应的类名写进来就好 :duration="1000"表示自定义动画的整体持续时长为1s -->
<div v-show="show">hello</div>
<!-- 或者v-if也行 -->
</transiton>
<script>
// jQuery是将原生js里常用的一些功能进行封装
// $(function () { });是等待页面的dom元素全部加载完毕，再执行代码 是jquery的入口函数
$(function () {
$('.box').hide();
// 用原生js获取到的对象就是dom对象， 【 dom对象只能使用原生js的属性和方法】
var mydiv = document.querySelector('.box');
// document.querySelector(css selectors)返回文档中匹配的第一个元素
console.dir(mydiv);
// 用jquery方式获取到的对象就是jquery对象， 【 jquery对象只能使用jquery方法】 jquery对象是以数组形式存储的
$('.box');
console.dir($('.box'));
// dom对象和jquery对象相互转换///////////////////////////////
var myvideo = document.querySelector('video');// dom对象
$(myvideo);// dom对象转jquery对象
// jquery对象转dom对象 方法一：$('div')[index] index是索引号； 方法二：$('div').get(index) index是索引号
$('video')[0];
$('video').get[0];
// jquery设置样式： $('div').css('属性','值');
// jquery指定，筛选选择器 ：first :last :odd选择索引号为奇数的元素 :even选择索引号为偶数的元素
$('ul li:first').css('color','red');
$('ul li:eq(1)').css('color','orange');// :eq(index) 索引号从0开始
// jquery筛选方法：
$('li').parent(); //parent()查找父元素 返回的是最近一级的父元素
$('ul').children('li');//children()查找最近一级的子元素
$('ul').find('li');//find()相当于后代选择器
$('li:first').siblings('li');// siblings()查找兄弟节点，不包括自身
$('li:eq(1)').nextAll('li');// nextAll()查找当前元素之后的所有同辈元素
$('li:eq(1)').prevtAll('li');// prevtAll()查找当前元素之前的所有同辈元素
$('li:eq(2)').hasClass('box');// 检查当前元素是否又某个特定类，有就返回true
// $(this).index()得到当前索引号
// eq()去获取相应索引号所对应的元素 index()获取某元素的索引号
// 【jquery动画效果：】
//v-enter v-enter-active v-leave v-leave-active
// 显示show(['speed](slow/normal/fast)','[easing(用来指定切换效果：'默认swing先缓慢变化再快速变化再慢下来/linear每一时刻的速度都是相同的')]','[fn(回调函数，在动画完成时执行的函数，每个元素执行一次)]','time')； 显示时的速度和动画时常，如果没有任何参数就是直接显示
//隐藏hide()
// 滑动：slideDown() slideUp() slideToggle() 滑动切换，点一下下拉，再点一下上拉
// 淡入淡出效果:fadeIn() fadeOut() fadeToggle() fadeTo(speed,opacity,easing,[fn])修改元素透明度【speed和opacity必须写】
// 自定义动画：animate(params[表示想要更改的样式属性 必须写 符合属性采用驼峰命名法 属性名可以不加引号],speed,easing,[fn]);
// 【动画队列：动画一旦触发就会执行，如果短时间多次触发动画就可能出现动画排队效果】：stop()停止动画或效果。stop【必须写到动画或者效果的前面】相当于停止上一次的动画。实现不管触发多少次动画，只执行最后的s一次动画效果
// hover(over/out)事件切换 over--mouseenter out---mouseleave
// 链式编程
// $('span').eq(index).show().siblings().hide();让当前元素显示，让当前元素的兄弟元素隐藏
// 修改样式：.css({key:'value',key:'value'});属性名可以不加引号，属性值时数字也可以不加引号
// 通过操作类名来修改样式的方法比较多用 类名的样式写在css中.操作类名不影响原有的类名
// 【操作类名，可以在类名里定义一些属性和值，要不要这些属性取决于有没有类名】
// 添加类:$('').addClass('类名'); [注意类名不要加点]
// 删除类：$('').removeClass('类名');
// 切换类：如果没有该类名就给它加上，如果有就给它去除 $('').toggleClass('类名'); 即可以实现，在点击事件中，第一下加上类名，再点一下移除 可以实现动画效果
// 设置或获取元素的固有属性值：【设置属性值prop('属性',属性值) 获取属性值prop('属性')】 【元素的自定义属性用prop()获取不到 通过attr()获取】
// 数据缓存 data() 数据缓存在data()里面，不会改变dom元素 当页面刷新，数据也会被移除
// 获取文本值内容： $('div').html(); 相当于innerHTML 修改内容 $('div').html('属性值'); 获取或者修改文本内容，不包含标签text() 获取或设置表单/textarea的value值 val()
// 节流阀 互斥锁：用来保证在任何时刻都只有一个线程访问该对象
// toggleClass('类名') 如果存在该类名就删除它，如果不存在该类名就添加它
//jQuery尺寸
//width() height() 获取元素的宽高值
// innerHeight() innerWidth()获取元素的宽高值，包含padding
// outerHeight() outerWidth()包含padding border
// outerWidth(true) outerHeight(true) 包含padding border margin
// jquery位置
// offset() 设置或获取元素的相对于浏览器的偏移坐标，与父元素无关。 left top。 可以获取，也可以设置
// offset() 设置或获取元素的相对于浏览器的偏移坐标，与父元素无关。 left top。 可以获取，也可以设置
// positon() 偏移与带有定位的父元素有关 如果没有带定位的父元素 就以浏览器为准。 只能获取，不能设置
// scrollTop() 被卷去的头部 $(document).scrollTop()表示文档被卷去的头部是多少 获取或者设置文档距离浏览器顶部的距离$(document).scrollTop(100) 用处：当页面滚动到某个位置时，显示返回顶部图标
// scrollLeft() 被卷去的左侧
// 页面滚动事件 $(window).scroll(function()){} 表示当页面发生滚动时触发函数
// 点击返回顶部，页面慢慢返回顶部：$("body,html").stop().animate({scrollTop: 0}); animate一定时给函数做动画效果，不能使用$(document
});
</script>
</body>
</html>