热门标签 | 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),那么这个值就是负值。

运行代码   下载代码


推荐阅读
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社区 版权所有