学习笔记

javascript视频教程

在网上早的一些javascript视频教程
http://v.youku.com/v_playlist/f3051209o1p0.html

原书视频地址
http://learning.artech.cn/20080621.mastering-javascript-jquery.html

108个常用JAVASCRIPT语句

1.document.write( " "); 输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:document- >html- >(head,body)
4.一个浏览器窗口中的DOM顺序是:window- >(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:document.getElementById( "表单中元素的ID號 ").name(或value)
6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById( "input ").value.toUpperCase();
7.JS中的值类型:String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:parseInt(),parseFloat()
9.JS中的数字转换成字符型:( " " 变量)
10.JS中的取字符串长度是:(length)
11.JS中的字符与字符相连接使用 號.
12.JS中的比较操作符有:==等于,!=不等于, >, >=, <. <=
13.JS中声明变量使用:var来进行声明
14.JS中的判定语句结构:if(condition){}else{}
15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop}
16.循环中止的命令是:break
17.JS中的函数定义:function functionName([parameter],…){statement[s]}
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状態栏的设置:window.status= "字符 ";
21.弹出提示信息:window.alert( "字符 ");
22.弹出確认框:window.confirm();
23.弹出输入提示框:window.prompt();
24.指定当前显示链接的位置:window.location.href= "URL "
25.取出窗体中的所有表单的数量:document.forms.length
26.关闭文档的输出流:document.close();
27.字符串追加连接符: =
28.创建一个文档元素:document.createElement(),document.createTextNode()
29.得到元素的方法:document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0; i <form.elements.length;i ){
if (form.elements.type == "text "){
form.elements.value = " ";
}
}
31.复选按钮在JS中判定是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中返回TRUE或FALSE)
32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length
33.单选按钮组判定是否被选中也是用checked.
34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有时用下拉列表框名称加上.selectedIndex来確定被选中的值)
35.字符串的定义:var myString = new String( "This is lightsword ");
36.字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase();
37.返回字符串2在字符串1中出现的位置:String1.indexOf( "String2 ")!=-1则说明没找到.
38.取字符串中指定位置的一个字符:StringA.charAt(9);
39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);
40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在值,Math.pow(value1,10)返回 value1的十次方,Math.round(value1)四舍五入函数,Math.floor(Math.random()*(n 1))返回隨机数
41.定义日期型变量:var today = new Date();
42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,dateObj.getHours()得到小时,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒,dateObj.setTime(value)设置时间,dateObj.setYear(val)设置年,dateObj.setMonth(val)设置 月,dateObj.setDate(val)设置日,dateObj.setDay(val)设置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置 分,dateObj.setSeconds(val)设置秒 [注重:此日期时间从0开始计]
43.FRAME的表示方式:[window.]frames[n].ObjFuncVarName,frames["frameName "].ObjFuncVarName,frameName.ObjFuncVarName
44.parent代表父亲对象,top代表最顶端对象
45.打开子窗口的父窗口为:opener
46.表示当前所属的位置:this
47.当在超链接中调用JS函数时用:(javascript :)来开头后面加函数名
48.在老的浏览器中不执行此JS: <!– //– >
49.引用一个文件式的JS: <script type= "text/javascript " src= "aaa.js " > </script >
50.指定在不支持脚本的浏览器显示的HTML: <noscript > </noscript >
51.当超链和onCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例: <a href= "a.html " >dfsadf </a >
52.JS的內建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeErr or,URIError
53.JS中的换行:&#92;n
54.窗口全屏大小: <script >function fullScreen(){ this.moveTo(0,0);this.outerWidth=screen.availWidth;this.outerHeight=screen.availHeight;}window.maximize=fullScreen; </script >
55.JS中的all代表其下层的全部元素
56.JS中的焦点顺序:document.getElementByid( "表单元素 ").tabIndex = 1
57.innerHTML的值是表单元素的值:如 <p id= "para " > "how are <em >you </em > " </p >,则innerHTML的值就是:how are <em >you </em >
58.innerTEXT的值和上面的一样,只不过不会把 <em >这种標记显示出来.
59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状態.
60.isDisabled判定是否为禁止状態.disabled设置禁止状態
61.length取得长度,返回整型数值
62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc
63.window.focus()使当前的窗口在所有窗口之前.
64.blur()指失去焦点.与FOCUS()相反.
65.select()指元素为选中状態.
66.防止用户对文本框中输入文本:
67.取出该元素在页面中出现的数量:document.all.tags( "div(或其它HTML標记符) ").length
68.JS中分为两种窗体输出:模態和非模態.window.showModaldialog(),window.showModeless()
69.状態栏文字的设置:window.status= &apos;文字 &apos;,默认的状態栏文字设置:window.defaultStatus = &apos;文字. &apos;;
70.添加到收藏夹:external.AddFavorite( "http://www.dannyg.com ";, "jaskdlf ");
71.JS中碰到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.onerror = handleError;
72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener…的多重继续.
73.JS中的self指的是当前的窗口
74.JS中状態栏显示內容:window.status= "內容 "
75.JS中的top指的是框架集中最顶层的框架
76.JS中关闭当前的窗口:window.close();
77.JS中提出是否確认的框:if(confirm( "Are you sure? ")){alert( "ok ");}else{alert( "Not Ok ");}
78.JS中的窗口重定向:window.navigate( "http://www.sina.com.cn ";);
79.JS中的打印:window.print()
80.JS中的提示输入框:window.prompt( "message ", "defaultReply ");
81.JS中的窗口滚动条:window.scroll(x,y)
82.JS中的窗口滚动到位置:window.scrollby
83.JS中设置时间间隔:setInterval( "expr ",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout
84.JS中的模態显示在IE4 行,在NN中不行:showModalDialog( "URL "[,arguments][,features]);
85.JS中的退出之前使用的句柄:function verifyClose(
){event.returnValue= "we really like you and hope you will stay longer. ";}} window.=verifyClose;
86.当窗体第一次调用时使用的文件句柄:onload()
87.当窗体关闭时调用的文件句柄:onunload()
88.window.location的属性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname( "/a/a.html "),hash( "#giantGizmo ",指跳转到相应的锚记),href(全部的信息)
89.window.location.reload()刷新当前页面.
90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的URL)
91.document.write()不换行的输出,document.writeln()换行输出
92.document.body.noWrap=true;防止链接文字折行.
93.变量名.charAt(第几位),取该变量的第几位的字符.
94. "abc ".charCodeAt(第几个),返回第几个字符的ASCii码值.
95.字符串连接:string.concat(string2),或用 =进行连接
96.变量.indexOf( "字符 ",起始位置),返回第一个出现的位置(从0开始计算)
97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.
98.string.match(regExpression),判定字符是否匹配.
99.string.replace(regExpression,replaceString)替换现有字符串.
100.string.split(分隔符)返回一个数组存储值.
101.string.substr(start[,length])取从第几位到指定长度的字符串.
102.string.toLowerCase()使字符串全部变为小写.
103.string.toUpperCase()使全部字符变为大写.
104.parseInt(string[,radix(代表进制)])强制转换成整型.
105.parseFloat(string[,radix])强制转换成浮点型.
106.isNaN(变量):测试是否为数值型.
107.定义常量的要害字:const,定义变量的要害字:var
108.自己摸索.

Zend Studio 5.5中文版 windows环境下中文乱码

  今天离放假还有1天了,回来后也并没有马上就投入到PHP学习中。有时候吉他一拿就是一个小时,周围环境也比较安静,有时真怕吵到人了。听老歌,人似乎也会变老。放下吉他,洗个澡,一直想以后房子一定要有个大大的浴缸,下班回来可以好好泡了澡,洗完澡后打开电脑,先给淘宝那卖家付了款,早上货到了。然后就下了个Zend Studio这也是小董一直推荐的,他一直鄙视EditPlus,其实EditPlus是大学那个女JAVA老师介绍的,至今仍然经常使用,因为方便。看到PHPCHINA论坛上大有人使用,其实它也就是个记事本的升级版,小而方便而已。

Zend Studio是一个比较系统的专业开发PHP软件,或许我还没怎么用过,我就不评论有多好。

Zend Studio 5.5中文版下载地址:(用这个版本就不用在下什么补丁包了)
http://downloads.phpchina.com/zend/studio/5.5.0/ZendStudio-5_5_0.exe

安装后在软件中设计下语言:
tools—>preferences–>languages–>中文  
确定–>重启下Zend Studio OK了,界面是中文了。
 

编辑里面中文字符乱码的问题

在顶部菜单–工具–首选项–桌面–编码
选择你相应的代码就可以了。 比如你打开的是UTF-8的文件(这个可以用editplus查看)

 

至此开发环境基本解决了。

 

PHP起步记

  买了本《PHP从入门到精通》一直放着以为没时间看,偶然兴趣就看几下,觉得很是简单,但真正操作起来,发现问题一大堆。往往学习我会找很多借口说没时间,但玩的话就不知不觉投入进去,并乐此不彼。学习也能这样吗。

  一种学习是被逼出来,比如工作中,你面对压力你要不断的去学习,巩固提升自己,而免得被别人赶上。
而还有一种是源自兴趣,兴趣是最好的老师了。
整理D盘无意间发现几句话“
我个人觉得只有做自己最喜欢做的事,也是最容易成功的事。
爱恩斯坦说:“理论没有实践是不行的, 但是没有理论的实践是盲目的”。
很喜欢马云的这句话:心中无敌,无敌于天下
永远不要把你的竞争对手当作对手,而要把他们当作你学习的榜样!
[人赚不到钱,不是因为自己不行,而是没有行动力,光想不做,或者光做不想]”
很是喜欢,也顺便载进来。

  凌晨1点11分,外面下起了雨,我发现原来自己真什么事都没有了,眼睛酸痛都可能是假象而已。
中午吃饭,突然觉得难受,连请个假都要请别人批不批,所以一定要自由。想想每天做的这些事,其实大部分不是自己最喜欢的。

今天有一款烂游戏上线,开服的一瞬间,服务器又爆了。玩家论坛大骂,随便看了一下,找了个造句接力的小游戏,发现玩家也都玩得有点意思。那是属于运营的事了。

发现自己越来越渴望,得学语言,做自己的东西。而不用去求别人,等别人的程序。

  今天第一课—在windows下安装php环境。

  先装了APACHE2.2,算一路比较通畅。就是一些配置上的问题“比如增加个编码显示”AddDefaultCharset off " 目的是为了让浏览器自动识别编码。然后就PHP5,下载要下个 ZIP 安装包。 php.ini应该放在哪system32下吗? 还有相应的dll 要不要都考到 system32呢
经过证明后,发现似乎不用,因为那个php配置里面有指定了"d:/php5/ext"的位置我发现书中讲的还是有点模糊。。

  然后就是MYSQL,这个最麻烦了,装了好几遍。
特别是装了一次后卸载后重装,特麻烦。会出现那个内存错误等。网上查了下要 把安装目录也都删了,再用WINDOWs优化大师清理下注册表。后面果真OK,我还不断判断是不是哪个程序冲突了。最后终于是用 phpmyadmin可以用了,但还有点乱码。

  书看得再多都没用,实践是关键。
用心,投入。

240多个jQuery插件

概述

jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不jquery及 的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。 jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents、events、实现动画效果,并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可。今天在Kollermedia.at上发现了一篇JQuery插件列表的文章,特推荐如下。

文件上传(File upload)JQuery_001

Ajax File Upload.
jQUploader.
Multiple File Upload plugin
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.

表单验证(Form Validation)

jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV – form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.

表单-选取框(Form – Select Box stuff)

jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery – LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).

表单基本、输入框、选择框等(Form Basics, Input Fields, Checkboxes etc.)

jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.

时间、日期和颜色选取(Time, Date and Color Picker)

jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.

投票插件(Rating Plugins)

jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.

搜索插件(Search Plugins)

jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHP&MyS
QL)
.
quick Search jQuery Plugin.

编辑器(Inline Edit & Editors)JQuery_002

jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable – edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin – Another In-Place Editor.
TableEditor.
tEditable – in place table editing for jQuery.

多媒体、视频、Flash等(Audio, Video, Flash, SVG, etc)

jMedia – accessible multi-media embedding.
JBEdit – Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.

图片(Photos/Images/Galleries)

ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery – jqGalViewII.
jQuery – jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs – easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface & Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi – Zoomable Thumbnails.
jQuery Crop – crop any image on the fly.
Image Reflection.

Google地图(Google Map)

jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery & Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps – by Tane Piper.

游戏(Games)

Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).

表格等(Tables, Grids etc.)

UI/Tablesorter.JQuery_003
jQuery ingrid.
jQuery Grid Plugin.
Table Filter – awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable – in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.

统计图(Charts, Presentation etc.)

jQuery Wizard Plugin
.
jQuery Chart Plugin.
Bar Chart.

边框、圆角、背景(Border, Corners, Background)

jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.

文字和超链接(Text and Links)

jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad – a text gradient plugin.
LinkLook – a link thumbnail preview.
pager jQuery Plugin.
shortKeys jQuery Plugin.
jQuery Biggerlink.
jQuery Ajax Link Checker.

鼠标提示(Tooltips)

jQuery Plugin – Tooltip.
jTip – The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.

菜单和导航(Menus, Navigations)

jQuery Tabs Plugin – awesome! . [demo nested tabs.]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu – Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.

http://stilbuero.de/jquery/tabs_3/

幻灯、翻转等(Accordions, Slide and Toggle stuff)

jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion – a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo – Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.

拖放插件(Drag and Drop)

UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR – drag, drop resize.
Drag Demos.

XML XSL JSON Feeds

XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier – Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite – multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.

浏览器(Browserstuff)

Wresize – IE Resize event Fix Plugin.
jQuery ifixpng.
jQuery pngFix.
Link Scrubber – removes the dotted line onfocus from links.
jQuery Perciformes – the entire suckerfish familly under one roof.
Background Iframe.
QinIE – for proper display of
Q tags in IE
.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.

对话框、确认窗口(Alert, Prompt, Confirm Windows)

jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.

CSS

jQuery Style Switcher.
JSS – Javascript StyleSheets.
jQuery Rule – creation/manipulation of CSS Rules.
jPrintArea.

DOM、AJAX和其它JQuery插件(DOM, Ajax and other jQuery plugins)

FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata – extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat – periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it – display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy – awesome plugin.
Effect Delay Trick.
jQuick – a quick tag creator for jQuery.
Metaobjects
.
elementReady.

英文:http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/

作者:TerryLee
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

谈谈新手如何学习PHP(转)

   从默默自己向别人问怎么学PHP开始,到后来不少人又来问默默怎么学PHP,不管默默是新手,还是老鸟,似乎总是感觉摸不出一条清晰的脉络来,不过,默默既然学会了PHP,那么我走的这条路或多或少的有一定借鉴性。

    PHP的背景恐怕就不用默默赘言了,我相信大家选择一种语言,并不是看它的背景和悠久历史,更重要的是看它的实用性,华而不实的语言哪怕是再辉煌的历史,也毕将步向没落,可喜的是PHP经受住了考验,也因此,它确实是一种值得学习的语言。

    默默一直是听从别人的经验长大的,也因此在前辈们的经验里让默默少走了许多的弯路,更快的步入了正规,在此向那些我至尽不知道其名字的前辈们道声谢谢,在默默的眼里,帮助不分大小,只要是帮助,总会让默默的心里暖融融的,我想,前辈们帮助我,并不是为了得到我的一句谢谢,更多的是出于一种责任感和对默默的期望,所以我想,只有学好PHP,才能对得起前辈们的汗水。

    正如我所说的,默默也终于感觉到了一种责任感,默默不知道自己的经验到底能帮助新手多少,但是默默明白,现在到了履行责任的时候了,我有必要把自己的经验告诉给所有希望学好PHP的人,只有这样才能让中国的PHP不断的进步,不断的发展,在世界上占据一席之地。

    默默学习PHP的这段期间,感觉国内的PHP环境越来越成熟,规范也在逐渐的健全,PHPCHINA的成立,标志着与官方直接挂钩的PHP机构在中国正式落户了,在此献上迟到的掌声!

    好的,切入正题:

    我想在讲述自己的学习方式前,对那些期望能从我的文章中获得有用信息的人说一句心里话:

    默默的文章不会对您的学习起到实质性的作用,您能否成功,还得靠自己的,坚持,坚持,再坚持,就是步入成功的不二法门。

    我先把我自己学习PHP的过程做一下概括:

    熟悉HTML/CSS/JS等网页基本元素,完成阶段可自行制作完整的网页,对元素属性达到熟悉程度

    理解动态语言的概念,运做机制,熟悉PHP语法

    学习如何将PHP与HTML结合起来完成简单动态页面

    接触MYSQL,开始设计数据库程序

    不断巩固,摸透大部分PHP常用函数,并可理解OOP,MYSQL优化,以及模板

    完成一个功能齐全的动态站点

    我的这套线路可能跟许多学习PHP的爱好者不谋而合,这也算是一个循序渐进的学习过程,不过新手不要看到上面的概括就以为学习蛮简单的,默默在此不得不对您稍微泼一下冷水,任何东西其实都不简单,即使是小吃部的烧饼也不是一下子就会做成的。

    我先解释一下我的学习思路。

    首先,理解网站这一概念之后不难看出,任何网站都是由网页组成的,也就是说想完成网站,必须先学会做网页,因此必须要掌握了HTML,才能为今后制作网站打下基础。

    在学习HTML中我想边学边做是最有效的方式,当然这一方式对于学习PHP同样是最有效的。

    HTML中的任何元素都要亲自实践,只有明白了什么元素会起到什么效果之后,你才会记忆深刻,而一味的啃书,绝对是不行的,我想大部分新手之所以觉得概念难学,大部分是一个字“懒”,懒是阻止进步的最大敌人,所以克服掉懒的习惯,才能更快的学好一样东西。

    也许您在学习PHP的时候只想尽快的开发一个网站,也就会想我做网站,干嘛要学什么网页这些小儿科?不难看出,眼高手低的新手不在少数,这种思想无疑于建造空中楼阁,你不建地基,何来的房顶呢?

    OK,掌握静态网页的制作技术是学习开发网站的先决条件,这一点就讲到这里,因为这篇文章不是教程文章,也就不对技术进行深入的刨析了。

    我假设你目前已经可以完成一个静态页面了,当然,做的好看难看是另外一说,默默的第一个网页也没好看到哪去,但是“孩子”再丑,咱们做“爹妈”的也不能嫌弃不是?这毕竟是咱的成果。

    那么咱们就开始学习动态语言的概念吧,刚一接触动态语言,可能很多人都会蒙了,怎么这乱七八糟的东西,在网页里显示的时候却是另外一码事?其实这并不算乱七八糟,你写的HTML代码不也一样是一堆堆的字符吗?毕竟,代码并不是作为直接输出的,而是经过处理的,说白了,HTML是经过HTML解析器,而PHP当然也就通过PHP解析器了,跟学习HTML一样的道理,想让任何的解析器完成操作,就必须使用它们专用的语法结构,所以PHP长相奇怪也就不足为奇了。

文章来源:http://www.com-edu.cn/html/2008-5/2008514001027_1.html

js文本上下滚动点击停顿代码

js文本上下滚动点击停顿代码
http://hi.baidu.com/hoozhen/blog/item/d378542c20e574ef8a13998d.html

 

javascript遮罩效果

在页面当中让如如下代码:

  1. <div id=‘alpha’ class=‘hidden’ style=‘width:100%;height:10px;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=30);-moz-opacity:0.3;z-index:0;’> </div>
  2.  

利用scirpt事件,触发如下事件:

document.getElementById("alpha").style.height=document.body.offsetHeight+"px";

 

=============================================================================================

 

第二种方式:
  1. var darkDiv = document.createElement("div");
  2.     darkDiv.id = "darkDiv";
  3.     darkDiv.style.cssText = "position:absolute;filter:alpha(opacity=50);opacity:0.5;background-color:#000000;z-index:110;top:0px;left:0px;width:100%;";
  4.     //darkDiv.style.height = (this.getPagePosition().clientHeight + this.getPagePosition().scrollTop) + "px";
  5.     darkDiv.style.height = this.getPageSize()[1] + "px";
  6.     document.body.appendChild(darkDiv);
  7.  
==============================================================================================

js css tab代码

两组js css tab效果效果代码 滑动门。点击代码就可以看到效果了。
最近看了点JS原理上理解了些了。

<code>
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
a {
  color:#000000;
  text-decoration:none;
}
  
#header {
  float:left;
  width:100%;
  background:#D3D3D3;
  font-size:93%;
   line-height:normal;
}
#header ul {
  margin:0;
  padding:0px;
  list-style:none;
}
#header li {
  float:left;
  background:#DCE1EF;
 border:solid 1px #8EA2C2;
 margin-left:2px;
 padding:0px;
}
#header a {
  display:block;
 padding:5px 15px 4px;
}
#header .current {
 background:#FFFFFF;
 border-left:solid 1px #8EA2C2;
 border-top:solid 1px #8EA2C2;
 border-right:solid 1px #8EA2C2;
 border-bottom:solid 0px #8EA2C2;
 
}
#header .current a{
 padding-bottom:5px;
}
.content {
  margin-top:10px;
}
.content .contentHeader {
  background-color:#BCC7E0;
  border:solid 1px #4B66A5;
  font-weight:bold;
}

.content .contentMain {
 border-left:solid 1px #4B66A5;
 border-top:solid 0px #4B66A5;
 border-right:solid 1px #4B66A5;
 border-bottom:solid 1px #4B66A5;
}
</style>
<script type="text/javascript">
function change_option(number,index){
 for (var i = 1; i <= number; i++) {
      document.getElementById(‘current’ + i).className = ”;
      document.getElementById(‘content’ + i).style.display = ‘none’;
 }
  document.getElementById(‘current’ + index).className = ‘current’;
  document.getElementById(‘content’ + index).style.display = ‘block’;
}
</script>
<title>CSS中的滑动门技术</title>
</head>

<body>
<div id="navbar">
 <div id="header">
  <ul>
    <li id="current1"><a href="#" onclick="change_option(3,1);">唐诗三百首</a></li>
    <li id="current2"><a href="#" onclick="change_option(3,2);">宋词精选</a></li>
    <li id="current3"><a href="#" onclick="change_option(3,3);">明清小说</a></li>
  </ul>
 </div>
 <div id="content1" class="content">
   <div class="contentHeader">唐诗三百首</div>
   <div class="contentMain">关山月<br />
     明月出天山,苍茫云海间。<br />
     长风几万里,吹度玉门关。<br />
     汉下白登道,胡窥青海湾。<br />
     由来征战地,不见有人还。<br />
     戍客望边色,思归多苦颜。<br />
      高楼当此夜,叹息未应闲。</div>
 </div>
 <div id="content2" class="content" style="display:none">
   <div class="contentHeader">宋词精选</div>
   <div class="contentMain">清平乐<br />
        <br />
        春归何处<br />
        寂寞无行路。<br />
        若有人知春去处。<br />
        唤取归来同住。<br />
        <br />
        春无踪迹谁知。<br />
        除非问取黄鹂。<br />
      百啭无人能解,因风飞过蔷薇。</div>
 </div>
 <div id="content3" class="content" style="display:none">
   <div class="contentHeader">明清小说</div>
   <div class="contentMain">三国演义<br />
    滚滚长江东逝水,浪花淘尽英雄。<br />
     是非成败转头空,青山依旧在几度夕阳红。</div>
 </div>
</div>
</body>
</html>
 ——————————————————————————————————————————————————————————

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!–
* {
margin: 0; padding:0
}
body {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
text-align: center;
height: auto;
width: auto;
background-color: #666666;
font-size: 12px;
color: #000000;
}
#container {
text-align: left;
width: 760px;
height: 400px;
background-color: #FFFFFF;
padding: 20px;
}

#container #title {
height: 28px;
}
#container #title li {
float: left;
list-style-type: none;
height: 28px;
line-height: 28px;
text-align: center;
margin-right: 1px;
}
#container #title ul {
background-color: #FFFFFF;
height: 28px;
}
#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2
.gif
) no-repeat left -29px;
}
#container #title a span{
display: block;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -29px;
padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
display: block;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px;
padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
display: block;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px;
padding: 0 15px 0 15px;
}
#container #title #tag3 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
display: block;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px;
padding: 0 15px 0 15px;
}
#container #title #tag4 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
display: block;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px;
padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
display: block;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #title .selectli1 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
display: block;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px;
padding: 0 15px 0 15px;
}
#container #title .selectli2 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
display: block;

background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px;
padding: 0 15px 0 15px;
}
#container #title .selectli3 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
display: block;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px;
padding: 0 15px 0 15px;
}
#container #title .selectli4 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
display: block;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px;
padding: 0 15px 0 15px;
}
#container #title .selectli5 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
display: block;
background: url(
http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
height: 300px;
padding: 10px;
}
.content1 {
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3A81C8;
border-right-color: #3A81C8;
border-bottom-color: #3A81C8; r />border-left-color: #3A81C8;
background-color: #DFEBF7;
}
.content2 {
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ff950b;
border-right-color: #ff950b;
border-bottom-color: #ff950b;
border-left-color: #ff950b;
background-color: #FFECD2;
}
.content3 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FE74B8;
border-right-color: #FE74B8;
border-bottom-color: #FE74B8;
border-left-color: #FE74B8;
background-color: #FFECF5;
}
.content4 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00988B;
border-right-color: #00988B;
border-bottom-color: #00988B;
border-left-color: #00988B;
background-color: #E8FFFD;
}
.content5 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #A8BC1F;
border-right-color: #A8BC1F;
border-bottom-color: #A8BC1F;
border-left-color: #A8BC1F;
background-color: #F7FAE2;
}
.hidecontent {display:none;}
–>
</style>
<script language="javascript">
function switchTag(tag,content)
{
// alert(tag);
// alert(content);
for(i=1; i <6; i++)
{
if ("tag"+i==tag)
{
document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
}else{
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
}
if ("content"+i==content)
{
document.getElementById(content).className="";
}else{
document.getElementById("content"+i).className="hidecontent";
}
document.getElementById("content").className=content;
}
}
</script>
</head>

<body>
<div id="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="#" onclick="switchTag(‘tag1′,’content1′);this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li>
      <li id="tag2"><a href="#" onclick="switchTag(‘tag2′,’content2′);this.blur();"><span>下载中心</span></a></li>
      <li id="tag3"><a href="#" onclick="switchTag(‘tag3′,’content3′);this.blur();"><span>产品介绍</span></a></li>
      <li id="tag4"><a href="#" onclick="switchTag(‘tag4′,’content4′);this.blur();"><span>会员注册与登录</span></a></li>
      <li id="tag5"><a href="#" onclick="switchTag(‘tag5′,’content5′);this.blur();"><span>联系我们</span></a></li>
    </ul>
  </div>
<div id="content" class="content1">
  <div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点:</p>1、根据字数自适应项目长度</div>
  <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
  <div id="content3" class="hidecontent">3、这回需要使用到js了,呵呵</div>
  <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够,减少服务器负担</div>
  <div id="content5" class="hidecontent">5、这是使用到的两个图片:
         <table width="58%" border="1" cellspacing="2" cellpadding="0">
           <tr>
             <td width="70%" align="center"><img src="
http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td>
             <td width="30%" align="center"><img src="
http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td>
           </tr>
         </table>
  </div>
</div> 

</div>
</body>
</html>

 ——————————————————————————————————————————————————————————

<html>
<head>
<style type=text/css>
li{
    list-style:none;
}
#mainTable li table{
    top:50px;
    margin-top:10px;
}
#secTable li{
    font-size: 12px;
    color: #000000;
    line-height:30px;
width:136px;
      text-align:center;
float:left;
}
.sec1 {
    background-color: #EEEEEE;
    cursor: hand;
    color: #000000;
    border-left: 1px solid #FFFFFF;
    border-center: 1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid #FFFFFF
    }
.sec2 {
    background-color: #D4D0C8;
    cursor: hand; />    color: #000000;
    border-left: 1px solid #FFFFFF;
    border-center: 1px solid #FFFFFF;
    border-right: 1px solid gray;
    font-weight: bold;
    }
.main_tab {
    background-color: #D4D0C8;
    color: #000000;
    border-left:1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    }
</style>
    <script language=javascript>
function secBoard(n)
{
 var hs=mainTable.getElementsByTagName("li");//内容的li的id
    for(i=0;i<4;i++){
        idName=document.getElementById(i);
        if(i!=n)
            idName.className="sec1";
        else
            idName.className="sec2";
    }
    for(i=0;i<hs.length;i++){
        if(i!=n)
            hs.style.display="none";
        else
            hs[n].style.display="block";
    }
}
</script>
</head>
<body>
    <ul style="position:absolute;left:100px;top:75px;width:548px;" border=0 cellspacing=0 cellpadding=0  id=secTable>
      <li id=0 class=sec2 width=10% onMouseMove="secBoard(0)">111111111</li>
      <li id=1 class=sec1 width=10% onMouseMove="secBoard(1)">222222222</li>
      <li id=2 class=sec1 width=10% onMouseMove="secBoard(2)">3333333333</li>
      <li id=3 class=sec1 width=10% onMouseMove="secBoard(3)">4444444444</li>
    </ul>
   
<ul style="position:absolute;left:100px;top:100px;width:548px;height:200px;text-align:center;" id="mainTable" class="main_tab">
<li align=center style="display:block;"><img src="
http://pic1.blueidea.com/bbs/icon10.gif" width=548px height=200px;></li>
<li align=center style="display:none;"> <img src="
http://pic1.blueidea.com/bbs/icon11.gif" width=548px height=200px;></li>
<li align=center style="display:none;"> <img src="
http://pic1.blueidea.com/bbs/icon13.gif" width=548px height=200px;></li>
<li align=center style="display:none;"> <img src="
http://pic1.blueidea.com/bbs/icon12.gif" width=548px height=200px;></li>
</ul>
</body>
</html>

 

</code>

搜索框提示文字点击消失的效果

引用内容:
<input value="提示的文字" onfocus="if (value ==’提示的文字’){value =”}" onblur="if (value ==”){value=’提示的文字’}" />

这样当输入框默认显示“提示的文字”当鼠标点击的时候自动变成空白,如果不输入任何文字再点击其他地方则再次显示“提示的文字”,如果输入了文字再点击其他地方则无反映。

另一种方法:

 引用内容
<input value="" onfocus="if (value ==”){value =’数字’}" onblur="if (value ==’数字’){value=’}" />