Akawa

ETY001的博客

发表于 更新于 Disqus：

这是《jQuery入门教程笔记》系列5，在第5篇里面将继续讲述jQuery的选择器，这篇讲述“内容过滤选择器”，“可见性过滤选择器”，“属性过滤选择器”。

下面是内容过滤选择器的语法表格：

选择器 功能 返回值
:contains(text) 获取包含给定文本的元素 元素集合
:empty 获取所有不包含子元素或文本的空元素 元素集合
:has(selector) 获取含有选择器所匹配的元素的元素 元素集合
:parent 获取含有子元素或者文本的元素。 元素集合
阅读全文 »

发表于 更新于 Disqus：

这是《jQuery入门教程笔记》系列4，在第4篇里面将继续讲述jQuery的选择器，这篇讲述“基本过滤选择器”。

下面是简单过滤选择器的语法表格：

选择器 功能 返回值
first()或者:first 获取第一个元素 单个元素
last()或:last 获取最后一个元素 单个元素
:not(selector) 获取除给定选择器外的所有元素 元素集合
:even 获取所有索引值为偶数的元素，索引号从0开始 元素集合
:odd 获取所有索引值为奇数的元素，索引号从0开始 元素集合
:eq(index) 获取指定索引值的元素，索引号从0开始 元素集合
:gt(index) 获取所有大于给定索引值的元素，索引号从0开始 元素集合
:lt(index) 获取所有小于给定索引值的元素，索引号从0开始 元素集合
:header 获取所有类型的元素，如h1,h2…… 元素集合
:animated 获取正在执行动画效果的元素 元素集合

下面是示例代码，请自己调整注释符的位置来体会各种不同的选择器的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>chap2-4 使用jQuery基本过滤选择器</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.20" />
    <script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <style type="text/css">
        body{
            font-size:12px;
            text-align:center;      
        }
        div{
            width:241px;
            height:83px;
            border:solid 1px #eee;
        }
        h1{
            font-size:13px;
        }
        ul{
            list-style-type:none;
            padding:0px;
        }
        .DefClass,.NotClass{
            height:23px;
            width:60px;
            line-height:23px;
            float:left;
            border-top:solid 1px #eee;
            border-botton:solid 1px #eee;
        }
        .GetFocus{
            width:58px;border:solid 1px #666;
            background-color:#eee;
        }
        #spanMove{
            width:238px;
            height:23px;
            line-height:23px;
        }
        .clsFraA{
            width:65px;
            height:65px;
        }
        .clsFraP{
            width:45px;
            height:45px;
            background-color:#eee;
        }
        .clsFraC{
            width:25px;
            height:25px;
            background-color:#ddd;
        }
    </style>
    <script type="text/javascript">
        /**/$(function(){ //增加第一个元素的类别
            $("li:first").addClass("GetFocus");
        });
        /*$(function(){ //增加最后一个元素的类别
            $("li:last").addClass("GetFocus");
        });
        $(function(){ //增加去除所有与给定选择器匹配的元素类别
            $("li:not(.NotClass)").addClass("GetFocus");
        });
        $(function(){ //增加所有索引值为偶数的元素类别，从0开始计数
            $("li:even").addClass("GetFocus");
        });
        $(function(){ //增加所有索引值为奇数的元素类别，从0开始计数
            $("li:odd").addClass("GetFocus");
        });
        $(function(){ //增加一个给定索引值的元素类别，从0开始计数
            $("li:eq(1)").addClass("GetFocus");
        });
        $(function(){ //增加所有大于给定索引值的元素类别，从0开始计数
            $("li:gt(1)").addClass("GetFocus");
        });
        $(function(){ //增加所有小于给定索引值的元素类别，从0开始计数
            $("li:lt(4)").addClass("GetFocus");
        });
        $(function(){ //增加标题类元素类别
            $("div h1").css("width","238");
            $(":header").addClass("GetFocus");
        });
        $(function(){
            animateIt();//增加动画效果元素类别
            $("#spanMove:animated").addClass("GetFocus");
        });*/
        function animateIt() { //动画效果
            $("#spanMove").slideToggle("slow",animateIt);
        }
    </script>
</head>

<body>
    <div>
        <h1>基本过滤选择器</h1>
        <ul>
            <li class="DefClass">Item 0</li>
            <li class="DefClass">Item 1</li>
            <li class="NotClass">Item 2</li>
            <li class="DefClass">Item 3</li>
        </ul>
        <span id="spanMove">Span Move</span>
    </div>
</body>
</html>

发表于 更新于 Disqus：

[xiami soundfile=”http://f1.xiami.net/3180/15814/194097_32389.mp3“ autostart=”yes” loop=”yes”]彩虹 – 羽·泉[/xiami]
我的第一个Wordpress插件（Ntalker for Wordpress）正式在Wordpress官网发布啦～大家赶紧来踩踩看吧，地址是：http://wordpress.org/extend/plugins/ntalker-for-wordpress/。记得如果你觉得好的话，帮忙打个高分呀，如果你有啥想法的话，欢迎来这个页面留言：http://www.domyself.me/lab/ntalker-for-wordpress

发表于 更新于 Disqus：

这是《jQuery入门教程笔记》系列3，在第3篇里面将继续讲述jQuery的选择器，这篇讲述“层次选择器”。

下面是基本选择器的语法表格：

选择器 功能 返回值
ancestor descendant 根据祖先元素匹配所有的后代元素 元素集合
parent>child 根据父元素匹配所有子元素 元素集合
prev + next 匹配所有紧接在prev元素后的相邻元素 元素集合
prev ~ siblings 匹配prev元素之后的所有兄弟元素 元素集合
阅读全文 »

发表于 更新于 Disqus：

打豆豆游戏

[原地址]

冷笑话

吃饭睡觉打豆豆 是网络上最为流行的小笑话之一，这则笑话的具体的内容如下：

有个记者去南极采访一群企鹅

他问第一只企鹅：“你每天都干什么？”

企鹅说：“吃饭 睡觉 打豆豆！”

接着又问第2只企鹅，那只企鹅还是说：“吃饭 睡觉 打豆豆！” 记者带着困惑问其他的企鹅，答案都一样，就这样一直问了99只企鹅。

当走到第100只小企鹅旁边时，记者走过去问它：每天都做些什么啊？

那只小企鹅回答：”吃饭，睡觉．”

那人惊奇的又问：”你怎么不打豆豆？”

小企鹅撇着嘴巴，瞪了记者一眼说：”我就是豆豆！！！！”

这则小笑话无疑是令人喷饭的，但又极为简单，最令人称奇的是这个笑话本身的名字居然有着不小的影响力。在各大搜索引擎点击搜索，以它为名字的个人空间和群组不计其数，而这些个人空间和群组的用户大多数为青年学生，这是一件很值得探究的事情。这个小笑话，简简单单却又富有生趣，广大青年朋友尤其是学生们在参与以它为名字的网络群组其中时，得到的是一种带有些许童趣的单纯心境。

发表于 更新于 Disqus：

这是《jQuery入门教程笔记》系列2，在第2篇里面将开始讲述jQuery很重要的一种东西，那就是选择器，这篇先从基本选择器讲起。

下面是基本选择器的语法表格：

选择器 功能 返回值
#id 根据给定的ID匹配一个元素 单个元素
element 根据给定元素名匹配所有元素 元素集合
.class 根据给定的类匹配元素 元素集合
* 匹配所有元素 元素集合
selector1,selectorN 将每一个选择器匹配到的元素合并后一起返回 元素集合
阅读全文 »

发表于 更新于 Disqus：

这是我的Java作业，一个简单的拼图游戏，源文件从这里下载：点击这里下载源文件。由于是在ubuntu下压缩的，所以在windows下解压会有一个图片乱码，乱码的那张图片名称是“星座.jpg”（不含引号）。

下面直接贴代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
/*
 * Author：ETY001
 * URI：https://akawa.ink
 */
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.lang.Math;
import java.applet.Applet;

public class pintu extends Applet implements ActionListener
{
	int EmptyRow = 0;//空白图横坐标
	int EmptyCol = 0;//空白图纵坐标
	JPanel up = new JPanel();//上部面板
	JPanel down = new JPanel();//下部面板
	JButton[][] btn = new JButton[5][5];//拼图按钮
	int a[][] =new int[5][5];//记录是否重复随机数的数组
	int m,n;//记录随机数
	//JTextField tt = new JTextField(15);//调试使用

	public void init()
	{
		//上部
		ImageIcon oriPic = new ImageIcon("星座.jpg");
		JLabel oriPicLabel = new JLabel("",oriPic,JLabel.CENTER);
		JButton next = new JButton("下一局");
		up.setLayout(new BorderLayout());
		up.add(oriPicLabel,BorderLayout.WEST);
		up.add(next,BorderLayout.CENTER);
		next.addActionListener(this);

		//下部
		down.setLayout(new GridLayout(5,5));
		for(int i=0;i<5;i++) //清空记录数组
		{
			for(int j=0;j<5;j++)
			{
				a[i][j]=0;
			}
		}
		for(int i=0;i<5;i++)//产生随机的图片碎片
		{
			for(int j=0;j<5;j++)
			{
				m=(int)(Math.random() * 5);
				n=(int)(Math.random() * 5);
				while(a[m][n]==1)
				{
					m=(int)(Math.random() * 5);
					n=(int)(Math.random() * 5);
				}
				a[m][n]=1;
				if(m==0 && n==0)//记录初始时刻空白图片的位置
				{
					EmptyRow = i;
					EmptyCol = j;
				}
				//注意原素材的10和11两张图片的扩展名是大写的，这也是两张图片导入失败的原因		
				btn[i][j] = new JButton(new ImageIcon(m+""+n+".jpg"));
				down.add(btn[i][j]);
				btn[i][j].setActionCommand(i+":"+j);
				btn[i][j].addActionListener(this);
			}
		}

		//全局面板
		setLayout(new BorderLayout());
		add(up,BorderLayout.NORTH);
		add(down,BorderLayout.CENTER);
		//add(tt,BorderLayout.SOUTH);//调试使用
		setSize(275,360);
		setVisible(true);
	}

	public void PicRepeat()
	{
		for(int i=0;i<5;i++) //清空记录数组
		{
			for(int j=0;j<5;j++)
			{
				a[i][j]=0;
			}
		}
		for(int i=0;i<5;i++)
		{
			for(int j=0;j<5;j++)
			{
				m=(int)(Math.random() * 5);
				n=(int)(Math.random() * 5);
				while(a[m][n]==1)
				{
					m=(int)(Math.random() * 5);
					n=(int)(Math.random() * 5);
				}
				a[m][n]=1;
				if(m==0 && n==0)//记录初始时刻空白图片的位置
				{
					EmptyRow = i;
					EmptyCol = j;
				}
				//更新按钮上的随机图片
				btn[i][j].setIcon(new ImageIcon(m+""+n+".jpg"));
			}
		}
	}

	public void changePic(int clickRow,int clickCol,int emptyRow,int emptyCol)
	{
		if(Math.abs(clickRow-emptyRow)+Math.abs(clickCol-emptyCol)==1)
		{
			Icon tmp1 = btn[clickRow][clickCol].getIcon();
			Icon tmp2 = btn[emptyRow][emptyCol].getIcon();
			btn[clickRow][clickCol].setIcon(tmp2);
			btn[emptyRow][emptyCol].setIcon(tmp1);
			EmptyRow = clickRow;
			EmptyCol = clickCol;
		}
	}

	public void actionPerformed(ActionEvent e)
	{
		int row=0,col=0;
		if (e.getActionCommand() == "下一局")
		{
			PicRepeat();
		}
		else
		{
			String[] tmp;
			tmp = e.getActionCommand().split(":");
			row = Integer.parseInt(tmp[0]);
			col = Integer.parseInt(tmp[1]);
			changePic(row,col,EmptyRow,EmptyCol);
		}
		//tt.setText(""+btn[row][col].getIcon());//调试使用
	}
}

发表于 更新于 Disqus：

今天，访问我的博客的时候，发现博客打开后是空白页，什么都不显示，访问后台登录页面也是空白页，不知道哪个地方又出错了。

于是登录服务器的ssh，把wp-content目录重命名，然后再次访问后台登录页面，可以访问了，不过是英文界面，因为缺少了wp-content目录下的语言包的翻译，但是这个不影响我们操作。

初步断定是wp-content目录内的文件导致的问题，于是逐步缩小搜查范围，把wp-content的名字改回来，逐一把wp-content文件夹内的各个文件夹改名，

最后发现是我使用的D4主题出现了错误，遂进入后台把之前使用过的另一个主题启用，一切恢复正常～

发表于 更新于 Disqus：

最近在搞记事狗的QQ机器人，破解了源代码后进行修改，有时候一些提示的错误信息就是找不到，由于是在ubuntu下工作，所以就收集下关于搜索的命令，尤其是搜索内容为指定关键字的文件的路径地址。

whereis <程序名称>
查找软件的安装路径
-b 只查找二进制文件
-m 只查找帮助文件
-s 只查找源代码
-u 排除指定类型文件
-f 只显示文件名
-B <目录> 在指定目录下查找二进制文件
-M <目录> 在指定目录下查找帮助文件
-S <目录> 在指定目录下查找源代码

locate <文件名称>
在文件索引数据库中搜索文件
-d <数据库路径> 搜索指定数据库
updatedb
更新文件索引数据库

find [路径] <表达式>
查找文件
-name <表达式> 根据文件名查找文件
-iname <表达式> 根据文件名查找文件，忽略大小写
-path <表达式> 根据路径查找文件
-ipath <表达式> 根据路径查找文件，忽略大小写
-amin <分钟> 过去N分钟内访问过的文件
-atime <天数> 过去N天内访问过的文件
-cmin <分钟> 过去N分钟内修改过的文件
-ctime <天数> 过去N天内修改过的文件
-anewer <参照文件> 比参照文件更晚被读取过的文件
-cnewer <参照文件> 比参照文件更晚被修改过的文件
-size <大小> 根据文件大小查找文件，单位b c w k M G
-type <文件类型> 根据文件类型查找文件。b 块设备 c 字符设备 d 目录 p 管道文件 f 普通文件 l 链接 s 端口文件
-user <用户名> 按归属用户查找文件
-uid 按UID查找文件
-group <群组名> 按归属群组查找文件
-gid 按GID查找文件
-empty 查找空文件

grep <字符串>|”<正则表达式>” [文件名]
在文件中搜索内容

问题描述：
我有一个1千万行的querylog，每一个都有keyword，现在我想随机查找某个query是否存在。
用find命令来做。
解决方法：

1
find query.log | xargs grep "感冒" // 在query.log文件中查找“感冒”

发表于 更新于 Disqus：

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。

以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

如何才能做得更好呢？

第一，必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。
第二，在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。
第三，必须学会运用各种工具进行辅助开发。
第四，除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。

可见，看似简单的网页制作，如果要做得更好、更专业，真的是不简单。这就是前端开发的特点，也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手，对于老手来说，也时常不知道下一步该学什么。

目前市面上关于Web前端开发的书主要都是针对单一技术的，《编写高质量代码》与这些书有着本质的区别。它主要想实现两个目标：第一，为不太有经验的 Web前端开发工程师建立大局观，让他们真正了解和理解这个职业；第二，帮助有一定Web前端开发经验的工程师修炼内功，通过编写高质量的代码来提高前端代码的可维护性。这是很多前端开发工程师感兴趣的内容。

《编写高质量代码》的前两章讨论了网站重构和团队合作，这是很有必要的。网站重构的目的仅仅是为了让网页更符合Web标准吗？不是！重构的本质应该是构建一个前端灵活的MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。同时，代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。建立了这种大局观后，学习具体技术的思路就更清晰了。

代码质量是前端开发中应该重点考虑的问题之一。例如，实现一个网站界面可能会有无数种方案，但有些方案的维护成本会比较高，有些方案会存在性能问题，而有些方案则更易于维护，而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不同的，对代码质量的要求也不同，但它们之间又有着千丝万缕的联系。《编写高质量代码》中包含着很多开发的思想和经验，都是在长期的开发实践中积累下来的，不同水平的Web前端工程师都会从中获得启发。

图书封面：

0%