js

LinDaiuuj

于 2018-02-12 16:50:14 发布

阅读量224

点赞数

1.找到指定位置
<a href="#pos">点我定位到指定位置!</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="pos">尾部定位点</p>

2.函数自调用，在函数后面加上( ) 不需要（点击）事件。用（）把函数包裹起来，再在后面加上一个（）。
<p>函数可以自动调用：</p>
<p id="demo"></p>
<script>
(function () {
   document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>

3.通过JavaScript可以改变HTML的内容
   document.write 一定要慎用！！！

4.对比一下两种方式
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<button id="demo1" οnclick="displayDate1()">点这里222</button>

<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
function displayDate1(){
document.getElementById("demo1").innerHTML=Date();
}
</script>
<p id="demo"></p>

5. οnclick=JavaScript

HTML 事件的例子：

   当用户点击鼠标时
   当网页已加载时 οnlοad="function()"
   当图像已加载时
   当鼠标移动到元素上时 οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)"
   当输入字段被改变时    οnchange="myFunction()"
   当提交 HTML 表单时
   当用户触发按键时

6.onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

<body οnlοad="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
7.onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

输入你的名字: <input type="text" id="fname" οnchange="myFunction()">
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>

8.鼠标移动到元素上
<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-

color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
9.鼠标事件 onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成

鼠标点击时，会触发 onclick 事件。

<div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" style="background-

color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me"
}

function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You"
}
</script>

10.鼠标移动
<h1 οnmοuseοver="style.color='red'"οnmοuseοut="style.color='black'">将鼠标移至文部上</h1>

11.改变背景框颜色：通过JavaScript控制CSS
<script>
function myFunction(x){
x.style.background="yellow";
}
</script>
</head>
<body>

输入你的名字: <input type="text" οnfοcus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性）将被触发。</p>

12.添加监听事件
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
   document.getElementById("demo").innerHTML = Date();
}
</script>
13.创建一个新元素
<div id="div1">
<p id="p1">这是一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
14.循环遍历对象
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button οnclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x] + "<br>";
}
document.getElementById("demo").innerHTML=txt;
}

</script>

1.定义变量 var person=null; 打印输出为null
   var person; 打印输出为undefined
   var car="" 打印输出什么都不显示
提示：JavaScript具有隐含的全局概念，意味着你不声明的任何变量都会成为一个全局对象属性

2.函数动态匿名函数 var myVar=myFunction();如果有返回值，把返回值赋给myVar

四种调用方式：直接调用函数名（参数列表）
   在连接中调用 <a href="javascript:函数名()">描述文字</a>
   在事件中调用事件类型=函数名（）
   递归调用

3.事件 JS事件是可以被 JavaScript 侦测到的行为。
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件可以是浏览器行为，也可以是用户行为。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

事件绑定到JS：
<some-HTML-element some-event="some JavaScript">

<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
解释：JavaScript 代码将修改 id="demo" 元素的内容。

事件集合：事件描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
onblur 元素失去焦点时触发
onfocus 元素获取焦点时触发
onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)

JavaScript 可以做什么?

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件
   页面关闭时触发事件
   用户点击按钮执行动作
   验证用户输入内容的合法性
   等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

   HTML 事件属性可以直接执行 JavaScript 代码
   HTML 事件属性可以调用 JavaScript 函数
   你可以为 HTML 元素指定自己的事件处理程序
   你可以阻止事件的发生。
   等等 ...
4.字符串
var x = "John";
var y = new String("John");
typeof x // returns String
typeof y // returns Object
不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：
数字与字符串相加，返回字符串：y="5"+5; 55 这个是字符串
获取input的值：年龄:<input id="age" value=18 /> value=18是input里面默认显示的值，此处如果输入为数字，必做验证！
   age=document.getElementById("age").value;
5.正则表达式

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置。
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串。

var str = "Visit w3cschool!";
var n = str.search("w3cschool"); n=6

   var str = document.getElementById("demo").innerHTML;
   var txt = str.replace(/microsoft/i,"W3cSchool"); i 是一个修饰符，表示不区分大小写；g：搜索全局；m 执行多行匹配

匹配说明：
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。
\d 查找数字。
\s 查找空白字符。
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。

RegExp（）对象的使用，用来判断是否包含某些元素，有一些方法可以去调用
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")); true
document.write(patt1.exec("The best things in life are free")); e

例子：验证邮箱
<script type="text/javascript">
function ischeckemail(){
var email = document.getElementById("emailname").value;
  if (email != "") {
   var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
   isok= reg.test(email );
   if (!isok) {
   alert("邮箱格式不正确，请重新输入！");
   document.getElementById("emailname").focus();
   return false;
   }
   };
}
</script>

HTML：
<input type="text" id="emailname">
<input type="submit" value="检测Email地址格式是否正确"
onClick="return ischeckemail()" >

6.表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用 JavaScript 来验证其正确性：

验证表单数据是否为空？

   验证输入是否是一个正确的email地址？

验证日期是否输入正确？

验证表单输入内容是否为数字型？
例子：检查必填项是否填写：
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

<form name="myForm" action="demo_form.asp" οnsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
   {
   alert("Not a valid e-mail address");
   return false;
  }
}

<form name="myForm" action="demo_form.asp" οnsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>