小白入门之前端网页技术JQuery ╰半夏微凉° 2021-07-17 00:45 446阅读 0赞 ### 文章目录 ### * * 异步请求局部刷新 * * 架构 * 技术栈 * 执行过程 * jQuery简介 * * 什么是jQuery * jQuery的语法 * jQuery的优势 * jQuery的使用 * 文档就绪事件 * * 测试 * 总结 * jQuery选择器 * * 基本选择器 * 元素选择器练习 * id选择器练习 * class选择器练习 * 高级选择器-层级选择器 * 高级选择器-基本过滤选择器 * 其他选择器 * jQuery事件 * * 什么是事件 * 事件的语法 * 常用事件 * 事件练习 * json * * 概念 * 作用 * 语法 * 转换工具 * 测试 * ajax * * 概念 * 原理 * 格式 * ajax.html * 扩展： * * json和js对象的区别 ## 异步请求局部刷新 ## ### 架构 ### **主流方式：** ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jzQG1CPR-1622609771127)(RackMultipart20210602-4-1s7eaya\_html\_9fd13dfcebd9ac4.png)\]][img-jzQG1CPR-1622609771127_RackMultipart20210602-4-1s7eaya_html_9fd13dfcebd9ac4.png] ### 技术栈 ### * JavaScript 形成交互 * jQuery 封装JavaScript，代码更加简洁高效 * ajax 异步请求 * json 数据传输 * Web中间件(tomcat) 处理请求和响应 * mysql数据库 存取数据 ### 执行过程 ### 用户页面中触发ajax请求，访问后端服务器，Web中间件拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前主流返回数据为json字符串。在回调callback的方法中解析json中的数据，最终回显到页面上。通常我们使用jquery封装过的ajax，写法更加简洁灵活。 ## jQuery简介 ## ### 什么是jQuery ### jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码 轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架 jQuery的核心思想："写的更少，但做的更多" 通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。 **jQuery**\*\* 库包含以下功能：\*\* * HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素) * HTML 元素操作 * CSS 操作 * HTML 事件函数 * JavaScript 特效和动画 * HTML DOM 遍历和修改 * AJAX ### jQuery的语法 ### jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 基础语法是：$(selector).action() $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class="test" 的所有元素 $("#test").hide() - 隐藏所有 id="test" 的元素 ### jQuery的优势 ### 1,简化了js的写法，用$替代了document.getXxx() 2,可以像CSS选择器一样非常方便的获取元素 3,可以通过修改css样式控制页面的效果 var ele = document.getElementById("username"); //js var ele = $("#username"); // jQuery var ele = document.getElementsByTagName("p"); //js var ele = $("p"); //jQuery var ele = document.getElementsByName("username"); //js var ele = $('input[name="username"]'); // jQuery var ele = document.getElementsByClassName("info"); //js var ele = $(".info"); // jQuery $("div").css("background", "red"); $("div").css({ "background" : "blue", "border" : "2px solid red", "font-size" : "30px" }); ### jQuery的使用 ### jQuery其实就是一个JS文件,如需使用 jQuery,需要下载，然后使用 HTML 的script标签引用它,应该位于页面的head 部分。 <!-- 引入jQuery的函数库文件 --> <script src="jquery.min.js"></script> 或者： <script src="jquery.js"></script> ## 文档就绪事件 ## 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。 ### 测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq</title> <!-- 引入jQuery文件 --> <script src="jquery-1.8.3.min.js"></script> <!-- 嵌入js代码 --> <script> // 方式1:还没加载到h1元素,a是null,调用null的资源f12时会出问题 // var a = document.getElementById("p1"); // alert(a); //null // alert(a.innerHTML); // 方式2: 使用jQuery的文档就绪函数,整个DOM都加载完了才执行 //jQuery语法:$(选择器).action{ } ; $(document).ready(function(){ var a = document.getElementById("p1"); alert(a.innerHTML); }); // 方式3: 简写 $(function(){ var a = document.getElementById("p1"); alert(a.innerHTML); }); </script> </head> <body> <h1 id="p1">文档就绪</h1> </body> </html> ### 总结 ### 什么时候该使用文档就绪事件函数？ 如果在获取元素时，获取元素的代码执行的时机（时间）比元素本身加载的时间还要早，如果元素还没有加载到就获取，必然是获取不到的！ 将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载过了，再获取任何元素都能获取到！ ## jQuery选择器 ## jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 [CSS 选择器][CSS]，除此之外，它还有一些自定义的选择器。 jQuery 中选择器语法：$() ### 基本选择器 ### 元素选择器: $("div") -- 选中所有的div元素 $("span") -- 选中所有的span元素 id 选择器 $("#one") -- 选中id为one的元素 $("p#demo") -- 选取所有 id="demo" 的p元素 class 选择器 $(".mini") -- 选中所有class值为mini的元素 $(".test") -- 选中所有class值为test的元素 属性选择器 $("[href]") -- 选取所有带有 href 属性的元素 $("[href='#']") -- 选取所有带有 href 值等于 "#" 的元素 ### 元素选择器练习 ### 需求:点击按钮,隐藏段落内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> <!-- 引入jQuery文件 --> <script src="jquery-1.8.3.min.js"></script> <!-- 嵌入js代码 --> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> <button>点我</button> </body> </html> ### id选择器练习 ### 需求:点击按钮,隐藏指定id的内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> <!-- 引入jQuery文件 --> <script src="jquery-1.8.3.min.js"></script> <!-- 嵌入js代码 --> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p>这是一个段落</p> <p id="test">这是另外一个段落</p> <button>点我</button> </body> </html> ### class选择器练习 ### 需求:点击按钮,隐藏指定class的内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> <!-- 引入jQuery文件 --> <script src="jquery-1.8.3.min.js"></script> <!-- 嵌入js代码 --> <script> $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">这是一个标题</h2> <p class="test">这是一个段落。</p> <p>这是另外一个段落。</p> <button>点我</button> </body> </html> ### 高级选择器-层级选择器 ### $("div span") -- 选中所有div元素下的所有span元素 $("#one div") -- 选中id为one的元素下的所有div元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> <!-- 引入jQuery文件 --> <script src="jquery-1.8.3.min.js"></script> <!-- 嵌入js代码 --> <script> $(function(){ $("button").click(function(){ // 层级选择器,选中div下的span,隐藏 $("div span").hide(); }) $("button").click(function(){ //层级选择器,选中id=one下的div,隐藏 $("#one div").hide(); }) }); </script> </head> <body> <button>点我</button> <span id="one"> <div>我是div1</div> <div>我是div2</div> </span> <div> <a href="#">链接</a> <span>我是span1</span> <span>我是span2</span> </div> </body> </html> ### 高级选择器-基本过滤选择器 ### (1)选中第一个div元素 $("div:first") $("div:eq(0)") $("div").eq(0) (2)选中最后一个div元素 $("div:last") $("div:eq(-1)") $("div").eq(-1) //点按钮,隐藏按钮自己 $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); }); //点按钮,隐藏第一个div $(function(){ $("button").click(function(){ // 选中第一个div $("div:first").hide(); }) }); ### 其他选择器 ### 过滤选择器 $("li:first") //第一个li $("li:last") //最后一个li $("li:even") //挑选下标为偶数的li $("li:odd") //挑选下标为奇数的li $("li:eq(4)") //下标等于 4 的li(第五个 li 元素) $("li:gt(2)") //下标大于 2 的li $("li:lt(2)") //下标小于 2 的li 内容过滤选择器 $("div:contains('Runob')") // 包含 Runob文本的元素 $("td:empty") //不包含子元素或者文本的空元素 可见性过滤选择器 $("li:hidden") //匹配所有不可见元素，或type为hidden的元素 $("li:visible") //匹配所有可见元素 属性过滤选择器 $("div[id]") //所有含有 id 属性的 div 元素 $("div[id='123']") // id属性值为123的div 元素 $("div[id!='123']") // id属性值不等于123的div 元素 状态过滤选择器 $("input:enabled") // 匹配可用的 input $("input:disabled") // 匹配不可用的 input $("input:checked") // 匹配选中的 input $("option:selected") // 匹配选中的 option 表单选择器 $(":input") //匹配所有 input, textarea, select 和 button 元素 $(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同 $(":password") //所有密码框 $(":radio") //所有单选按钮 $(":checkbox") //所有复选框 $(":submit") //所有提交按钮 $(":reset") //所有重置按钮 $(":button") //所有button按钮 $(":file") //所有文件域 ## jQuery事件 ## ### 什么是事件 ### 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见的DOM事件有很多: ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OT1mLgQ3-1622609771155)(RackMultipart20210602-4-1s7eaya\_html\_41934a8b8ef4f294.png)\]][img-OT1mLgQ3-1622609771155_RackMultipart20210602-4-1s7eaya_html_41934a8b8ef4f294.png] ### 事件的语法 ### 页面中指定一个点击事件： $("p").click(); $("p").click(function(){ // 事件触发后执行的代码!! }); ### 常用事件 ### click() -- 单击事件 $("p").click( function(){ $(this).hide(); }); dblclick() -- 双击事件 $("p").dblclick(function(){ $(this).hide(); }); mouseenter() -- 鼠标指针穿过元素 $("#p1").mouseenter(function(){ alert('鼠标移到了 id="p1" 的元素上!'); }); mouseleave() -- 鼠标指针离开元素 $("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); }); hover() -- 光标悬停事件 $("#p1").hover( function(){ alert("你进入了 p1!"); }, //当鼠标移动到元素上时触发 function(){ alert("拜拜! 现在你离开了 p1!"); //当鼠标移出这个元素时触发 }); 可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); ### 事件练习 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ // 鼠标指针穿过元素会触发 $("button").mouseenter(function(){ alert("您经过了button"); }) // 鼠标指针离开元素会触发 $("div").mouseover(function(){ alert("您离开了div.."); }) }) </script> </head> <body> <button ondblclick="alert(1);">点我</button> <div>div1</div> <div>div2</div> <div>div3</div> </body> </html> ## json ## ### 概念 ### ajax往往要完整应用还会配合一个技术：JSON，那什么是JSON呢？ JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation） JSON(JavaScript Object Notation，JS 对象简谱) 起名不咋地，非常拗口，我们就记住它是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）。 ### 作用 ### JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。 ### 语法 ### JSON数据: var a = "firstName" : "John" JSON 对象: var a = '{ "firstName":"John" , "lastName":"Doe" }' JSON 数组: var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]'; ### 转换工具 ### 使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串 和 原生 JavaScript 对象互转. 给服务器发送数据: 将JS对象转成JSON字符串 JSON.stringify(Js对象) 接受服务器的数据: JSON字符串转成JS对象 JSON.parse("json字符串") ### 测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>json</title> <script> //json用来在浏览器和服务器之间做数据传输,轻量级,格式简单明了. //JSON是js的内置对象,用来把json类型的字符串和js对象互转 //json类型的字符串---{ "k1":"v1", "k2":"v2", "k3":"v3" } function jschuan(){ var jsonchuan = '{ "k1":"v1", "k2":"v2", "k3":"v3" }'; document.getElementById("h").innerHTML=jsonchuan; } function chuan2js(){ var text='{ "k1":"v1", "k2":"v2", "k3":"v3" }'; console.log(text); //从服务器收到的数据都是字符串,转成js对象,用js语法解析属性/方法 var jsobj = JSON.parse(text);//串转js对象,就可以写js代码解析数据 console.log(jsobj); document.getElementById("d").innerHTML=jsobj.k2; } function js2chuan(){ var obj = { "k1":"v1", "k2":"v2", "k3":"v3"}; console.log(obj); //把浏览器的数据发给服务器,服务器只要json串 var text = JSON.stringify(obj);//js对象转成串 document.getElementById("p1").innerHTML=text; console.log(text); console.log(text.length); } </script> </head> <body> <p id="p1" onclick="js2chuan();">我是p</p> <div id="d" onclick="chuan2js();">我是div</div> <h1 id="h" onclick="jschuan();">我是h1哦</h1> </body> </html> ## ajax ## ### 概念 ### Ajax 即Asynchronous Javascript And XML( **异步的** ) Ajax并不是一种新的编程语言，而是多种技术的综合应用 Ajax是 **客户端** 的技术，它可以实现 **局部刷新** 网页 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 ### 原理 ### AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bJcZLtUh-1622609771162)(RackMultipart20210602-4-1s7eaya\_html\_a3c5ab779ef32318.png)\]][img-bJcZLtUh-1622609771162_RackMultipart20210602-4-1s7eaya_html_a3c5ab779ef32318.png] ### 格式 ### 七个参数： $.ajax({ type: //要使用的请求方式 url: //要使用的请求路径 contentType: //要传递的数据类型 data: //要拼接的数据 dataType: //数据类型 success: function(data){ //成功时的方案 }, error: function(data){ //失败时的方案 } }) ### ajax.html ### <!DOCTYPE html> <html> <head> <script src="js/jquery-1.8.3.min.js"></script> <script> $(function(){ //文档就绪事件 $.ajax({ //发起Ajax请求数据 type: "POST", url: "http://p.3.cn/prices/mgets", contentType: "application/json;charset=utf-8", data: { //拼接的参数 "skuIds": "J_100003717483" }, dataType: "jsonp", success: function(data) { //返回的结果 //[{"cbf":"0","id":"J_100003717483","m":"10000.00","op":"2499.00","p":"2099.00"}] $('#p1').text("返回数据：" + JSON.stringify(data)); $('#p2').text("商品编号：" + data[0].id); $('#p3').text("商品价格： " + data[0].op); }, error: function(data) { alert("提交失败" + JSON.stringify(data)); } }); }); </script> </head> <body> <p id="p1">这是p1</p> <p id="p2">这是p2</p> <p id="p3">这是p3</p> </body> </html> ## 扩展： ## ### json和js对象的区别 ### json字符串: { "id":"100","name":"tony","salary":"30000" } js对象：{ "id":100,"name":"tony","salary":30000 } 可以看出js对象中value值如果是整数，小数，无需加双引号 * 含义不同，json是一种数据格式，js表示类的实例 * 传输：json用于跨平台、跨网络传输，速度快；js不能传输 * 展现：json键值对方式，值是字符串不能是对象方法函数；js值不一定加双引号，值可以是对象、函数、字符串等 * 转换：JSON.parse(jsonStr) JSON已经作为浏览器内置对象，eval(json)；JSON.stringify(obj) [img-jzQG1CPR-1622609771127_RackMultipart20210602-4-1s7eaya_html_9fd13dfcebd9ac4.png]: /images/20210716/f0f3afd6845a4dc8bacdc2742dd24f5b.png [CSS]: https://www.runoob.com/cssref/css-selectors.html [img-OT1mLgQ3-1622609771155_RackMultipart20210602-4-1s7eaya_html_41934a8b8ef4f294.png]: /images/20210716/bf6ce9d644db4ee2ab24fcecf0f5f9a3.png [img-bJcZLtUh-1622609771162_RackMultipart20210602-4-1s7eaya_html_a3c5ab779ef32318.png]: /images/20210716/ab45a8ca626c4025a102441c2f4fb0a8.png
相关 小白入门之前端网页技术 Vue进阶 文章目录 自定义组件 概述 项目结构 创建组件Car.vue 修改App 阳光穿透心脏的1/2处/ 2021年09月11日 03:22/ 0 赞/ 444 阅读
阳光穿透心脏的1/2处
亦凉
╰+攻爆jí腚メ
还没有评论，来说两句吧...