JavaScript基础学习

最新推荐文章于 2022-08-19 18:55:42 发布

aabbjj

最新推荐文章于 2022-08-19 18:55:42 发布

阅读量1.3k

点赞数

分类专栏： ASP.NET

本文链接：https://blog.csdn.net/aabbjj/article/details/8985684

版权

ASP.NET 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.document.getElementById("demo").innerHTML="My First JavaScript";

2.请使用 document.write() 仅仅向文档输出写内容。
提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
<script>
document.write(Date());
document.write("<p>My First JavaScript</p>");
</script>

3.JavaScript 对大小写敏感。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。

4.对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
document.write("Hello \World!");

5.JavaScript 多行注释

多行注释以 /* 开始，以 */ 结尾。

6.JavaScript 变量
    变量名称对大小写敏感（y 和 Y 是不同的变量）

7.Value = undefined
在执行过以下语句后，变量 carname 的值将是 undefined：
var carname;
如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
var carname="Volvo";
var carname;

8.JavaScript 数组
下面的代码创建名为 cars 的数组：
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者
var cars=new Array("Audi","BMW","Volvo");

9.JavaScript 对象
对象由花括号分隔。
在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。
属性由逗号分隔：
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行：
var person={
firstname : "Bill",
lastname : "Gates",
id        : 5566
};

对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];

10.这个例子使用 String 对象的 toUpperCase() 方法来把文本转换为大写：

var message="Hello world!";
var x=message.toUpperCase();

11.计算两个数字的乘积，并返回结果：
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);

12.在您仅仅希望退出函数时，也可使用 return 语句。返回值是可选的：
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}

11.本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。
catch 会捕捉到这个错误，并显示一段自定义的错误消息：

<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="")    throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10)     throw "too high";
if(x<5)      throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" οnclick="myFunction()">Test Input</button>
<p id="mess"></p>

12.E-mail 验证
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"οnsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>

13.本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

14.改变 HTML 属性
document.getElementById(id).attribute=new value
本例改变了 <img> 元素的 src 属性：
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>

14.改变 HTML 样式
document.getElementById(id).style.property=new style
本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：
<h1 id="id1">My Heading 1</h1>
<button type="button" οnclick="document.getElementById('id1').style.color='red'">
点击这里
</button>

如何使元素不可见
<!DOCTYPE html>
<html>
<body>
<p id="p1">这是一段文本。</p>
<input type="button" value="隐藏文本" οnclick="document.getElementById

('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" οnclick="document.getElementById

('p1').style.visibility='visible'" />
</body>
</html>

15向 button 元素分配 onclick 事件：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
<button id="myBtn">点击这里</button>
<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

16.onload 和 onunload 事件(在body元素中)
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<!DOCTYPE html>
<html>
<body οnlοad="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
   {
   alert("已启用 cookie")
   }
else
   {
   alert("未启用 cookie")
   }
}
</script>
<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
</body>
</html>

17.onchange 事件
onchange 事件常结合对输入字段的验证来使用。
如下为当用户改变输入字段的内容时，会调用 upperCase() 函数
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
x.value=x.value.toLowercase();
}
</script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" οnchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
</body>
</html>

18.onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
eg1:
<!DOCTYPE html>
<html>
<body>
<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-

color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>

eg2:
<h1 οnmοuseοver="style.color='red'" οnmοuseοut="style.color='blue'">
请把鼠标移到这段文本上
</h1>
</body>
</html>

19.onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后

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

<!DOCTYPE html>
<html>
<body>
</html>
<div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" style="background-

color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里

</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

</body>
</html>

20.onfocus事件
当输入字段获得焦点时，改变其背景色。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>
请输入英文字符：<input type="text" οnfοcus="myFunction(this)">
<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>
</body>

21.创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元

素。

实例

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

22.删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：
实例

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

23.把方法添加到 JavaScript 对象
<!DOCTYPE html>
<html>
<body>
<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
myMother=new person("Steve","Jobs",56,"green");
myMother.changeName("Ballmer");
document.write(myMother.lastname);
</script>

</body>
</html>

24.循环遍历对象的属性：
<!DOCTYPE html>
<html>
<body>
<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];
}

document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

25.日期对象

显示一个钟表：
<html>
<head>
<script type="text/javascript">
function startTime() {//计时器setTimeout，显示一个钟表
            var time = new Date();
            var h = time.getHours();
            var m = time.getMinutes();
            var s = time.getSeconds();
            m = checkTime(m)
            s = checkTime(s)
            document.getElementById('txt').innerHTML = h + ":" + m + ":" + s
            t = window.setTimeout(startTime, 500)//設定一個時間, 時間到了, 就會執行一個指定的

method
        }
        function checkTime(i) {//在个位前面加0，如：12:12:01，而不是12:12:1
            if (i < 10)
            { i = "0" + i }
            return i
        }
</script>
</head>

<body οnlοad="startTime()">
<div id="txt"></div>
</body>
</html>

操作日期

在下面的例子中，我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：
var myDate=new Date()
myDate.setFullYear(2008,7,9)
注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。

26.Math
下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数：

document.write(Math.floor(Math.random()*11))
JavaScript 提供 8 种可被 Math 对象访问的算数值：
    Math.E          常数
    Math.PI         圆周率
    Math.SQRT2      2 的平方根
    Math.SQRT1_2    1/2 的平方根
    Math.LN2        2 的自然对数
    Math.LN10       10 的自然对数
    Math.LOG2E      以 2 为底的 e 的对数
    Math.LOG10E     以 10 为底的 e 的对数
    Math.Round      四舍五入
    Math.Random     0-1的随机数

27.确认框
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>

<input type="button" οnclick="show_confirm()" value="Show a confirm box" />

</body>
</html>

28.提示框
<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!="")
    {
    document.write("你好！" + name + " 今天过得怎么样？")
    }
}
</script>
</head>
<body>

<input type="button" οnclick="disp_prompt()" value="显示提示框" />

</body>

</html>

29. JavaScript 和 Jquery

在 JavaScript 中，您可以分配一个函数以处理窗口加载事件：

JavaScript 方式：

function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
οnlοad=myFunction;

等价的 jQuery 是不同的：

jQuery 方式：

function myFunction()
{
var txt = $("#span1").text();//兼容火狐和IE获取span的值,火狐var txt = document.getElementById("span1").innerHtml()获取不到值
document.getElementById("lblID").innerHTML;//label解析为html即为一个span,没有value属性,所以可以用innerHTML或innerText
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

上面代码的最后一行，HTML DOM 文档对象被传递到 jQuery ：$(document)。

当您向 jQuery 传递 DOM 对象时，jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。

jQuery 函数会返回新的 jQuery 对象，其中的 ready() 是一个方法。

由于在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

30.button做linkbutton样式

<input type="button" οnclick="PackageFeedbackListShow('<%# Eval("pi_packing_id")%>')"
value="反馈" style="color: #0000FF; text-decoration: underline; background-color: transparent;
border-width: 0px; cursor: pointer" />

aabbjj

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础学习

1.document.getElementById("demo").innerHTML="My First JavaScript";2.请使用 document.write() 仅仅向文档输出写内容。提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。document.write(Date());document.write("My Fir
复制链接

扫一扫

专栏目录