浅析jQuery删除节点的三个方法

jQuery提供了三种删除节点的方法,即remove(),detach()和empty()。

测试所用HTML代码:

1
2
3
4
5
6
<p title="选择你最喜欢的水果?">你最喜欢的水果是?</p>  
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>

1、remove()方法

1
2
3
4
5
$("ul li").click(function(){  
alert($(this).html());
});
var $li = $("ul li:eq(1)").remove();
$li.appendTo("ul");

当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。

Read More

一个页面有相同ID元素的情况分析

经常会遇到一个页面中有相同定义相同id的情况,从道理上来说,id应该是这个页面中某个元素的唯一标识,所以不应该出现有相同id的情况,否则会产生意想不到的结果。而且各个浏览器的表现也是不一样的。我只做了ie6,chrome和firefox的测试。
代码如下:

1
2
3
4
5
6
7
8
9
10
11
<div id="a"><input type="text" id="aa" value="aaaaaaaa"/></div>  
<div id="b"><input type="text" id="aa" value="bbbbbbbbb"/></div>
<input type="button" onclick="show()" value="click here" />
<script type="text/javascript" src="http://qustliuyongjie.blog.163.com/blog/jquery.min.js"></script>
<script type="text/javascript">
function show(){
alert($('#aa').val());(情况一)
alert($('#a #aa').val());(情况二)
alert($('#b #aa').val());(情况二)
}
</script>

Read More

JQuery脚本-通过禁用按钮防止表单重复提交

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script language="javascript">   
<!--
var submitcount=0;
function submitOnce (form){
if (submitcount == 0){
submitcount++;
return true;
} else{
alert("正在操作,请不要重复提交,谢谢!");
return false;
}
}
//-->
</script>

<form name="the_form" method="post" action="" onSubmit="return submitOnce(this)">
<input name="text" type="text" id="text" />
<input name="cont" value="提交" type="submit">
</form>

在上例中,如果用户已经单击“提交”按钮,该脚本会自动记录当前的状态,并将submitcount变量自加1,当用户试图再次提交时,脚本判断submitcount变量值非零,提示用户已经提交,从而避免重复提交表单。

Read More

php中preg正则函数使用

1.preg_match和preg_match_all的区别
preg_match和 preg_match_all区别是preg_match只匹配一次。而preg_match_all全部匹配,直到字符串结束。例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php  
//注:正则 /a.+?e/ 是非贪婪模式(因为量词‘+’后面加上了‘?’),如果使用 /a.+?e/U 则变回了贪婪模式
preg_match("/a.+?e/","abcdefgabcdefgabcdefg",$out1);
preg_match_all("/a.+?e/","abcdefgabcdefgabcdefg",$out2);
var_dump($out1);
var_dump($out2);
/*
输出:
array (size=1)
0 => string 'abcde' (length=5)

array (size=1)
0 =>
array (size=3)
0 => string 'abcde' (length=5)
1 => string 'abcde' (length=5)
2 => string 'abcde' (length=5)
*/
?>

Read More

preg_match_all使用实例

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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<?php  
$str = <<<EOT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>微信公众平台</title>
<link href="https://res.wx.qq.com/mpres/htmledition/images/favicon1e5b3a.ico" rel="Shortcut Icon">
<link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/mpres/htmledition/style/base/layout_head1f56cd.css" />
<link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/mpres/htmledition/style/base/base1f8f18.css" />
<link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/mpres/htmledition/style/base/lib1ec5f7.css" />
<link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/mpres/htmledition/style/page/setting/setting_common1ec5f7.css" />
<link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/mpres/htmledition/style/page/setting/setting_index1f46ee.css" />
<link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/mpres/htmledition/style/jquery.Jcrop.min1e5b3a.css" />
<link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/c/=/mpres/htmledition/style/widget/upload1f8f05.css,/mpres/htmledition/style/widget/processor_bar1ec663.css" />
</head>

<body class="zh_CN">
<div class="main_bd">
<div class="account_setting_area" id="settingArea">
<ul>
<li class="account_setting_item">
<h4>名称</h4>
<div class="meta_opr"></div>
<div class="meta_content">青鸢</div>
</li>
<li class="account_setting_item">
<h4>头像</h4>
<div class="meta_opr">
<a id="changeHeadImg" href="javascript:;">修改头像</a>
<p class="desc">(一个月内只能申请修改一次)</p>
</div>
<div class="meta_content">
<img class="avatar" src="/misc/getheadimg?token=1388&fakeid=3084&r=269391" />
</div>
</li>
<li class="account_setting_item">
<h4>登录邮箱</h4>
<div class="meta_opr">
<p>
<a href="/acct/updateboundemail?t=setting/bind-email&action=bind&token=138856269&step=1&lang=zh_CN">修改</a>
</p>
<p class="desc">(一个月内只能申请修改一次)</p>
</div>
<div class="meta_content">aaaa@163.com</div>
</li>
<li class="account_setting_item">
<h4>原始ID</h4>
<div class="meta_opr"></div>
<div class="meta_content">
<span>gh_00aec11d9</span>
</div>
</li>
<li class="account_setting_item">
<h4>微信号</h4>
<div class="meta_opr"></div>
<div class="meta_content">
<span>aaaa_163</span>
</div>
</li>
<li class="account_setting_item">
<h4>类型</h4>
<div class="meta_opr"></div>
<div class="meta_content">订阅号</div>
</li>
<li class="account_setting_item">
<h4>认证情况</h4>
<div class="meta_opr verify">
<a href="javascript:;" id="Js_weiboVerify">关联微博认证</a>
<a href="/merchant/store?action=detail&t=wxverify/detail&info=verify&lang=zh_CN&token=1388">申请微信认证</a>
</div>
<div class="meta_content">未认证</div>
</li>
<li class="account_setting_item">
<h4>介绍</h4>
<div class="meta_opr">
<p>
<a id="modifyUserInfo" href="javascript:;" class="">修改</a>
</p>
<p class="desc">(一个月内功能介绍只能申请修改一次)</p>
</div>
<div class="meta_content">php学习交流</div>
</li>
<li class="account_setting_item">
<h4>所在地址</h4>
<div class="meta_opr">
<a href="/cgi-bin/settingpage?action=sosomap&lang=zh_CN&token=138856269">设置</a>
</div>
<div class="meta_content"></div>
</li>
<li class="account_setting_item">
<h4>二维码</h4>
<div class="meta_opr">
<a id="more_size" href="javascript:;">更多尺寸</a>
</div>
<div class="meta_content">
<a target="_blank" class="verifyInfo" title="点击下载" href="/misc/getqrcode?fakeid=3088921&token=1388&style=1&action=download">
<img src="/misc/getqrcode?fakeid=3084389217&token=1388&style=1" width="150" />
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="faq">
<ul class="links">
<li class="links_item no_extra">
<a href="http://crm2.qq.com/page/portalpage/wpa.php?uin=40012345&f=1&ty=1&ap=000011:400792:|m:12|f:400792:m:12"
target="_blank">在线客服</a>
</li>
<li class="links_item">
<a href="http://kf.qq.com/product/weixinmp.html" target="_blank">客服中心</a>
</li>
</ul>
<p class="tail">反馈官号weixingongzhong</p>
</div>
</div>
</body>
</html>
EOT;

preg_match_all("/<li class=\"account_setting_item\">\s*?<h4>(.*?)<\/h4>[\s\S]*?<div class=\"meta_content\">([\s\S]*?)<\/div>/",$str,$out);
//var_dump($out);die;
foreach ( $out [1] as $key=>$val ) {
$arr [] = array('key'=>$val,'val'=>trim ( $out[2][$key] ));
}
if (count($arr) > 0) {
foreach ($arr as $k=>$v){
switch ($v['key']){
case '原始ID':
$arr['openid'] = preg_replace("/<span>(.*?)<\/span>/", "$1", $v['val']);
break;
case '微信号':
$arr['account'] = preg_replace("/<span>(.*?)<\/span>/", "$1", $v['val']);
break;
case '名称':
$arr['wx_name'] = $v['val'];
break;
case '类型':
$arr['type'] = ($v['val']=='服务号') ? 1 : 0;
break;
case '认证情况':
$arr['verify'] = strpos($v['val'],"icon_verify_checked")?1:2;
default:
$arr[$v['key']] = $v['val'];
}
}
//return $arr;
}

var_dump($arr);die;
?>

Read More