php之JavaScript

JS对于大小写敏感

作用：增加跟html页面的交互性。

应用：验证表单、创建cookies（可插入html页面的编程代码）js插入页面后可由所有现代的浏览器执行。应用于<body></body>或者<head></head>之间。使用JS 引入标签<script></script>

实例测试教程

JS可以写入输出流

JS可以对事件作出反应onclick（“ '' ”）;

<html>

<head>

h1{ color:red; margin:2cm 2cm 3cm 2cm; font-size:20px; }

hr{ color:#ff000;}

p{ color:green; }

body{

background-color:yellow; background-image:url(""); }

</style>

</head>

<body>

<h1 id="demo"> JS可以对事件作出反应 </h1>

<button type="button" οnclick="alert('fresh time')">click here</button>

<hr >

<p>bandeng </p>

<p>qianpai weiguan </p>

{

x=document.getElementById("demo");

x.innerHTML="更新页面内部内容"

}

</script>

<button type="button" οnclick="myFunction()">second click</button>

<hr>

</body>

</html>

eg:controll the light

function changeImage()

{

element=document.getElementById('myimage')

if (element.src.match("bulbon"))

{ element.src="/i/eg_bulboff.gif"; }

else { element.src="/i/eg_bulbon.gif"; }

}

</script>

简单的表单验证

function myFunction()

{

var x=document.getElementById("");

if (x=="")

{

alert("no words input");

}

</script>

<button type="button" οnclick="myFunction()">click</button>

<head></head>中的应用

<head>

function myFunction()

{

x=document.getElementById("demo") ;

x.innerHTML="My First JavaScript Function";

} </script>

</head>

<body>

<p id="demo">A Paragraph.</p>

</body>

<body></body>中应用 JS放在<p></p>之后确保p元素创建之后再执行脚本

<body>

<h1>My First Web Page</h1>

<p id="demo">A Paragraph.</p>

{

x=document.getElementById("demo") ;

x.innerHTML="My First JavaScript Function";

}

</script>

</body>

JS可以把把脚本保存在外部文件中外部文件包含多个网页使用的代码

<!DOCTYPE html>

<html>

<body>

</body>

</html>

如果文档完成加载后执行document.write时，整个html页面将被覆盖

例题锻炼

<body>

function myFunction()

{

var carname="Volvo"; document.getElementById("demo").innerHTML=carname;

}

</script>

</body>

var cars= new Array();

cars[0]="Auto";

cars[1]="BMW";

cars[2]="SX";

cars[3]="jack";

a=cars.length;

for(i=0;i<cars.length;i++)

{

document.write(cars[i]+ "<br >")

}

document.write(a);

</script>

<body>

var person={

firstname : "Bill",

lastname : "Gates",

id : 5566

};

document.write(person.lastname + "<br />");

document.write(person["lastname"] + "<br />");

</script>

<!DOCTYPE html>
<html>
<body>
<p id="demo" >如果晚于9点，则提示迟到</p>
<button οnclick="myFunction()">click here</button>
<script>
function myFunction()
{
   var x="";
   var time=new Date().getHours();
   if(time>9)
   {
   x="you are late"
   }
   document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>

<!DOCTYPE html> <html> <body>

<p id="demo">点击这个按钮，获得基于时间的问候。</p>

function myFunction()

{ var x="";

var time=new Date().getHours();

if (time<10)

{

x="Good morning";

}

else if (time<20)

{

x="Good day";

}

else

{

x="Good evening";

}

document.getElementById("demo").innerHTML=x; }

</script>

</body>

</html>

//mess program

<hr>

<html>

<body>

<p id="p1">hello world</p>

document.getElementById("p1").innerHTML="Next text";

document.getElementById("demo").src="jack.jpg";

</script>

</body>

</html>

<h1 id="header">Old Header</h1>

var element=document.getElementById("header");

element.innerHTML="New Header";

</script>

</body>

</html>

<hr>

move the mouse on the image it can get new act.

<hr>

use this as eg:

exam of what you learn

a simple hidden problem

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("p").click(function(){

$(this).hide();});});

</script>

</head>

<body>

<p> this the first one</p>

<p>this the second one </p>

<p> this the third one</p>

</body>

</html>

hiden element

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

$(document).ready(function(){

$("#demo1").click(function(){

$("p").hide();});

$("demo2").click(function(){

$("p").show();});

});

//switch:$("button").click(function(){$("p").toggle();});

</script>

<body>

<p >aaaaa</p>

<p>bbbbb</p>

</body>

</html>

script+style implement the slide

AJAX是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

转载于:https://www.cnblogs.com/teyues/p/5648853.html

php之JavaScript相关推荐

【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
【JavaScript总结】JavaScript语法基础：JS编码
运算符数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
【JavaScript总结】JavaScript语法基础：数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
课程来源:后盾人上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
[JavaScript] JavaScript 数组挖掘，不只是讲数组哟
课程来源:后盾人数组引用类型分析数组的定义 const array = new Array('hello', 'dust', 1, 2, 3, 4, 5) console.log(array) l ...
linux下用js生成xml,js2xml:将javascript字符串转换为xml
有时候爬数据遇到像下面这种,数据在script标签中以javascript形式存在. var totalReviewsValue = 32; var averageRating = 4.5; if(t ...

php之JavaScript

php之JavaScript相关推荐

最新文章

热门文章