javascript学习笔记

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+"日&nbsp;"+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 库

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值