jQuery（一）
一、jQuery介绍
1、js库
了解决一些通用的功能需求，把相关的方法封装在一个 js 文件中，我们称为 js 库
例如：fastClick；flexiable.js; zy.media.js; swiper.js…
2、js 框架
框架和库没有太明显的区别，只是框架的封装的功能更全更大
3、认识 jQuery
封装了一系列操作原生 dom 元素的功能库，比如获取元素，给元素做动画等
document.querySelector(‘div’) [不兼容] $(‘div’)
4、jQuery 的好处
(2) 跨浏览器兼容
(3) 链式编程和隐式迭代，大大提升了开发效率
(4) 对事件、样式、动画的支持，大大简化了 DOM 操作
(6) 免费、开源
二、jQuery入口
1、下载jQuery
[国内CDN] https://www.bootcdn.cn/
[国外] https://jquery.com/download/
2、jQuery 中的页面加载完成事件
好处： 1、 操作元素的JS可以写在页面的任意位置
2、 提供了作用域， 入口函数中写的变量不会冲突
// $(document).ready(function() {
// $('div').hide();
// })
$(function() {
$('div').hide()
console.log($);
});
3、jQuery顶级对象
4.DOM对象和jQuery对象
4.1 区别
$('div').hide();
//div.hide()//直接报错
div.style.display = 'none'
4.2 把单个 jq 对象转成原生的 DOM 对象:
jq对象[0] 或 jq对象.get(0)
console.log($('li')[0]);
console.log($('li')[2]);
console.log($('li').get(1));
4.3 把原生的 DOM 对象转成 jq 对象:
$(dom对象)
var div = document.querySelector('div');
console.log($(div).hide()); //这里的div是变量，不用加引号
二、jQuery选择器
1、获取元素 $(‘选择器’)
$(function() {
// 1. 根据类名来获取元素
console.log($('.Box'));
// 2. 根据 id 来获取元素
console.log($('#foo'));
// 3. 根据标签名来获取元素
console.log($('ul'));
// 4. 根据子代选择器获取元素
console.log($('ul>li'));
// 5. 根据后代选择器获取元素
console.log($('ul .current'));
// 6. 属性选择器 [属性=属性名]
console.log($('[name=uname]'));
})
2、隐式迭代
3、jQuery筛选选择器
**注意：**是放在 $(‘jq选择器’) 里进行使用
// 1. 获取第一个子元素
console.log($('span:first'));
// 2. 获取最后一个子元素
console.log($('span:last'));
// 3. 获取第 index 个子元素 (jq 当中元素的索引 index 从 0 开始)
console.log($('span:eq(1)'));
// 4. 获取索引号为奇数 odd的元素
console.log($('span:odd'));
// 5. 获取索引号为偶数 even 的元素
console.log($('span:even'));
4、jq事件绑定
jq对象.事件名称(function () {})
function中的this指向jq对象；
注意：(1) jq对象 (2) 事件名称不加 on
jquery 的事件处理函数中不推荐使用 es6 中的箭头函数，原因：箭头函数会改变this指向，this 指向window
5、jq 获取元素的相关方法
// 1. 获取父元素
console.log($('ul').parent());
// 2. 获取指定元素的祖先元素
console.log($('ul').parents('.Box'));
// 3. 获取所有的子元素
console.log($('ul').children());
// 4. 查找获取所有的后代元素（包括子孙元素）
console.log($('.Box').find('.foo'));
// 5. 获取所有的兄弟元素（不包括自己）
console.log($('.bar').siblings()); console.log($('.bar').siblings('.foo')); //查找中类名为foo的兄弟元素
6、其他筛选方法
// 1. 获取上一个元素 prev()
console.log($('.foo').prev());
// 2. 获取前面所有的元素
console.log($('.foo').prevAll());
// 3. 获取下一个元素 next()
console.log($('.foo').next());
// 4. 获取后面所有的元素
console.log($('.foo').nextAll());
// 5. 判断某个元素是否包含某个特定的类名
console.log($('.foo').hasClass('foo')); //true
// 6. (重要) 获取第 n 个子元素 （元素索引 n 从 0 开始）
console.log($('li').eq(2));
7、链式编程
// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
三、jQuery样式修改
1、css修改样式
console.log($('.Box').css('width'));
$('.Box').css('width', 300);
$('.Box').css('color', 'purple');
注意：（1） 属性名一定要加 引号
（2）数字型的属性值可以省略单位 px和引号
2、class类修改样式
$('.Box').addClass('red');
$('.Box').removeClass('red');
$('.Box').toggleClass('red');
3、jQuery的显示和隐藏
括号中：
(1) speed: 动画执行速度 ‘fast’ || ‘slow’ || ‘normal’ || 毫秒数 400
(2) easing: [默认]动画效果 swing(缓动效果) || linear(匀速效果)
4、js 动画效果
- 下拉显示某个元素 slideDown()
- 上拉隐藏某个元素 slideUp()
- 切换上拉显示和下拉隐藏元素 slidetoggle()
- 鼠标经过和离开的切换事件 hover([overFn], [outFn])
动画排队：多个动画同时调用会产生一个排队的效果, 会导致动画一直在触发
解决方法: 使用 stop() 方法可以解决动画排队的问题, 每次只有一个动画在执行
$(function() {
$('.nav>li').hover(function() {
$(this).children('ul').stop().slidetoggle()
})
})
注意：只写一个 function ，鼠标经过和鼠标离开都会调用这个处理函数
5、淡入、淡出动画
$('button').eq(2).click(function() {
$('.Box').stop().fadetoggle(1000);
});
- 让元素过渡到指定的透明度 fadeto(speed, opacity, [easing], [callback])
$('button').eq(3).click(function() {
$('.Box').stop().fadeto('slow', .5);
});
- 语法： animate(动画对象, [speed], [easing], [callback])
- 参数：
(1) 动画对象: 指定要进行动画的css属性, 属性名必须遵循驼峰式命名, 属性值一般只支持数字型的
(3) speed: 动画的时长
(4) easing: 动画的速度曲线
(5) callback: 动画执行完成后的回调函数
$('button').click(function() {
$('.Box').animate({
width: 150,
height: 150,
left: 200,
top: 100,
borderRadius: '50%',
fontSize: 50
}, 700, function() {
console.log('完成');
})
})
