-
第十三章 初识jQuery
初识jQuery
jQuery简介
jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more
jQuery能做什么
访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
优势
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持获取jQuery
进入jQuery官网：http://jquery.com
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RsSv1ocu-1656926153089)(D:\课件\笔记\初识jQuery.assets\image-20220621081549789.png)]](https://1000bd.com/contentImg/2022/07/05/123752106.png)
在页面中引入jQuery
<script src="js/jquery.js"></script>- 1
jQuery基本语法
$(document).ready()与window.onload类似，但也有区别
** ** window.onload $(document).ready() 执行时机 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 编写个数 同一页面不能同时编写多个 同一页面能同时编写多个 简化写法 无 $(function(){ //执行代码 }) ; <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery.js"></script> <script type="text/javascript"> //文档加载完毕后执行 function a(){ alert("文档加载完毕"); } //文档加载之后执行 $(document).ready(function(){ alert("文档加载完毕"); }); //简写 $(function(){ alert("文档加载完毕"); }); </script> </head> <body onload="a()"> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
jQuery语法结构
$(selector).action() ; 工厂函数$()：将DOM对象转化为jQuery对象 选择器 selector：获取需要操作的DOM 元素 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法- 1
- 2
- 3
- 4
使用addClass( )方法为元素添加样式
使用css( )方法设置元素样式
使用show( )、hide( ) 方法设置元素的显示和隐藏<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>追加样式</title> <script src="js/jquery.js"></script> <style> .a{ background-color: red; } p{ display: none; } </style> <script> $(function(){ //li标签.单击事件(执行内容) $("li").click(function(){ //$(this) 指的是触发事件的元素 $(this).addClass("a");//addClass 相当于给元素添加一个class="a" }); //鼠标移入,字体变大 $("li").mouseover(function(){ //$(this).css("font-size","50px"); $(this).css({"font-size":"50px","background-color":"yellowgreen"}); }); $("a").hide(); $("p").show(); }); </script> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <a href="#">隐藏</a> <p>显示</p> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>当当网我的订单页</title> <link type="text/css" rel="stylesheet" href="css/dangdang.css"> <script src="js/jquery.js"></script> <script> $(function(){ $("a").mouseover(function(){ $("#menu-ul").show(); }); $("a").mouseout(function(){ $("#menu-ul").hide(); }); }); </script> </head> <body> <div id="menu" class="pos"> <a href="#">我的当当</a> <ul id="menu-ul"> <li><a href="#">我的订单</a></li> <li><a href="#">我的收藏</a></li> <li><a href="#">我的礼品卡</a></li> <li><a href="#">我的积分</a></li> <li><a href="#">我的余额</a></li> </ul> </div> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
jQuery代码风格
“$”等同于“ jQuery ”
链式操作
隐式迭代<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> <script type="text/javascript"> function a(){//使用js设置所有的li标签样式,需要遍历数组,单独设置每一个的样式 var liss=document.getElementsByTagName("li"); for(i=0;i<liss.length;i++){ liss[i].style.backgroundColor="#666"; } } $(function(){ //链式操作 $("h2").css("background-color","yellowgreen").next().css("background-color","coral") //隐式迭代,不需要遍历元素 $("li").css("background-color","blueviolet"); }); </script> </head> <body> <h2>链式操作</h2> <h3>hello</h3> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
DOM模型
浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构
DOM对象和jQuery对象
DOM对象：直接使用JavaScript获取的节点对象
jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
DOM对象转jQuery对象
使用 ( ) 函 数 进 行 转 化 ： ()函数进行转化： ()函数进行转化：(DOM对象)
jQuery对象转DOM对象
jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fATXZhB0-1656926153092)(D:\课件\笔记\初识jQuery.assets\image-20220621141741059.png)]](https://1000bd.com/contentImg/2022/07/05/123753839.png)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dom对象</title> <script src="js/jquery.js"></script> <script type="text/javascript"> function a(){ //js获取dom var doms=document.getElementById("h1"); //jq对象 var $doms=$("#h1"); //dom对象没有办法直接使用jq的方法 //dom.css("background-color","red"); //jq对象也没有办法直接使用js的方法 //$doms.innerHTML="asdasdas"; //js通过$()转换jq对象 var $dom1=$(doms); $dom1.css("background-color","red"); //Jq转js var dom2=$dom1[0]; dom2.innerHTML="asdasdas"; var dom3=$dom1.get(0); dom3.innerHTML="阿萨德"; } </script> </head> <body onload="a()"> <h1 id="h1">啊飒飒</h1> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
制作广告图片轮播切换效果
ul, li { padding: 0; margin: 0; list-style: none; } .adver { margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; } ul { position: absolute; bottom: 10px; z-index: 100; width: 100%; text-align: center; } ul li { display: inline-block; font-size: 10px; line-height: 20px; font-family: "���ź�"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff; } .arrowLeft, .arrowRight { position: absolute; width: 30px; background: rgba(0, 0, 0, 0.2); height: 50px; line-height: 50px; text-align: center; top: 200px; z-index: 150; font-size: 28px; font-weight: bold; cursor: pointer; display: none; } .arrowLeft { left: 10px; } .arrowRight { right: 10px; } li:nth-of-type(1) { background: orange; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 广告图片轮播切换</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script> <script src="js/adver.js"></script> </head> <body> <div class="adver"> <img src="img/adver01.jpg" alt=""> <img src="img/adver02.jpg" alt=""> <img src="img/adver03.jpg" alt=""> <img src="img/adver04.jpg" alt=""> <img src="img/adver05.jpg" alt=""> <img src="img/adver06.jpg" alt=""> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="arrowLeft"><</div><div class="arrowRight">></div> </div> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
var ii=1;//默认第几张图片 $(function(){ //开始轮播 var setInt=setInterval("lb()",1000); //鼠标移入div显示 左右按钮 $(".adver").mouseover(function(){ $(".arrowLeft").show(); $(".arrowRight").show(); clearInterval(setInt); }); //鼠标移出 隐藏左右按钮 $(".adver").mouseout(function(){ $(".arrowLeft").hide(); $(".arrowRight").hide(); setInt=setInterval("lb()",1000); }); /**数字按钮*/ $("li").click(function(){ //把所有的都改为同一个颜色 $("li").css("background-color","#333333"); $(this).css("background-color","orange"); //隐藏所有图片 $("img").hide(); //显示当前对应的图片 ii=$(this).index()+1; $("img:nth-of-type("+ii+")").show(); }); /**右*/ $(".arrowRight").click(function(){ lb(); }); /**左*/ $(".arrowLeft").click(function(){ //隐藏所有图片 $("img").hide(); //显示当前对应的图片 if(ii==1){ ii=$("img").length; }else{ ii--; } //显示当前图片 $("img:nth-of-type("+ii+")").show(); $("li").css("background-color","#333333"); $("li:nth-of-type("+ii+")").css("background-color","orange"); }); }); function lb(){ //隐藏所有图片 $("img").hide(); //显示当前对应的图片 if(ii<$("img").length){ ii++; }else{ ii=1; } //显示当前图片 $("img:nth-of-type("+ii+")").show(); $("li").css("background-color","#333333"); $("li:nth-of-type("+ii+")").css("background-color","orange"); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
-
相关阅读:
Web前端开发技术课程大作业——南京旅游景点介绍网页代码html+css+javascript
Web前端vueDemo—实现天气预报功能（四）
使用 K3d 在 Docker 中运行 Kubernetes 集群
（原创）【B4A】一步一步入门06：Button，背景图片、渐变、圆角、FontAwesome（控件篇02）
uni-app点击复制指定内容（点击复制）
Fink--3、Flink运行时架构（并行度、算子链、任务槽、作业提交流程）
Hive的介绍及部署搭建
武汉光华芯CJC5340 ADC 数字音频系统模拟数字转换器
算法题每日一练（一）
rpm 系 linux 系统中 /etc/yum.repo.d/ 目录下的 .repo 文件中的 $releasever 到底等于多少？
- 原文地址：https://blog.csdn.net/qq_36827283/article/details/125604577