##内容回顾
Javascript
1、三种引入方式
2、弱语言 - 脚本语言 - 编程语言
3、变量 - 四种 let const var 无关键字
4、数据类型 - 值类型、引用类型 - string | array.splice(begin, length, args) | dic.key dic['key']
5、流程控制：if(){}else if(){}else{} | while(){} | for(①;②;③){④}
6、函数：参数列表 - 形参和实参个数不需要统一
7、js页面交互
1）先获取页面标签
js选择器：getElemet | querySelector(All)
2）事件绑定：on事件名
鼠标事件、键盘事件、表单事件
3）操作标签
样式、属性、内容
div.style.color
getComputedStyle(div, null).backgroundColor
div.setAttribute('class', 'box')
div.getAttribute('class')
div.innerText(innerHTML)
inp.value
##jquery框架
#1、what: jQuery是对js进行的二次封装的工具包 二次封装：比js使用起来便捷了，操作比就是综合了(写一句jq可以实现多句js逻辑)，底层就是原生js 工具包：jq就是一堆函数的集合体，通过jq对象来调用(jQuery) #2、why： 跟快速使用js #3、where： 使用js的地方都可以使用jq #4、how： 1.官网下载：https://jquery.com/download/ jquery-3.4.1.js | jquery-3.4.1.min.js 2.在 需要jq环境的页面中 使用jq <script src="js/jquery-3.4.1.js"></script> <script> // $ 就是jQuery对象，可以使用jQuery的所有功能 </script> 3.根据API学习jq：http://jquery.cuishifeng.cn/
##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代码 jQuery相当于$ console.log(jQuery); console.log($); window.owen = 'Owen'; console.log(window.owen); console.log(owen); console.log($owen); </script> </html>
##jq操作页面
// 总结： ` 1. $('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组 （存放了几个js对象不需要关心） 2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法 3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法 ； // 操作页面的三步骤 // 1.获取标签 // 2.绑定事件 // 3.操作标签 // 文本 // $div.text() 文本内容 // $div.html() 标签内容 // $inp.val() 表单内容 #案例 <!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>
##jq常用操作
// 一、文本操作 // $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 返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系); }) // 三、类名 - 可以一次性获取提前设置好的一套样式 ` 增加类名：$div.addClass('类名') 删除类名：$div.removeClass('类名') 切换类名：$div.toggleClass('类名') 没有就添加 存在就删除 // 四、属性 ` 获取属性值：$div.attr('属性名') 设置属性值：$div.attr('属性名', '属性值或函数') 删除属性值：$div.attr('属性名', '') //案例 <!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> $('h1').click(function () { //click 和on都是点击事件 //$(this)获取一个jq对象----$this----- 这个对象变量名可自定义 let $this = $(this); //通过jq对象获取颜色属性 let color = $this .css('color'); //通过jq对象获取字体大小属性 let fs = $this.css('font-size'); //通过jq对象获取位置属性 let ta = $this.css('text-align'); //parseInt(fs)可以得到取整数值 去除单位 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; }) }) //点击红色按钮 变为红色，因为添加了红色css样式 $('.btn1').click(function () { $('.box').addClass('red'); $('.box').removeClass('yellow'); $('.box').removeClass('blue'); // $('.box').toggleClass('red'); // 无red类添加，反之去除 }); //点击黄色按钮 变为红色，因为添加了黄色css样式 $('.btn2').click(function () { let $box = $('.box'); //会覆盖写 $box[0].className = 'box'; $box.addClass('yellow'); }); //点击蓝色按钮 变为红色，因为添加了蓝色css样式 $('.btn3').click(function () { $('.box').addClass('blue'); }); $('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>
##jq链式操作
<!DOCTYPE html> <html lang="en"> <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> // 通过$('h1') jq对象设置属性 // 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>
##jq操作文档
// 一、快速定位到某一个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 $table = $('<table></table>'); // $table.css({ // border: '1px' // }); // $('body').append($table); // 加入到body最后 // $('body').prepend($table); // 加入到body最后 // $('p').before($table); // 加入到p之前 // $('p').after($table); // 加入到p之后 //四、案例 <!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> 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); `; // 需求：点击表格，在之后插入指定宽高的表格 $('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>