滚动条基本知识: 建议比价华丽的页面使用overflow:scroll这个样式的滚动条,比较好看。...加上一点特别的效果: 4.在样式表文件中定义好一个类...举例: 2,页面有多个div块,如何让...body页面不使用滚动条,只在某个div内使用滚动条 先说说正常显示的,显示滚动条和不显示滚动条,效果图如下: 代码: iframe 中始终显示滚动条:div的滚动即使启动了也没有显示,这种情况可能是没有设置此div的高度或宽度,这是需要设置的。
看下面的步骤 查询员工的思路---ajax 新增员工的思路 ajax使用时需要注意的问题:当我们使用ajax向某个标签中追加数据的时候。...例如点击一个按钮,向一个div追加5条记录,那么下一次点击按钮,又会调用一次ajax请求,向里面追击五条与先前重复的记录,因此每一次在追加之前,需要先将之前追加的记录或者追加的标签属性清除 jquery...例如点击一个按钮,向一个div追加5条记录,那么下一次点击按钮,又会调用一次ajax请求,向里面追击五条与先前重复的记录,因此每一次在追加之前,需要先将之前追加的记录或者追加的标签属性清除 ---- jquery...使用ajax向标签中追加内容后,标签体中不会显示出现追加的内容,但是实际已经存在,那么下一次再次调用ajax时,又会重复上一次的追加行为,那么页面效果就是内容重复追加,解决办法就是在每次调用ajax之前...,先将之前重复追加的内容清除掉 同理如果ajax是追加或者修改了标签的属性,那么对应的被更改的属性就会一直存在,因此下一次调用ajax之前,需要先清除之前追加给标签的属性 我们可以通过给按钮或者其他控件添加自定义属性的方式
/选择第6个div元素 选择集转移 $('#box').prev(); //选择id是box的元素前面紧挨的同辈元素 $('#box').prevAll(); //选择id是box的元素之前所有的同辈元素...:同级追加和自己追加(前面 后面) 步骤: 声明变量保存的节点数据 使用追加函数追加节点 子级追加: append()和appendTo():在现存元素的内部,从后面放入元素 prepend()和prependTo...():在现存元素的内部,从前面放入元素 父级追加: after()和insertAfter():在现存元素的外部,从后面放入元素 before()和insertBefore():在现存元素的外部,从前面放入元素...;2、使用追加函数追加节点 var $li = $('2222') // ul子级追加 // $li.appendTo($('ul'))...ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。
1.3 所有函数都在使用之前定义。 1.4 尽量避免使用全局变量,防止全局作用域被污染。...2.3 追加字符串时,采用 str += "独行冰海"; 而不是str = str + "独行冰海"; 3 页面基本数据交互 3.1 获取标签使用最为快捷的方法,在PC端原生方法当中,速度比较如下:通过...3.5 在删除dom节点之前,需要先移除掉该节点上的事件。 4 性能 4.1 对于功能类似的代码,进行函数的封装,可以使用面向对象的书写方法,提升代码的复用性和扩展性。...4.5 合理使用计时器,防止setInterval造成的内存泄露。 4.6 在设置计时器之后需要考虑计时器的清除,以防止计时器的叠加造成的影响。...5.5 合理使用AJAX中发送数据的方法,当文档中允许使用post或get发送时,优选选用get方法。 6 框架 6.1 jQuery等插件的合理引用,处理常见的浏览器兼容问题。
//获取标签的html内容 var result = $div.html(); alert(result); //设置标签的html内容,之前的内容都会清除...$div.html("你好"); //追加html内容 $div.append("你好") }); 说明:给指定标签追加html内容使用append方法 获取和设置元素属性 1、prop方法的使用 之前使用...意思就是当前端页面和后台服务器进行数据交互就可以使用ajax了。 提示:在html页面使用ajax需要在web服务器环境下运行,一般向自己的web服务器发送ajax请求。...2、ajax的使用 jquery将它封装成了一个$.ajax(),我们可以直接用这个方法来执行ajax请求。
:同级追加和自己追加(前面 后面) 步骤: 声明变量保存的节点数据 使用追加函数追加节点 子级追加: append()和appendTo():在现存元素的内部,从后面放入元素 prepend()和prependTo...():在现存元素的内部,从前面放入元素 父级追加: after()和insertAfter():在现存元素的外部,从后面放入元素 before()和insertBefore():在现存元素的外部,从前面放入元素...;2、使用追加函数追加节点 var $li = $('2222') // ul子级追加 // $li.appendTo($('ul'))...ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。...同步和异步 同步:一件事情做完再去做另一件事情 异步:同时做多件事情 .ajax使用方法 常用参数: 1、url 请求地址 2、type 请求方式,默认是’GET’,常用的还有’POST’ 3、dataType
,它有以下功能: HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX Utilities(实用工具) 很多大公司都在使用...使用大公司CDN好处: 许多用户在访问其它站点时,已经从百度、新浪、谷歌和微软加载过jQuery。当用户访问我的站点时,会从缓存中加载jQuery,这样可以有效减少加载时间!...追加后效果: ?...插入后:hello tomorrow是使用append():插入到div里面了,并与div里面的元素内容相联合;而hello yesterday是使用after():插入待div外面,即div元素的后面...第八部分:jQuery AJAX 了解AJAX:Ajax之路。 其实jQuery Ajax就是将ajax实现代码封装,同时兼顾了不同浏览器的Ajax实现。
Wookmark jQuery插件大致使用position:absolute来重构内容实现瀑布流布局!...var handler = $('#tiles li'); handler.wookmark(options); 如果你在前面已经绑定了事件,在重新执行之前,先清楚一下。...载入的数据 $.ajax({url:"data.html", dataType:"html", success:function(html){ //把新数据追加到对象中...$('#waterfall').append(html); //清除原来的定位 if(handler) handler.wookmarkClear...插件下载地址:https://github.com/desandro/imagesloaded 在wookmark插件引用文件之前引用jquery.imagesloaded.js文件 使用代码: function
1. html方法的使用 jquery中的html方法可以获取和设置标签的html内容 示例代码: $(function(){ var $div = $("#...设置标签的html内容,之前的内容会清除 $div.html("你好"); // 追加html内容...$div.append("你好"); }); div id="div1"> hello div> 说明: 给指定标签追加html内容使用append方法 2....小结 获取和设置元素的内容使用: html方法 给指定元素追加html内容使用: append方法
-- 在需要使用jQuery的页面引入jQuery核心js文件 --> /* id选择器 */...-- 在需要使用jQuery的页面引入jQuery核心js文件 --> // 后代选择器 var...$('岳泽以学习笔记'); 添加元素可以使用以下方法: 方法 说明 prepend(content) 在指定元素内部最前面追加内容,被追加的内容,可以是字符、HTML元素标记。...append(content) 在指定元素内部的结尾插入元素或内容,被追加的内容可以是字符、HTML元素标记。...$.ajax Ajax是一种异步无刷新技术。
div> 浮动的语法: float:left/right /none 取值:left向左浮动,right向右浮动,none取消浮动 现在的浮动,用的最多是让块元素在同一行显示:就是给一行的所有块元素都加上浮动...解决办法:强制追加一个高度(不推荐,因为很多时候盒子的高度是会变化的) */ .box { width: 500px; border: 1px solid #000; }...div class="info">4div> div> div class="gebilaowang">div> image.png 3.清除浮动 就是清除浮动带来的影响,普通元素不受浮动元素影响...a) 给父元素设置高度(不推荐,因为在项目中很多盒子是不固定高度的) b 在父元素后设定空标签进行清除浮动 语法:clear:both image.png c) 设定父元素的overflow image.png...d) 使用伪对象代替空标签 image.png
3.2.1、通过id获取元素 在CSS中经常使用id来控制元素,在jQuery中获取元素时,也使用同样方法。与CSS一样,在id前面加上#号。...$("p").appendTo("div"); //p节点追加到div内后 $("p").prepend("Hello"); //每个p节点内前面追加内容 $("p").prependTo...("div"); //p节点追加到div内前 4.13、DOM外部插入 $("p").after("hello"); //每个p节点同级之后插入内容 $("p").before("在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。 error 在请求出错时调用。...此设置被设置之前beforeSend函数被调用;因此,消息头中的值设置可以在覆盖beforeSend函数范围内的任何设置。
前言上一次我们在若依框架的基础上扩展了微信绑定的功能,下面我们接着来实现扫码登录。...实现过程微信扫码登录基于以上实现思路结合若依框架需要开发如下几个接口并修改页面: uuid 生成 uuid 绑定 openidopenid/uuid 登录登录页追加扫码登录功能uuid 生成在 ruoyi-admin...ajax;}该方法用于在前端轮询随机生成的UUID,如果在缓存中查询到 openid 就使用 openid 查询用户信息,所以需要在 ruoyi-system/src/main/java/com/ruoyi...登录页追加微信扫码登录1.追加接口。...在ruoyi-ui/src/api/system/user.js中追加我们上面写好的接口: // 查询登录用uuidexport function getLoginUUid() { return
3.1.3 避免class与id重名,对于class名使用中划线,而id名遵循小驼峰命名法。 3.1.4 在书写网页样式之前,先进行浏览器默认样式重置。...4.1.3 所有函数都在使用之前定义。 4.1.4 尽量避免使用全局变量,防止全局作用域被污染。...4.2.3 追加字符串时,采用 str += "独行冰海"; 而不是str = str + "独行冰海"; 4.3 页面基本数据交互 4.3.1 获取标签使用最为快捷的方法,在PC端原生方法当中,速度比较如下...4.3.5 在删除dom节点之前,需要先移除掉该节点上的事件。 4.4 性能 4.4.1 对于功能类似的代码,进行函数的封装,可以使用面向对象的书写方法,提升代码的复用性和扩展性。...4.4.5 合理使用计时器,防止setInterval造成的内存泄露。 4.4.6 在设置计时器之后需要考虑计时器的清除,以防止计时器的叠加造成的影响。
概念理解 防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。 节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。...个人踩坑 1、通过理解函数防抖与函数节流的概念后,使用闭包实现函数防抖和节流,没有考虑到对于节流,如果用户在下一次请求之前已输入完毕,但是此时不会再进行请求,则会导致最后输入的文字获取其他事件改变不发请求...比剩余事件略长一些,优先走节流定时器请求; 2、如果使用箭头函数,则不需要保存this。...代码实现 div> div> div> div> <input type...函数防抖") let timer = null; return function(...args){ if(timer){ console.log("清除定时器
⽌⽂档在完全加载(就绪)之前运⾏ jQuery 代码,即在 ⽂档加载完成后才可以对 ⻚⾯进 ⾏操作。...如果在⽂档没有完全加载之前就运⾏函数,操作可能失败 1:起手式 先粘贴JQuery $可以理解成选择,ready加载整个文档,执行function方法 表示整个页面加载完之后执行的代码 2:选中元素...如果不引入JQuery就会报错 2:修改属性 给两个参数就可以修改属性 (1)修改字体大小 (2)修改字体颜色 3:添加元素 (1)append和prepend 注:都是放到了标签内部进行追加...(2)after和before 注:都是放到了标签外部进行追加 4:删除元素 (1)remove (2)empty() ①问题引入 ②区分按钮——引入id 七:应用 1:猜数字游戏 在 ajax 请求中使用 serialize(): 可以在 ajax 请求中直接使用 serialize() 来自动处理表单数据,例如: $.ajax({ url: 'submit.php',
后面有很多svg和js等文件 想要这个服务器的地址,使用network->XHR 它是XMLHttpRequest 。 ajax封装的就是这个XHR对象。...追加标签用反引号,标签里用服务器返回的数据,使用${}接收变量,${}不用引起来 }; }, 这样就出来了: 当我点击python,这里显示Python的内容 当我点击云计算...这个表又关联了一张表 2能看出来 下面红框就是又关联的另一张表: 关联的另一张表是在也面这里进行展示的: 注意res返回的数据中有data属性和data方法,我们使用数据用的是data属性,直接...这里的res.data是个数组,循环数组元素要res.data.forEach(function(item,index){}) 然后要做的是生成子追加到父;子是生成子标签,子标签要用到反引号,子中要用到变量使用...点击之后已经添加了,在原来的基础上追加的,那么需要先清空再创建li标签 魔降风云变
之前的click是只能给已有的元素绑定命令,事件委托则是既给已有的绑定命令,又可以给未来元素绑定命令。...新增节点------- 步骤: 1、声明变量保存节点数据(名字一般为$开头,然后找的标签是什么就叫做什么) 2、使用追加函数将节点变量追加到指定位置 子级加: append(添加的内容) 向末尾加 appendTo...-1.12.4.min.js"> $(function(){ // 新增节点: 步骤 1、声明变量保存节点数据;2、使用追加函数将节点变量追加到指定位置...***js对象(ajax要用调用属性和函数的语法) js的对象就是python中的字典。...在ajax做数据交互的时候,json是用的最多的数据格式 用的最多的是列表、字典、字典列表相互嵌套等等,也有可能是文件 json特点之一:json中有字符串必须是双引号 json可以是文件,后缀名就是json
useEffect Effect Hook 可以在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子) React 中常用的副作用操作: ajax 请求数据获取 设置订阅 / 启动定时器 手动更改真实...// 在两个时刻输出:1.组件挂载,2.监控的值更新 return ( div> useEffect当前值为:{count} div> ); useLayoutEffect...可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前,useLayoutEffect 内部的更新计划将被同步刷新。...useEffect和useLayoutEffect 的区别 useEffect 在全部渲染完毕后才会执行 useLayoutEffect 会在浏览器 layout 之后,painting 之前执行 其函数签名与...useEffect 相同,但它会在所有的 DOM 变更之后同步调用 effect 可以使用它来读取 DOM 布局并同步触发重渲染 在浏览器执行绘制之前 useLayoutEffect 内部的更新计划将被同步刷新
(不再是以往的假数据,模仿数据库进行请求加载) 首先要进行需要渲染的数据(进行循环)进行模板化 div class...%> div...data.length;i++){ var mbString=compiled(data[i]); $(".main").append(mbString)//将得到的模板追加到相应的区域...(main内) } 由于ajax无法跨域,所以请求的地址使用相对路径,循环得到的ajax中data数据,进行模板填充!...之前的使用ejs模板填充,后台需要前台页面修改为ejs,用户访问页面审查元素中所有模板全部被后台解析相应内容,而前台模板的审查元素还是对应的,浏览时候请求ajax后填充模板!