前端基础
前端基础
杨林伟
像火箭科学家一样思考!
展开
-
前端页面调试小技巧(谷歌浏览器)
有时候,我们在调试页面时,会直接右键点击“显示页面源代码”,里面会有整个布局的所有代码,但是如果我们只想看一部分ui的代码,比如只看下面的弹框代码,那该如何实现呢?下面来讲解下:首先在弹框的区域处,右键“查看框架源代码”:然后会打开该页面的源代码,格式:view-source:ip:port/页面名称?参数把前面的view-source去掉,直接就显示弹框里面内容的ui了,调试起来更加...原创 2020-05-08 09:28:19 · 988 阅读 · 0 评论 -
JQuery ajax 参数详解
先看看JQuery ajax的常用写法:$.ajax({ url: "https://yanglinwei.blog.csdn.net/", //请求的url地址 dataType: "json", //返回格式为json async: true, //请求是否异步,默认为异步,这也是ajax重要特性 data: { "ke...原创 2020-03-11 15:56:03 · 429 阅读 · 0 评论 -
12分布式电商项目 - AngularJS快速入门
1.表达式<html> <head> <title>入门小 Demo-1</title> <script src="angular.min.js"></script> </head> <body ng-app> {{100+100}} </body></...原创 2019-07-02 14:40:21 · 386 阅读 · 0 评论 -
11分布式电商项目 - AngularJS简介
简介AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。AngularJS四大特性1.MVC 模式Angular 遵循软件工程的 MVC 模式,并鼓励展现,数...原创 2019-07-02 14:10:54 · 611 阅读 · 0 评论 -
JS 字符串format
例子如下: "<div>我是字符串A我的值是{0} ,我是字符串A我的值是{1} </div>".format("aaaaa", "bbbbb")打印后:我是字符串A我的值是aaaaa ,我是字符串A我的值是bbbbb...原创 2019-06-19 19:38:50 · 5556 阅读 · 0 评论 -
JS unshift() 方法
实例将新项添加到数组起始位置:var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.unshift("Lemon","Pineapple");fruits 将输出:Lemon,Pineapple,Banana,Orange,Apple,Mangounshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。...原创 2019-06-18 17:44:29 · 6378 阅读 · 0 评论 -
zTree 动态参数上传到服务器
代码: otherParam: {"selIdKeys":function(){ var selIdArray = []; $.each(paramTree.getCheckedList(), function (index, ele) { selIdArray.pus...原创 2019-06-17 09:51:17 · 660 阅读 · 0 评论 -
th固定宽度属性
设置属性:fixed="true" <th rowspan="2" width="53px" fixed="true">序号</th>原创 2019-06-13 11:47:01 · 7369 阅读 · 0 评论 -
tr 获取当前行号
直接贴代码:var rowIndex = obj.context.rowIndex;obj为tr对象原创 2019-06-12 16:32:45 · 1769 阅读 · 0 评论 -
js事件拦截
拦截事件,防止传递到下一个Element,直接return false即可;下面附一篇详细的事件拦截教程:https://www.cnblogs.com/jsanntq/p/7681942.html原创 2019-06-10 15:49:48 · 2236 阅读 · 0 评论 -
JS跳转链接的几种方式
1 . 跳转链接 在当前窗口打开window.location.href="http://www.baidu.com" 等价于 <a href="baidu.com" target="_self">go baidu</a>2、跳转链接 在新窗口打开 window.open("http://www.baidu.com") 等价于<a hr...原创 2019-06-06 11:06:08 · 48986 阅读 · 0 评论 -
JQuery 方法回调$callback
先定义回调方法(代码片段):save: function ($callback) { $callback(0) }调用回调方法(代码片段):save( function result(result) { if (result == 0) { successToa...原创 2019-06-05 16:01:19 · 909 阅读 · 0 评论 -
$.ajax GET请求案例(Controller的另外一种写法)
前端JS代码: $.ajax({ type: "GET", url: getRootPath() + "/getDatas.do", contentType: 'application/json;charset=utf-8', //设置请求头信息 data: "devId=" + devId, //必...原创 2019-06-05 10:34:51 · 1867 阅读 · 0 评论 -
$.ajax GET请求案例
前端JS代码: $.ajax({ type: "GET", url: getRootPath() + "/getDatas.do", contentType: 'application/json;charset=utf-8', //设置请求头信息 data: "devId=" + devId, //必...原创 2019-06-05 10:26:14 · 13308 阅读 · 0 评论 -
ztree 设置父节点不能选择
success: function (data, treeId) { //查询完成功初始化事件,data返回的数据,tree树的id 。。。。。。。。 }, beforeCheck: function (treeId, treeNode) { //设置父节点不能被选择 ...原创 2019-05-29 20:31:34 · 5220 阅读 · 0 评论 -
jqgrid清空表格
使用方法:jQuery("#DataTables_Table_1").jqGrid(‘clearGridData’);原创 2019-05-27 16:33:10 · 3126 阅读 · 0 评论 -
前端基础 - JavaScript高级应用(灵活的对象模型)
到目前为止,您应该对 JavaScript 有一个正确的评价了,它绝非只如一个玩具那么简单。事实上,很多人都使用过其对象模型创建过极为复杂、设计良好的面向对象软件。但对象模型尤其是用于继承的对象模型又非您一贯认为的那样。Java 语言是基于类的。当构建应用程序时,也同时构建了可以作为所有对象的模板的新类。然后调用 new来实例化该模板,创建一个新对象。而在 JavaScript 中,所创建的是一...原创 2019-04-29 17:40:56 · 407 阅读 · 0 评论 -
前端基础 - JavaScript高级应用(动态类型)
通过静态类型,编译器可以检查参数和变量的值或针对一个给定操作所允许的返回值。其优势是编译器可以做额外的错误检查。而且静态类型还可以为诸如 IDE 这样的工具提供更多信息,带来其他一些特性,比如更好的代码完成功能。但静态类型也存在着如下一些劣势:必须提前声明意图,这常常会导致灵活性降低。例如,更改一个 Java 类就会更改类的类型,因而必须重新编译。对比之下,Ruby 允许开放的类,但更改一个 ...原创 2019-04-29 17:35:26 · 491 阅读 · 0 评论 -
前端基础 - JavaScript高级应用(高阶函数)
将函数用作函数的参数,或将函数作为值返回 ,这些概念属于高阶函数的域。<head> <script type='text/javascript'> function temperature() { return current } hot = function hot() { alert('Hot.') } cold = ...原创 2019-04-29 17:32:33 · 991 阅读 · 1 评论 -
前端基础 - JavaScript高级应用(用变量操纵函数)
使用 JavaScript 时,我会经常在变量或数组中存储函数 ,例如:<head> <script type='text/javascript'> hot = function hot() { alert('Sweat.') } cold = function cold() { alert('Shiver.') } ...原创 2019-04-29 17:28:14 · 321 阅读 · 0 评论 -
JS 如何快速遍历一个集合
一般我们都是双重for循环去遍历一个集合里面的元素是否为选中。比如:集合A : [1,2,3,4,5]集合B : [1,2]判断集合A里面是否含有集合B?一般我们会先遍历集合A,然后在遍历集合B,如果相等,那么直接就设置属性为含有(比如已选)其实在JS中,可以把集合B变为一个字符串,然后判断B里面是否含有A里面的字段就可以了。变为字符串的方法:JSON.stringify(“集合B”...原创 2019-04-25 20:32:53 · 2848 阅读 · 0 评论 -
JS子页面如何获取父页面的变量、对象、方法
子页面获取父页面的变量:parent.window.变量子页面获取父页面的方法:parent.window.方法子页面获取父页面的对象:parent.window.对象子页面获取父页面的对象里面的变量:parent.window.对象.变量子页面获取父页面的对象里面的方法:parent.window.方法举例:父页面的对象:子页面获取父页面的对象里面的方法:...原创 2019-04-25 20:25:40 · 10378 阅读 · 0 评论 -
设置控件不能点击(pointer-events)
使用方法定义CSS方法:.disabled { pointer-events: none; }js使用: $("#selectorId").addClass("disabled");pointer - events 解析概念性的解析:CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 target。当未指定该属性时,SVG 内容表现如同 vis...原创 2019-04-25 10:05:01 · 1815 阅读 · 0 评论 -
JQuery显示和隐藏控件
设置控件不可用$('.selector').attr("disabled", true);// 让控件不可用 属性$('.selector').attr("disabled", true);// 让控件可用 属性设置控件是否可见(一项形状)$('.selector').css({ "display": "none" });// 让控件不可见 css$('.selector').css(...原创 2019-04-24 16:05:22 · 1264 阅读 · 0 评论 -
前端基础 - 网页调试工具NetWork
如果想知道一个网页调用了那些接口,其实可以借助浏览器开发工具来查看。1)打开自己项目的网站,点击F12可以看到上面有个NetWork选项,这个功能主要使用来查看网络请求的内容2)请求一下数据可以看出,这是刷新后,网页请求(下载)的页面数据,可以在左上角方框里过滤一下(filter)比如,我们想看请求,后缀为.do的文件。3)输入.do过滤一下同时,还可以查看响应的内容还有c...原创 2019-04-13 17:13:18 · 4572 阅读 · 0 评论 -
前端基础 - Bootstrap简单案例
Bootstrap简单案例效果图代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <!--创建视口--> <meta name="viewport" content="width=device-width, initial-scale=1">...原创 2019-03-22 16:29:04 · 2372 阅读 · 2 评论 -
前端基础 - Bootstrap网格系统
Bootstrap网格系统什么是 Bootstrap 网格系统(Grid System)?Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。工作原理网格系统通过一系列包含内容的行和列来创建页面布局。行必须放置在 .conta...原创 2019-03-22 16:20:36 · 436 阅读 · 0 评论 -
前端基础 - Bootstrap简介
Bootstrap简介简介Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。优势移动设备优先: 自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式浏览器支持: 所有的主流浏览器都支持 Bootstrap响应式设计: Bootstrap 的响应式 CSS 能够自适应于...原创 2019-03-22 16:09:34 · 504 阅读 · 0 评论 -
前端基础 - JQuery自定义校验器
JQuery自定义校验器自定义校验器:$.validator.addMethod("校验器的名称",function(value,ele,param){ value:用户录入的值 ele:当前录入的值所在的js对象 param:校验器的取值 return true: 符合校验器规则 return false: 不符合校验器规则 (默认return false...原创 2019-03-22 10:56:16 · 668 阅读 · 0 评论 -
前端基础 - JQuery 简单的表单校验器
JQuery 简单的表单校验器需求及导入步骤导入jquery.js文件导入jquery-validate.js文件(jquery的校验器插件)导入messages_zh.js国际化文件对表单进行校验在页面加载成功后获取表单对象.validate({ rules:{}, //校验规则 messages:{} //自定义提示信息 ...原创 2019-03-22 10:34:13 · 589 阅读 · 0 评论 -
前端基础 - JQuery事件切换(原来还有这种写法)
JQuery事件切换效果图:代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.0.min.js"...原创 2019-03-20 18:38:28 · 376 阅读 · 0 评论 -
前端基础 - JQuery实现左右选中
JQuery实现左右选中效果:代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>左右选中.html</title> <meta http-equiv="content-type" cont...原创 2019-03-20 18:25:10 · 483 阅读 · 0 评论 -
前端基础 - JQuery实现省级联动
JQuery实现省级联动效果图:代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> // 定义二维数组: var arr = new Array(4); arr[0...原创 2019-03-20 17:54:36 · 537 阅读 · 0 评论 -
前端基础 -JQuery 删除节点
JQuery 删除节点删除节点有两个关键字:empty 清空、remove:移除案例:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>03_删除节点.html</title> <meta ht...原创 2019-03-20 17:19:09 · 833 阅读 · 0 评论 -
前端基础 -JQuery 插入节点
JQuery 插入节点两种方式内部插入:append: a.append( c ) 把c插入到a内部的后面prepend: a.prepend( c ) 把c插入到a内部的前面appendTo: a.appendTo( c ) 将a插入到c内部的后面prependTo; a.prependTo( c ) 将a插入到c内部的前面外部插入:aft...原创 2019-03-20 17:16:55 · 528 阅读 · 0 评论 -
前端基础 -JQuery之val,text,html
JQuery 里val,text,html的使用与区别介绍:.html()用为读取和修改元素的HTML标签 对应js中的innerHTML.html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读取第一个元素.text()用来读取或修改元素的纯文本内容 对应js中的innerText.text()用来读取元素的纯文本内容,包括其后...原创 2019-03-20 16:35:28 · 505 阅读 · 0 评论 -
前端基础 -JQuery之遍历
JQuery遍历两种遍历方式:jquery对象.each(function(index,ele){ //this 遍历后的结果 js对象 //ele 遍历后的结果 js对象 //index 索引})$.each(jquery对象,function(index,ele){ //this 遍历后的结果 js对象 //ele ...原创 2019-03-20 15:44:02 · 374 阅读 · 0 评论 -
前端基础 -JQuery之 对属性的操作
JQuery属性操作jquery对属性的操作:jquery对象.attr()获取:jquery对象.attr(“属性名”)赋值:jquery对象.attr(“属性名”,“属性值”)对多个attr属性的操作:jquery对象.attr({“属性1”:“属性值1”,“属性2”:“属性值2”})删除属性:jquery对象.removeAttr(“属性名”);对cl...原创 2019-03-17 11:43:59 · 346 阅读 · 0 评论 -
前端基础 -JQuery之 对样式的操作
JQuery对样式的操作格式: jquery对象.css()获取:jquery对象.css(“属性名”)赋值:jquery对象.css(“属性名”,“属性值”)对多个css属性的操作:jquery对象.css({“属性1”:“属性值1”,“属性2”:“属性值2”})获取位置var $obj=jquery对象.offset()topleft获取宽和高w...原创 2019-03-17 11:40:08 · 318 阅读 · 0 评论 -
前端基础 -JQuery之 表单选择器
JQuery之 表单选择器关键字::input 只要是form的子标签 就会被选中input 直选中标签为input的元素效果图:代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...原创 2019-03-17 11:34:22 · 350 阅读 · 0 评论