javascript的一些小技巧
(1)同时按Ctrl+Enter提交本表单
在多行文本域增加onkeydown 事件
com.whuang.hsj.ctrlEnter2Submit的实现如下:
/***
*
1. @param event : textarea onkeydown event
2. @param formElement : textarea itself
*/
com.whuang.hsj.ctrlEnter2Submit= function (event,formElement) {
if(event.keyCode == 13 && event.ctrlKey) {
var $thisForm=com.whuang.hsj.getForm(formElement);
var submitBtn=$thisForm.find(":button:first");
submitBtn.get(0).click();
}
};
js方法执行流程:先通过com.whuang.hsj.getForm 方法获取textarea所在的表单,然后获取表单下的第一个按钮,最后触发按钮的onclick事件.
注意:”:button:first” 表示第一个按钮,同理”:input:first”表示第一个表单控件(输入框,按钮,复选框等)
(2)实现渐变地回到顶部
“回到标题”的html代码如下:
<a style="float: right;" class="aHref" onclick="anchorGoWhere('title_loc_bbs')">回到标题</a>
anchorGoWhere是js方法,实现如下:
var anchorGoWhere = function (anchorName) { $("#subPageBBS .subContent").animate({scrollTop: $("a[name=" + anchorName + "]").offset().top}, 1000); };
说明:$(“#subPageBBS .subContent”) 是滚动条所在的div
(3)从jquery对象获取原生的dom元素
jquery对象.get(0) .例如
$navHrefComment.get(0).onclick = function () { bbs.addBBSComment(cardid2); };
(4)textarea字符长度限制
/* 1. textarea字符长度限制 */ isMaxLen = function(event) { var obj = event.srcElement?event.srcElement:event.target; var target = $("#"+obj.getAttribute("id").replace(".","\\.")); var maxLength = target.attr("maxlength"); if (target.val().length > maxLength) { target.blur(); target.val(target.val().substring(0, maxLength)); target.focus(); } };
(5)回车+CTRL实现换行
/* * 回车+CTRL换行 * */ newline = function(event) { if(event.keyCode == 13 && event.ctrlKey){ if (document.selection) { var selectText = document.selection.createRange(); if(selectText){ if(selectText.text.length > 0) selectText.text += "\r\n"; else selectText.text = "\r\n"; selectText.select(); } } else{ var obj = event.srcElement?event.srcElement:event.target; obj.value += "\r\n"; } } };
(6)使遮罩层的背景图片不随滚动条移动
之前显示遮罩层时,背景图片总是随滚动条的移动而改变,如下图:
这样就存在一个问题,就是内容太长时,有滚动条,而我设置的背景图片的位置在垂直和水平居中,就导致有时候,显示遮罩层,但是看不到背景图片(转圈的图片,提示等待),导致用户体验不好.
那么如何让背景图片始终在可视区域的居中位置呢?
终于找到方法了(参考http://www.cnblogs.com/wangmuxing/p/4369282.html)
使用background-attachment:fixed;属性
(7)jquery 获取javascript脚本内容
$('#scriptContent').text()
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="jquery-1.11.1.js" id="scriptContent2"></script> <script type="text/javascript" id="scriptContent"> var jsonp2 = function () { $.ajax({ url: "http://localhost/cors/complex?callback=?", dataType: "jsonp", success: function (data) { $('#resultDiv').html(JSON.stringify(data)); } }); }; function mycallback(data) { alert("Here: " + data.name); } var getScriptContent = function (e) { alert($('#scriptContent').text()); } </script> </head> <body> <input type="button" value="jquery jsonp" onclick="jsonp2()"/> <input type="button" value="获取脚本内容" onclick="getScriptContent()"/> <div> <div id="resultDiv"></div> </div> </body> </html>
(8)动态设置script脚本内容
var script = document.createElement('script'); script.type = 'text/script'; script.text = 'alert(123)';
参考:
js 一些小技巧
js 一些小技巧 2
http://segmentfault.com/a/1190000002810487
相关推荐
下面,我们将深入探讨一些实用的JavaScript实践小技巧,这些技巧可以帮助开发者提升代码效率、可读性和维护性。 1. **立即执行函数表达式(IIFE)**:在JavaScript中,IIFE是一种常见的封装技术,避免全局变量污染...
基于javaScript开发的控制台操作小技巧+非常适合小白入门 基于javaScript开发的控制台操作小技巧+非常适合小白入门 基于javaScript开发的控制台操作小技巧+非常适合小白入门 基于javaScript开发的控制台操作小...
根据给定的文件信息,以下是对“js200多个小技巧”中提及的部分知识点的详细解析: ### 1. HTML事件与JavaScript交互 - **`onBlur`**:当元素失去焦点时触发的事件。在示例中,用于检测输入框是否为空,并在失去...
在本篇标题为“Javascript实用小技巧”的文章中,作者分享了一系列实用的JavaScript代码片段,旨在帮助学习JavaScript的人士掌握一些提高编程效率的技巧。文章内容涉及了JavaScript的Function对象的apply和call方法...
在JavaScript编程中,掌握一些常用的小技巧可以极大地提高开发效率和代码质量。以下是一些从网络上整合的实用技巧,特别适合初学者学习。 1. 事件源对象:`event.srcElement` 可以获取触发事件的元素,而 `event....
以下是一些关于JS的实用小技巧,对于初学者来说,掌握这些知识点将有助于提升编程效率和理解力。 1. `document.write("")`:这是一个常用的输出语句,常用于在页面加载时动态插入HTML内容。 2. 注释:JS支持单行...
### 常用的一些JavaScript小技巧详解 在前端开发领域,JavaScript是不可或缺的编程语言,其灵活多变的特性使得开发者能够实现丰富的交互效果。本文将深入探讨一系列实用的JavaScript小技巧,帮助开发者提高编码效率...
本资料集合了众多JavaScript的小技巧,旨在帮助开发者提升工作效率,增强代码质量。 1. 变量与数据类型 - JavaScript中的变量可以通过`var`, `let`或`const`声明。理解它们之间的区别(作用域、可变性)是基础中的...
### HTML的一些小技巧 在网页开发过程中,合理运用HTML的小技巧可以有效提升用户体验,优化页面布局及功能。本文将详细介绍给定文件中的多个HTML小技巧及其应用场景。 #### 1. 设置背景图片固定不滚动 ```html ...
以下是一些JS中的实用小技巧: 1. **`document.write`**:这是JavaScript中最基本的输出方法,用于向HTML文档中插入动态内容。例如,`document.write("Hello, World!");`会在页面上显示“Hello, World!”。 2. **...
以上这些JavaScript小技巧都是为了增强网页的互动性和用户体验。熟练掌握并灵活运用它们,能让你的网页更加生动有趣。在实际开发中,还可以结合其他前端框架如React、Vue等,将这些技巧与现代Web技术相结合,创建更...
这些JavaScript小技巧涵盖了从DOM操作、事件处理、字符串处理到样式设计等多个方面,掌握它们能够帮助你在实际开发中编写更高效、更友好的代码。当然,随着技术的发展,某些方法可能已经过时,建议在使用时结合最新...
根据提供的文件内容,我们可以总结出以下几个JavaScript小技巧及相关知识点: ### 1. 引入外部JavaScript文件 在HTML文档中,可以通过`<script>`标签引入外部JavaScript文件来执行脚本代码。例如: ```html ...
7. **JavaScript编程的10个有用小技巧**和**12个特别有用的JavaScript小技巧【推举】**:这两篇文章分别分享了10个和12个实用的JavaScript编程技巧,是进阶学习的好资源。 总的来说,掌握生成HTML元素的技巧对...
本文将深入探讨《JavaScript的一些小技巧分享》文档中提及的几个实用技巧,特别是关于数组操作的部分,这些技巧可以帮助开发者更高效地编写JavaScript代码。 #### 数组去重 数组去重是在实际开发中经常遇到的需求...
本文将深入探讨“Java js小技巧”这一主题,分享一些实用的编程技巧,帮助开发者提升效率和代码质量。 首先,我们来看Java。Java是一种强类型、面向对象的编程语言,被广泛用于企业级应用开发、Android移动应用以及...
这个“JavaScript小技巧全集”提供了丰富的教程和源代码,旨在帮助开发者深入理解和掌握JavaScript的各种实用技巧。 首先,我们来看看JavaScript的基本语法。JavaScript是一种弱类型、解释型的语言,它的变量声明不...