六 24

HTML5+JavaScript实现仿微信摇一摇效果

Posted on by

在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。

而通过DeviceMotion对设备运动状态的判断，则可以帮助我们在网页上就实现“摇一摇”的交互效果。

事件监听

演示地址（手机浏览）：http://mrdede.com/UploadFiles/demo/js/shake/demo.html

把监听事件绑定给 deviceMotionHandler

0
1
2
3
4
if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
    alert('本设备不支持devicemotion事件');
}

获取设备加速度信息 accelerationIncludingGravity

0
1
2
3
4
5
6
7
function deviceMotionHandler(eventData) {
    var acceleration = eventData.accelerationIncludingGravity,
        x, y, z;
    x = acceleration.x;
    y = acceleration.y;
    z = acceleration.z;
    document.getElementById("status").innerHTML = "x:"+x+"<br />y:"+y+"<br />z:"+z;
}

将加速度信息打印置页面，通过演示地址可以看到随着设备的移动，屏幕上数字的变化。

 

摇晃判断

演示地址（手机浏览）：http://mrdede.com/UploadFiles/demo/js/shake/demo_1.html

“摇一摇”的动作既“一定时间内设备了一定距离”，因此通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，即可进行设备是否有进行晃动的判断。而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。

0
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
var SHAKE_THRESHOLD = 800;
var last_update = 0;
var x = y = z = last_x = last_y = last_z = 0;
 
if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
    alert('本设备不支持devicemotion事件');
}
 
function deviceMotionHandler(eventData) {
    var acceleration = eventData.accelerationIncludingGravity;
    var curTime = new Date().getTime();
    if ((curTime - last_update) > 100) {
        var diffTime = curTime - last_update;
        last_update = curTime;
        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;
        var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
        var status = document.getElementById("status");
        if (speed > SHAKE_THRESHOLD) {
            var text = "x:"+x+"<br />y:"+y+"<br />z:"+z+"<br />speed:"+speed;
            status.innerHTML = text;
        }
        last_x = x;
        last_y = y;
        last_z = z;
    }
}

100毫秒进行一次位置判断，若前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值，则判断设备进行了摇晃操作。

 

然后通过上面2个演示，然后再增加点样式效果，即可模拟一个简单的微信摇一摇界面。

应用演示：简易模拟微信摇一摇

演示地址（手机浏览）：http://mrdede.com/UploadFiles/demo/js/shake/demo_2.html

六 21

使用itemindex或autoindex实现织梦频道页、列表页显示文章顺序编号

Posted on by

使用织梦内容管理系统建站，想在频道页或列表面显示文章顺序号、隔行变色、每五行一个小区块儿等等效果，这个功能就要大显伸手了。之前我也总结过一些关于织梦标签的调用方法手册，可以直接做为工具页来直接复制。

列表页使用方法：

0
1
2
3
{dede:arclist titlelen='26' row='10'}
<li><a title="[field:title function='htmlspecialchars(@me)'/] " href="[field:arcurl /]">[field:title /]</a></li>
[field:global name=autoindex runphp="yes"]if(@me%5==0)@me="<hr/>";else @me="";[/field:global]
{/dede:arclist}

织梦列表页隔行换色（可以通过写the和that两类的样式来实现不同背景色）：

0
1
2
{dede:arclist titlelen='26' row='10'}
<li class="[field:global name=autoindex runphp='yes']if(@me%2==0)@me='the';else @me='that';[/field:global]"><a title="[field:title function='htmlspecialchars(@me)'/] " href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}

可以使用在dede:arclist和dede:list下，使用的织梦列表页另一种方法(显示自然顺序标号)：

0
1
2
3
4
5
6
7
{dede:list pagesize='12'}
<li>
[field:global name=autoindex runphp="yes"]@me=@me++;[/field:global]
<a href="[field:arcurl/]" class="pic"><img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]"/></a>
<a href="[field:arcurl/]" class="title">[field:title/]</a>
<span class="date"><small>最后更新：</small>[field:pubdate function="GetDateMK(@me)"/]</span>
</li>
{/dede:list}

频道页使用方法：

0
1
2
{dede:global name='itemindex'/}
{dede:global name='itemindex' runphp='yes'}if(@me%5==0)@me="<hr/>";else @me="";{/dede:global}
{dede:global name='itemindex' runphp='yes'}@me=@me+1;{/dede:global}

大体意思就是这样，至于加在什么位置，就自己选吧！

织梦默认的搜索页不支持autoindex标签，需要修改核心文件增加支持：

找到文件：include/arc.searchview.class.php

第一处：

0
1
2
3
//找到代码
$this->dtp2->LoadSource($innertext);
//增加代码如下
$GLOBALS['autoindex'] = 0;

第二处：

0
1
2
3
4
5
//找到代码
if($row = $this->dsql->GetArray("al"))
{
//增加代码如下
$GLOBALS['autoindex']++;
$ids[$row['id']] = $row['id'];

六 20

dedeCMS数据库操作类中$dsql的使用方法与实例

Posted on by

dedecms二次开发中对数据库操作类的使用尤为重要，下面是对数据库操作类的一些简单说明和实例。

引入common.inc.php文件

0
require_once (dirname(__FILE__) . "/include/common.inc.php");

查询某表是否存在，存在返回TRUE，否则返回FALSE

0
1
2
3
4
5
6
if($dsql->IsTable("dede_addonarticle,#@__archives")){ //注意“#@__”，是两个下横杠
  echo "表存在";
  exit;
}else{
  echo "表不存在";
  exit;
}

获取一条记录的内容

0
1
$row = $dsql->GetOne("Select * From dede_* where id = $aid");
echo $row['id'];

将查询获取总数输出

0
1
$row = $dsql->GetOne("select count(*) as dd where typeid = $typeid");
echo $row['dd'];//输出总数

将查询的若干条记录输出

0
1
2
3
4
5
6
7
8
9
10
11
12
13
$sql = "Select * from dede_*";
$dsql->SetQuery($sql);//将SQL查询语句格式化
$dsql->Execute();//执行SQL操作
//通过循环输出执行查询中的结果
while($row = $dsql->GetArray()){
echo $row['id'];
echo $row['title'];
}
//或者采取这种方式输出内容
 
while($row = $dsql->GetObject()){
echo $row->id;
echo $row->Title;
}

将查询的若干条记录输出dedecms5

0
1
2
3
4
5
6
$dsql->SetQuery("Select id,typename From `#@__arctype` where reid=0 And channeltype=1 And ishidden=0 And ispart<>2 order by sortrank");
$dsql->Execute();
while($row=$dsql->GetObject())
{
$channellist .= "<a href='wap.php?action=list&id={$row->id}'>{$row->typename}</a> ";
echo $row->id;
}

插入一条记录

0
1
2
3
4
$sql = "
INSERT INTO `dede_member_flink`(mid,title,url,linktype,imgurl,imgwidth,imgheight)
VALUES(".$cfg_ml->M_ID.",'$title','$url','$linktype','$imgurl','$imgwidth','$imgheight');";//插入记录数据库
$dsql->SetQuery($sql);//格式化查询语句
$dsql->ExecNoneQuery();//执行SQL操作

经实践证明，上面的语句不能正常插入数据库，下面是正确的语句

0
1
2
3
4
$sql = "
INSERT INTO `dede_member_flink`(mid,title,url,linktype,imgurl,imgwidth,imgheight)
VALUES(".$cfg_ml->M_ID.",'$title','$url','$linktype','$imgurl','$imgwidth','$imgheight');";//插入记录数据库
$dsql->ExecuteNoneQuery($sql);//执行SQL操作
$gid = $dsql->GetLastID();//获取刚刚插入的id

删除一条记录

0
1
2
3
4
$sql = "Delete From dede_member_flink where aid='$aid' And mid='".$cfg_ml->M_ID."';";
$dsql->SetQuery($sql);
$dsql->ExecNoneQuery();
//或者使用简化模式
$dsql->ExecNoneQuery("Delete From dede_member_flink where aid='$aid' And mid='".$cfg_ml->M_ID."';");

更新一条记录

0
1
2
3
4
5
6
$upquery = "
Update dede_member_flink set
title='$title',url='$url',linktype='$linktype',
imgurl='$imgurl',imgwidth='$imgwidth',imgheight='$imgheight'
where aid='$aid' And mid='".$cfg_ml->M_ID."';
";
$rs = $dsql->ExecuteNoneQuery($upquery);

判断获取数据库内容的常用方法

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$row = $dsql->GetOne("Select * From dede_moneycard_type where tid={$pid}");
if(!is_array($row)){
echo "失败";
exit();
}
 
/////////////////////////////
$upquery = " Update dede_member_flink set
title='$title',url='$url',linktype='$linktype',
imgurl='$imgurl',imgwidth='$imgwidth',imgheight='$imgheight'
where aid='$aid' And mid='".$cfg_ml->M_ID."';
";
$rs = $dsql->ExecuteNoneQuery($upquery);
if($rs){
echo "成功";
}else{
echo "失败";
}

获取总数

0
1
2
3
$dsql = new DedeSql(false);
$dsql->SetQuery("Select * from `dede_admin` where userid='$userid' Or uname='$uname'");
$dsql->Execute();
$ns = $dsql->GetTotalRow();

关闭数据库

0
$dsql->Close();

实例 Continue reading →

六 17

织梦5.7使用图片集模型上传图片弹出框显示302不能上传图片

Posted on by

织梦5.7在栏目使用图片集模型时，后台单张上传或多张同时上传，会出现302，并且上传图片失败。

解决方案：

织梦程序根目录/include/userlogin.class.php
在session();的上面增加以下几行即可（如下图）：

织梦上传图片弹出302

代码如下，复制粘贴即可：

0
1
2
if (isset($_POST["PHPSESSID"])) {
session_id($_POST["PHPSESSID"]);
}

注意：在编辑代码时使用专业代码工具，不要使用记事本工具，防止出错！

六 15

本地win7下使用phpStudy集成环境配置IIS7+PHP+phpMyAdmin+MySQL(20151102更新)

Posted on by

错误提示信息：
install/remove of the service denied
#2002 无法登录 MySQL 服务器
错误1053 服务没有及时响应启动或控制请求

弄了一宿，真的很难很难呀！转着很大的圈儿，疯了疯了！

前些年一直在用wamp，操作简单，本地调试单个网站足够用了。从今年年初开始使用了phpStudy集成环境，PHP版本多，用着还不错。

最近帮人改一个asp源码样式，需要本地测试，结果安装上了IIS。可昨天闲着没事，实然想起这phpStudy也可以把IIS与PHP集成的功能，弄上了是一个问题接着一个问题，自己还不想放弃。

系统：wid7 IIS7.x 买好几年了，配置过时了但还不舍。
环境：phpStudy集成环境（2014版集合24种环境自由选择）

win7下安装IIS是傻瓜式安装，网上方法多的是，就不说了，我也没碰到问题；

配置PHP模块：

手动配置cgi模式(php5.4/5.3)
1.创建并配置php.ini，同上2。
2.打开IIS7，在主面板中双击处理程序映射，然后在右侧菜单中点击“添加模块映射…”（之前我就添加错了，添加的脚本映射），设置如下：
请求路径：*.php;
模块：FastCgiModule;
可执行文件：php文件夹中的php-cgi.exe;
名称：php;
3.完成！
（还有其它方法，但我认为这是最方便的）
建立站点，在根目录新建info.php测试文件，内容为<?php phpinfo(); ?>，测试是否成功。

配置MySQL：

将MySQL 添加到服务中。
在C:\Windows\System32\文件夹下找到cmd.exe，右键单击cmd.exe, 选择“以管理员身份运行”(或“Run as administrator”），窗体左上角显示“管理员:C:\…”，进入路径（这是我的路径，你的路径我就不知道了，哈哈）： d:\tool\phpStudy\mysql\bin>
输入 mysqld –install MySQL –defaults-file=”C:\Windows\my.ini”
如果提示：Service successfully installed.
说明MySQL服务已经添加系统服务成功。
如果提示：install/remove of the service denied
可能是你没有使用管理员身份运行cmd.exe

***************************************

2015 年11月，由于本人笔记本用得比较狠，前几天突然卡死（蓝屏），提示是硬盘出现问题，但是用DELL自身的硬件检测，并没有发现任何问题，可是由于数据很 重要，而且之前在使用中也时不时的出现“无响应”现象，所以果断决定换个固态硬盘太小的真的没意义呀，还不如多花点钱买个差不多的，所以在某宝上买了个镁 光480G的，不是最贵最好的，但是从各方面看，适合我，1000元、存储空间正好。

换了硬盘就得重做系统，硬盘来的时候是让老板给做得系统，windows10，还怕我电脑带不了呢，回来接上试用还可以，各方面都没有不兼容的现象发生，这点很满意。

新系统，我这配置本地测试环境得折腾个把月的，才能完全的配置好，并且适应在新环境下的工作。

使用集成环境相对的好配置一些，使用phpStudy很长时间了，直到刚才才知道phpStudy有集成的IIS+MySQL环境，但是晚了，而且想想，如果不用集成的IIS还是不用得好。

这次到了把MySQL服务配来系统服务这步卡住了（1067错误），合着是卡了有两天了。反正到现在是弄好了，具体是什么原因、怎么弄好的，我也说不清。

昨天安装完MySQL服务后不好使，我也再删再安了几次，都没有好。今天只是把昨天安装的windows功能给删除重新安了一次后，删除MySQL服务后，又安装MySQL服务，就好了。

还忘说了些事，也可能是很重要的，我今天把my.ini文件放到c:\windows\目录下了，所有有很多文章和方法，但是都没有说这一点，也不知道是用不着呀？还是都是照一个人抄的。切记切记！！！

还是以管理员身份打开cmd.exe，目录到d:\tool\phpStudy\mysql\bin>

删除MySQL到系统服务中的方法：mysqld -remove

安装MySQL到系统服务中的方法：mysqld -install

***************************************

cmd的一些命令（不区分大小写）：
输入 d: 按回车，直接进入D盘；
输入 cd tool\phpStudy\mysql\bin 按回车，进入bin文件夹；
输入 cd\ 按回车，返回根目录，如D盘或C盘；
输入 cd.. 按回车，返回上一级目录；
输入 dir 按回车，显示当前文件夹内的文件夹和文件名。
（这些cmd命令够用了）

配置phpMyAdmin：

由 于phpStudy的IIS7/8+PHP5xx的phpMyAdmin的默认链接是http://localhost:8980/phpmyadmin /index.php，所以现在在IIS中建立站点，端口是8980，路径为D:\tool\phpStudy\WWW\。
要注意的是一定要把WWW做为些站点的根目录，phpmyadmin为站点的一级目录。

说到这里，如果正常的话，就已经配置成功了。

说说我的一些错误：

（这 里是错误的方法）由于phpStudy的phpMyAdmin是在网站内部的，我就想着这回可以在IIS中给他单独建立站点（端口设置8080）就可以访 问了，于是乎错误就此开始了，倒是可以访问到http://localhost:8080/index.php，登录不进去，提示“#2002 无法登录 MySQL 服务器”，想一想，后来到网上搜了搜，发现是没有启动MySQL服务。

在配置MySQL时，最初我是没有用管理员身份打开cmd.php，我是直接在运行中输入cmd后进入的cmd窗体，可能是这个原因。在启动MySQL时报错：错误1053 服务没有及时响应启动或控制请求。

转 回头使用链接http://localhost:8080/index.php，还是无法连接MySQL，又是一阵搜，没什么好的结果。就想着在 phpStudy的配置项中找找原因，无意间点了下“MySQL管理器”，发现他的链接是http://localhost:8980 /phpmyadmin/index.php，我都蒙了，以为是我在IIS中建立站点的端口号怎么给写成8980了呢，查看一下，是8080，又一想是不 是之前使用Apache时建立的根目录站点的端口号是8980，查看几个，发现在没有。这下放心了，我可以直接在IIS中改端口号和路径，理论上通过了， 实际一改，成功了！！！

六 13

JavaScript常用函数收集

Posted on by

脑袋不好使就多记笔记，收集了一些比较常用的javascript函数，以备急用。

字符串长度截取

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function cutstr(str, len) {
    var temp,
        icount = 0,
        patrn = /[^\x00-\xff]/,
        strre = "";
    for (var i = 0; i < str.length; i++) {
        if (icount < len - 1) {
            temp = str.substr(i, 1);
                if (patrn.exec(temp) == null) {
                   icount = icount + 1
            } else {
                icount = icount + 2
            }
            strre += temp
            } else {
            break;
        }
    }
    return strre + "..."
}

替换全部

0
1
2
String.prototype.replaceAll = function(s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2)
}

清除空格

0
1
2
3
String.prototype.trim = function() {
    var reExtraSpace = /^\s*(.*?)\s+$/;
    return this.replace(reExtraSpace, "$1")
}

清除左空格/右空格

0
1
function ltrim(s){ return s.replace( /^(\s*|　*)/, ""); }
function rtrim(s){ return s.replace( /(\s*|　*)$/, ""); }

判断是否以某个字符串开头

0
1
2
String.prototype.startWith = function (s) {
    return this.indexOf(s) == 0
}

判断是否以某个字符串结束

0
1
2
3
String.prototype.endWith = function (s) {
    var d = this.length - s.length;
    return (d >= 0 && this.lastIndexOf(s) == d)
}

转义html标签

0
1
2
function HtmlEncode(text) {
    return text.replace(/&/g, '&').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>')
}

时间日期格式转换

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Date.prototype.Format = function(formatStr) {
    var str = formatStr;
    var Week = ['日', '一', '二', '三', '四', '五', '六'];
    str = str.replace(/yyyy|YYYY/, this.getFullYear());
    str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100));
    str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1));
    str = str.replace(/M/g, (this.getMonth() + 1));    str = str.replace(/w|W/g, Week[this.getDay()]);
    str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate());
    str = str.replace(/d|D/g, this.getDate());
    str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours());
    str = str.replace(/h|H/g, this.getHours());
    str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes());
    str = str.replace(/m/g, this.getMinutes());
    str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds());
    str = str.replace(/s|S/g, this.getSeconds());
    return str
}

判断是否为数字类型

0
1
2
3
4
5
6
7
function isDigit(value) {
    var patrn = /^[0-9]*$/;
    if (patrn.exec(value) == null || value == "") {
return false
    } else {
return true
    }
}

设置cookie值

0
1
2
3
4
5
6
7
8
function setCookie(name, value, Hours) {
    var d = new Date();
    var offset = 8;
    var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
    var nd = utc + (3600000 * offset);
    var exp = new Date(nd);
    exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;"
}

获取cookie值

0
1
2
3
4
function getCookie(name) {
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) return unescape(arr[2]);
    return null
}

加入收藏夹

0
1
2
3
4
5
6
7
8
9
10
function AddFavorite(sURL, sTitle) {
    try {
window.external.addFavorite(sURL, sTitle)
    } catch(e) {
try {
window.sidebar.addPanel(sTitle, sURL, "")
} catch(e) {
alert("加入收藏失败，请使用Ctrl+D进行添加")
}
    }
}

设为首页

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function setHomepage() {
    if (document.all) {
document.body.style.behavior = 'url(#default#homepage)';
document.body.setHomePage('http://w3cboy.com')
} else if (window.sidebar) {
if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")
} catch(e) {
alert("该操作被浏览器拒绝，如果想启用该功能，请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true")
}
}
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);        prefs.setCharPref('browser.startup.homepage', 'http://w3cboy.com')
    }
}

加载样式文件

0
1
2
3
4
5
6
7
8
9
10
11
function LoadStyle(url) {
    try {
document.createStyleSheet(url)
    } catch(e) {
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
cssLink.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(cssLink)
    }
}

返回脚本内容

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function evalscript(s) {
    if(s.indexOf('<script') == -1) return s;
    var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;
    var arr = [];    while(arr = p.exec(s)) {
var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
var arr1 = [];
arr1 = p1.exec(arr[0]);
if(arr1) {
appendscript(arr1[1], '', arr1[2], arr1[3]);
} else {
p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;
arr1 = p1.exec(arr[0]);
appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
}
    }
    return s;
}

清除脚本内容

0
1
2
function stripscript(s) {
    return s.replace(/<script.*?>.*?<\/script>/ig, '');
}

Continue reading →

六 10

jQuery DOM 元素方法index()方法获取值为-1，得不到正确的值

Posted on by

$(selector).index()获得第一个匹配元素相对于其同胞元素的 index 位置

0
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
$(".newsTab dd:first-child").addClass("hover");
 
$(".newsList dd:first-child").show();
 
(function(){
 
var _left = $(".newsTab dd.hover").position().left;
 
//alert(_left)
 
$(".newsTab span").css({left: _left});
 
$(".newsTab dd").each(function(index, el) {
 
$(this).click(function(event) {
 
if (!$(this).hasClass('hover')) {
 
$(this).addClass('hover').siblings().removeClass('hover')
 
var _left2 = $(this).position().left;
 
$(".newsTab span").stop(true).animate({left: _left2}, 500);
 
$(".newsList dd").hide();
 
$(".newsList dd").eq($(".newsTab dd.hover").index()).show();
 
};
 
});
 
});
 
}())

不懂装懂，帮朋友修改一个JS效果（点击后不显示同胞元素），JQ方法功能也是现查的手册，测试index()返回值是-1，这一定是不正确了。

结果就是一阵的百度搜索，在开源中国的一篇文章中得到了启发：

$(".newsList dd").eq($(".newsTab dd.hover").index()).show();
修改为
$(".newsList dd").eq($(".newsTab dd").index($(".hover"))).show();

解释：

$(“.newsTab dd”)表示找到newsTab类下的所有的dd，返回一个dd的数组的对象；

后面的.index($(“.hover”))表示返回数组对象中的class为hover的对象的坐标。

五 29

include、include_once与require函数区别

Posted on by

三个函数有相同又有不同，相同点是都可以包含文件，不同点看以下分析。

include "function.inc.php";
include_once "function.inc.php";
require "function.inc.php";

include()

如果被包含内容有问题或不存在，系统则产生一个警告（系统跳过错误，执行以下内容）。

include_once()

比include()功能强，多了一次判断被包含是否被包含过，如果使用include_once()包含多次则执行一次。

require()

如果被包含内容有问题或不存在，系统则产生一个致命的错误（系统崩溃停止）。

比较：

include_once()比include()功能强，功能越强就越多一些算法，效率就没有include()高，所以如果不是绝对必要使用include_once()时，则使用include()。

include()与require()：include()根据情况择机去包含文件时使用，也就是说如果被包含文件不存在也不会对脚本的以下执行造成多大的影响；require()固定包含文件时使用，也就是说如果被包含文件不存在则以下程序无法正常运行时，使用require()。

五 29

实现IE兼容效果引入CSS及文件方法

Posted on by

万恶的IE，但总算有个解决的方法。以前我也看别人的博客中说过，写CSS不一定非要兼容IE所有版本，最多也就是兼容它主流的一两种版本。我也是这个见解，再说了，也不是人人都用IE的，虽然它很牛，但这是中国。360浏览器、QQ浏览器等，虽然使用得也是IE的内核，但是在显示方面是与IE有所区别的，当然，在网站开发中，还是使用火狐为主开发浏览器的，最主要的是他的执行标准还是相对标准的；还有一点，是个人偏好问题，喜欢他自带的开发工具，已经是习惯了。

方法一：
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以下(不包含IE6)版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以上(包含IE6)版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下(不包含IE7)版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以上(包含IE7)版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

方法二：
<!DOCTYPE html>
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]-->

实例：IE6及以上版本引入ie.css，增加在head区。
<!--[if gte IE 6]><link href="css/ie.css" rel='stylesheet' type='text/css' /><![endif]-->

<!--[if gte IE 6]><style>.body{margin:0;padding:0}......</style><![endif]-->

<!--[if IE 6]> <html id="ie6" lang="zh-CN"> <![endif]-->

个人还是喜欢使用IE可识别标签引入CSS的方法，html页面不至于看着很乱，如果CSS代码不多，也可以直接写在html中，实例中的第三种方法是最不建议使用的，写出来只为了了解，它会造成大量的HTTP请求。

**************************************************************

CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!

目前IE内核浏览器仍然是国内主流浏览器，占据着PC浏览器的大部分市场份额，版本从IE6到IE10，所有前段工作者都必须面对和解决多个ie浏览器对代码的兼容性问题。在很多情况下，我们需要专门针对IE写css样式，即针对IE的css hack，下面将详细介绍这些内容：

1、常见的特殊符号的应用：

IE6：

_selector{property:value;}

selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important

IE7：

+selector{property:value;}

IE8：

selector{property:value\0;}

IE6 & IE7：

*selector{property:value;}

IE6 & IE7 & IE8：

selector{property:value\9;}

总结起来，如下：

其中，S表示Standards Mode即标准模式，Q表示Quirks Mode，即兼容模式。

（了解更多Quirks模式、Strict(Standars)模式？）

hack 示例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q)
* *color Yes Yes Yes Yes No Yes
+ +color Yes Yes Yes Yes No Yes
- -color Yes Yes No No No No
_ _color Yes Yes No Yes No Yes
# #color Yes Yes Yes Yes No Yes
\0 color\0 No No No No Yes No
\9 color\9 Yes Yes Yes Yes Yes Yes
!important color:blue !important;
color:green;		 No No Yes No Yes No

2、条件注释语句（<!–[if IE]> <![endif]–>）

所有的IE可识别

仅IE6可识别

IE6以及IE6以上版本可识别

IE7以下版本可识别

lt 表示less than 当前条件版本以下的版本，不包含当前版本。

gte 表示greeter than or equal 当前版本以上版本，并包含当前版本。

lte 表示less than or equal 当前版本以下版本，并包含当前版本。

3、meta声明

由于IE8 可能会将页面按照 IE7 模式进行渲染，针对 多版本IE的现状，通常会采用设置 X-UA-Compatible HTTP 头的方式将页面在IE中采用统一的渲染模式。

0
//标准 IE7 模式

0
//兼容 IE7 模式

0
//标准 IE 模式

4、其他（/*\**/注释法）

网上也流传着这样一种ie hack方法

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/

分析下：
background-color:blue; 各个浏览器都认识，这里给firefox用；
background-color:red\9;\9所有的ie浏览器可识别；
background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；
+background-color:pink; + ie7定了；
_background-color:orange; _专门留给神奇的ie6；
:root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

好了就这么多了，特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。

区别不同浏览器的CSS hack写法：

区别IE6与FF：
background:orange;*background:blue;

区别IE6与IE7：
background:green !important;background:blue;

区别IE7与FF：
background:orange; *background:green;

区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

IE6 IE7 FF
* √ √ ×
!important × √ √

——————————————————
另外再补充一个，下划线”_”,
IE6支持下划线，IE7和firefox均不支持下划线。

IE6 IE7 FF
* √ √ ×
!important × √ √
_ √ × ×

于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

五 28

改写响应式网站常用CSS属性及使用方法总结(未完)

Posted on by

其实这些属性即使平时也是常用的，只是在改写响应式网站时，个人认为是更为常用的。由于响应式网站要适应各种屏幕宽度，所以要求制作者在使用CSS时能更强的运用好CSS的各种属性，处理好网站中的文本、图片、背景图片等。改写响应式网站，尤其是现有的PC网站强改响应式网站，要达到尽量好的适应效果，必须灵活运用CSS的各种属性。
下面内容一些通俗易懂的语言做了解释，非那些大网站写得好像不是给我这种文化水平低的人看的内容似的，都是给专业人士看的似的，可还有几个专业人士去查看你那些大学没毕业就看不懂的语言。生气…

一、CSS文本类

text-overflow 属性

默认值：clip
继承性：no
版本： CSS3
JavaScript语法：object.style.textOverflow=”ellipsis”
语法：text-overflow: clip|ellipsis|string;
以下值的前提是行定了宽度和高度。
clip 多余部分剪切（或者叫隐藏）。
ellipsis 如有多余文本，在行最末处以省略号显示（占一字宽度）。
string 按上一个值去理解，也就是把上一个值显示省略的部分换成你自己设定的内容（没使用过，看解释感觉我个人感觉没什么太大的实际意义，没研究）。

在使用ellipsis值时，要使用white-space: nowrap;和overflow: hidden;联合使用才能达到效果。
而clip值我一般是在写响应式时强制解除ellipsis的时候使用，也可能是我对它的理解还不够没感觉还有别的什么用处。

CSS示例：
div.test
{
text-overflow:ellipsis;
white-space: nowrap; //文字不换行
overflow: hidden; //溢出隐藏
}

ellipsis效果：

织梦先生

transform 属性
默认值： none
继承性： no
版本： CSS3
JavaScript 语法： object.style.transform=”rotate(7deg)”

CSS示例：
div
{
transform:rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
-moz-transform:rotate(-45deg); /* Firefox */
-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
-o-transform:rotate(-45deg); /* Opera */
}

效果：

织梦先生

二、CSS背景图片类

background 属性

默认值： not specified
继承性： no
版本： CSS1 + CSS3
JavaScript 语法： object.style.background=”white url(paper.gif) repeat-y”
background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
background-size 规定背景图片的尺寸。 (CSS3属性)
background-repeat 规定如何重复背景图像。
background-origin 规定背景图片的定位区域。 (CSS3属性)
background-clip 规定背景的绘制区域。 (CSS3属性)
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。
inherit 规定应该从父元素继承 background 属性的设置。

CSS示例：
body
{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}

background-position 属性

默认值： 0% 0%
继承性： no
版本： CSS1
JavaScript 语法： object.style.backgroundPosition=”center”
值：
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
如果只规定了一个关键词，那么第二个值将是”center”。
第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
可以使用百分比(%)，也可以使用像素(px)

CSS示例：
body
{
background-image:url(‘bgimage.gif’);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

提示：您需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

三、图片类

opacity属性

默认值： 1
继承性： no
版本： CSS3
JavaScript 语法： object.style.opacity=0.5
值：
value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit 应该从父元素继承 opacity 属性的值。

CSS示例：
div{opacity:0.5;}

效果：

织梦先生
织梦先生
织梦先生
织梦先生
织梦先生