8-jquery
时间:2020-05-18
本文章向大家介绍8-jquery，主要包括8-jquery使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
lesson08-jquery
视频1-回顾+作业讲解
----------------------------------------------
0-笔记 jq: 1.选择器:id/class/标签/复合选择器 2.筛选器4中 1. first、last、eq 2.children/find后代--操作子级 3.parent、parents、parentsUntil--操作父级 4.siblings():所有同级但不包括自身 3.区别: 总结 选择器和筛选器在简单操作时，效果是一样的 但是在函数中操作时，筛选器在字符拼接上有优势 4.操作对象:属性操作+css操作+标签处理+事件 a.属性操作:可分为三类，1.text（)、html()、val（）；2.attr()、removeAttr()、prop（）；3.addClass（）、removeClass（）、toggleClass（） b.样式操作 c.位置操作 a. $(".fourth").offset().top/left:距离窗口的top和left值 b. $(".fourth").position().top/left:距离定位父级的top和left值 c. $(".fourth").scrollTop(val):滑轮与顶部距离，可带参数，相当于直接赋值 d. $(".fourth").scrollLeft(val):可带参数，相当于直接赋值 e.$(".fourth").height（val）:元素高度 $(".fourth").width（val）:元素宽度 d.标签操作 a. 内部插入：append()/appendTo()/prepend()/prependTo() b. 外部插入:before()/insertBefore()/after()/insertAfter()/replaceWith()/remove()/empty()/clone()
--------------------------------------------------------------
1，JQ是JS写的插件库，说白了，就是一个js文件
2，凡是用jq能实现的，js都能实现，js能实现的，jq却不一定能实现
3，jq的理念：Write less, do more
//jq导入方式2种：本地导入和网页导入
网页导入： https://www.bootcdn.cn/jquery/ 去这个网站复制script标签
本地导入：去网站下载jquery.js文件
-----------------------------------------
视频2-获取对象
2-jq导入
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 //jq导入方式第一种：本地导入 10 <!--<script src="js/jquery.js"></script>--> 11 12 //jq导入方式第二种：网页导入 13 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 14 </body> 15 </html>
---------------------------------------------------------
3-获取对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p class="test" id="test1">我就是我</p> 9 10 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 11 <script> 12 13 //css选择器，标签选择器，$===jQuery 14 console.log($("p").text()); 15 console.log(jQuery("p").text()); 16 17 //class选择器获取class="test"类对象 18 console.log($(".test").text()); 19 20 //class选择器获取id="test1"类对象 21 console.log($("#test1").text()); 22 </script> 23 </body> 24 </html>
--------------------------------------------------------------
4-筛选器4种方法
1. first、last、eq
2.children/find后代--操作子级
3.parent、parents、parentsUntil--操作父级
4.siblings():所有同级但不包括自身
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--筛选器4种--> 9 <!--1. first、last、eq--> 10 <!--2.children/find后代--操作子级--> 11 <!--3.parent、parents、parentsUntil--操作父级--> 12 <!--4.siblings():所有同级但不包括自身--> 13 14 15 <!--例子1--> 16 <!--<div>元素一</div>--> 17 <!--<div>元素二</div>--> 18 <!--<div>元素三</div>--> 19 20 <!--例子2--> 21 <!--父类div6，例子2时不注释代码--> 22 <div class="lizi"> 23 <span>无类名</span><br> 24 <span class="test">有类名</span> 25 <p>无类名</p> 26 <p class="test">有类名</p> 27 <div>无类名</div> 28 <div class="test">有类名</div> 29 </div > 30 31 <!--例子3--> 32 <!--<div class="div1">div1--> 33 <!--<div class="div2">div2--> 34 <!--<div class="div3">div3--> 35 <!--<div class="div4">div4--> 36 <!--<div class="div5">--> 37 <!--div5--> 38 <!--</div>--> 39 <!--</div>--> 40 <!--</div>--> 41 <!--</div>--> 42 <!--</div>--> 43 44 <!--例子4--> 45 <div class="test1">哈哈1</div> 46 <div class="test2">哈哈2</div> 47 <div class="test3">哈哈3</div> 48 <div class="test4">哈哈4</div> 49 50 51 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <!--网页导入jquery--> 52 53 <script> 54 /* 55 // 例子1，筛选器：first、last、eq 56 $("div").first().css("color","red"); //获取div[1]并改变文本颜色 57 $("div").last().text("ok"); //获取div[最后]改变文本 58 $("div").eq(1).css("font-size","30px"); //下标1元素--改变字体大小 59 */ 60 61 62 //例子2，筛选器：children/find:后代---操作子级div，区别：find必须传参数，children传参数和不传参数都可以 63 $("div").children(".test").css("color","blue"); //找到div下类名class="test"的所有子元素，改变文本颜色 64 $("div").find(".test").css("font-size","30px"); //找到div下类名class="test"的所有子元素，改变字体大小 65 $("div").children().css("font-weight","bold"); //并加粗字体 66 67 68 // //例子3，筛选器：父级parent、parents、parentsUntil 69 // $(".div3").parent().css("color","red"); //以div3为标准，parent获取唯一父级和全部子级---div2345改变文本颜色 70 // $(".div3").parents().css("font-size","30px");//以div3为标准，parents获取全部祖先元素+全部后代--div12345都改变字体大小 71 // $(".div4").parentsUntil(".div2").css("font-weight","bold");//以div4为标准，parentsUntil获取除了div2和它的父级---div345加粗字体 72 73 74 //例子4 筛选器：siblings() --操作同级全部元素 75 $(".test3").siblings().css("color","red");//找到div下类名class="test3"的所有同级（不包括自身）----test124改变文本颜色 76 77 </script> 78 </body> 79 </html>
--------------------------------------------------------------
5-选择器和筛选器的区别：
遇到函数时，筛选器在字符拼接上有优势
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li>足球</li> 10 <li>篮球</li> 11 <li>乒乓球</li> 12 <li>羽毛球</li> 13 </ul> 14 15 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 16 <script> 17 //简单操作 18 //选择器 19 $("li:eq(2)").css("color","red"); //获取列表标签li[2]并改变文本颜色 20 21 //筛选器 22 $("li").eq(2).css("font-size","30px");//获取列表标签li[2]并改变字体大小 23 24 //遇到函数时，筛选器操作 25 function f(obj,index) { 26 obj.eq(index).css("font-weight","bold");//获取列表标签li[2]并加粗字体 27 } 28 f($("li"),2); 29 30 <!--总结--> 31 <!--简单操作时，效果是一样的--> 32 <!--但是在函数中操作时，筛选器在字符拼接上有优势--> 33 34 </script> 35 </body> 36 </html>
--------------------------------------------------------------
6-操作对象
a.属性操作:可分为三类，1.text（)、html()、val（）；2.attr()、removeAttr()、prop（）；3.addClass（）、removeClass（）、toggleClass（）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 8 </style> 9 </head> 10 <body> 11 12 <!--例子1--text（)、html()、val（）--> 13 <!--<p><span>我</span>就是我</p>--> 14 <!--<input type="text" value="哈哈" ><br>--> 15 <!--console.log($("p").text()); //获取p标签对象---打印：我就是我--> 16 <!--console.log($("p").html()); //获取p标签对象---打印：<span>我</span>就是我--> 17 <!--console.log($("input").val()); //获取input标签对象的value值---打印：哈哈--> 18 19 20 <!--例子2--> 21 <input type="checkbox" name="hobby" >足球<br> 22 <input type="checkbox" name="hobby">篮球<br> 23 <input type="checkbox" name="hobby">乒乓球<br> 24 25 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 26 27 <script> 28 //1.text（)、html()、val（）；2.attr()、removeAttr()、prop（）；3.addClass（）、removeClass（）、toggleClass（） 29 30 //例子2.attr()、removeAttr() 31 $("input").attr("con1","up");//无则增,有则改 32 $("input").attr("con1","upup");//无则增,有则改 ,添加属性：<input type="checkbox" name="hobby" con1="upup"> 33 console.log($("input").attr("con1"));//获取input标签，查con1属性值：upup 34 // $("input").removeAttr("con1"); //删除con1属性 35 36 //例子3.addClass（），removeClass（），toggleClass（） 37 38 </script> 39 </body> 40 </html>
--------------------------------------------------------------
视频3-操作元素
7-属性操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .test{ 8 color:red; 9 } 10 </style> 11 </head> 12 <body> 13 <h3>标题</h3> 14 <p>段落一</p> 15 <p>段落二</p> 16 <input type="button" value="添加class"> 17 <input type="button" value="删除class"> 18 <input type="button" value="toggleClass"> 19 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 20 21 <script> 22 //例子3.addClass（），removeClass（），toggleClass（） 23 //input[0]button按钮添加点击事件 24 $("input").eq(0).click(function () { 25 $("p").eq(0).addClass("test");//获取p标签[0]，点击button后增加类名：class="test" 26 }); 27 $("input").eq(1).click(function () { 28 $("p").eq(0).removeClass("test");//点击button后移除类名test 29 }); 30 $("input").eq(2).click(function () { 31 $("p").eq(0).toggleClass("test");//类名无责增，有则删 32 }); 33 </script> 34 35 </body> 36 </html>
--------------------------------------------------------------
8-样式操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p>我就我</p> 9 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 10 <script> 11 //单个样式 12 $("p").css("color","red");//获取p标签改变字体颜色 13 14 //多个样式,构建json数据 15 $("p").css({ 16 "height":"200px", //获取p标签，增加宽高背景 17 "width":"200px", 18 "background":"black" 19 }); 20 </script> 21 </body> 22 </html>
--------------------------------------------------------------
9-位置操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .out{ 8 position:relative; /*父级相对定位*/ 9 height:200px; 10 width:200px; 11 background: #52a6f7; 12 } 13 .inn{ 14 position:absolute; /*子级绝对定位，脱离文档，浮动*/ 15 height:100px; 16 width:100px; 17 background:blueviolet; 18 top:20px; /*上边距20px*/ 19 left:20px; /*左边距20px*/ 20 } 21 .scr{ 22 margin-top:20px;/*上外边距20px*/ 23 height:100px; 24 width:100px; 25 border:1px solid red; /*红实线边框*/ 26 /*overflow: hidden; !*超出边框的文本隐藏*!*/ 27 overflow: auto; /*滚动条*/ 28 29 } 30 </style> 31 </head> 32 <body> 33 <div class="out"> 34 <div class="inn">偏移测试</div> 35 </div> 36 <div class="scr"> 37 这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字 38 </div> 39 <button>获取</button> 40 <button>设置</button> 41 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 42 <script> 43 var $obj=$(".inn"); //获取div class="inn"对象，&obj代表jquery变量 44 console.log($obj.offset()); //{top: 28, left: 28} 45 console.log($obj.offset().left+"px");//28px 46 console.log($obj.offset().top+"px");//28px 47 48 console.log($obj.position());//{top: 20, left: 20} 49 console.log($obj.position().left+"px");//20px .inn的style中：left20px; 50 console.log($obj.position().top+"px");//20px 51 52 var $obj1=$(".scr"); //获取div class="scr"对象 53 //不传参获取 54 $("button").eq(0).click(function(){ 55 console.log($obj1.scrollTop()+"px");//点击[获取]button按钮--获取滚动条位置92px 56 }); 57 //传参设置 58 $("button").eq(1).click(function(){ 59 $obj1.scrollTop(129);//设置滚动条移动位置129 60 $obj1.height(200);//设置文本border高度 61 $obj1.width(200);//设置文本border宽度 62 }); 63 console.log($obj1.height());//100 64 console.log($obj1.width());//83 65 </script> 66 </body> 67 </html>
--------------------------------------------------------------
10-标签操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="div1"> 9 <div class="div2">div2</div> 10 <div class="div3">div3</div> 11 <div class="div4">div4</div> 12 </div> 13 14 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 15 <script> 16 17 //标签操作 18 //例子1：append()/appendTo()/prepend()/prependTo()--内部插入 19 $(".div3").append("<p>append</p>");//在目标元素内容后添加一个“<p>append</p>” 20 $(".div3").prepend("<p>prepend</p>");//在目标元素内容前添加一个“<p>prepend</p>” 21 $("<p>appendTo</p>").appendTo(".div3");//将“<p>appendTo</p>”添加到目标元素内容后 22 $("<p>prependTo</p>").prependTo(".div3");//将"<p>prependTo</p>"添加到目标元素内容前 23 24 //例子2：before()/insertBefore()/after()/insertAfter()/replaceWith()/remove()/empty()/clone()--外部插入 25 $(".div3").after("<p>after</p>"); //在目标元素后添加"<p>after</p>" ，--把div3后插入p标签 26 $(".div3").before("<p>before</p>");//在目标元素前添加"<p>before</p>"，--把div3前插入p标签 27 $("<p>insertAfter</p>").insertAfter(".div3");//将"<p>insertAfter</p>"添加到目标元素的后面，--把p标签插入到div3后 28 $("<p>insertBefore</p>").insertBefore(".div3");//将"<p>insertBefore</p>"添加到目标元素的前面，--把p标签插入到div3前 29 30 //例子3：replaceWith()替换标签及内容 31 $(".div2").replaceWith("<p>替换</p><br>");//将div2标签替换为p标签 32 $(".div4").remove();//remove()：移除标签及内容， ---移除div4标签 33 $(".div3").empty(); //empty() ：清空标签内容（标签及标签样式保留）---清除div3标签的内容 34 $(".div3").clone().prependTo(".div1");//clone() 复制----复制div3标签并添加到div1标签内容前 35 36 </script> 37 </body> 38 </html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="div1"> <div class="div2">div2</div> <div class="div3">div3</div> <div class="div4">div4</div> </div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script>
//标签操作 //例子1：append()/appendTo()/prepend()/prependTo()--内部插入 $(".div3").append("<p>append</p>");//在目标元素内容后添加一个“<p>append</p>” $(".div3").prepend("<p>prepend</p>");//在目标元素内容前添加一个“<p>prepend</p>” $("<p>appendTo</p>").appendTo(".div3");//将“<p>appendTo</p>”添加到目标元素内容后 $("<p>prependTo</p>").prependTo(".div3");//将"<p>prependTo</p>"添加到目标元素内容前
//例子2：before()/insertBefore()/after()/insertAfter()/replaceWith()/remove()/empty()/clone()--外部插入 $(".div3").after("<p>after</p>"); //在目标元素后添加"<p>after</p>" ，--把div3后插入p标签 $(".div3").before("<p>before</p>");//在目标元素前添加"<p>before</p>"，--把div3前插入p标签 $("<p>insertAfter</p>").insertAfter(".div3");//将"<p>insertAfter</p>"添加到目标元素的后面，--把p标签插入到div3后 $("<p>insertBefore</p>").insertBefore(".div3");//将"<p>insertBefore</p>"添加到目标元素的前面，--把p标签插入到div3前
//例子3：replaceWith()替换标签及内容 $(".div2").replaceWith("<p>替换</p><br>");//将div2标签替换为p标签 $(".div4").remove();//remove()：移除标签及内容， ---移除div4标签 $(".div3").empty(); //empty() ：清空标签内容（标签及标签样式保留）---清除div3标签的内容 $(".div3").clone().prependTo(".div1");//clone() 复制----复制div3标签并添加到div1标签内容前
</script></body></html>
原文地址：https://www.cnblogs.com/tiantiancode/p/12912683.html
- Java基础-day02-代码题
- 优化算法——拟牛顿法之L-BFGS算法
- 一次性能突发情况的紧急修复(r9笔记第18天)
- Java基础-day02-基础题
- 简单易学的机器学习算法——AdaBoost
- 用脚本来讲一个技术生活的故事 (r9笔记第32天)
- 优化算法——拟牛顿法之BFGS算法
- 对于tnsping的连接超时的功能补充(二)（r9笔记第22天)
- 用深度学习每次得到的结果都不一样，怎么办？
- 优化算法——拟牛顿法之DFP算法
- python SVM 案例，sklearn.svm.SVC 参数说明
- 利用Theano理解深度学习——Auto Encoder
- sudo 出现unable to resolve host 解决方法
- Hadoop学习笔记——Hadoop常用命令
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用snap快速安装RocketChat你的聊天服务器
- CuteOne：一款基于Python3的OneDrive多网盘挂载程序，带会员/同步等功能
- Baidu Sitemap Generator在PHP7无法生成XML的解决方法
- MFC实现的Socket通信
- 128-在线翻译
- C语言CGI编程二 - 编写cmd后门
- android 获取视频第一帧作为缩略图的方法
- Flutter利用注解生成可自定义的路由的实现
- Android实现随意拖动View效果的实例代码
- Kotlin的枚举与异常示例详解
- Android自定义View的使用及其原理知识点总结
- Android中Window的管理深入讲解
- Android UI绘制流程及原理详解
- flutter 轮播图动态加载网络图片的方法
- Kotlin如何捕获上下文中的变量与常量详解