jq
<!-- 下载jq到本地 --> <script src="js/jquery-3.3.1.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
// jQuery: 具有jq框架规定的所有功能的调用者, 也就是框架产生的唯一对象 // $本质上就是jQuery对象, 开源通过 var JQ = jQuery.noConflict();来自定义jQuery对象
// jq的延迟加载: 文档树加载完毕, 即回调 $(document).ready(function() {}) // 1. 早于window.onload // 2. 可以多次绑定事件 // 3. 可以简写为$(function() {})
// $(css选择器语法) // eg: $('.box') 得到的是一个存放原生js对象的数组, 就是jq对象, 页面中有多少个.box, 该jq对象就承载者多少个对象,. 可以作为一个整体来使用
2.对象间转换
// js对象: box jq对象: $box // 将js对象转换为jq对象: $(box) // 将jq对象转换为js对象: $box[index]
3.文本操作
// 获取原有文本 $box.text() | $box.html() // 设置新文本 $box.text('newData') | $box.html('<b>newData</b>')
4.事件绑定
// $box为jq对象 $box.click(function(ev) { }) // 注: jq对象如果包含多个页面元素对象, 可以一次性对所有对象绑定该事件 // ev事件为jq事件, 兼容js事件 // this为js对象, $(this)就转换为jq对象 // 内部可以通过$(this).index()获取自身在当前结构下的索引(从0开始)
5.类名操作
$box.addClass("newClass") // 添加一个新类名
$box.removeClass("oldClass") // 删除一个已有的类名
// 多类名时,jq操作类名将每个类名最为单一考虑对象,不会影响其他类名
6.样式操作
$box.css('background-color') // 获取背景颜色
$box.css('background-color', 'red') // 设置背景颜色
$box.css('background-color', function() {return 'yellow'}) // 通过函数返回值设置背景颜色
7.文档结构关系
// 父 $sup.parent() // 父,父的父... $sup.parents() // 子们 $sup.children() ***** // 上兄弟 $sup.prev() *** // 上兄弟们 $sup.prevAll() // 下兄弟 $sup.next() *** // 下兄弟们 $sup.nextAll() // 同级别的兄弟们 $sup.siblings() *** // 在sup下查找类名为inner的子级 $sup.children('.inner') // 获得的结果都是jq对象, 还可以接着使用jq方法
$('div:eq(0)')、$('div').eq(0)
内容：$('div:contains(标签文本内容)')
// 注: 采用模糊匹配
// 赋值: 有参数 $('.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'); // 切换
// 取值 console.log($('.box').css('font-size')); // 设值 $('.box').css('color', 'deeppink') // 单一属性设值 .css({ // 设置多个属性值 // 1.就是给css()函数赋值一个js对象 // 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法 // 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值 width: '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; })
// 第一种 on // 四个参数: 事件名, 委派的子级, {key-value传入的数据}, 事件回调函数 $('.box').on('click', 'span', {name: 'hehe'}, function(ev){}) // 第二种 // 两个参数: {key-value传入的数据}, 事件回调函数 $('.box').click({name: 'hehe'}, function(ev){})
2.事件对象
// 为jq事件对象, 兼容js事件对象 // 坐标: ev.clientX | ev.clientY // 按键: ev.keyCode // 数据: ev.data.key名 => eg:ev.data.name
3.冒泡与默认动作
// 冒泡: ev.stopPropagation(); // 默认动作: ev.preventDefault();
4.委派
$('.box').on('click', 'span', {name: 'hehe'}, function(ev){})
// 注: 通过父级box来绑定点击事件,其实将事件委派给其子级span标签
// 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() 参数同上
2.自定义动画
// 参数: 做动画的样式们 {}, 动画持续时间, 运动曲线, 动画结束后的回调函数 animate({ width: 300, height: 500 }, 300, 'linear', function() { // 动画结束后回调 }) // 动画本体采用的是css动画
