JavaScript加强(黑马程序员冯威AJAX视频教程)
- 格式:ppt
- 大小:688.50 KB
- 文档页数:65
让javascript加载速度倍增的⽅法(解决JS加载速度慢的问题)通常我们的⽹站⾥⾯会加载⼀些js代码,统计啊,google⼴告啊,百度同盟啊,阿⾥妈妈⼴告代码啊,⼀堆,最后弄得页⾯加载速度很慢,很慢。
解决办法:换⼀个js包含的⽅式,让javascript加载速度倍增。
把通常加载⽅式:<script src="xxxx.js"></script>改变成:复制代码代码如下:<script type="text/javascript">document.write("<scr"+"ipt src=\"xxx.js\"></sc"+"ript>")</script>举个例⼦:⽐如下⾯是申请的站长统计代码,以前尽管是把它放在页⾯的最底部,但还是拖累页⾯加载进度。
<script src="/stat.php?id=265381&web_id=265381&show=pic" language="JavaScript"charset="gb2312"></script>我们可以把它换成这样的⽅式来加载(任然放在页⾯最底部):复制代码代码如下:<script type="text/javascript">document.write("<scr"+"ipt src=\"/stat.php?id=2651&web_id=2681&show=pic\" language=\"JavaScript\" charset=\"gb2312\"></sc"+"ript>")</script>速度快多了。
jeecg js增强写法Jeecg是一个基于Java的快速开发框架,它提供了丰富的功能和组件来帮助开发人员快速构建企业级应用程序。
在Jeecg中,JS增强写法通常是指使用JavaScript语言对页面进行功能增强和交互优化的一种方式。
下面我将从多个角度来解释Jeecg中JS增强的常见写法。
1. 表单验证增强,在Jeecg中,可以通过编写JavaScript代码对表单进行验证增强。
例如,可以在表单提交之前使用JavaScript来验证用户输入的数据格式是否正确,或者在输入框失去焦点时进行实时验证,以提高用户体验和数据的准确性。
2. 页面交互增强,Jeecg中的页面通常会包含大量的交互功能,比如弹出框、下拉菜单、日期选择等。
通过JavaScript可以实现这些交互功能,使页面更加动态和用户友好。
3. 数据加载增强,在Jeecg中,通过JavaScript可以实现异步加载数据,比如在页面上拉取下拉框选项时,可以通过JavaScript向后端发送异步请求获取数据,并动态更新页面上的下拉框选项。
4. 动态表单增强,Jeecg中的动态表单功能允许用户根据需要动态添加或删除表单字段。
通过JavaScript可以实现动态表单的增删操作,从而提升用户操作的灵活性和便利性。
5. 页面效果增强,除了功能性的增强,JavaScript还可以用来实现页面的视觉效果增强,比如动画效果、图表展示等,提升页面的交互性和吸引力。
总的来说,Jeecg中的JS增强写法涵盖了对表单验证、页面交互、数据加载、动态表单和页面效果等多个方面,通过JavaScript 的灵活运用可以提升页面的功能性和用户体验。
在实际应用中,开发人员可以根据具体需求和业务场景来选择合适的JS增强写法,以达到更好的开发效果和用户满意度。
函数:一段能够自动完成某些功能的代码
定义语法:
function 函数名(形式参数1,形式参数2。
){
//一些代码
函数体
}
调用语法:
函数名(实际参数1,实际参数2。
);
注意:函数在写好之后是不会自己去执行,需要调用函数才会执行
注意:函数执行完成之后会回到调用函数的位置
一般来说函数写好之后不会总去改动函数内部的代码
函数的练习:
求任意一个数为圆的半径,球圆的面积,假设pai为3.14
求已知任意两个值为直角三角形的两条直角边,求斜边
函数名:
注意:不要和系统函数以及关键字相同
建议:函数名要起得有意义
函数的执行:
1,点到firebug的脚本
2,点击某个位置添加断点
3,刷新
4,点击单步进入
作用域:
对于函数来说,函数内部定义的变量叫局部变量
函数外部的变量叫做全局变量
只是针对函数来说的
局部变量:只能在函数内部使用
全局变量:可以放到任何位置去用
平时只会关注局部变量,只要在函数内部定义变量就必须有意识的知道,存在作用域的问题。
【黑马程序员】Javascript视频教程中能大大提高效率的7个技巧黑马程序员视频库网址:(海量热门编程视频、资料免费学习)学习路线图、学习大纲、各阶段知识点、资料网盘免费领取+QQ 1679806262数组去重var arr = [1, 2, 3, 3, 4];console.log(...new Set(arr))>> [1, 2, 3, 4]数组和布尔有时我们需要过滤数组中值为false 的值. 例如(0, undefined, null, false), 你可能不知道这样的技巧var myArray = [1, 0 , undefined, null, false];myArray.filter(Boolean);>> [1]是不是很简单, 只需要传入一个Boolean 函数即可.创建一个空对象有时我们需要创建一个纯净的对象, 不包含什么原型链等等. 一般创建空对象最直接方式通过字面量{}, 但这个对象中依然存在__proto__ 属性来指向Object.prototype 等等.let dict = Object.create(null);dict.__proto__ === "undefined"合并对象在JavaScript中合并多个对象的需求一直存在, 比如在传参时需要把表单参数和分页参数进行合并后在传递给后端const page = {current: 1,pageSize: 10}const form = {name: "",sex: ""}const params = {...form, ...page};/*{name: "",sex: "",current: 1,pageSize: 10}*利用ES6提供的扩展运算符让对象合并变得很简单.函数参数必须ES6中可以给参数指定默认值,确实带来很多便利. 如果需要检测某些参数是必传时,可以这么做const isRequired = () => { throw new Error('param is required'); };const hello = (name = isRequired()) => { console.log(`hello ${name}`) };// 这里将抛出一个错误,因为名字时必须hello();// 这也将抛出一个错误hello(undefined);// 正常hello(null);hello('David');解构赋值时使用别名解构赋值是一个非常受欢迎的JavaScript功能,但有时我们更喜欢用其他名称引用这些属性,所以我们可以利用别名来完成:const obj = { x: 1 };// Grabs obj.x as { x }const { x } = obj;// Grabs obj.x as { otherName }const { x: otherName } = obj;获取查询参数多年来,我们编写粗糙的正则表达式来获取查询字符串值,但那些日子已经一去不复返了; 现在我们可以通过URLSearchParams API 来获取查询参数在不使用URLSearchParams 我们通过正则的方式来完成获取查询参数的, 如下:function getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);return r ? r[2] : null;}使用URLSearchParams 之后:// 假设地址栏中查询参数是这样"?post=1234&action=edit"var urlParams = new URLSearchParams(window.location.search);console.log(urlParams.has('post')); // trueconsole.log(urlParams.get('action')); // "edit"console.log(urlParams.getAll('action')); // ["edit"]console.log(urlParams.toString()); // "?post=1234&action=edit"console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"相比之前使用起来更加容易了.。
Js和Jquery实现ajax长轮询众所周知,HTTP协议是⽆状态的,所以⼀次的请求都是⼀个单独的事件,和前后都没有联系。
所以我们在解决⽹页实时聊天时就遇到⼀个问题,如何保证与服务器的长时间联系,从⽽源源不段地获取信息。
⼀直以来的⽅式⽆⾮有这么⼏种:1、长连接,即服务器端不断开联系,PHP服务器端⽤ob系列函数来不停的读取输出,但是相当耗费服务器资源。
2、Flash socket,flash的as3语⾔,创建⼀个socket服务器⽤来处理信息。
3、轮询,顾名思义就是不停地发送查询消息,⼀有新消息⽴刻更新,但是会有多次⽆⽤请求。
4、长轮询,是轮询的升级版,需要服务器端的配合。
5、websocket,HTML5的通信功能,建⽴⼀个与服务器端的专⽤接⼝ws协议来进⾏通讯,兼容可能成为问题,改天研究⼀下这个。
如图:⽤AJAX发送询问信息,服务器在没有信息要返回的时候进⼊⽆限等待。
由于AJAX异步的特性,PHP在服务器端执⾏等待不会影响到页⾯的正常处理。
⼀旦服务器查询到返回信息,服务器返回信息,AJAX⽤回调函数处理这条信息,同时迅速再次发送⼀个请求等待服务器处理。
与传统轮询相⽐,长轮询在服务器没的返回信息的时候进⼊等待,减少了普通轮询服务器⽆数次的空回复。
可以这样认为,长轮询使服务器每次的返回更有⽬的性,⽽不是盲⽬返回。
长轮询的服务器端实现:聊天信息存储:数据库设计为信息ID(msgid),发送⼈(sender),接收⼈(receiver),信息内容(content),设置senderRead和receiverRead的⽬的是标记信息是否已被读取,读取后改变标记,以区别信息是否已经被读取。
CREATE TABLE `msg` (`msgid` int(11) unsigned NOT NULL AUTO_INCREMENT,`sender` char(16) NOT NULL,`receiver` char(16) NOT NULL,`content` text,`senderRead` tinyint(1) DEFAULT '0',`receiverRead` tinyint(1) DEFAULT '0',PRIMARY KEY (`msgid`)) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;PHP脚本:脚本的主要⽬的是处理来⾃ajax的每次询问,ajax每次询问就查询⼀下数据库,看有没有新的信息,如果没有,刚⽤usleep()函数等待⼀秒后再次查询,直到有新信息插⼊数据库并被查到,脚本返回查询到的数据,并退出⽆限循环,结束脚本。
【黑马程序员】JavaScript视频教程、项目教程Javascript基础加强视频(新)视频网盘:/course/182.html?1912sxkqq资料网盘:https:///s/1tbztac-OiR8vi2PWOv-vWw 提取码:v59b实现效果:1.鼠标放到图片上显示放大镜和详细图,鼠标离开时什么都不显示(效果消失)2.鼠标一直在放大镜的中间,且放大镜随鼠标移动3.放大镜不能出缩列图的盒子4.鼠标放在详细图上详细图消失实现细节:1.大盒子虽然比详细图的盒子宽度小,但是在逻辑上详细图的盒子属于大盒子2.详细图不能使用浮动,因为盒子下面一般会有文字内容3.以父盒子来定位详细图的盒子4.放大镜鼠标选中为十字形5.对图片进行定位才能使图片移动6.使用var evt = event || window.event; //兼容性写法7.用放大镜顶点在盒子中的位置根据比例找到图片的位置,来显示图片8.图片在详细图中的定位为负值<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>京东放大镜</title><style>.box{ /*大盒子虽然比详细图的盒子宽度小,但是在逻辑上详细图的盒子属于大盒子*/width: 350px;height: 350px;position: relative;margin: 100px;border: 1px solid #aaa;}.box .detailed{ /*详细图不能使用浮动,因为盒子下面一般会有文字内容*/ width: 450px;height: 450px;border: 1px solid #aaa;position: absolute;overflow: hidden;left: 365px; /*以父盒子来定位*/top: 0;/*初始设置为不可见*/display: none;}.box .normal .magnfier{width: 150px;height: 150px;top: 0;left: 0;position: absolute;background-color: rgba(0, 0, 255, 0.2);/*也可以用opacity来设置透明度*/cursor: move; /*鼠标选中为十字*/display: none; /*初始设为不可见*/}.detailed img{ /*对图片进行定位使图片移动*/position: absolute;top: 0;left: 0;}</style><script>function $(id){return document.getElementById(id);}window.onload = function(){var box = $('box');var normal = box.children[0];var margnfier = normal.children[1];//获取放大镜的Dom对象,document.getElementsByClassName来获取。