2014年11月21日
JavaScript三种使用方式:
1. 外部js文件。<srcipt src=” 包名/文件名”></script>
//在使用外部JavaScript文件时,不需要Script标签,如果有,则会报错。
2. 内部script标签。<script></script>
3. HTML标签中。
<input type="button" value="警告" name="alert"οnclick="javascript:alert('警告')" />
使用JavaScript输出语句,document.write("将要输出的内容");
使用JavaScript进行弹出警告框,alert("警告");
在Javascript中,使用var进行变量声明。并且可以不经过变量声明,直接使用变量,但在开发中不建议这样操作。JavaScript对大小写操作敏感。
JavaScript中包括以下数据类型:
字符串String 、数字number 、数组、布尔类型 boolean 、对象 object 、空null 、未定义undefined
Js变量的数据类型是由数据确定的(赋值的时候)。
可以使用运算符typeof来判断一个变量的数据类型。
var miss="adfas";
var falg=true;
var num=21.5;
document.write("miss类型是"+typeof(miss)+"<br>");
document.write("falg类型是"+typeof(falg)+"<br>");
document.write("num类型是"+typeof(num)+"<br>");
使用JavaScript进行输入:
var text=prompt("请输入你想输入的数据","输入什么好呢");
alert(text);
//函数内括号中前个引号是提升内容,后个括号中内容是输入文本框默认值
//若在输入过程中单击取消按钮或是直接关闭,该方法返回null
\u263c 小太阳Unicode码为\u263c
在JavaScript中可以使用document.getElementById(id)的方法获取HTML中页面元素内容。
<p id="aa">第一次显示的内容</p>
<script>
document.getElementById("aa").innerHTML="通过ID获取HTML页面元素内容";
</script>
2014-11-24
该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器的内部窗口宽度:"+ w + ",高度:" + h + "。"
</script>
window.open() - 打开新窗口
window.close() - 关闭当前窗口 //只能关闭JavaScript打开的页面
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
实例 //点击按钮,关闭窗口
<script>
function cl()
{
window.opener=null;
window.open('', '_self', '');
window.close();
}
</script>
window.location对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。
一些例子:
location.hostname返回 web 主机的域名
location.pathname返回当前页面的路径和文件名
location.port返回 web 主机的端口 (80 或 443)
location.protocol返回所使用的 web 协议(http:// 或 https://)
location.href属性返回当前页面的 URL。
实例
返回(当前页面的)整个 URL:
<script>
document.write(location.href);
</script>
以上代码输出为:
http://www.w3school.com.cn/js/js_window_location.asp
location.pathname属性返回 URL 的路径名。
实例
返回当前 URL 的路径名:
<script>
document.write(location.pathname);
</script>
以上代码输出为:
/js/js_window_location.asp
location.assign()方法加载新的文档。(感觉类似a标签)
实例
加载一个新的文档:
<html>
<head>
<script>
functionnewDoc()
{ window.location.assign("http://www.w3school.com.cn")}
</script>
</head>
<body>
<inputtype="button" value="加载新文档" οnclick="newDoc()">
</body>
</html>
setTimeout('Time()',500); //表示每隔500毫秒,就会执行一次Time函数
οnlοad='Time()'; //表示页面加载时调用相应的函数
2014-11-25
Input 输入框的所有客户端事件
onBlur 失去焦点时触发
onChange 失去聚焦并且它的值发生变动时触发
onClick 用鼠标左键点击时触发
onFocus 获得聚焦的时候执行一些代码
onKeyDown 有键按住的时候执行一些代码
onKeyUp 按键释放则执行一些代码
onSelect 当前选中的内容发生变化时执行一些代码
onSelectStart 一些文字被选中则执行一些代码
2014-11-27
打开窗口,关闭窗口函数实例
<script>
varnewWin,sohuWin,sinaWin;
functionopenWin(){
newWin=window.open();
newWin.document.write("新的窗口");
sohuWin=window.open("http://www.sohu.com");
sinaWin=window.open("http://www.sina.com");
}
functioncloseWin(){
newWin.close();
sohuWin.close();
sinaWin.close();
}
</script>
调用时间的函数
function startT(){
vartime=new Date();
varyear=time.getFullYear();
varmonth=time.getMonth();
varday=time.getDate();
varh=time.getHours(); //小时
varm=time.getMinutes();
vars=time.getSeconds();
document.getElementById('text').innerHTML="当前时间(格式不同):"+year+"年"+(month)+"月"+day+"日 "+h+":"+m+":"+s;
/* 因为刚开始写代码的时候,将vartime=new Date();给写成了var time=new date(); 将Date函数写错成date,导致后面的函数全部无法获得值,无法正常完成方法,没有显示。
*/
setTimeout(“函数名”,毫秒数) clearTimeout(setTimeout返回值) 在指定的毫秒数后调用函数,取消指定动作 //运行一次,采用递归的方法可以无限循环
setInterval(“函数名”,毫秒数) clearInterval(setInterval返回值) 在指定毫秒数后调用函数,取消指定动作 //无限循环,除非调用clearInterval中止
window.location.assign("http://www.baidu.com"); //加载新的文档
window.location.reload(true); //刷新页面
window.loaction.replace("http:// "); //重新加载文档(无法通过后退按钮回到前一页面)
window.location.href("http://www.sina.com"); //用新的文档替换当前文档
实例
<a href="javascript:window.location.replace('http://www.hao123.com')">加载hao123</a>
<a href="javascript: 函数名()">默认值</a> //超链接调用函数
Document.getElementbyId() 获得ID
Document.getElementByTagName() 获得HTML标签
Document.getElementByName() 获得name属性
2014-11-28
Java类名命名规范
包名小写,要包含顶级域名
类名首字母大写,单词首字母大写
接口首字母大写,单词首字母大写
常量全部大写
方法名首字母小写,单词首字母大写
变量名首字母小写。
实例变量应该是下划线开头
2014-12-1
JavaScript中使用函数传参,参数要带引号。例:<ahref="javascript:show('ol')"> </a >
Document.getElementById(‘Id名’).className 得到的是相应ID对应的class。
Document.getElementById(‘Id名’).className=’新的class名’ 然后在CSS中设定 .class{ }
这样就可以改变页面内容了
看了:正则表达式,文本框验证对象,JS中操作CSS样式(style)
不懂:JS级联下拉列表,使用DOM操作表格,DOM插入、删除、替换节点,复选框全选/全不选。
使用Jquery,从微软或是谷歌上加载jQuery。
GoogleCDN:
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
MicrosoftCDN:
<head>
<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
jQuery元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有class="intro" 的 <p> 元素。
$("p#demo") 选取所有id="demo" 的 <p> 元素。
isNaN(必须需要一个值) 用来判断一个值是否为数字,是则为false,不是为true
如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true。如果 x 是其他值,则返回 false。
在js中 表示 假有如下: false, 0, “”, null ,undefined、NaN
用substring方法。采用字符串截断。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
var str="Hello world!"
document.write(str.indexOf("world ") +"<br />") 结果为6
如果 || 有为真的值,就会返回第一个为真的值,如果都为假,就返回最后的值.
switch 和 if else if 的区别. 如果是针对几个固定条件的判断,则使用switch ,如果范围的判断,我们使用 if ....else if....
js中自定义函数不要以数字开头
return 语句可以有,也可以没有. 最多只能有一个return
在同一个作用域(在同一个页面) js函数是不能有重复名字, 同时我们也知道 js 函数不支持函数的重载.
①数组可存放任意类型的数据
②数组大小不必事先指定,可以动态增长
③数组名可以理解为指向数组首地址的引用.
④数组元素默认从0开始编号的.
2014-12-2
<input type="button"name="event" onClick="show(this)" value="确定"/>
function show(obj){ obj.value="取消";}
this作为参数传值到JS代码中时,等同于docuemngt.getElementById(‘触发函数的那行ID’)
2014-12-3
文件夹就是目录,没有下级的里面的就是文件
Jquery绑定事件!
2014-12-4
Mouseout鼠标移开触发事件, mouseover鼠标移上触发事件
jQuery
$(this).hide()
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数,隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数,隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery hide() 函数,隐藏所有class="test" 的元素。
jQuery属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于"#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于"#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以".jpg" 结尾的元素。
改变CSS样式
$("p").css("background-color","red");
由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:
1. 把所有 jQuery 代码置于事件处理函数中
2. 把所有事件处理函数置于文档就绪事件处理器中
3. 把 jQuery 代码置于单独的 .js 文件中
Event 函数 | 绑定函数至 |
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
4. 如果存在名称冲突,则重命名 jQuery 库