应对后续公司开发需求进行的针对性提炼复习和学习(三)JS部分

最新推荐文章于 2023-09-05 08:32:02 发布

跳动的世界线

最新推荐文章于 2023-09-05 08:32:02 发布

阅读量448

点赞数 1

分类专栏：学习笔记文章标签： js jquery javascript

本文链接：https://blog.csdn.net/Beatingworldline/article/details/108755509

版权

学习笔记专栏收录该内容

68 篇文章 4 订阅

订阅专栏

早期用于本地校验减少服务器负担和传输时间
现用于网页动态效果，也可用在服务器node.js
视频地址：帆软官方JS教程视频
以下代码部分全部都经过验证可以直接在MHM网站F12粘贴使用
🔺常用
alert(""); 弹窗
document.write(""); body输出
console.log(""); 控制台输出
typeof 变量返回代表变量类型的字符串
isNaN 变量测试变量是否是NaN

🔺引入：
H5标签内、head的script标签内、外部引入

🔺写法注意：
严格区分大小写，必须分号结尾
字符串用引号引起来(单双都行不能混用)
\转义特殊字符(str=“我说：“今天天气不错””😉 \n换行 \t制表符

🔺数据类型
基本类型：未定义（Undefined）、空（Null）、布尔(Boolean)、数字(Number)、字符串（String）
引用数据类型：对象(Object)、数组(Array)、函数(Function)
转换：toString()/String() Number()/parseInt()parseFloat

🔺变量/常量：
命名规则：字母数字下划线$组成不能以数字开头，不能是ECMA的关键字、驼峰式，严格区分大小写
申明方法：const/var 常量/变量
作用域：Let 申明局部变量

🔺运算符：算数：+ - * / % ++ – 比较：> < >= <= == != =/! 绝对等于/绝对不等(带类型的判断)
赋值：+= -= *= /= %= 字符串运算符： +连接 +=连接赋值
逻辑运算符： && || ! 三元运算符: 条件?真:假

🔺逻辑控制：选择if switch case for while do while 与java一样 continue结束当前循环 break节输整个循环

🔺对象：
布尔 toString
Date new Date(空/毫秒值/时间字符串/年,月,日,时,分,秒) 方法 getFullYear/Month/Date/Day/Hours/…
数字 isFinite(检测是否无穷大) toFixed(数字转为字符串并指定小数位)
字符串 length charAt(返回指定位置字符) indexOf(返回字符在串中位置) lastIndexOf(从后向前找出现的位置) split(依据给定符号分割串为数组)
slice(start,end 负参与长度相加) substring(start,end 负参转为0 较小参作起始) substr(start,len 负参与长度相加) trim(去除串两边空白)
全局属性和函数 encodeURI(字符串编码为URI) decodeURI(解码URI)
数组定义：var arr = [‘a’,‘b’,‘c’]; 与java不同数组可存放不同类型变量
方法：push(向结尾添加数组项返回长度) unshift(在开头添加数组项返回长度) splice(位置,删除几项,新增项) concat(合并)
pop(删除最后一个数组项返回被删值) shift(删除首个元素返回被删值)
reverse(反转数组元素) sort(按数组项首字母顺序排序) sort(function(a,b){return a-b} 按数字大小排序)
迭代：forEach(被循环执行的函数体)
map()
filter()
find()
findindex()

🔺JSON 数据传输格式 JS对象
基本结构 {键:值 , 键:值…} 键可不加冒号值必须是有效JSON类型(字符串数字对象数组布尔 null) 可嵌套多层链式访问
基础语法 var person = {name:“ZZC” , age:21 , city:‘shanghai’} person.name=‘TJF’ delete person.name
for (x in person){cosole.log(“键:”+x); console.log(“值”+preson[x]);} 循环遍历输出
JSON字符串 JSON.stringify() JSON转为字符串 JSON.parse() 字符串转为JSON

🔺浏览器对象：
Window 代表浏览器窗口所有JS函数、变量、对象自动变为Window成员 window.onload = function(e){alert(e.type);}
window.open(“https://www.baidu.com”) window.close() window.onload = function(e){alert(“qwer”);}
Location location.reload() 刷新页面 location.href=“https://www.baidu.com”
port/href返回当前页面url 也可用于跳转 protocol返回页面协议 hostname返回页面IP pathname返回页面路径
History history.back() history.forward() history.go(1下一页面 -1上一页面)
Timing 以指定时间间隔执行代码即定时事件
setTimeout(指定间隔时间) setInterval(指定循环执行时间) setTimeout(function(){alert(1);},5000);
clearTimeout(对应停止方法) clearInterval(对应停止方法)

🔺函数：function 函数名(参数){函数体}

🔺JQuery框架
JS框架
元素选择器：$("#test") id=test $(“p”)

$(".test") class=“test” $(".test1.test2") class=“test1 test2”
$KaTeX parse error: Expected 'EOF', got '#' at position 12: ("") 点class#̲id标签元素下\dots$ (“元素”).eq(0/1/2/3…)分别获取第几个
属性选择器: $("[href]") [attribute] $("[href= ]") [attribute=value] $("[href!= ]") [attribute!=value] 属性值不等于#V的元素
$("[href^= ]") [attribute^=value] 属性值以#V开头的元素
位置选择器 $(“p:first”) :first 获取第一个

元素 $(“p:last”) $(“p:gt(3)”) :gt(no) 列出index大于3的p元素 $(“p:lt(3)”)…

🔺JQuery效果

    ~隐藏显示：
    hide()     $(元素).hide(slow/fast/毫秒值(speed)，隐藏完成后执行德函数名(callback),函数需触发)
    show()    $(元素).show(slow/fast/毫秒值，显示完成后执行德函数名)
    toggle()  $(元素).toggle(slow/fast/毫秒值，隐藏或显示完成后执行德函数名)
                  $(".header").toggle();   $(".header").toggle(1000);   $(".header").toggle("slow")   $(".header").toggle("fast")   
                  $(".header").toggle(fast,function(){alert(1)})                                             <用MHM网站调出控制台写JS测试效果>

~淡入淡出: 与上方函数写法参数都一致
fadein() 淡入隐藏元素
fadeOut() 淡出可见元素
fadeToggle() 淡入淡出切换
fadeTo() 渐变为给定不透明度
$(".header").fadeOut(); $(".header").fadeIn(); $(".header").fadeToggle(); $(".header").fadeTo(“slow”,0.1);
$(".header").fadeTo(3000,1.0);

   ~动画：
   animate()    $(元素).animate({params参数},speed速度,callback回调函数)
                      $(".header").animate({height:"300px"},1000);             $("".header"").animate({heigth:"100px",top:"-=20px"},0.9);
   连续动画:     多条animate语句连续执行  
   ~链式语法：类似java  对同一元素一次执行多条语句  用,连接
                      for(i=0;i<10;i++){
                      $(".header").fadeTo(1000,0.5).animate({height:"300px",backgroundcolor:"red"},1000).fadeTo(1000,1.0).animate({height:"70px"},1000)}

🔺JQueryHTML
~取值赋值
text() 设置或获取所选元素文本内容(只能获取文本值)
html() 设置或获取所选元素内容(包含HTML标记)
val() 设置或获取表单字段的值
attr() 设置或获取属性值(id class style…) $(".header").attr(“class”,“head”);
$(".header").text(); $(".header").text(“123”); $(".header").html(); $(".header").attr(“class”);
~增删元素内容
append() 在被选元素结尾插入
prepend() 在被选元素开头插入
after() 在被选元素之后插入
before() 在被选元素之前插入
remove() 删除被选元素及子元素
empty() 删除被选元素的子元素
$(".header").empty(); $(".header").remove();
~样式属性操作
$(".header").css(“background-color”); $(".header").css(“background-color”,“yellow”);
~高度宽度获取
$(".header").height(); $(".header").height(100); $(".header").width(); $(".header").width(500);

🔺JQuery遍历
祖先元素
parent() 被选元素的上一级父元素(向上一级遍历DOM树)
parents() 被选元素的所有父元素直到根元素都可加参过滤
同胞元素
siblings() 被选元素所有同胞元素
next() newxtAll() 被选元素下一个/之后所有同胞元素
prev() prevAll() 被选元素上一个/之前所有同胞元素
后代元素
children() 被选元素的直接子元素(向下一级遍历DOM树)
find(filter) 被选元素的所有后代元素直到最后一个后代(必须加过滤条件)
$(".header").parents(); $(".header").siblings(); $(".header").next(); $(".header").prev();

其他：
$(function () {
$("#QUERY").on(“click”, function (e) { // $("#id").on(“click”,“被选择的元素”,function(e){}); 执行function(e). e指窗口事件对象：window.event
resultGrid.dataSource.page(1);
});

报错：Uncaught SyntaxError: missing ) after argument list 报错的原因是在onclick里面的拼接参数的问题

🔺帆软部分：
~获取控件：
参数面板：
_g().parameterEl.getWidgetByName(“控件名称”) .getValue()/setValue() .text() .fireEvent(“click”)调用元素事件 .setVisible(T/F) .setEnable(T/F)
工具栏：
contentPane.toolbar.options.items[工具栏序号] .getValue()/setValue() …
表格主体(填报预览):
contentPane.getWidgetByName(“控件名称”) .getValue()/setValue() …
contentPane.getWidgetByCell(“单元格”)
组件(决策报表的控件、图表、报表块…):
_g().getWidgetByName(“控件名称”) .getValue()/setValue() …
~获取单元格：
通用：
$(“td[id^=单元格号-]”) $(“td[id^=B6-]”) …
填报报表：
contentPane.getCellValue(0,col,row) contentPane.getCellValue(0,0,0,456)第四参数赋值 …
contentPane.curLGP.getCellValue(Cell) contentPane.curLGP.getCellValue(“B4”,null,678)null是固定写法 …
决策报表：
$("#报表块名字").find(“td[id^=‘单元格号-’]”) $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲REPORT0").find(\dots$ (""); iframe.arrt(“src”,url);
var o = {width:800; height:200;}; FR.showDialog(1,o.w,o.h,iframe);
parent.FR.closeDialog()
网页跳转：
FR.doHyperlinkByGet/POST(url,config,target,feature) url网址 configJSON参数 target超链接属性(_blank新窗口_self本页面跳转_dialog对话框) feature对话框大小
代码： var url="…"; var config={地区:“华北”}; var target="_dialog"; var feature; FR.doHyperlinkByGet/POST(url,config,target,feature)
执行帆软的公式：
FR.remoteEvaluate(’=公式’)/"${=公式}"
代码： var a=FR.remoteEvaluate(“format(today(),‘yyyy-MM-dd’)”);
var b=FR.remoteEvaluate(“sum(1,2)”);
var c=FR.remoteEvaluate(“sql(‘FRDemo’,‘select 产品名称 from S产品 where 产品ID=1’,1,1)”);
alert(“a的值为:”+a+"|b的值为:"+b+"|c的值为:"+c);
Msg对象:
alert-提示需点击确定
FR.Msg.alert(title,message,callback) callback是在点击确定后执行的方法前两个参数缺一不可
代码：FR.Msg.alert(“警告”,“错误值”,function(){alert(1)})
confirm-可交互
FR.Msg.confirm(title,message,callback,min_width)
代码：FR.Msg.confirm(“警告”,“确定要删除么？”,function(value){if(value){alert(“即将删除!”);}else{alert(“取消删除!”);}},500)
prompt-可传参
FR.Msg.prompt(title,message,value,callback,min_width)
代码：function test(){var num=arguments[0].toString(); contentPane.setCellValue(“A1”,null,num);}; FR.Msg.prompt(“输入”,“内容”,“输入框默认值”,test,100)
toast-填报提示不需要点击确定(时长需要修改源码重写方法)
FR.Msg.toast(message) FR.Msg.toast(“填报成功”)

    图表接口：
          刷新：
            图表块  FR.Chart.WebUtils.getChart("chart0").dataRefresh()
            单元格  FR.Chart.WebUtils.getChart("A1").dataRefresh()        FR.Chart.WebUtils.getChart("A1","report0").dataRefresh()
            多图标  FR.Chart.WebUtils.getChart("A18").dataRefresh([0,1])      用单元格定位图标位置 同单元格可再限定图表块
          排序：
            图表块  FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0].sortChart(1/-1)
            单元格  FR.Chart.WebUtils.getChart("A1").vanCharts.charts[0].sortChart()        FR.Chart.WebUtils.getChart("A1","report0").vanCharts.charts[0].sortChart()
            多图标  FR.Chart.WebUtils.getChart("A18").vanCharts.charts[1].sortChart()     
          切换(多图表)：
            图表块  FR.Chart.WebUtils.getChart("chart0").showIndexChart(1)
            单元格  FR.Chart.WebUtils.getChart("A18").showIndexChart(1)      FR.Chart.WebUtils.getChart("A18","report0").showIndexChart(1)
          轮播切换(多个多图表时统一切换速度)：
             VanCharts.unifiedSwitchCarouselChart(1/-1);
          显示部分系列接口(针对多图标中某一带系列的表的显示限制设置)：
            图表块  FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0].setSeriesVisible([0,1])
            单元格  FR.Chart.WebUtils.getChart("A1").vanCharts.charts[0].setSeriesVisible([0,1])        FR.Chart.WebUtils.getChart("A1","report0").vanCharts.charts[0].setSeriesVisible([0,1])
            多图标  FR.Chart.WebUtils.getChart("A18").vanCharts.charts[1].setSeriesVisible([0,1])  
          缩放等级接口(地图)：
            图表块  FR.Chart.WebUtils.getChart("chart1").getChartWithIndex(0).setMapZoom({zoomLevel:7,viewCenter:[120,33]})
            单元格  FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0).setMapZoom({zoomLevel:7,viewCenter:[120,33]})
                        FR.Chart.WebUtils.getChart("A1","report0").getChartWithIndex(0).setMapZoom({zoomLevel:7,viewCenter:[120,33]})
            多图表  FR.Chart.WebUtils.getChart("A18").getChartWithIndex(0).setMapZoom({zoomLevel:7,viewCenter:[120,33]})
                      {zoomLevel(缩放等级):0~18,viewCenter(中心点 经度,纬度):[120,33]}