JQ
jq引入
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> </body> <script src="js/jquery-3.4.1.js"></script> <script> // js - ES语法 | 浏览器(BOM) window.* | 文档(DOM window.document) document.* // window.alert('js code'); // window.document.write(123) // window.print() // 如何写jq代码 console.log(jQuery); window.owen = 'Owen'; console.log(window.owen); console.log(owen); console.log($); console.log($owen); </script> </html>
操作页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>标题</h1> <p class="p1">p11111111111111111111111111</p> <p class="p2">p22222222222222222222222222</p> <div> <b>div的加粗内容</b> </div> <form action=""> <input type="text"> </form> </body> <script src="js/jquery-3.4.1.js"></script> <script> // 1.jq选择器 - 得到的是jq对象 - jq对象可以调用jq库的所有功能 // $('css语法选择器') let h1 = $('h1'); console.log(h1); let p1 = $('.p1'); let p2 = $('p:nth-of-type(2)'); console.log(p1, p2); // 想通过js对象获取第2个p的文本内容 let ps = $('p'); console.log(ps); let _p2 = ps[1]; // jq对象可以理解为存放了js对象的数组 console.log(_p2.innerText); // 想通过jq对象获取第2个p的文本内容 p2 = $(_p2); console.log(p2.text()); // 总结： ` 1. $('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组 （存放了几个js对象不需要关心） 2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法 3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法 `; </script> <script> // 操作页面的三步骤 // 1.获取标签 // 2.绑定事件 // 3.操作标签 // $('h1').click(function (ev) { // // jq的事件对象，但对js事件对象做了完全兼容 // console.log(ev); // console.log(ev.clientX); // console.log(ev.clientY); // }) // $('h1').on('click', function (ev) { // console.log(ev); // }) $('p').click(function () { // 在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象 console.log($(this)); console.log($(this).text()); }); // 文本 // $div.text() 文本内容 // $div.html() 标签内容 // $inp.val() 表单内容 // 需求1：点击h1获取 自身文本内容、div的标签内容、input的表单内容 $('h1').click(function () { console.log($(this).text()); console.log($('div').html()); console.log($('input').val()); }) </script> </html>
常用操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <style> h1 { font-size: 36px; text-align: center; } .box { width: 200px; height: 200px; background-color: orange; } .red { background-color: red; border-radius: 50%; } .yellow { width: 400px; border-radius: 100px; background-color: yellow; } .blue { width: 400px; border-radius: 50%; background-color: blue; } </style> </head> <body> <h1 id="h1" style="color: red">标题</h1> <img src="" alt=""> <button class="btn1">红</button> <button class="btn2">黄</button> <button class="btn3">蓝</button> <div class="box"></div> </body> <script src="js/jquery-3.4.1.js"></script> <script> // 一、文本操作 // $div.text() 文本内容 // $div.html() 标签内容 // $inp.val() 表单内容 // 二、样式操作 // 获取样式: $div.css('css中的样式属性名') // 设置样式: ` $div.css('css中的样式属性名', '属性值'); // 单一设置 $div.css({ '属性1': '值1', ... '属性n': '值n', }); $div.css('属性', function (index, oldValue) { console.log(oldValue); // $(this) 可以拿到调用者对象 return 返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系); }) `; ` $('h1').click(function () { let $this = $(this); let color = $this .css('color'); let fs = $this.css('font-size'); let ta = $this.css('text-align'); console.log(color, parseInt(fs), ta); $this.css('background-color', 'orange'); $this.css({ 'background-color': 'pink', 'border-radius': '10px', 'width': '200px', }); $this.css('height', function (index, oldValue) { console.log(oldValue); let w = $(this).width(); return w / 2; }) }) `; // 三、类名 - 可以一次性获取提前设置好的一套样式 ` 增加类名：$div.addClass('类名') 删除类名：$div.removeClass('类名') 切换类名：$div.toggleClass('类名') `; ` $('.btn1').click(function () { $('.box').addClass('red'); $('.box').removeClass('yellow'); $('.box').removeClass('blue'); // $('.box').toggleClass('red'); // 无red类添加，反之去除 }); $('.btn2').click(function () { let $box = $('.box'); $box[0].className = 'box'; $box.addClass('yellow'); }); $('.btn3').click(function () { $('.box').addClass('blue'); }); `; // 四、属性 ` 获取属性值：$div.attr('属性名') 设置属性值：$div.attr('属性名', '属性值或函数') 删除属性值：$div.attr('属性名', '') `; // https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg $('h1').click(function () { let h1_id = $(this).attr('id'); console.log(h1_id); $('img').attr('src', function () { return 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg' }); $(this).attr('id', ''); }) </script> </html>
链式操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <h1>标题</h1> </body> <script src="js/jquery-3.4.1.js"></script> <!-- CDN服务器 | 官网服务器 --> <!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>--> <script> ` let _self = $('h1').css('color', 'orange'); _self = _self.click(function () { console.log(this) }); _self = _self.css('background', 'red'); `; $('h1').css('color', 'orange').css('background', 'red').click(function () { console.log(this) }).text('修改标题'); </script> </html>
操作文档
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>操作文档</title> <style> .d { width: 50px; height: 50px; background-color: orange; border-radius: 50%; } </style> </head> <body> 内容：<input type="text"> 行：<input type="text"> 列：<input type="text"> <p>表格</p> <div> <div class="d d1"></div> <div class="d d2"> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> </div> <div class="d d3"></div> <div class="d d4"></div> </div> </body> <script src="js/jquery-3.4.1.js"></script> <script> // 一、快速定位到某一个jq对象 ` // 1）在jq集合中快速拿到某一个jq对象: jq对象.eq(index) // $('.d:eq(1)') == $('.d').eq(1) // $('.d').eq(1).click(function () { // alert(123) // }) // 2）在jq集合中都具有系统事件，在事件中如何区别每一个jq对象 // $(this) | 索引 $('.d').click(function () { // 标签所在层级的索引，不是在jq对象数组中的索引 let index = $(this).index(); console.log(index) }); `; // 二、通过自身快速定位到 "亲戚" `上兄弟(们) prev(All) 下兄弟(们) next(All) 兄弟们 siblings 孩子们 children 父亲(们) `; ` let $d2 = $('.d2'); console.log($d2); let next = $d2.next(); console.log(next); let nexts = $d2.nextAll(); console.log(nexts); let prev = $d2.prev(); console.log(prev); let siblings = $d2.siblings(); console.log(siblings); let children = $d2.children(); console.log(children); let parent = $d2.parent(); console.log(parent); `; // 三、动态生成页面结构 let $table = $('<table></table>'); $table.css({ border: '1px' }); $('body').append($table); // 加入到body最后 $('body').prepend($table); // 加入到body最后 $('p').before($table); // 加入到p之前 $('p').after($table); // 加入到p之后 // 需求：点击表格，在之后插入指定宽高的表格 $('p').click(function () { let inps = $('input'); // 表 let table = $('<table border="1"></table>'); let row = inps.eq(1).val(); console.log(typeof(inps.eq(1).val())); let col = inps.eq(2).val(); // 行 for (let i = 0; i < row; i++) { let tr = $('<tr></tr>'); table.append(tr); // 列 for (let j = 0; j < col; j++) { let td = $('<td>' + inps.eq(0).val() + '</td>'); tr.append(td); } } $(this).after(table); }) </script> </html>
案例1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <style> body, ul { margin: 0; padding: 0; list-style: none; } .login { width: 300px; height: 400px; border: 1px solid black; margin: 0 auto; } ul:after { content: ""; display: block; clear: both; } li { width: 150px; height: 50px; float: left; font: 20px/50px 'Arial'; text-align: center; cursor: pointer; } li:hover { /*background: orange;*/ color: orange; } li.live { /*background: orange;*/ color: orange; } .login-box, .scan-box { height: calc(400px - 50px); background-color: red; display: none; } .scan-box { background-color: pink; } .box.live { display: block; } </style> </head> <body> <div class="login"> <ul> <li class="live">登录</li> <li>扫码</li> </ul> <div> <div class="box login-box live"></div> <div class="box scan-box"></div> </div> </div> </body> <script src="js/jquery-3.4.1.js"></script> <script> // $('li').mouseover(function () { // $(this).addClass('live').siblings().removeClass('live'); // let index = $(this).index(); // $('.box').eq(index).addClass('live').siblings().removeClass('live'); // }) $('li').click(function () { $(this).addClass('live').siblings().removeClass('live'); let index = $(this).index(); $('.box').eq(index).addClass('live').siblings().removeClass('live'); }) </script> </html>
案例2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <style> body, ul, h2 { margin: 0; padding: 0; list-style: none; } .box { width: 120px; } h2 { height: 36px; background-color: brown; color: white; font: 20px/36px 'Arial'; text-align: center; } ul { overflow: hidden; height: 0; border: none; transition: 0.2s; } ul.live { border: 1px solid black; /*height: 100px;*/ } li { height: 30px; font: 16px/30px 'Arial'; text-align: center; border-bottom: 1px solid black; } </style> </head> <body> <div class="box"> <h2>菜单</h2> <ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> </ul> </div> </body> <script src="js/jquery-3.4.1.js"></script> <script> $('h2').click(function () { $('ul').toggleClass('live').css('height', function (i, o) { console.log(o); let c = $(this).children().length; if (o !== '0px') { return 0; } else { let h = $(this).children().css('height'); h = parseInt(h); return h * c + 'px'; } }) }) </script> </html>
