Javascript
昨日回顾:
1.三种导入方式
2.弱语言 -脚本语言 -编程语言
3.变量 -四种 let const var 无关键字
4.数据类型: -值类型.引用类型 - string |array.splice(begin,lengt,args) |dic.key dic['key']
5.流程控制: if(){}else if()else{} | while(){} |for(@;@;@){@}
6.函数 参数列表 -形参和实参个数无需通报表h
7.js 页面交互
1.现获取页面标签
js选择器:getElemet |querySelector(All)
2.事件绑定
鼠标事件 键盘事件 表单事件
3.操作表单
样式 属性 内容
div.style.color
getComputedStyle(div,null).backgroundColor
div.setAttribute('class','box')
div.getAttribute('class')
div.innerText(innerHTML)
inp.value
::
创建或删除标签结构
前后台数据交互
jQuery -js框架
::
JQ
what:是对js进行的二次封装的工具包
二次封装:比js使用起来便捷,操作就是中和了(写一句jq可以实现多久js逻辑),底层还是原生js
工具包:jq就是一堆函数集合体,通过jq对象来调用(jQuery)
why:更快速使用js
where:使用js的地方都可以使用jq
安装(环境)
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引入
js -ES语法 |浏览器(BOM) window.* |文档(DOM window.document) document.*
window.alert('js code')
window.document.write(123)
window.print()
window.log(jQuery); window.log(window.owen);
consold.log(owen); console.log($); console.log($owen);
// 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的语法 `; // 操作页面的三步骤 // 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()); })
jq常用操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <style> h1 { font-size: 36px; text-align: center; } .box { 200px; height: 200px; background-color: orange; } .red { background-color: red; border-radius: 50%; } .yellow { 400px; border-radius: 100px; background-color: yellow; } .blue { 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>
jq链式操作:
<!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 { 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>