1. JQuery操作页面的三大步骤
1. $('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组 （存放了几个js对象不需要关心）
2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法
3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法、
4. jq的事件对象，对js事件对象也完全兼容
5. 在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>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 = $('p2'); console.log(p1, p2); let p = $('p'); console.log(p); // jq对象可以理解为存放了js对象的数组,可以通过索引取值 // 想通过jq对象获取第2个p的文本内容 let _p2 = p[1]; console.log(_p2.innerText); p2 = $(_p2); console.log(p2.text()); // 1. $('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组 （存放了几个js对象不需要关心） // 2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法 // 3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法 // 4. jq的事件对象，对js事件对象也完全兼容 // 5. 在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象 </script> <script> // 操作页面的三个步骤 // 1.获取标签 // 2.绑定标签 // 3.操作标签 // jq的事件对象，对js事件对象也完全兼容 // $('h1').click(function (ev) { // console.log(ev); // console.log(ev.clientX); // console.log(ev.clientY); // }); // $('h1').on('click', function (ev) { // console.log(ev); // }) // 在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象 $('p').click(function () { 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>
2. JQuery的常用操作
操作标签的内容，样式，属性、类。
2.1 内容
$div.text() 文本内容
$div.html() 标签内容
$inp.val() 表单内容
2.2 样式
1. 获取样式：$div.css('css中的样式属性名')
2. 设置样式
①：单一设置 $div.css('css中的样式属性名', '属性值');
②：设置多个 $div.css({ '属性1': '值1', ... '属性n': '值n', });
③：$(this) 可以拿到调用者对象
return 返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系)
$div.css('属性', function (index, oldValue) {
console.log(oldValue);})
2.3 属性
获取属性值：$div.attr('属性名')
设置属性值：$div.attr('属性名', '属性值或函数')
删除属性值：$div.attr('属性名', '')
2.4 类
类名：可以一次性获取提前设置好的一套样式
增加类名：$div.addClass('类名')
删除类名：$div.removeClass('类名')
切换类名：$div.toggleClass('类名')
<!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 { background-color: yellow; width: 400px; border-radius: 100px; } .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 () { return ($(this).width())/2; }); // 属性操作 // 获取属性值：$div.attr('属性名') // 设置属性值：$div.attr('属性名', '属性值或函数') // 删除属性值：$div.attr('属性名', '') $('h1').click(function () { let h1_id = $(this).attr('id'); console.log(h1_id); $('img').attr('src', function () { if (Math.random() > 0.5) { return 'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=f44714968db1cb132a643441bc3d3d2b/a8773912b31bb05138f6cc51367adab44bede0fd.jpg'; } else { return 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1562331457&di=89eefbebab0a0a5c07cddbcb2d9c7854&src=http://b-ssl.duitang.com/uploads/item/201408/19/20140819122137_mUtYd.png' } }); }); $(this).attr('id', ''); }); // 四、类名：可以一次性获取提前设置好的一套样式 // 增加类名：$div.addClass('类名') // 删除类名：$div.removeClass('类名') // 切换类名：$div.toggleClass('类名') $('.btn1').click(function () { // 无red类添加，反之去除 $('.box').addClass('red'); $('.box').removeClass('yellow'); $('.box').removeClass('blue'); // $('box').toggleClass('red'); }); $('.btn2').click(function () { let $box = $('.box'); $box[0].className = 'box'; $box.addClass('yellow'); }); $('.btn3').click(function () { $('.box').addClass('blue'); }); </script> </html>
3. JQurey的链式赋值
<!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> <script> // 之所有jquery支持这种极为方便的链式结构写法,是因为jquery的每一步操作都返回一个jquery对象本身.如果返回的不是本身，就无法继续链式赋值下去 $('h1').css('color', 'orange').css('background', 'red').click(function () { console.log(this) }).text('修改标题'); </script> </html>
4. JQuery操作文档
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>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对象 // 标签所在层级的索引，不是在jq对象数组中的索引 // $(this) | 索引 $('.d').click(function () { 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 prev = $d2.prev(); console.log(prev); //三、动态生成页面结构 // append:添加到...最后 // prepend:添加到...最前 // before:添加到...之前 // after:添加到...之后 let $table = $('<table></table>'); $('body').append($table); $('p').before($table); </script> </html>