Javascrip学习总结.doc

Javascript是一种在浏览器端执行的语言，不用和服务器交互就可以实现网页的一些变化。JavaScript是一种解释型语言，不需要编译就可以随时运行。Javascript是一种弱类型的语言，不需要指明变量类型，会自动的判断变量类型。声明变量类型都使用var。可以使用双引号或者单引号声明字符串。Javascript动态创建的元素，搜索引擎捕捉不到，所以可以不需要动态创建的地方就不要动态创建。/引用外部javascript代码超链接/超链接中的javascript代码/body标签的onload事件会在页面全部加载完后触发首页/导航到指定的网页，火狐不支持转到新页面/和navigate()方法的效果相同刷新页面/刷新当前页面/在表单验证时禁止提交表单到服务器/手动触发表单验证/获取屏幕的信息/将表单数据发给指定页面/将表单数据发给服务器window.history.forward(); /操作历史记录，前进window.history.back(); /后退 var div = document.getElementById(DivID);/通过获取元素Id操作元素var radio = document.getElementsByName(Vocation); /通过获取元素的name操作元素，通常需要操作一组元素的时候使用var input = document.getElementsByTagName(input); /通过获取元素的标签名称操作元素，通常需要操作一组元素的时候使用document.getElementById(DivID).innerHTML = Demo; /标签内，内容的HTML源码表示形式document.getElementById(TextareaID).value = Demo/标签内，内容的文本表示形式，innerText：IE支持，火狐等不支持;window.document.title = 页面标题改变了！; /设置页面标题动态创建元素、添加元素和设置属性：function Method() var input = document.createElement(input); /创建元素 input.setAttribute(type, button);/设置属性 input.setAttribute(value, 创建元素); input.setAttribute(class, face); document.body.appendChild(input); /添加元素 function ChangeFont() var p = document.getElementsByTagName(p); /获取页面上所有的p标签 p.item(0).className = face; /设置第一个p标签的class属性alert()：警告框。confirm:确认框。prompt：消息框。var result = confirm(点击确认可以得到人民币！);/确认框返回了bool值 if (result) alert(你得到了人民币！);/警告框弹出消息 result = prompt(请输入你的姓名！, );/消息框返回了输入的消息 alert(你的姓名是： + result);事件冒泡：事件由内向外依次执行事件冒泡使用document读取元素的width、height等属性时，读出来的是像10px这样的字符串。使用document动态设置元素的width、height等属性时，可以使用parseInt将10px这样的字符串解析成10，然后进行四则运算等。var width = document.getElementById(Demo).style.width; alert(parseInt(width);在javascript中没有类的语法，只有对象function Person(name, age) this.Name = name; /声明对象的成员的值等于传进来的参数 this.Age = age;/对象的成员就是以对象的key的方式出现的 this.Say = function() alert(大家好，我叫 + this.Name + ,今年 + this.Age + 岁) ;p1 = new Person(张耕明, 26); /这里必需要使用new以后才可以像操作一个对象一样操作这个方法p1.Say();数组的初始化：var arr = 1, 2, 3, 天, 地, 人; /普通数组初始化var arr1 = 姓名: 张耕明, 年龄: 28, 性别: 男 ; /键值对数组初始化for (var i in arr) /在javascript中这样写遍历的是数组的key alert(arri); /获取该key上的value区 分： foreach (string str in nickname) /C#中foreach遍历的是数组的值 Console.WriteLine(绰号： + str); 查看对象所有的成员或者属性：for (var v in document) alert(v); /对象的成员就是以对象的key的方式出现的Array 对象的使用：var arr = new Array(); /动态数组，不需要指定数组的大小arr0 = 吃饭;arr晚上 = 睡觉;arr-1 = 武术;arr1 = 玩电脑;arr0.1 = 锻炼;arr.reverse();/元素反转for (var i in arr) alert(i + + arri);setInterval(重复执行的定时器)、setTimeout(等待一段时间后执行一次的定时器)。清除setInterval类型的定时器时用clearInterval()方法，清除setTimeout类型的定时器时用clearTimeout()方法。var interval; /为定时器设定一个标识、编号。 function Start() interval = setInterval(Method(Hello Javascript！), 3000); /执行有参数的方法，每隔3秒执行一次 interval = setInterval(Method(), 3000); /执行没有参数的方法 interval = setTimeout(Method(), 3000); /3秒后执行一次指定的方法 clearInterval(interval); /清除定时器时传入指定的定时器编号剪贴板操作：function SetClipboard() var text = document.getElementById(Text).innerHTML; text = text + 本文章来自： + window.location.href; if (window.clipboardData) /这个属性支持IE，不支持火狐 window.clipboardData.setData(text, text);/设置剪贴板内容和 oncopy 事件不能同时进行，需要延时 剪贴板操作！标题滚动：function ScrollTitle() var title = document.title; var first = title.charAt(0); var last = title.substring(1, title.length); document.title = last + first; function Start() setInterval(ScrollTitle(), 300); 正则表达式：/用圆括号将所有选择项括起来，相邻的选择项之间用|分隔。但用圆括号会有一个副作用，是相关的匹配会被缓存，此时可用?:放在第一个选项前来消除这种副作用。：匹配输入字符串的开始位置。例：d。 $：匹配输入字符串的结束位置。例：d$。*：匹配零次或多次。例：d*。等价于0,。 +：匹配一次或多次。例：d+。等价于1,。?：匹配零次或一次。例：d?。等价于0,1。 n：匹配n次。例：d2。n,：匹配至少n次。例：d2,。 n,m：匹配至少n次，最多m次。例：d1,2。d：匹配数字字符。等价于0-9。 D：匹配非数字字符。等价于0-9。n：匹配换行符。等价于x0a。 t：匹配制表符。等价于x09。s：匹配任何空白字符，包括空格、制表符、换页符等。 S：匹配任何非空白字符。w：匹配数字、字母和下划线。等价于A-Za-z0-9_。 W：匹配非数字、字母和下划线。等价于A-Za-z0-9_。u4e00-u9fa5：匹配汉字。例：u4e00-u9fa5或汉字。 ?：后向引用，表示忽略相关匹配的保存。例：(?:(?:1-9)|(?:1-20-9)|30|31)$。Javascript中使用正则表达式：var reg = /w0,9$/;/正则表达式 var bl = reg.test(123);/返回bool值 var result = reg.exec(123);/返回字符串JQuery学习JQuery简介：JQuery是对Javascript封装的库，其内部是一些Javascript函数。JQuery采用链式编程，都是用方法来取值或者赋值，所以可以一直点下去。普通Javascript的缺点：在一些不同浏览器下需要不同的实现方法，要编写跨浏览器的程序非常麻烦。JQuery优点：JQuery占用空间少，使用简单方便（Write less, Do more），跨浏览器兼容性好，插件丰富、开源、免费。JQuery中ready的多次注册： jQuery(document).ready(Demo); /*传入当DOM就绪后要执行的函数*/ function Demo() alert(这是一次演示！); $(document).ready(function () alert(这是匿名的函数); ); /*尽量使用匿名函数，可以避免命名冲突 */ $(function () alert(这样也可以！) ); /*这是ready注册函数的简写*/ window.onload = function () alert(DOM元素、CSS、图片等DOM元素的属性加载完毕后触发); window.onload = function () alert(后来的替代了先来的！); /*window.onload只能注册一次，后注册的函数会覆盖先注册的函数*/ JQuery提供的函数：/*调用map函数对传入的数组中的元素逐个进行处理，然后将处理后的元素返回*/ var arr = 1, 3, 5, 2, 4, 6; var newArr = $.map(arr, function (element) /*第一个参数代表传入的数组，第二个参数中的element代表数组中的每一个元素*/ if (element % 2 = 0) return element + 5; else return element; /*使用map函数需要提供返回值*/ )/*调用each函数对传入的数组中的元素逐个进行处理。*/ var arr1 = 动漫1: 海贼王, 路飞, 动漫2: 火影忍者, 鸣人, 电影: 功夫, 周星驰 ; $.each(arr1, function(key, value) /*第二个参数中的key和value代表数组中的键和值*/ alert(这里是 + key + 频道。n + 正在播放 + value0 + ,主角： + value1); )/*使用 $.each()函数不需要提供返回值*/在每一个匹配元素的submit事件中绑定一个处理函数。 $(#Btn).submit(function() return false; )$(#Btn).unbind(submit); /bind()的反向操作，从每一个匹配的元素中删除绑定的事件。/禁止表单提交$(#BtnSubmit).click(function() return false;)JQuery动画效果：$(element).show()、$(element).hide()，显示和隐藏。$(element).slideUp()、$(element).slideDown()、$(element).slideToggle()，滑动效果。$(element).fadeIn()、$(element).fadeOut()、$(element).fadeTo()，淡入淡出效果。$(element).animate()，自定义动画。只有数字值可创建动画（比如 margin:30px）。字符串值无法创建动画（比如 background-color:red）$(#Button).click(function() $(#Div3).animate( width: 30px, height: 100px, fontSize: 100px , 3000); ) /鼠标跟随效果 $(document).mousemove(function (e) $(p).css( position: absolute, left: e.pageX, top: e.pageY ); /*e.pageX和e.pageY分别代表鼠标在页面上的X坐标和Y坐标*/ )JQuery基本选择器：$(.style) /*选择class属性是style的所有元素*/$(#Div input) /*选择id是Div下的所有input元素*/$(#Div input) /*选择id是Div下的直接input元素*/$(div ul li) /*选择div元素内的ul元素内的li元素*/$(body,input.style,ul) /*选择body元素、class属性是style的所有input元素、所有ul元素*/$(element).next() /*选择该元素后相邻的同级元素*/$(element).nextAll() /*选择该元素后所有的同级元素*/$(element).siblings() /*选择该元素同级的所有元素*/ $(td).mouseenter(function() $(this).animate( width: 200px, height: 60px ); /*选择鼠标进入的元素*/ $(td).not($(this).animate( width: 100px, height: 60px ); /*选择除该元素以外的所有元素*/ )JQuery过滤选择器：$(td:first) /*选择第一个td元素*/$(td:last) /*选择最后一个td元素*/$(td:not(td:last) /*选择不是最后一个td元素的所有td元素*/$(td:even) /*选择所有偶数行的元素，索引从0开始计数，奇数索引受影响。例：第二行，索引为1*/$(td:odd) /*选择所有奇数行的元素，索引从0开始计数，偶数索引受影响。例：第一行，索引为0*/$(td:eq(0) /*选择等于该索引值的元素，eqgreat*/$(td:lt(9) /*选择小于该索引值的元素，lt-little*/$(:header) /*选择所有的标题元素，h1.h6*/JQuery属性过滤选择器：$(inputid) /*选择所有具有id属性的input元素*/$(title=提示消息) /*选择title等于提示消息的所有元素*/$(inputtitle!=提示消息) /*选择title不等于提示消息的所有input元素*/$(inputtitle=输入) /*选择title以输入开始的所有input元素*/$(inputtitle$=搜索) /*选择title以搜索结束的所有input元素*/$(inputtitle*=关键词) /*选择title包含关键词的所有input元素*/$(idid$=t) /*选择所有具有id属性，并且id是以t结束的所有元素*/表单选择器：$(:input) /*选择所有 input, textarea, select 和 button 元素*/$(input) /*选择所有 input元素*/$(:text) /*选择所有的单行文本框，相当于 $(inputtype=text)*/$(:password) /*选择所有密码框*/$(:checkbox) /*选择所有复选框*/$(:radio) /*选择所有单选按钮*/$(:reset) /* 选择所有重置按钮*/$(:submit) /*选择所有提交按钮*/$(:file) /*选择所有文件域，相当于 $(inputtype=file)*/$(:image) /*选择所有图像域，相当于 $(inputtype=image)*/$(:hidden) /*选择所有隐藏元素*/$(:button) /*选择所有按钮,其中不包括：重置、提交、单选、复选按钮*/表单对象属性选择：$(input:enabled) /*选择所有可用的input元素*/$(input:disabled) /*选择所有不可用的input元素*/$(input:checked) /*选择所有被选中的input元素(复选框、单选框等，不包括select中的option)*/$(select option:selected) /*选择所有被选中的option元素*/属性的增加、删除、修改、读取：$(a:first).attr(href) /*获取元素的属性值*/$(a:first).attr( href: HomePage.html, title: 首页, className: home ); /*设置元素的多个属性值*/$(a:first).attr(title, 首页); /*设置元素的一个属性值*/ $(p).attr(style, function() return font-size:36px; /*设置的属性值是一个方法的返回值*/ )$(a).removeAttr(href); /*删除元素的属性值*/创建、删除、替换DOM节点：$(body).append(element); /*在页面的末尾增加元素*/$(body).prepend(element); /*在页面的开始增加元素*/$(element).after(element); /*在指定元素的后面增加元素*/$(element).before(element); /*在指定元素的前面增加元素*/$(div).empty(); /*清空div的内容,div仍然保留在页面中*/$(a).remove(title); /*删除具有title属性的所有a标签*/$(p:first).replaceAll(p:last);/用第一个p标签替换掉最后一个p标签JQuery对象和DOM对象：JQuery对象是通过JQuery包装DOM对象以后产生的对象，DOM对象只有转换为JQuery对象才能被JQuery操作。JQuery只能调用JQuery内部封装的方法，不能调用DOM对象的方法，反之亦然。$(function () / $(#Div).innerHTML = 123; /错误：使用JQuey对象调用DOM对象的方法 / document.getElementById(Div).html(123); /错误：使用DOM对象调用JQue