叶子网络bbs论坛

标题: javascript 进阶 [打印本页]

---

作者: rain    时间: 2014-10-19 01:43
标题: javascript 进阶


一、DOM操作
setHomePage()     设置首页地址

window.external.addFavorite()   ie放入收藏夹
window.sideba.addPanel()   非ie放入收藏夹

window.onload   监视网页元素是否加载完毕

innerHTML   动态创建网页程序,设置或返回表格行的开始和结束标签之间的 HTML

stringObject.length      length 属性可返回字符串中的字符数目。

节点的childNodes 属性，可以得到该节点的所有子节点数组。

createElement()   创建元素

appendChild()   进行DOM元素的挂接

createTextNode()    建立一个新的text 节点，并包含指定的数据。
parentNode  父节点
childNode    子节点
hasChildNodes()  是否含有子节点

removeChild()  删除元素

click()  激活单击事件

cloneNode(true)    为true时克隆元素及其所有子节点。为false则克隆元素但不包含它的子节点。

---

作者: rain    时间: 2014-10-19 04:22


二、控制表单控件
document对象的forms属性可以返回一个数组，数组中的元素都是form对象。form对象又称为表单对象。
document.forms    获取表单DOM
对象.elements     对象的元素

.method   表单的方法属性

.focus()  可以让当前控件获得焦点
.select()   被选中

reset()  重置表单信息

tagName    标签名

.checked=true    选中     false 不选中

onFocus事件就是当光标落在文本框中时发生的事件。

onBlur事件是光标失去焦点时发生的事件。

fgColor  设置文字颜色
bgColor   设置背景颜色

toUpperCase   小写转成大写
toLowerCase   大写转成小写

form.submit()   提交表单
form.reset()   重置表单

onreset   重置时触发事件
onsubmit   提交时触发事件

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法stringObject.indexOf(searchvalue,fromindex)searchvalue        必需。规定需检索的字符串值。
fromindex        可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
提示和注释
注释：indexOf() 方法对大小写敏感！

注释：如果要检索的字符串值没有出现，则该方法返回 -1

onkeyup 事件会在键盘按键被松开时发生。
onkeydown  键盘按下时发生
onKeypress   按下并释放键盘键

onmouseover 事件会在鼠标指针移动到指定的对象上时发生。
onmouseout  事件在鼠标指针移开时发生
mousemove   鼠标移动
例：  onMousemove="javascript:this.style.background='#fff';"
onclick  鼠标单击
onDblclick    双击
onMousedown  鼠标按下
onMouseup  释放鼠标键
onMousewheel  鼠标滚轮滚动

onfocus  对象获得焦点
onblur  失去焦点

onload   载入网页完毕后发生
onunload   卸载某网页

onchange   对象改变
onselect    选取某对象

onsubmit  提交表单
onreset   重置表单

cols  列                 rows    行

---

作者: rain    时间: 2014-10-19 23:11


面向对象

this指针可以为函数对象动态添加属性。

对象被“new”运算符创建出来以后要由一个变量引用，才可以对其进行调用操作。
对象有三个来源：
    1、引用javascript内部对象。
    2、由浏览器环境中提供。
    3、创建新对象。

js对象的类型在运行时才能确定。

js对象结构有四大部分：
1、语言核心（变量常量、运算符、表达式、数据类型、控制语句等）
2、基本内置对象（String    Date    Math 等）
3、浏览器对象（window   Navigator  Location   document  frames  history ）
4、文档对象（Document  Form  Image等）

事件驱动：整个系统可以用事件的发生来驱动运作。比如当页面加载完成时发生“onload”事件，单击鼠标使用“onclick”，键盘按下“onkeydown”，松开键盘“onkeyup”等

---

作者: rain    时间: 2014-10-21 00:18


窗口和框架

defaultStatus   默认状态栏信息
status   状态栏瞬间信息

window.open()  打开新窗口
窗口名.close()  关闭窗口
window.frames          得到框架数组

myWindow.scrollBy(50，0)         向右滚动50像素
myWindow.scrollBy(-50,0)           向左滚动50像素
myWindow.scrollTo(1,1)           滚动到原点
myWindow.scrollTo(100,100)   滚动到坐标（100，100）

.parent 父框架
top  顶层的框架
self  当前区域

onFocus 得到焦点
onBlur  失去焦点

errmsg（）错误处理

rows  控制高度   cols  宽度

setTimeout  延迟代码执行
setInterval   周期性执行代码
clearInterval(id)  停止周期性执行代码
clearTimeout(id)  取消延迟执行

target="窗口名"  指定链接文档要使用的窗口

---

作者: rain    时间: 2014-10-21 00:46


屏幕和浏览器对象
screen   屏幕对象              navigator  浏览器对象

screen.availHeight   实际高
screen.availWidth   实际宽
screen.colorDepth  色盘深度
screen.height          区域高度
screen.width           区域宽度

navigator.mimeTypes     提供当前浏览器所支持的mime类型信息
plugin 管理当前浏览器中已经安装的插件或外挂程序的信息

navigator.javaEnabled()    判断当前浏览器是否已经启用Java支持功能
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth


HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

---

作者: rain    时间: 2014-10-21 01:18
历史对象和地址对象

history 历史对象，客户端浏览器窗口最近浏览过的历史网址是通过该对象来存储管理的。
location 地址对象，客户端浏览器窗口的URL地址信息。

一个URL会有下面的格式：协议（//）+主机：端口（/）+路径名称（#）+哈希标识（？）+搜索条件
参数=window.location.href;  取得整个url字符串
window.location.href="新地址"   将前往指定的页面
location.assign()   加载一个新文档
location.replace()   用新的url替换当前文档
location.reload() 重新载入当前文档 / 刷新文档

刷新的5种方法：
history.go(0)
location.reload()
location=location
window.navigate(location)
location.replace(location)

---

作者: rain    时间: 2014-10-21 16:26


脚本化cookie
navigator.cookieEnabled     判读浏览器是否支持cookie
split() 方法用于把一个字符串分割成字符串数组。
escape  编码        unescape  还原
expire    设置生存时间
secure  保证cookie与服务器之间的数据传输过程加密

---

作者: rain    时间: 2014-10-21 23:37


文档对象

document对象代表一个浏览器窗口或框架中显示的HTML文件。
                 .lastModified     最后修改日期
document.title                  显示标题
                .URL                 显示URL

substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法stringObject.substring(start,stop)

参数	描述
start	必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop	可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。 如果省略该参数，那么返回的子串会一直到字符串的结尾。

document.referrer      返回载入当前文档的文档的 URL
location.hostname     当前主机域名

window.open()  打开一个新的窗口
document.close()     关闭文档流

document.all[]    文档中所有标签组成的一个数组变量

math.abs    返回数字的绝对值
math.floor    返回小于或等于指定数字的最接近的整数
math.random   返回随机数，介于0到1之间

anchors     锚对象

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
实例

在本例中，我们将在 "Hello world!" 字符串内进行不同的检索：

<script type="text/javascript">
var str="Hello world!"
document.write(str.lastIndexOf("Hello") + "<br />")
document.write(str.lastIndexOf("World") + "<br />")
document.write(str.lastIndexOf("world"))
</script>

以上代码的输出：

0
-1
6

---

作者: rain    时间: 2014-10-22 18:48


鼠标特效
cursor
event.button==1   鼠标按下事件
0    没按键    1 左键    2右键     3左键和右键    4中间键  

style.cursor='pointer'  鼠标指针形状
text  文字编辑   auto  自动       pointer 手形状，同ie的hand     move   按左键和右键    not-allowed  不允许
no-drop  无法释放     wait 等待，沙漏形状   help 帮助，问号    crosshair  十字准星

e     /    window.event     事件变量    （firefox  /  ie  & chrome）
event.srcElement   /   e.target  设置或获取触发事件的对象
e    事件驱动源(为了兼容IE9之前的版本)
e.preventDefault()       /            e.returnvalue=false    阻止事件默认行为。

---

作者: rain    时间: 2014-10-24 01:03


按钮特效
window.print()   打印
event.keycode==13  判断是否按enter键
window.status    浏览器窗口状态栏信息

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
offsetHeight与offsetWidth作用相同，前者是获取元素的高度后者则是宽度

onclick=null   单击事件置空
href=‘javascript:void(0)’;   效果等同于  href="#"

---

作者: rain    时间: 2014-11-17 17:01
做ACM题的时候，排序是一种经常要用到的操作。如果每次都自己写个冒泡之类的O(n^2)排序，不但程序容易超时，而且浪费宝贵的比赛时间，还很有可能写错。STL里面有个sort函数，可以直接对数组排序，复杂度为n*log2(n)。使用这个函数，需要包含头文件。
    这个函数可以传两个参数或三个参数。第一个参数是要排序的区间首地址，第二个参数是区间尾地址的下一地址。也就是说，排序的区间是[a,b)。简单来说，有一个数组int a[100]，要对从a[0]到a[99]的元素进行排序，只要写sort(a,a+100)就行了，默认的排序方式是升序。
    拿我出的“AC的策略”这题来说，需要对数组t的第0到len-1的元素排序，就写sort(t,t+len);
    对向量v排序也差不多，sort(v.begin(),v.end());
    排序的数据类型不局限于整数，只要是定义了小于运算的类型都可以，比如字符串类string。
    如果是没有定义小于运算的数据类型，或者想改变排序的顺序，就要用到第三参数——比较函数。比较函数是一个自己定义的函数，返回值是bool型，它规定了什么样的关系才是“小于”。想把刚才的整数数组按降序排列，可以先定义一个比较函数cmp
bool cmp(int a,int b)
{
    return a>b;
}
   排序的时候就写sort(a,a+100,cmp);

   假设自己定义了一个结构体node
struct node{
    int a;
    int b;
    double c;
}
   有一个node类型的数组node arr[100]，想对它进行排序：先按a值升序排列，如果a值相同，再按b值降序排列，如果b还相同，就按c降序排列。就可以写这样一个比较函数：
以下是代码片段：
bool cmp(node x,node y)
{
     if(x.a!=y.a) return x.a

if(x.b!=y.b) return x.b>y.b;
     return return x.c>y.c;
}     排序时写sort(arr,a+100,cmp);

    最后看一个完整的实例，初赛时的一道题目“文件名排序 ”。
以下是代码片段：
#include<iostream>
#include<algorithm>
#include<string>
using namespace std;
//定义一个结构体来表示文件，a代表文件名，b代表文件类型（要么"File"要么"Dir"）
struct node{
string a,b;
};
//ASCII码中，所有大写字母排在所有小写字母前面，'A'<'Z'<'a'<'z'
//而这题要求忽略大小写，所以不能直接用字符串的比较。自定义了一个lt函数，就是less than的意思
//先把两个字符串全部转化为小写，再比较大小（字典序）
bool lt(string x,string y)
{
int i;
for(i=0;i<x.length();i++)
  if(x[i]>='A'&&x[i]<='Z')
   x[i]='a'+(x[i]-'A');
for(i=0;i<y.length();i++)
  if(y[i]>='A'&&y[i]<='Z')
   y[i]='a'+(y[i]-'A');
return x<y;
}
//自定义的比较函数，先按b值升序排列（也就是"Dir"排在"File"前面）
//如果b值相同，再按a升序排列，用的是刚才定义的lt函数
bool comp(node x,node y)
{
if(x.b!=y.b)return x.b<y.b;
return lt(x.a,y.a);
}
int main()
{
node arr[10001];
int size=0;
while(cin>>arr[size].a>>arr[size].b)
  size++;
sort(arr,arr+size,comp);
for(int i=0;i<size;i++)
  cout<<arr[i].a<<" "<<arr[i].b<<endl;
return 0;
}

---

作者: rain    时间: 2014-11-17 17:50
定义和用法
deleteRow() 方法用于从表格删除指定位置的行。

语法
tableObject.deleteRow(index)
说明
参数 index 指定了要删除的行在表中的位置。行的编码顺序就是他们在文档源代码中出现的顺序。<thead> 和 <tfoot> 中的行与表中其它行一起编码。

例子

<html>
<head>
<script type="text/javascript">
function deleteRow(r)
  {
  var i=r.parentNode.parentNode.rowIndex
  document.getElementById('myTable').deleteRow(i)
  }
</script>
</head>
<body>

<table id="myTable" border="1">
<tr>
  <td>Row 1</td>
  <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
</table>

---

作者: rain    时间: 2014-11-24 15:09


var myDate=new Date()
Date 对象会自动把当前日期和时间保存为其初始值。
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
如何使用 getDay() 和数组来显示星期，而不仅仅是数字。
getYear()     1900年以来的年数
getMonth()   从0开始的月数
getDate()     日
getHours         时
getMinutes      分
getSeconds     秒

---

作者: rain    时间: 2014-11-27 22:20
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
<script type="text/javascript">

var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))

</script>
以上代码的输出：
0
-1
6

disabled 属性可设置或返回是否禁用单选按钮。
radioObject.disabled=true|false

---

作者: rain    时间: 2014-11-28 15:00


document.styleSheets[0].cssRules || document.styleSheets[0].rules || window.CSSRule.STYLE_RULE;
调用外部定义的css样式

$.extend : 扩展工具方法下的插件形式  $.xxx() $.yyy()
$.fn.extend  :  扩展到JQ对象下的插件形式  $().xxx()  $().yyy()

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
例：eval("x=10;y=20;document.write(x*y)")           结果为：200

substr() 函数返回字符串的一部分
语法:substr(string,start,length)
<?php
echo substr("Hello world!",6,5);
?>

输出：

world


prop()获取匹配的元素的属性值

---

作者: rain    时间: 2014-12-11 11:49
charAt() 方法可返回指定位置的字符。
请注意，JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。
语法：stringObject.charAt(index)
参数        描述
index        必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
<script type="text/javascript">

var str="Hello world!"
document.write(str.charAt(1))

</script>
以上代码的输出是：
e

---

作者: rain    时间: 2014-12-15 12:08


Prototype框架
<script src="prototype.js"></script>
                <script type="text/javascript">
                        var Dog = Class.create();
                        Dog.prototype = {
                          initialize: function(myname) {
                                this.myname = myname;
                          },
                          cry: function(msg) {
                                alert(this.myname + ': ' + msg);
                          }
                        };
                        
                        var SmallDog = Class.create();
                        SmallDog.prototype = Object.extend(new Dog(),{
                                cry: function(msg) {
                                alert(this.myname + ' 小声的说 ： ' + msg);
                          }
                        });
                                
                        var duoduo = new SmallDog('多多');
                        duoduo.cry('hi');
                </script>        
        </head>
        <body style="text-align:center">
        </body>

initialize      构造函数
Object.extend    继承属性和函数

---

<script type="text/javascript">
                        //初始化函数
                        function init(){
                                //为按钮指定click事件的回调
                                $("demo").on("click", function(event) {
                                        //alert语句
                                        alert('按钮被点击了');
                                });
                        }
                </script>        
on()函数轻松搞定DOM事件

---

var w = $('myul').offsetWidth;        //宽度
var h = $('myul').offsetHeight;        //高度
获取DOM的实际尺寸

---

作者: rain    时间: 2014-12-15 12:08


Dojo框架
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"></script>
                <script type="text/javascript">
                        //利用dojo的网页加载完成回调函数
                        dojo.addOnLoad(function () {
                                //使用create创建div元素，并附加在body里。
                                dojo.create("div", { innerHTML: "这是dojo创建的哟!" }, dojo.body());
                        });
                </script>       
addOnLoad() 网页加载完成以后的回调，类似于onload事件。
create() 创建元素

---

dojo.addOnLoad(function () {
                                //获取按钮的DOM
                                var btn = dojo.byId('btn');
                                //使用connect函数处理事件，参数分别为DOM，事件和回调
                                dojo.connect(btn, 'onclick', function(){
                                        //回调函数的具体实现
                                        alert('按钮被click了');
                                });
                        });

connect()   处理函数事件

---

setTimeout(function(){
                                        dojo.fadeOut({             //调用fadeOut函数
                                                node: "myimg",         //目标的DOM的id
                                                duration: 2000,        //持续时间，毫秒  
                                                delay: 250            //延迟执行，毫秒
                                        }).play();                        //play函数开始执行
                                }, 5000);

fadeOut()  隐退效果

---

dojo.addOnLoad(function(){
                                //创建一个可拖动的实体，id就是mydrag
                                new dojo.dnd.Moveable("mydrag",{});
                        });

moveable   实现元素的拖拽

---

作者: rain    时间: 2014-12-15 12:08


YUI框架
监听单击事件
<script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>
                <script type="text/javascript">
                        //开始定义一个YUI的沙盒
                        YUI().use('node', function (Y) {
                                var node = Y.one("#demo");//通过id获取到目标的DOM
                                //监听DOM的点击事件
                                node.on("click", function(e) {
                                        Y.one('#demo').addClass('hello');//通过修改类名来改背景色
                                });
                        });
                </script>        

---

模拟向左滑动以删除菜单项
<script type="text/javascript">
                        //开始定义一个YUI的沙盒
                        YUI().use('node-base','node-event-delegate', 'transition', 'event-move', function (Y) {
                                //开始监听鼠标滑动的事件
                                Y.one("#swipe").delegate("gesturemovestart", function(e) {
                                        var item = e.currentTarget,        //事件发生的主体
                                                target = e.target,                //事件发生的目标
                                                container = e.container,//事件所在容器
                                                //是否为删除的按钮
                                                isDeleteButton = target.hasClass("myapp-delete");
                                        if (!isDeleteButton) {//如果不是点击删除按钮
                                                //把所有的删除按钮都隐藏起来
                                                container.all(".myapp-delete").addClass("myapp-hidden");
                                                //监听鼠标滑动结束事件
                                                item.once("gesturemoveend", function(e) {
                                                        //显示当前行的按钮
                                                        item.one(".myapp-delete").removeClass("myapp-hidden");
                                                });
                                        } else {//如果是点击了删除按钮
                                                item = target.get("parentNode");//父节点
                                                item.remove();//删除菜单行
                                        }
                                }, "li", {
                                        preventDefault:true        //避免li的默认事件影响我们的逻辑
                                });
                        });
                </script>        

gesturemovestart    监听鼠标滑动开始

---

网页元素隐藏和显示切换
<script type="text/javascript">
                        //开始定义一个YUI的沙盒
                        YUI().use('node', function(Y) {
                                //监听按钮的点击事件
                                Y.one("#toggle").on("click", function(e) {
                                        Y.one('#demo').toggleView();//调用YUI的toggle效果函数
                                });
                        });
                </script>        
toggleView()   自动检测元素是否已经隐藏，并切换

---

层的收缩隐藏
YUI().use('anim', function(Y) {
                                //创建一个新的动画对象
                                var anim = new Y.Anim({
                                        node: '#demo .yui3-bd',//应用动画的节点
                                        to: { height: 0 },        //移动到的高度为0
                                        easing: 'backIn'        //擦除效果隐退
                                });
                                //监听隐藏按钮的点击事件
                                Y.one('#demo .yui3-toggle').on('click', function(e) {
                                        e.preventDefault();        //避免默认事情行为
                                        anim.run();                        //开始运行动画效果
                                });
                        });

anim（）动画

---

层的随意拖动效果
YUI().use('dd-drag', function(Y) {
                                //创建一个可拖动的对象
                                var dd = new Y.DD.Drag({
                                        node: '#demo'//指定可以拖动的DOM
                                });   
                        });

drag()  拖拽效果

---

随意改变层的尺寸
YUI().use('resize', function(Y) {
                                //创建一个可以改变尺寸的对象
                                new Y.Resize({
                                        node: '#demo'//指定可以改变尺寸的DOM
                                });   
                        });

resize() 改变尺寸

---

欢迎光临 叶子网络bbs论坛 (https://www.fob0.com/)

Powered by Discuz! X3.3