JS学习（4）----events和String

来源：互联网发布：java图形界面编程 pdf 编辑：程序博客网时间：2024/05/20 21:44

1.HTML事件及其处理

（1）一个html页面完成加载
（2）一些输入框的内容发生改变
（3）点击事件或者是鼠标触摸事件
可以直接在html代码中对事件及进行处理，如下：

<!-- <element event='some JavaScript'> --><!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>title</title></head><body>    <button onclick="document.getElementById('test').innerHTML=Date()">Click Me</button>    <p id="test"></p></body></html>

但是最好不要这样写，最好是将html、css和js分离开来，保证代码的可读性，同时也便于后期代码的维护。
注：在前面的博客中曾经讲过一个问题，即如果事件的发生是在页面加载完成时触发的，需要保证js和html的顺序正确，否则会出现语法错误。而在上面这个例子中，事件是在点击的时候发生的，此时页面早已经加载完成，所以尽管在onclick的处理函数中用到了test, 也可以将其放在p元素的前面。
另外一个例子：

<button onclick="this.innerHTML=Date()">Click Me</button>

2.常见的html事件

这里写图片描述
例子：

<p onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Mouse over me!</p>

注：innerHTML中可以加入html的一些元素，比如br、hr等等，显示的时候按照正常的html的格式进行显示。如下：

document.getElementById("test").innerHTML = "Hello"+"<br>"+"World!";

上面的例子显示的时候会换行。

3.Strings

（1）当string本身包含括号的时候，如果包含的是双引号，则string的总括号用单引号；如果包含的是单引号，则string的总括号用双引号。
如：

var str1 = "this is a 'string'";var str2 = 'this is a "string"';

（2）String的length属性

var str = "hello world";var num = str.length;

（3）特殊字符使用\

var str = 'It\'s a good day.';

\表示斜杠
\’表示单引号
\”表示双引号
（4）关于编程风格
如果一行代码过长，要断句最好是在operators的后面进行换行。
如：

document.getElementById("test").innerHTML = "Hello World!";

如果是在html的内部要换行则需要使用\
如：

document.getElementById("test").innerHTML = "Hello \World!";

但是使用下面的方法会好一些：

document.getElementById("test").innerHTML = "Hello " + "World!";

（5）使用new
如果声明的时候使用new，则得到的类型是object
如：

var str = new String("John");

4.String methods

var str = "here is the test, not only one test.";

（1）length

var n = str.length;

（2）indexOf和lastIndexOf

注：既可以是一个参数，也可以是两个参数，第二个参数表示的是开始查找的下标，找到的index实相对于开始查找下标而言的。

var pos = str.indexOf("test");var lastPos = str.lastIndexOf("test", 18); //  第二个参数表示开始查找的下标

（3）search

search与indexOf非常相似，不同的是search不可以有两个参数

var searchindex = str.search("is"); //  与indexof的不同之处在于search不能够有第二个参数

（4）slice

输入有两个参数，第一个参数是开始截取的下标，第二个参数是截取结束的下标

var sliceStr = str.slice(8,11);   //   截取所要的字符串var negStr = str.slice(-1,-5);  //  如果是负数，表示倒着提取出所要的字符串

注：这里的负数的slice在chrome中没有正确的显示出来

（5）substring和substr

substring和slice非常的相似，只不过substring不可以有负数的情况；
substr的第二个参数表示的是长度而不是结束的下标

var sStr = str.substring(8,11);   //  与slice不同的是，subString的参数不能是负数var sub = str.substr(8,3);  //   第二个参数表示查找的字符串的长度

（6）replace

可以将某个单词或者是某个字符进行替换，但是只替换第一个，第二个没有被替换

var changeStr = str.replace("test", "demo");

（7）toUpperCase和toLowerCase

var upper = str.toUpperCase();var lower = str.toLowerCase();

（8）concat

将两个字符串进行连接，相当于+

var txt1 = "Hello";var txt2 = "World";var joinStr = txt1.concat(" ", txt2);

（9）charAt

得到的是某个制定的下标的字符，可以直接把string当做数组来使用，从而得到某个下标的字符

var firstChar = joinStr.charAt(0);var charAtFirstIndex = joinStr[0];

（10）split

将字符串按照某个字符进行分割，从而得到一个数组

var getHere = str.split(" ");

（11）total code and result

/* * @Author: Lin* @Date:   2017-07-17 18:49:09* @Last Modified by:   Lin* @Last Modified time: 2017-07-18 09:03:24*/var str = "here is the test, not only one test.";var n = str.length;var pos = str.indexOf("test");var lastPos = str.lastIndexOf("test", 18);      //  第二个参数表示开始查找的下标var searchindex = str.search("is");             //  与indexof的不同之处在于search不能够有第二个参数var sliceStr = str.slice(8,11);                 //  截取所要的字符串var negStr = str.slice(-1,-5);                  //  如果是负数，表示倒着提取出所要的字符串var sStr = str.substring(8,11);                 //  与slice不同的是，subString的参数不能是负数var sub = str.substr(8,3);                      //  第二个参数表示查找的字符串的长度var changeStr = str.replace("test", "demo");var upper = str.toUpperCase();var lower = str.toLowerCase();var txt1 = "Hello";var txt2 = "World";var joinStr = txt1.concat(" ", txt2);var firstChar = joinStr.charAt(0);var charAtFirstIndex = joinStr[0];var getHere = str.split(" ");document.getElementById("test").innerHTML = "str : " + str + "<hr>" + "length: " + n + "<hr>" +"index Of 'test': " + pos + "<hr>" + "last index of 'test': " + lastPos + "<hr>" +"search 'is' index: " + searchindex + "<hr>" + "slice (8,11): " + sliceStr + "<hr>" + "slice (-6,-9): " + negStr + "<hr>" + "substring(8,11) : " + sStr + "<hr>" + "substr(8,3) : " + sub + "<hr>" + "replace 'test' to 'demo': " + changeStr + "<hr>" + "to upper: " + upper + "<hr>" + "to lower: " + lower + "<hr>" + "concat 'Hello' and 'World': " + joinStr + "<hr>" + "firstchar : " + firstChar + "<hr>" +"joinStr[0] : " + charAtFirstIndex + "<hr>" + "split(' ') : " + getHere;

显示的结果是：
这里写图片描述

阅读全文

0 0