标签：布尔 驼峰 wing 了解 flow opacity OLE keycode point
一,jq选择器
- css3语法选择器
```js
$(‘css3选择器位‘)
```
- 索引匹配
```js
$(‘div:eq(0)‘)
$(‘div‘).eq(0)
```
- 内容
```js
$(‘div:contains(标签文本内容)‘)
// 注: 采用模糊匹配
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq选择器</title> <script src="js/jquery-3.3.1.js"></script> </head> <body> <ul class="ul1"> <li class="li l1">ul1 l1</li> <li class="li l2">ul1 l2</li> <li class="li l3">ul1 l2</li> </ul> <ul class="ul2"> <li class="li l1">ul2 l1</li> <li class="li l2">ul2 l2</li> <li class="li l3">ul2 l3</li> </ul> </body> <script> // console.log($); // 1.采用css3语法 // $(‘css3选择器‘) console.log($(‘.ul1 .l2‘).text()); console.log($(‘.l1 ~ .l2‘).text()); console.log($(‘.l1, .l2, .l3‘).text()); // 2.css3之前jq已有的自身选择器 // 偶数位 // 注: 不加结构时, 将所有li作为考虑整体从上之下进行排序, 查找索引为偶数位的(0,2...) console.log($(‘.ul1 .li:even‘)); // 奇数位 console.log($(‘.ul2 .li:odd‘)); // 匹配索引 ***** console.log($("ul").eq(0)); // $("ul")页面中的所有ul, 取第n个ul // -- $("ul")[n] => 得到第n索引位js对象, 本非jq对象 // -- $("ul").eq(n) => 得到第n索引位jq对象 // -- $("ul:eq(n))" => 得到第n索引位jq对象 // 3.通过内容进行匹配 // 内容只有包含l1即可, ul1 l1 | ul1 l2 | ul1 l3 | ul2 l1 console.log($(‘li:contains(l1)‘).text()) </script> </html>
二, 属性操作
1. 文本 ```js // 赋值: 有参数 $(‘.box‘).html(‘<i>beat box</i>‘); // 取值: 无参数 console.log($(‘.box‘).text()); // 表单内容 // $(‘.inp‘).val("input 内容 为 value"); console.log($(‘.inp‘).val()); ``` 2.属性 ```js // 取 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"; }) ``` 3.类名 ```js $(this).addClass(‘active‘); // 添加 $(this).removeClass(‘box‘); // 删除 // 如果有active 删除, 反之添加 $(this).toggleClass(‘active‘); // 切换 ```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性操作</title> <script src="js/jquery-3.3.1.js"></script> <style> .active { width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <div class="box"></div> <input class="inp" type="text" value="12345"> <img src="" alt="提示"> <!--表单元素的布尔类型属性, 不写为false, 书写后,不管值为什么, 均为属性名--> <!--eg: checked="checked" | checked="" | checked--> <input class="ck" type="checkbox" checked="false"> </body> <script> // 文本内容操作 // html() | text() | val() // 赋值: 有参数 $(‘.box‘).html(‘<i>beat box</i>‘); // 取值: 无参数 console.log($(‘.box‘).text()); // 表单内容 // $(‘.inp‘).val("input 内容 为 value"); console.log($(‘.inp‘).val()); </script> <script> // 属性操作 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"; }) // $(‘.ck‘).prop("checked", "true"); // 了解 // $(‘.ck‘).attr("checked", "true"); </script> <script> $(‘.box‘).click(function () { // $(this).addClass(‘active‘); // 添加 // $(this).removeClass(‘box‘); // 删除 // 如果有active 删除, 反之添加 $(this).toggleClass(‘active‘); // 切换 }) </script> </html>
三.css样式设置
```js // 取值 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; }) ```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>样式操作</title> <script src="js/jquery-3.3.1.js"></script> <style> .box { font-size: 100px; } </style> </head> <body> <div class="box">12345</div> <div class="box">67890</div> </body> <script> // 取值 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; })
四.JQ事件
- 绑定方式
```js
// 第一种 on
// 四个参数: 事件名, 委派的子级, {key-value传入的数据}, 事件回调函数
$(‘.box‘).on(‘click‘, ‘span‘, {name: ‘hehe‘}, function(ev){})
// 第二种
// 两个参数: {key-value传入的数据}, 事件回调函数
$(‘.box‘).click({name: ‘hehe‘}, function(ev){})
```
- 事件对象
```js
// 为jq事件对象, 兼容js事件对象
// 坐标: ev.clientX | ev.clientY
// 按键: ev.keyCode
// 数据: ev.data.key名 => eg:ev.data.name
```
- 冒泡与默认动作
```js
// 冒泡: ev.stopPropagation();
// 默认动作: ev.preventDefault();
```
- 委派
```js
$(‘.box‘).on(‘click‘, ‘span‘, {name: ‘hehe‘}, function(ev){})
// 注: 通过父级box来绑定点击事件,其实将事件委派给其子级span标签
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq事件</title> <style> .box, .ele, .sub { width: 100px; height: 100px; background-color: orange; } .sup { width: 200px; height: 200px; background-color: red; margin-top: 10px; } </style> </head> <body> <div class="box">box</div> <a href="https://www.baidu.com">别动</a> <div class="ele">ele</div> <div class="sup"> <div class="sub"></div> <span>123</span> </div> </body> <script src="js/jquery-3.3.1.js"></script> <script> /* // 1.事件的绑定语法 $(‘.box‘).on(‘click‘, function () { console.log(‘你丫点我了!!!‘) }); $(‘.box‘).click(function () { console.log(‘你丫又点我了!!!‘) }); // 2.事件对象 $(document).click(function (ev) { console.log("父级点击了"); // jq事件对象, 兼容js事件对象 console.log(ev); // 鼠标点 console.log(ev.clientX, ev.clientY); }); $(document).keydown(function (ev) { // jq事件对象, 兼容js事件对象 console.log(ev); // 鼠标点 console.log(ev.keyCode); }); // 3.冒泡与默认动作 $(‘a‘).click(function (ev) { console.log("默认动作取消了"); // 取消默认动作1 ev.preventDefault(); // 取消默认动作2 // return false; }) $(‘.ele‘).click(function (ev) { // ev.cancelBubble = true; // 未兼容 // 阻止冒泡 ev.stopPropagation(); console.log("子级点击了"); }) */ </script> <script> var name = "张三"; /* $(‘.sub‘).click(); $(‘.sub‘).on(‘click‘, {name: name, age: 8}, function (ev) { ev.stopPropagation(); console.log(ev); console.log(">>>", ev.data.name) }); */ // 将sup的点击事件委派给自己的span子级 $(‘.sup‘).on(‘click‘, ‘span‘, {}, function (ev) { // ev.stopPropagation(); console.log("=================="); }); $(‘.sup‘).on(‘click‘, {}, function (ev) { // ev.stopPropagation(); console.log("++++++++++++++++"); })
五.JQ动画
- 系统预定义
```js
// 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() 参数同上
```
- 自定义动画
```js
// 参数: 做动画的样式们 {}, 动画持续时间, 运动曲线, 动画结束后的回调函数
animate({
width: 300,
height: 500
}, 300, ‘linear‘, function() {
// 动画结束后回调
})
// 动画本体采用的是css动画
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq动画</title> <style> .ele { width: 100px; height: 100px; background-color: orange; margin-top: 10px; } </style> </head> <body> <button class="b1">消失</button> <button class="b2">显示</button> <button class="b3">切换</button> <div class="ele e1"></div> <hr> <button class="b4">消失</button> <button class="b5">显示</button> <button class="b6">切换</button> <div class="ele e2"></div> <hr> <button class="b7">消失</button> <button class="b8">显示</button> <button class="b9">切换</button> <div class="ele e3"></div> <div class="ele e4"></div> <div class="ele e5"></div> </body> <script src="js/jquery-3.3.1.js"></script> <script> $(‘.b1‘).click(function () { $(‘.e1‘).hide(500, function () { console.log("动画结束了, 你可以再干一些事") }); }); $(‘.b2‘).click(function () { $(‘.e1‘).show(500, function () { console.log("动画结束了, 你可以再干一些事") }); }) $(‘.b3‘).click(function () { $(‘.e1‘).toggle(500, function () { console.log("动画结束了, 你可以再干一些事") }); }) </script> <script> $(‘.b4‘).click(function () { $(‘.e2‘).slideUp(500, function () { console.log("动画结束了, 你可以再干一些事") }); }); $(‘.b5‘).click(function () { $(‘.e2‘).slideDown(500, function () { console.log("动画结束了, 你可以再干一些事") }); }) $(‘.b6‘).click(function () { $(‘.e2‘).slideToggle(500, function () { console.log("动画结束了, 你可以再干一些事") }); }) </script> <script> $(‘.b7‘).click(function () { $(‘.e3, .e4, .e5‘).fadeOut(500, function () { console.log("动画结束了, 你可以再干一些事") }); }); $(‘.b8‘).click(function () { $(‘.e2 ~ .ele‘).fadeIn(500, function () { console.log("动画结束了, 你可以再干一些事") }); }) $(‘.b9‘).click(function () { $(‘.e3, .e4, .e5‘).fadeToggle(500, function () { console.log("动画结束了, 你可以再干一些事") }); })
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义动画</title> <style> .box { width: 300px; height: 300px; background-color: orange; } </style> </head> <body> <button class="btn">消失</button> <button class="btn">显示</button> <div class="box"></div> </body> <script src="js/jquery-3.3.1.js"></script> <script> $(‘.btn‘).eq(0).on(‘click‘, function () { $(‘.box‘).animate({ width: 0 }, 1000, ‘linear‘, function () { console.log("动画结束了!!!") }) }); $(‘.btn‘).eq(1).on(‘click‘, function () { $(‘.box‘).animate({ width: 300 }, ‘slow‘, ‘swing‘, function () { console.log("动画结束了!!!") }) }) </script> </html>
六 JQ轮播图和JQ动画案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style > * { /*不允许选择文本, 网页文本不能负责*/ user-select: none; } body, ul { margin: 0; padding: 0; list-style: none; } .scroll { width: 1226px; height: 460px; margin: 0 auto; background-color: orange; position: relative; cursor: pointer; } .scroll_view { width: 100%; height: 100%; position: relative; } .scroll_view li { background: red; width: 100%; height: 100%; font: normal 100px/460px ‘STSong‘; text-align: center; position: absolute; top: 0; left: 0; opacity: 0; } .scroll_view li.active { opacity: 1; transition: .5s; } .left { position: absolute; top: 170px; left: 0; background-color: #eee; font-size: 100px; } .left:hover, .right:hover { cursor: pointer; background-color: #333; } .right { position: absolute; top: 170px; right: 0; background-color: #eee; font-size: 100px; } .scroll_tag { position: absolute; right: 10px; bottom: 10px; } .scroll_tag li { width: 10px; height: 10px; border-radius: 50%; background-color: #333; border: 3px solid #ddd; float: left; margin: 0 10px; } .scroll_tag li.active { background-color: #ccc; border: 3px solid #333; } </style> </head> <body> <div class="scroll"> <ul class="scroll_view"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul class="scroll_toggle"> <li class="left"><</li> <li class="right">></li> </ul> <ul class="scroll_tag"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> <script src="js/jquery-3.3.1.js"></script> <script> // 页面文档树加载完毕回调 $(function () { var page_index = 0; var length = $(‘.scroll_view li‘).length; var toggle_time = 1000; var timer = 0; // 无限轮播 timer = setInterval(toggleRole, toggle_time, 1); // 悬浮停止,移走轮播 $(‘.scroll‘).mouseenter(function () { // 悬浮停止 clearInterval(timer); }).mouseleave(function () { // 移走轮播 timer = setInterval(toggleRole, toggle_time, 1); }); // 右轮播 $(‘.right‘).click(function () { toggleRole(1); }); // 左轮播 $(‘.left‘).click(function () { toggleRole(-1); }); // 切换依据 function toggleRole(role_num) { page_index += role_num; // role_num:1向右切换, role_num:-1向左切换 if (role_num > 0) { if (page_index >= length) { // 右切换临界点 page_index = 0; } } else { if (page_index < 0) { // 左切换临界点 page_index = length - 1; } } toggleState(page_index); } // 切换状态 function toggleState(index) { $(‘.scroll_view li‘).removeClass(‘active‘).eq(index).addClass(‘active‘); $(‘.scroll_tag li‘).removeClass(‘active‘).eq(index).addClass(‘active‘); } })
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq动画案例</title> <style> .wrap { width: 600px; height: 200px; border: 5px solid black; margin: 0 auto; position: relative; overflow: hidden; /*overflow: auto;*/ } .btn { text-align: center; margin-top: 50px; } ul { margin: 0; padding: 0; list-style: none; } .scroll { width: 2000px; position: absolute; } .scroll li { width: 200px; height: 200px; font: 500 50px/200px ‘STSong‘; text-align: center; background-color: yellow; float: left; } .scroll li:nth-child(2n) { background-color: pink; } </style> </head> <body> <div class="btn"> <button class="btn1"><</button> <button class="btn2">></button> </div> <div class="wrap"> <ul class="scroll"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </body> <script src="js/jquery-3.3.1.js"></script> <!-- <script> // 滚动条滚动(overflow)产生的距离 // console.log($(‘.wrap‘).scrollLeft()); // 和绝对定位匹配使用 // console.log($(‘.scroll‘).position().left); // 和固定定位匹配使用 // console.log($(‘.scroll‘).offset()); // 滚动scroll的总长度 var scroll_total = $(‘.scroll‘).width(); // 显示的总宽度,也就是一次性最大滚动的长度 var wrap_width = $(‘.wrap‘).width(); $(‘.btn1‘).click(function () { // 往左已滚动的长度, 是负值 var scroll_left = $(‘.scroll‘).position().left; // 剩余的可滚动的长度: 总长抛出显示的一个平面长度,再减去已经滚动到左侧的长度 // 注scroll_left是负值,使用用+运算 var less_long = scroll_total - wrap_width + scroll_left; // 通过剩余的可滚动长度计算出下一次能滚动的长度 var next_scroll = less_long > wrap_width ? wrap_width : less_long; // 动画: left为从当前已滚动的长度(scroll_left)再滚动(减去)下一次可滚动的长度 $(‘.scroll‘).animate({ left: scroll_left - next_scroll }) }); $(‘.btn2‘).click(function () { // 往左已滚动的长度, 是负值 var scroll_left = $(‘.scroll‘).position().left; // 往右剩余的可滚动的长度 var less_long = -scroll_left; // 通过剩余的可滚动长度计算出下一次能滚动的长度 var next_scroll = less_long > wrap_width ? wrap_width : less_long; $(‘.scroll‘).animate({ left: scroll_left + next_scroll }) }) </script> --> <script> // 不能被点击 var disable_click = false; $(‘.btn1‘).click(function () { if (!disable_click) { // 能被点击时 disable_click = true; // 动画过程中, 应该不能再被点击 $(‘.wrap‘).animate({ scrollLeft: $(‘.wrap‘).scrollLeft() + 600 }, 300, function () { disable_click = false; // 动画结束后,可以重新被点击 }) } }); $(‘.btn2‘).click(function () { if (!disable_click) { disable_click = true; $(‘.wrap‘).animate({ scrollLeft: $(‘.wrap‘).scrollLeft() - 600 }, 300, function () { disable_click = false; }) } }) </script>
标签：布尔 驼峰 wing 了解 flow opacity OLE keycode point
原文地址：https://www.cnblogs.com/ye-hui/p/10186824.html
