请选择 进入手机版 | 继续访问电脑版

叶子网络bbs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
12
返回列表 发新帖
楼主: rain

javascript 进阶

[复制链接]

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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;
}
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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>
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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     秒
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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()获取匹配的元素的属性值
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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    继承属性和函数


<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的实际尺寸

回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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   实现元素的拖拽
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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() 改变尺寸


回复

使用道具 举报

手机版|Archiver|叶子官网|杭州轩翼网络科技有限公司 ( 浙ICP备17027999号

GMT+8, 2024-3-29 20:57 , Processed in 0.236934 second(s), 20 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表