一、认识jQuery
1.什么是jQuery
jQuery是对原生JavaScript二次封装的工具函数集合
jQuery是一个简洁高效的且功能丰富的JavaScript工具库
2.jQuery的优势
完全开源的源代码
强大简洁的选择器
事件、样式、动画的良好支撑
链式表达式
简化的Ajax操作
跨浏览器兼容
丰富的插件及对外的扩展接口
二、jQuery的安装
1、版本
-
开发(development)版本：jQuery-x.x.x.js
-
生产(production)版本：jQuery-x.x.x.min.js
2、安装jQuery-3.3.1
<scriptsrc="js/jquery-3.3.1.js"></script> <scriptsrc="js/jquery-3.3.1.min.js"></script> <script> // user code </script>
<scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> // user code </script>
三、jQuery基本使用
1.引入jq
本地
<!-- 下载jq到本地 --> <script src="js/jquery-3.3.1.js"></script>
CDN
<!-- jq CDN 地址 --> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
2.JQ对象
// jQuery:具有jq框架规定的所有功能的调用者，也就是框架产生的唯一对象 // $本质上就是jQuery对象，开源通过 var JQ = jQuery.noConflict();来自定义jQuery对象
3.延迟加载
// jq的延迟加载：文档树加载完毕，即回调 $(document).ready(function){}) // 1. 早于window.onload // 2. 可以多次绑定事件 // 3.可以简写为$(function(){})
4.jq操作
选择器
// $(css选择器语法) // eg:$('.box')得到的是一个存放原生js对象的数组，就是jq对象，页面中有多少个.box,该对象就承载者多少个对象，.可以作为一个整体来使用
对象间转换
// js对象：box jq对象：$box // 将js对象转换为jq对象： $(box) // 将js对象转换为Jq对象： $(box[index]
文本操作
// 获取原有文本 $box.text() | $box.html() // 设置新文本 $box.text('newData') | $box.html('<b>newData</b>')
事件绑定
// $box 为jq对象 $ box.click(function(ev){ }) // 注: jq对象如果包含多个页面元素对象, 可以一次性对所有对象绑定该事件 // ev事件为jq事件, 兼容js事件 // this为js对象, $(this)就转换为jq对象 // 内部可以通过$(this).index()获取自身在当前结构下的索引(从0开始)
类名操作
$box.addClass("newClass") // 添加一个新类名
$box.removeClass("oldClass")// 删除一个已有的类名
// 多类名时，jq操作类名将每个类名最为单一考虑对象，不会影响其他类名
样式操作
$box.css('background-color') // 获取背景颜色
$box.css('background-color','red') // 删除一个已有的类名
/$box.css('background-color', function() {return 'yellow'}) // 通过函数返回值设置背景颜色
文档结构关系
// 父 $sup.parents() // 父.父的父 $ sup.parents() // 子们 $ sup.children() // 上兄弟 $sup.prev() // 上兄弟们 $sup.prevAll() // 下兄弟 $sup.next() // 同级的兄弟们 $sup.siblings() // 获得的结果的事对象，还可以接着使用jq方法
二.高级
一、选择器
css语法选择器
$('css3 选择器位‘）
索引匹配
$('div:eq(0)')
$('div').eq(0)
内容
$('div:contains(标签文本内容)')
// 注：采用模糊匹配
2.属性操作
文本
// 赋值：有参数
$('.box').html('<I>beat box</I>');
// 取值：无参数
console.log($('.box')text());
// 表单内容
// $('.inp').val('input 内容 为 value');
console.log($('.inp').val());
属性
// 取
console.log($('img').attr('alt'));
// 设
$('img').attr('src',
''https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg')
// 增
$('img').attr('abc',function(){
return "ABC";
})
类名
$(this).addClass('active'); // 添加
$(this).removeClass('box'); // 删除
// 如果有active 删除，反之添加
$(this).toggleClass('active'); //切换
3.css样式设置
// 取值
console.log($('.box').css('font-size'));
// 设值
$('.box').css('color','deeppink') //单一属性设值
.css{ //设置多个属性值
// 1.及时给css()函数赋值一个js对象
// 2.key为字符串类型，可以省略“”，前提要使用js语法，小驼峰命名
// 3.属性值为数值+单位方式，可以省略单位，尽量全部用字符串数据赋值
'300px',
'height':300,
'background-color:'cyan',
borderRadius:'30px'
})
.css('width', function(index, oldWidth) { // 逻辑单一属性设值
if (index == 0) {
// 延迟1s
// var b_time = new Date().getTime();
// while (new Date().getTime() - b_time < 1000){}
return 1.5 * parseInt(oldWidth);
}
return oldWidth;
})
4事件
绑定方式
// 第一种 on
// 四个参数：事件名，派遣的子级别，{key-value传入的数据}
$('.box').on('click','span',{name:'hehe'},function(ev){})
// 第二种
// 两个参数:{key-value传入的数据}, 事件回调函数
$('.box').click({name:'hehe'},function(ev){})
事件对象
// 为jq事件对象，兼容js事件对象 // 坐标：ev.clientX | ev.clientY // 按键：ev.keyCode // 数据：ev.date.key名 =》eg:ev.data.name
冒泡与默认动作
// 冒泡：ev.stopPropagation(); // 默认动作：ev.preventDefault():
委派
$('.box').on('click','span',{name:'hehe'},function(ev){})
// 注:通过父级box来绑定点击事件，其实将事件委派给其子级span标签
5.东湖
系统东湖
// time_num: 动画持续的时间 // finish_fn: 动画结束后的回调函数 // 1. hide(time_num, finish_fn) | show(time_num, finish_fn) | toggle(time_num, finish_fn) // 2. slideUp() | slideDown() | slideToggle() 参数同上 // 3.fadeOut() | fadeIn() | fadeTo() | fadeToggle() 参数同上
自定义动画
// 参数: 做动画的样式们 {}, 动画持续时间, 运动曲线, 动画结束后的回调函数
animate({
300,
height: 500
}, 300, 'linear', function() {
// 动画结束后回调
})
// 动画本体采用的是css动画