JavaScript

JavaScript

一、按钮事件

1、onclick： 点击事件
2、onmouseover：鼠标移入事件
3、onmouseout：移出页面事件
方法如下：

//加下需要滚动的

4、onmousemove：鼠标指针移动时发生的事件，它一像素为单位，每移动1像素，onmousemove()方法就触发一次。
使用方法：
var cout=0;
function move(){
document.getElementById(“sp”).innerHTML=++cout;
}

移动了 0像素

5、onload：页面加载完成时触发的事件。
使用方法：
window.οnlοad=function(){
alert(“页面加载完成”);
}
6、onblur：光标或者焦点离开元素后触发的事件。
使用：
7、onchange：下拉框的值发生变化或者下拉项的选项，触发的事件
使用：
function chgnge(obj){
var chg=obj.value;
if(chg!=“请选择”){
window.open(chg);
}
}

	<select onchange="chgnge(this)">
        <option value="请选择">请选择:</option>
        <option value="http:www.baidu.com">百度</option>
        <option value="http:www.xinlang.com">新浪</option>
        <option value="http:www.wangyi.com">网易</option>
    </select>

8、onsubmit：点击表单元素的“提交按钮”会触发form标签的onsubmit事件，浏览器对这个事件有默认处理方式——默认是给action属性的。想改可以用：
event.returnValue=false;
将默认指定去除。
使用事件来拦截默认浏览器的默认事件处理：
if(user==“123”&&pws==“1234”){
alert(“登陆成功”);
return true;
}else if(user==“123”){
alert(“密码有误”);
return false;
}else{
alert(“账号有误！”);
return false;
}

9、对象：
（1）、提示框：alert 如：window.alert(“欢迎你”);
（2）、提示输入框：prompt 如：window.prompt(“请输入昵称”);
（3）、确认对话框：confinrm 如window.confirm(“确认删除吗？”);
如 var flag=window.confirm(“执行操作吗？”); \点确定返回true；点取消返回false
if(flag){
window.alert(“执行”);
}else{
window.alert(“取消”);
}
（4）、使用window对象的open和close方法可以打开和关闭窗口。
open方法的第一个参数是新窗口的URL地址，第二个参数是给窗口的命名，第三个参 数是设置新窗口的特征，这三个参数都是可以省略的。
close方法可关闭窗口对象。没有参数，只需要关闭的对象调用close方法即可。
使用方法：
var newwin=window.open(“adv.html”,“adv”,“width=800,height=300,left=270,top=120”);//打开
javascript:newwin.close()//关闭
延迟对话框：
setTimeout方法和setInterval方法。可以通过设定时间让程序完成指定的任务。
setTimeout方法会根据设置的时间执行指定的代码并退出。
setInterval方法会根据设置的时间间隔反复执行指定的代码，直至程序结束或利cloarInterval方法取消。
两个方法都带有两个参数：一个是引号的程序代码或函数的调用，另一个是以毫秒表示的时间，这个时间代表执行代码的延迟。
方法：setTimeout(“alert(‘hello’)”，2000)；
setIntervarl(“alert(‘hello’)”，2000);\每两秒跳一次，直到退出页面。
(5)、requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，它的主要用途是按帧对网页进行重绘。
目的是为了让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
requestAnimationFrame的优势，在于充分利用显示器的刷新机制比较节省系统资源。
注意：可以使用cancelAnimationFrame方法取消重绘。
（6）、history对象和location对象
history对象保存了当前 浏览器窗口中打开页面的一个历史记录列表，使用history对象，可以将当前浏览器页面跳转到某个曾打开过的页面。histroy对象可以通过window对象的history属性获取。
使用方法：
打开百度页面
前进
后退
前进
后退
（7）、location对象用于管理当前打开窗口的URL信息，相当于浏览器的地址栏。
location对象可通过window的location属性获取。
主机域名：window.location.hostname
URL地址：window.location.href
主机端口：window.location.port
web协议：window.location.protocol
页面路径和文件名：window.location.pathname
(8)、screen对象和navigator对象：
window.screen对象包含了用户屏幕的相关信息，编写时可不用window前缀。
availWidth属性放回访问者屏幕的宽度，单位是像素，减去界面特性。
availHeight属性放回访问者屏幕的高度，单位是像素，减去界面特性。
总宽度/高度：screen.width;screen.height;
可用宽度/高度：screen.availWidth;screen.availHeight
色彩深度：screen.colorDepth
色彩分辨率：screen.pixelDepth

二、对象模型：

1、使用document对象查找HTML元素方式有：
（1）、document.getElementById(id)方法可以通过id获取HTML页面的元素。
（2）、doucument.getElementsByName(name)方法可通过name获取页面元素。
（3）、doucument.getElementsByTagName(tagname)方法可以通过标签名访问页面元素。
2、document对象改变HTML元素：
改变html内容：obf.innerHTML="";
document.write（）方法可用于 直接向HTML的输出流写内容。

jQuery概述：

（一）、概述：

	JavaScript的出现前台脚本语言发展的一个里程碑，JavaScript是一种基于对象的事件驱动的解释性语言。
频繁使用的JavaScript库包括jQuery、Prototype、Spry和ExtJS。
jQuery是由美国人JohnResig于2006年创建的一个JavaScript库，随着普及度的提高，也来越多的程序高手加入其中，完善并壮大其项目内容。
如今已发展成为集JavaScript、CSS、DOM和Ajax于一体的强大框架体系。
主旨是：精简代码。
	 jQuery的基本功能有以下4点:
1、访问和操作DOM元素：
	使用jQuery库，可以很方便地获取页面中的元素，并能方便的修改其样式和内容。
2、对页面事件的处理：
	引入jQuery库后，可以使页面的表现层与功能开发分离。
3、大量插件在页面中的运用：
	在引入jQuery库后，可以使用大量的插件来完善页面的功能和效果。
4、与Ajax技术的完美结合：-
	Ajax异步读取服务器数据的方法，方便了程序的开发，增强了用户叶念体验度。

（二）、jQuery的基本选择器：

1、由标签id、class、标签和选择符组成，通过基本选择器可以实现大多数页面元素的查找。
2、注意点：
（1）、每个id值在同一个html页面中只能使用一次。如果对多个元素分配了相同的id#id选择器将只选择第一个匹配。
（2）、可以同时指定任意多个选择器并用逗号相连接，会将匹配到的元素合并到一个结果中，这是一种选择不同元素的有效方法。
（3）、与元素、id选择器相比，类选择器的执行效率很低，应该可能少地使用，或者把类选择器和元素选择器和元素选择器配合一起使用，选取的丫爱你是要同时符合类属性值和标签名，这样的形式能够显著提高搜索性能。

（三）、jQuery的过滤选择器

可见性过滤选择器根据元素是否可见的特征获取元素。
不可见元素包括：css样式中display属性值为none的元素，type属性值为hidden的<input>元素及宽高设置为0的元素。
属性过滤选择器根据元素的某个属性获取元素，
如id或匹配属性值的内容，并以"["号开始”]“号结束。
使用方法：
    <img src="images/mp.png" class="phone">
<p>
    <input type="button" value="显示" id="btnshow" />
    <input type="button" value="隐藏" id="btnhide" />
</p>
    $(function() {
    $("#btnshow").click(function(){
        $(".phone:hidden").show().addClass("current");
    });
    $("#btnhide").click(function(){
        $(".phone:visible").hide();
    });
        $("input[type='button']").click(function(){
        $("input[value='显示']").click(function(){
            alert("点击了“显示”");
        });
    });
});     

（四）、jQuery的层次选择器和表单选择器：

层次选择器通过DOM元素之间的层次关系获取元素，层次关系包括：后代、父子、相邻和兄弟关系。层次选择器由两个选择器组合而成。
层次选择器的选择过程为：
（1）、按照第一个选择器选取元素
（2）、根据符号（空格、>、+、~’）确定是其后代元素、子元素、后面第一个兄弟元素还是后面所有兄弟元素
（3）、在这些元素范围内按照第二个选择器选取最后想要的元素。

（五）、DOM对象与jQUery对象：

jQuery对象转成DOM对象，可使用jQuery中的get()方法。jQuery对象是一个可以匹配多个元素的集合。
如果get()方法不带参数，get()方法将会返回所有匹配元素的DOM对象，并将它们包含在一个数组中。
如果指定了get()方法的参数index，由于从0开始计数，get(index)方法会返回第(index+1)个元素的DOM对象。

1、jQuery中使用DOM对象操作元素：
在jQuery框架中，关于元素样式的操作包含：
scc()、addClass()\removeClass()和toggleClass()
（1）、jQuery中，可以通过css()方法为某个指定的元素设置样式值。
（2）、在jQuery中，可以通过jQuery对象的addClass()方法为元素增加类，其中参数class为在css样式中定义的类的名称，也可以增加多个类的名称值需要用空格将类名隔开即可。
（3）、removeClass()方法用于删除类。其中参数class为类名，该参数是可选项，当有参数class时，则从元素中删除名称为class的类样式。
（4）、toggleClass()模拟addClass()与removeClass()实现样式切换的过程。
2、在jQuery中，操作元素内容的方法包括html()和text()。
html()：即获取或设置元素的HTML内容；==innerHtML属性
text()：即获取或设置元素的文本内容。==innerText属性
获取元素的值，可以通过val()方法来实现。
如果val()方法不带参数，表示获取某原色的值；如果val()方法有参数则表示将参数赋给指定的元素，即设置元素的值。
通过attr()方法可以获取或设置元素的属性值，而通过removeAttr()方法则可以对元素某一指定的属性执行删除操作。
3、 在jQuery中，在页面中增加某个元素，需要先通过$(html)函数完成元素的创建，然后在调用新元素的上级或者同辈的相关方法，把新元素添加到DOM树种，。动态创建新元素后，需要执行插入或追加操作。
替换元素中的节点，可使用replaceWith()和replaceAll()这两种方法。replaceWIth方法的功能是将所有选择的元素替换成指定的html元素，其中参数content是替换所选择的内容。replaceAll方法的功能是用所有选择的元素替换指定selector的元素，其中参数selector为需要被替换的元素。
4、复制某个元素节点时，可以通过clone()方法实现。clone方法的功能是复制选择的html元素，该方法只是复制元素本身，被复制后的新元素不具有任何元素行为。
将该元素的全部的行为为也进行复制，可以通过添加参数true来实现remove方法删除元素：
remove方法的参数为可选项，如果接受参数，则该为筛选元素jQuery表达式，通过该表达式将获取指定的元素，并进行删除。
5、在传统的JavaScript中，通过先获取数组的总长度，然后以for循环语句，循环访问每个元素，其代码相当复杂。
zaijQuery中，可以直接使用each()方法实现元素的遍历。
each方法的参数是一个function函数，可以给该函数传递一个index参数，这个参数是遍历元素的序号(从0开始)。
如需要在函数体中，访问当前遍历到的元素，可以使用this关键字。
实例：
$("#btnys1").click(function(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: … //(this).css(“border”,“2xp solid red”);
$(this).attr(“title”,“第”+(index+1)+“张图片”);
this.style.border=“2xp solid red”;
});
});

（六）、jQuery动画特效：

	jQuery动画特效中的显示与隐藏一般通过display样式属性来实现。

1、在jQuery中可以用show()方法显示，hide()方法隐藏（当使用了hide方法后display的值会变成none）。
show方法的参数duration表示动画效果运行的时间，可以使用：
关键字slow——0.6秒 normal——0.4秒 fast——0.2秒
也可以自己设置，默认单位为毫秒。
toggle()方法会动态第改变当前元素的高度、宽度和不透明度，最终切换当前元素的可见状态。
2、淡入淡出效果：
fadeIn()和fadeOut()
fadeToggle()方法会动态的改变当前元素的透明度，最终切换当前元素的可见状态。即如果元素是可见的，则通过淡出效果切换为隐藏状态；如果元素是隐藏的，则通过淡入效果切换为可见状态。
3、设置元素透明度：
fadeTo(时间，透明度);
4、设置滑入滑出动画特效：
滑入：slideDown(“动画时间”);
滑出：slideUp(“动画时间”);
动态切换可见状态：slideToggle();
实例：
$(function(){
$("#menu li.last_img").click(function(){
$("#menu li:gt(5):not(:last)").fadeToggle();
$(this).toggleClass(“down”);
})
$(".hidler").hover(function(){
$(".hidlerul").slideToggle(2000);//$(".hidler ul").slideDown(2000);
// },function(){
// $(".hidler ul").slideUp(2000);
});
});
5、自定义动画：
（1）、animate({“属性”},“动画时间”);
实例：
$(".p1_1").hover(function(){
$(this).animate({width:“400px”,height:“400px”},“slow”);
},function(){
$(this).animate({width:“200px”,height:“200px”},“slow”);
});
（2）、“队列”动画是指在元素中执行一个以上的多个动画效果，即有多个animate()方法再元素中执行。根据这些animate()方法的现货顺序，形成了动画“队列”，动画的效果便“队列”的顺序进行展示。
（3）、在JQuery中，可以通过show()、slideDown()和animate()等方法可以实现元素的动画效果。
（4）、stop()方法的两个参数均为可选参数，且均为布尔类型。如果使用不带参数的,则会立即停止当前正在执行的动画，如果后面还有动画要继续，则以当前状态开始接下来的动画。
如：stop(是否清除当前动画,是否停止当前动画);
$(".hidler ul").stop().slideToggle(2000);