热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JavaScript核心知识点与实用技巧汇总

本文总结了JavaScript的核心知识点和实用技巧,涵盖了变量声明、DOM操作、事件处理等重要方面。例如,通过`event.srcElement`获取触发事件的元素,并使用`alert`显示其HTML结构;利用`innerText`和`innerHTML`属性分别设置和获取文本内容及HTML内容。此外,还介绍了如何在表单中动态生成和操作``元素,以便更好地处理用户输入。这些技巧对于提升前端开发效率和代码质量具有重要意义。

Javascript常用知识点总结  
var oWorkItem = event.srcElement;
  alert(oWorkItem.outerHTML);


.innerText=""

.innerHTML

 

function DeleteRow() {//删除行
 event.srcElement.parentElement.parentElement.parentElement.removeChild(event.srcElement.parentElement.parentElement);
}

Javascript标准写法


如果没有用function 函数包括起来,则打开页面时自动执行

我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onchange事件就是这样子的.你得有Change(改变),才能触发该事件....

      掌握了它的特性后,相应的解决办法也很简单.



                
主要通过DIV来实现,主意一定要有  ID这个属性




中文备注:







   document.getElementById("inputcn").style.display="block";
   document.getElementById("inputen").style.display="block";
   document.getElementById("encomment").style.display="block";
   document.getElementById("cncomment").style.display="block";
   document.getElementById("remarkcn").value="222222222222";
   document.getElementById("remarken").value="33333333333"; 

在表单页中含有textarea控件,如果输入内容有回车换行的动作,字符串存储到数据库中后,再提取出来显示的话就会发现回车换行动作的地方让一个空格给代替了,另外几个空格的位置也只变成一个空格,没有保持原想的格式,下面这段代码就可以解决这个问题。
<%!
public String turn(String str){
//下面的代码将字符串以正确方式显示(包括回车,换行,空格)
while(str.indexOf("\n")!=-1){
str = str.substring(0,str.indexOf("\n"))+"
"+str.substring(str.indexOf("\n")+1);
}
while(str.indexOf(" ")!=-1){
str = str.substring(0,str.indexOf(" "))+" "+str.substring(str.indexOf(" ")+1);
}
return str;
}
%>
<%=turn(rs.getString("content"))%>//输出
/**str.indexOf("\n") 返回str中\n(换行)的位置;
  *str.subString(0,str.indexOf("\n")):返回给定区间的字符串
  */

字符串分割

var resourceList
resourceList.split("*")[1];

Javascript中的字符串方法

与Vbscript中的字符串函数相对应,Javascript为String对象提供了许多方法,而字符串变量可以不用附加说明就使用这些方法。有几个VB函数在JS中没有对象的方法可实现,但JS中也有一些高级的方法可以更复杂的文本处理工作,这将在以后再介绍。在本文中,我们来完成上文“Vbscript 中的字符串函数”中的相同的目标任务。

目标任务1  演示子字符串的截取,字符串的截空,子串的定位等。

关键字 length, substr, slice, indexOf, toUppertoCase,toLowerCase

代码

var Mystr, Myword,Mypos, BR;
Mystr = "The built-in objects are special because they are built into ASP pages and do not need to be created before you can use them in scripts.";
BR = "

";
document.write( "Mystr=" +"\"" + Mystr + "\"" +BR);
document.write("字符串Mystr的长度是" + Mystr.length + BR);
document.write("7位左子串是" + Mystr.slice(0,7) +BR);
document.write("8位右子串是" + Mystr.slice(136-8) +BR);
document.write("从第5位开始的12个字符是" +Mystr.substr(5-1,12)+BR);
Myword = " hello ";
document.write( Myword);
document.write("这个字符串的长度是" + Myword.length +BR);
document.write("在Javascript中没有截去前导空格或后部空格的方法!" +BR);
Myword = "OBJECT";
document.write ("The Myword =" + "\""+Myword+"\"");
Mypos = Mystr.indexOf(Myword);
document.write (BR);
if (Mypos==-1)
//如果没有找到子字符串,则返回 -1。
document.write(Myword +"不是Mystr子串")
else
document.write(Myword + "是Mystr的子串,第一个开始于" + Mypos);
document.write (BR);
Myword = Myword.toLowerCase();
Mypos =Mystr.indexOf(Myword);
if (Mypos==-1)
document.write(Myword + "不是Mystr的子串"+BR)
else
document.write(Myword + "是Mystr的子串,第一个开始位置是" + Mypos);

观看代码的运行结果

代码注释

因为字符串函数是以字符串对象的方法(方法是对象内部的函数)形式出现的,它的一般格式是
    字符串变量名.方法名(参数表)
取子串不分左中右,有一个统一的方法substr(),其功能是返回一个从指定位置开始的指定长度的子字符串。语法:
    stringvar.substr(start [, length ])
如果 length 为0或负数,将返回一个空字符串。如果没有指定该参数,则子字符串将延续到最后。
要实现VB中的right(stringvar,n),可用下列语句:
    stringvar.substr(stringvar.length - n);

Javascript还提供了一种slice方法也可以实现上述任务。其功能是返回字符串的片段。语法:
    stringObj.slice(start, [end])
所不同的是,end表示结束位置而不时长度。如果 end =-1 或省略,就一直提取到结尾。

Javascript中没有与截空格函数tirm, Ltirm等对应的方法。

大小写转换方法有toUppertoCase()和toLowerCase()。

对应与Instr()的判断子串的方法是indexOf,语法如下:
   strVariable.indexOf(substring, startindex)
功能是返回 String 对象内第一次出现子字符串的位置。startindex如果省略,则从字符串的开始处查找。不同之处是如果没有找到子字符串,则返回-1而不是返回0。

另外,还有一个lastIndexOf方法,功能是返回最后一个出现的子字符串位置。在Vbscript中也有InstrRev()与之对于。

 

--------------------------------------------------------------------------------

目标任务2  演示用spilt函数分割字符串

关键字  split

代码

var Mystr, MyString ,BR, num;
Mystr = "The built-in objects are special because they are built into ASP pages and do not need to be created before you can use them in scripts.";
BR = "
";
MyString = Mystr.split(" ");
for (str1 in MyString){
document.write ("MyString[" + str1 +"]=");
document.write (MyString[str1]+ BR);
}

代码注释

Javascript中也有split方法,功能是按照给定的分割符切割字符串,返回一个数组。语法更为简单:
    数组 = 字符串名.split(分割符)
观看 Sdemo1


--------------------------------------------------------------------------------

目标任务3  演示字符串逆转函数strReverse

在Javascript中没有相应的方法逆转字符串。

目标任务4  演示字符串的替换和比较

关键字 replace

代码

var oldstr, newstr, textall;
oldstr = "Hello";
textall= "---Hello World ---";
newstr = oldstr.toUpperCase();
alert ("原始文本是:\n\r" +textall);
alert ("替换后变为:\n\r" + textall.replace(oldstr,newstr));

单击按钮上一代码

代码注释

replace方法在文本中替换子串,语法与VB中一样:
        stringObj.replace(待查子串, 替换子串)

没有与strcomp(), string()相应的方法。

 

Javascript中日期时间的使用方法
在Javascript中,与数值对象和字符串对象不同,日期对象不能直接使用,必须先创建Date对象的实例(也叫做对象的引用)。创建实例的语法有如下三种。

var newDateObj = new Date()
var newDateObj = new Date(dateVal)
var newDateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])
例如,var D = new Date()。

方法1是无参数调用,创建后对象D中含有计算机的系统日期和时间。
方法2中dateVal参数是数值或表示日期时间的字符串。如果是数字值,dateVal 表示指定日期与 1970 年 1 月 1 日午夜间全球标准时间的毫秒数。如果是字符串,则 dateVal 按照 parse 方法中的规则进行解析。dateVal 参数也可以是从某些 ActiveX(R) 对象返回的 VT_DATE 值。
方法3用参数直接为新建对象提供日期和时间的数据。

建立了Date对象以后,就可以使用get方法取得日期或时间的值,返回值一般是数值型的。用set方法给一个Date型对象设置数据。Date的方法函数的语法一般格式为:

    D.getXXXX()   和   D.setXXXX( variable list)

其中XXXX是相关的字符串,即Year, Month, Date, day,Hours, Minutes, Seconds, Milliseconds,Time, FullYear 等。get方法一般都是无参数的。variable list是set方法要求的参数列表。详细语法请参考下面的例程。

在Javascript中还有使用全球标准时间的方法,其语法是在上面的语法形式的XXXX前面加上UTC三个字母。

此外,还有几个方法。

getTimezoneOffset()方法  返回当地时间和UTC时间的时差(分钟数)。
getVarDate( )方法      返回T_DATE 值。
toLocaleString( )方法  返回表示本地时间的字符串。
toUTCString() 方法     返回表示全球标准时间的字符串。
Date.parse(dateVal) 
解析一个包含日期的字符串,并返回该日期与 1970 年 1 月 1 日午夜之间所间隔的毫秒数。其中 dateVal 是一个包含以诸如 "Jan 5, 1996 08:47:00" 的格式表示的日期的字符串,或者是一个从 ActiveX(R) 对象或其他对象中获取的 VT_DATE 值。
Date.UTC(year, month, day[, hours[, minutes[, seconds[,ms]]]])
返回全球标准时间UTC(或 GMT)的 1970年1月1日到所指定日期之间所间隔的毫秒数。

--------------------------------------------------------------------------------

目标任务1 演示get方法的使用

关键字  取得日期和时间,私有的

代码

function getDTdemo(){

function WeekDay(d){
var d, day, x, s = ",";
var x = new Array("星期日", "星期一", "星期二");
var x = x.concat("星期三","星期四", "星期五");
var x = x.concat("星期六");
day = d.getDay();
return(s += x[day]);
}

function GetDateAll(d) {
var s = "今天是: ";
s += d.getFullYear()+ "-";
s += (d.getMonth() + 1) + "-";
s += d.getDate() ;
return(s);
}

function GetTimeAll(d) {
var s = ",本地时间为";
var c = ":";
s += d.getHours() + c;
s += d.getMinutes() + c;
s += d.getSeconds() ;
// s += d.getMilliseconds();
return(s);
}

//main
var D = new Date();
alert(GetDateAll(D)+WeekDay(D)+GetTimeAll(D) );
}//main end

代码注释

运行时调用getDTdemo。该函数在创建了对象D后,有一个alert对话框显示当前日期和时间。该日期是分别用getyear,getdate等取得。下面的例程用方法一下子取得全部日期时间,其效果是一样的。getDTdemo中需要调用的其它函数都定义在getDTdemo的内部,是属于getDTdemo私有的,只有getDTdemo能够调用它们。毫秒数Milliseconds没有显示(其语句用注释符号“//”屏蔽掉了)。

运行例
--------------------------------------------------------------------------------

目标任务2 演示日期型数据转化成字符串的方法

关键字  toLocaleString,toUTCString

代码

function showLocaleUTC(){

function toLocaleStrDemo(){
var d, s;
d = new Date();
s = "用toLocaleString 得 ";
s += d.toLocaleString();
return(s);
}

function toUTCStrDemo(){
var d, s;
d = new Date();
s = "用toUTCString是";
s += d.toUTCString();
return(s);
}

//
alert(toLocaleStrDemo() + "\n\r" + toUTCStrDemo());
}

代码注释

创建的对象d是当前时间,注意输出的两个结果不同。

运行代码

目标任务3 比较getVarDate和getDate方法取得的日期有何不同?

关键字  getVarDate

代码

function VarDatedemo(){
var D = new Date( );
var mydate = D.getVarDate();
alert(mydate +"###" +D.toLocaleString);
}

代码注释


--------------------------------------------------------------------------------

运行代码

目标任务4 演示set方法设置日期和时间

关键字  set方法,setFullYear

代码

function setDTdemo(){

function setDateAll(){
var D = new Date();
var y = D.setYear(2001);
var m = D.setMonth(8);
var r = D.setDate(16);
var mass ="用setYear..是" + D.toLocaleString()+"\n\r";
var d = new Date(D.setFullYear(2001,8,16));
return (mass + "用setFullYear得"+d.toLocaleString());
}

function setTimeAll(){
var T = new Date();
var h = T.setHours(12);
var m = T.setMinutes(15);
var s = T.setSeconds(24);
var c = ":";
var mass = T.getHours()+c+ T.getMinutes() +c +T.getSeconds();
return (mass);
}
// main
alert(setDateAll());
alert("设定的时间是" +setTimeAll());
}

代码注释

用setFullYear和分别设置年月日两种方法设置日期。

运行代码


--------------------------------------------------------------------------------

目标任务5 演示时差函数的使用

关键字 getTimezoneOffset()

代码

function VarDatedemo(){
var D = new Date( );
var mydate = D.getVarDate();
alert(mydate);
}
function TZDemo(){
var d, tz, s = "本地与国际标准时间的时差是 ";
d = new Date();
tz = d.getTimezoneOffset();
if (tz <0)
s += tz / 60 + " hours before GMT";
else if (tz == 0)
s += "GMT";
else
s += tz / 60 + " hours after GMT";
alert(s);
}

代码注释

getTimezoneOffset 方法返回一个整数值,这个整数代表了当前计算机上的时间和 UTC 之间相差的分钟数。这些值和执行脚本的计算机相关。如果所在位置的时间落后于UTC (比如, Pacific Daylight Time),那么这个值就是正值,而如果所在位置的时间超前于 UTC (比如说,Japan),那么这个值就是负值。

运行代码   下载代码


推荐阅读
  • JavaScript XML操作实用工具类:XmlUtilsJS技巧与应用 ... [详细]
  • 本文探讨了资源访问的学习路径与方法,旨在帮助学习者更高效地获取和利用各类资源。通过分析不同资源的特点和应用场景,提出了多种实用的学习策略和技术手段,为学习者提供了系统的指导和建议。 ... [详细]
  • SQLite数据库CRUD操作实例分析与应用
    本文通过分析和实例演示了SQLite数据库中的CRUD(创建、读取、更新和删除)操作,详细介绍了如何在Java环境中使用Person实体类进行数据库操作。文章首先阐述了SQLite数据库的基本概念及其在移动应用开发中的重要性,然后通过具体的代码示例,逐步展示了如何实现对Person实体类的增删改查功能。此外,还讨论了常见错误及其解决方法,为开发者提供了实用的参考和指导。 ... [详细]
  • 《精通 jQuery》第六章:深入解析与实战应用
    《精通 jQuery》第六章:深入解析与实战应用本章详细探讨了 Ajax 技术的核心机制及其实际应用。Ajax 通过 XMLHttpRequest 对象实现客户端与服务器之间的异步数据交换,从而在不重新加载整个页面的情况下更新部分内容。这种技术不仅提升了用户体验,还提高了应用的响应速度和效率。此外,本章还介绍了如何利用 jQuery 简化 Ajax 操作,并提供了多个实战案例,帮助读者更好地理解和掌握这一重要技术。 ... [详细]
  • iOS 设备唯一标识获取的高效解决方案与实践
    在iOS 7中,苹果公司再次禁止了对MAC地址的访问,使得开发者无法直接获取设备的物理地址。为了在开发过程中实现设备的唯一标识,苹果推荐使用Keychain服务来存储和管理唯一的标识符。此外,还可以结合其他技术手段,如UUID和广告标识符(IDFA),以确保设备的唯一性和安全性。这些方法不仅能够满足应用的需求,还能保护用户的隐私。 ... [详细]
  • 深入理解 Java 控制结构的全面指南 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • 本文详细探讨了MySQL数据库实例化参数的优化方法及其在实例查询中的应用。通过具体的源代码示例,介绍了如何高效地配置和查询MySQL实例,为开发者提供了有价值的参考和实践指导。 ... [详细]
  • 本文介绍了UUID(通用唯一标识符)的概念及其在JavaScript中生成Java兼容UUID的代码实现与优化技巧。UUID是一个128位的唯一标识符,广泛应用于分布式系统中以确保唯一性。文章详细探讨了如何利用JavaScript生成符合Java标准的UUID,并提供了多种优化方法,以提高生成效率和兼容性。 ... [详细]
  • Netty框架中运用Protobuf实现高效通信协议
    在Netty框架中,通过引入Protobuf来实现高效的通信协议。为了使用Protobuf,需要先准备好环境,包括下载并安装Protobuf的代码生成器`protoc`以及相应的源码包。具体资源可从官方下载页面获取,确保版本兼容性以充分发挥其性能优势。此外,配置好开发环境后,可以通过定义`.proto`文件来自动生成Java类,从而简化数据序列化和反序列化的操作,提高通信效率。 ... [详细]
  • HBase Java API 进阶:过滤器详解与应用实例
    本文详细探讨了HBase 1.2.6版本中Java API的高级应用,重点介绍了过滤器的使用方法和实际案例。首先,文章对几种常见的HBase过滤器进行了概述,包括列前缀过滤器(ColumnPrefixFilter)和时间戳过滤器(TimestampsFilter)。此外,还详细讲解了分页过滤器(PageFilter)的实现原理及其在大数据查询中的应用场景。通过具体的代码示例,读者可以更好地理解和掌握这些过滤器的使用技巧,从而提高数据处理的效率和灵活性。 ... [详细]
  • 本文深入解析了Python在处理HTML过滤时的实现方法及其应用场景。通过具体实例,详细介绍了如何利用Python代码去除HTML字符串中的标签和其他无关信息,确保内容的纯净与安全。此外,文章还探讨了该技术在网页抓取、数据清洗等领域的实际应用,为开发者提供了宝贵的参考。 ... [详细]
  • 掌握Android UI设计:利用ZoomControls实现图片缩放功能
    本文介绍了如何在Android应用中通过使用ZoomControls组件来实现图片的缩放功能。ZoomControls提供了一种简单且直观的方式,让用户可以通过点击放大和缩小按钮来调整图片的显示大小。文章详细讲解了ZoomControls的基本用法、布局设置以及与ImageView的结合使用方法,适合初学者快速掌握Android UI设计中的这一重要功能。 ... [详细]
  • Eclipse JFace Text框架中IDocument接口的getNumberOfLines方法详解与编程实例 ... [详细]
  • 如何在 Node.js 环境中将 CSV 数据转换为标准的 JSON 文件格式? ... [详细]
author-avatar
琳琳小朋友m
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有