jQuery

走进JQ

Copy
what: jQuery是对js的二次封装的工具包 二次封装:比js用起来更便捷了,操作就是综合了(写一句jq可以实现多句js逻辑),底层就是原生js 工具包: jq就是一堆函数的集合体,通过jq对象来调用(jQuery) why: 更快速使用js where: 使用js的地方都可以使用jquery how:

安装(环境)

Copy
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学习jQuery http://jquery.cuishifeng.cn/

jq引入

Copy
# 所有的对象都属于这个windows这个对象的属性 <script src="js/jquery-3.4.1.js"></script> <script> console.log(jQuery); window.alert('123'); window.document.write('123'); window.print(); </script>

选择器

Copy
1. $('css3选择器语法') 就是jq选择器,获得的是jq对象,jq对象可以理解为存放了js对象的数组(存放了几个js对象不需要关心) 2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法 3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法
Copy
<body> <h1>标题</h1> <p class="p1">p1111111111111111111111111111111</p> <p class="p2">p222222222222222222222222222222222222</p> <form action=""> <input type="text"> </form> </body> <script src="js/jquery-3.4.1.js"></script> <script> //1. jq选择器 -得到的是jq对象, ---jq对象可以调用jq库的所有功能 // jquery对象是一个函数对象,所以要加()调用, jquery对象也可以用$表示 //$('css3语法选择器') let h1=$('h1'); console.log(h1) let p1=$('.p1'); let p2=$('p:nth-of-type(2)'); console.log(p1,p2); //查看第二个P的文本内容 let ps=$('p'); console.log(ps); // 转换为js对象取值 let _p2=ps[1]; //jq对象可以理解为存放了js对象的数组 console.log(_p2.innerText); //直接通过jq对象取值 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>

操作页面的三步骤

Copy
<body> <h1>标题</h1> <p class="p1">p1111111111111111111111111111111</p> <p class="p2">p222222222222222222222222222222222222</p> <form action=""> <input type="text"> </form> </body> <script src="js/jquery-3.4.1.js"></script> <script> //操作页面的3步骤 //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); console.log(ev.clientX); console.log(ev.clientY); }) //会将2p标签都绑定点击事件 $('p').click(function () { console.log(1232); //在jq事件中的this还是js对象,可以通过js方法进行取值 console.log(this); console.log(this.innerText); //在jq事件中的this还是js对象,如果要使用jq功能,需要将this转换为jq对象 console.log($(this)); console.log($(this).text()); }) </script>

文本操作

Copy
<body> <h1>标题</h1> <p class="p2">p222222222222222222222222222222222222</p> <div><b>div的加粗内容</b></div> <form action=""> <input type="text"> </form> </body> <script src="js/jquery-3.4.1.js"></script> <script> //文本 //$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()); })

页面操作

$div.css('css中的样式属性名', '属性值'); // 单一设置
$div.css({
'属性1': '值1',
...
'属性n': '值n',
});
$div.css('属性', function (index, oldValue) {
console.log(oldValue);
// $(this) 可以拿到调用者对象
return 返回值就是要设置的值(可以与自身其他属性,或是页面其他标签,或是自定义逻辑有关系);
})

Copy
<body> <h1 style="color: red;">标题</h1> <style> h1 { font-size: 36px; text-align: center; } </style> </body> <script src="js/jquery-3.4.1.js"></script> <script> //样式操作 //获取样式:$div.css('css中的样式属性名') $('h1').click(function () { let color=$(this).css('color'); let fs=$(this).css('font-size'); let ta=$(this).css('text-align'); console.log(color,parseInt(fs),ta); //parseInt 输出格式为数字 //设置样式 $(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; }) }); </script>

jq常用操作

addClass

增加类名

Copy
<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; background-color: blue; border-radius: 50%; } </style> </head> <body> <h1 style="color: red;">标题</h1> <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> // 类名操作 $('.btn1').click(function () { $('.box').addClass('red'); }); $('.btn2').click(function () { $('.box').addClass('yellow'); }); $('.btn3').click(function () { $('.box').addClass('blue'); }); </script> # 浏览器上测试 1. 只要出现鼠标点击按钮红,类名为box的标签就会增加一个类名 red 2. 只要出现鼠标点击按钮黄,类名为box的标签就会增加一个类名 yellow 3. 只要出现鼠标点击按钮蓝,类名为box的标签就会增加一个类名 blue # 最后代码为 <div>class="box red yellow blue"</div>
toggleclass

切换类名

Copy
<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; background-color: blue; border-radius: 50%; } </style> </head> <body> <h1 style="color: red;">标题</h1> <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> // 类名操作 $('.btn1').click(function () { $('.box').toggleClass('red'); //类名为.box的标签,如果有类名red就删除,没有就添加 }); $('.btn2').click(function () { $('.box').toggleClass('yellow'); //类名为.box的标签,如果有类名yellow就删除,没有就添加 }); $('.btn3').click(function () { $('.box').toggleClass('blue'); //类名为.box的标签,如果有类名blue就删除,没有就添加 }); </script>
removeclass

删除类名

Copy
<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; background-color: blue; border-radius: 50%; } </style> </head> <body> <h1 style="color: red;">标题</h1> <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> // 类名操作 // 可以实现功能 可以重复点击红黄蓝按钮切换成响应的样式,但是无法恢复原来的样式 $('.btn1').click(function () { // 当为类名为.box的标签添加类名red的时候,删除类名yellow,blue $('.box').addClass('red'); $('.box').removeClass('yellow'); $('.box').removeClass('blue'); }); $('.btn2').click(function () { // 当为类名为.box的标签添加类名yellow的时候,删除类名red,blue $('.box').addClass('yellow'); $('.box').removeClass('red'); $('.box').removeClass('blue'); }); $('.btn3').click(function () { $('.box').toggleClass('blue'); }); </script>
Copy
<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; background-color: blue; border-radius: 50%; } </style> </head> <body> <h1 style="color: red;">标题</h1> <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> // 类名操作 --可以一次性获取提前设置好的一套样式 // 可以实现功能 可以重复点击红黄蓝按钮切换成响应的样式,但是无法恢复原来的样式 $('.btn1').click(function () { let box=$('.box'); box[0].className='box'; //重置类名为box box.addClass('red'); }); $('.btn2').click(function () { let box=$('.box'); box[0].className='box'; box.addClass('yellow'); }); $('.btn3').click(function () { let box=$('.box'); box[0].className='box'; box.addClass('blue') }); </script>
属性
Copy
<head> <meta charset="UTF-8"> <title>Title</title> <style> h1 { font-size: 36px; text-align: center; } </style> </head> <body> <h1 id="h1" style="color: red;">标题</h1> <img src="" alt=""> </body> <script src="js/jquery-3.4.1.js"></script> <script> //属性 ` 获取属性值 设置属性值 删除属性值 `; $('h1').click(function () { //获取属性值 $div.attr('属性名') let h1_id=$(this).attr('id'); console.log(h1_id); //设置属性值 $div.attr('属性名','属性值或函数') $('img').attr('src',function () { return 'http://f.hiphotos.baidu.com/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg\n' }); //删除属性值 $div.attr('属性名','') $(this).attr('id',''); }) </script>
链式操作
Copy
<body> <h1>标题</h1> </body> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script> console.log(jQuery); $('h1').css('color','pink').css('background','yellow').click(function () { console.log(this) }).text('修改标题'); //将标签内容改为修改标题 $('h1').css('color','pink').css('background','yellow').click(function () { console.log(this) }).text() //不修改标签内容 </script>
操作文档
Copy
<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 class="sub"></div> <div class="sub"></div> </div> <div class="d d3"></div> </div> </body> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script> //通过自身快速定位到 "亲戚" - 上兄弟们(们) 下兄弟(们) 兄弟们 孩子们 父亲(们) `上兄弟(们) 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); // $('p').after($table) //加入到p之前 // $('p').before($table)//加入到p之后 //需求 点击表格,在之后插入指定宽高的表格 $('p').click(function () { let inps=$('input'); // 获取内容 //表 let table=$('<table border="1"></table>'); let row=inps.eq(1).val(); console.log(row); 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>'); table.append(td); } } $(this).after(table); })
快速定位到某一个jq对象
Copy
<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 class="sub"></div> <div class="sub"></div> </div> <div class="d d3"></div> </div> </body> <script src="https://code.jquery.com/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); });
通过自身快速定位到 "亲戚"
Copy
<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 class="sub"></div> <div class="sub"></div> </div> <div class="d d3"></div> </div> </body> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script> //通过自身快速定位到 "亲戚" - 上兄弟们(们) 下兄弟(们) 兄弟们 孩子们 父亲(们) `上兄弟(们) 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);
动态生成页面结构
Copy
<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 class="sub"></div> <div class="sub"></div> </div> <div class="d d3"></div> </div> </body> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script> //通过自身快速定位到 "亲戚" - 上兄弟们(们) 下兄弟(们) 兄弟们 孩子们 父亲(们) `上兄弟(们) 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); // $('p').after($table) //加入到p之前 // $('p').before($table)//加入到p之后
点击表格,在之后插入指定宽高的表格
Copy
<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 class="sub"></div> <div class="sub"></div> </div> <div class="d d3"></div> </div> </body> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script> //需求 点击表格,在之后插入指定宽高的表格 $('p').click(function () { let inps=$('input'); // 获取内容 //表 let table=$('<table border="1"></table>'); let row=inps.eq(1).val(); console.log(row); 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>'); table.append(td); } } $(this).after(table); }
案例 点击不同的标签变颜色
Copy
<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; /*background-color: orange;*/ float: left; font-size: 30px; line-height: 50px; text-align: center; cursor: pointer; } li.live{ background-color: orange; } li:hover{ /*background: orange;*/ color: blue; } .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> <div> <li class="live">登录</li> <li>扫码</li> </div> </ul> <div class="box login-box"></div> <div class="box scan-box"></div> </div> </body> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script> console.log(jQuery); // $('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>
posted @   cjw1219  阅读(244)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示