javascript 进阶

rain · 发表于 2014-11-17 17:01:16

做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:49

定义和用法
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:31

本帖最后由 rain 于 2014-11-24 15:55 编辑

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

rain · 发表于 2014-11-27 22:20:46

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:10

本帖最后由 rain 于 2014-12-11 11:43 编辑

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:50

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:15

本帖最后由 rain 于 2014-12-15 12:20 编辑

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 继承属性和函数

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

rain · 发表于 2014-12-15 12:08:30

本帖最后由 rain 于 2014-12-15 12:32 编辑

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:49

本帖最后由 rain 于 2014-12-15 13:47 编辑

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() 改变尺寸

		自动登录	找回密码
密码			立即注册