1.去掉头尾,1,2,3,4,
cate_name=cate_name.replace(/^,|,$/g, "");
2.将1,2,3,4,2变成数组
cate_name=cate_name.split(",");
3.将数组中重复元素进行去重
cate_name = unique4(cate_name);
function unique4(array){
array.sort();
var re=[array[0]];
for(var i = 1; i < array.length; i++){
if( array[i] !== re[re.length-1]){
re.push(array[i]);
}
}
return re;
}
4.a元素没有class on则添加上,有class on则去掉,用于样式切换
$('a').toggleClass("on");
5.如果需要等待ajax结果再进行下一步判断,可以设置ajax同步,async默认true,意思是异步,设为false,则为同步。
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var a = false;
$("button").click(function(){
htmlobj=$.ajax({url:"/index.php",async:false,success:function(res){
if(res){
a = true;
}
}});
alert(a);
});
});
</script>
6.搜索自动显示下拉待选结果
<?php
$key = $_REQUEST['key'];
$arr = array(
'0'=>'测试',
'1'=>'测试1',
'2'=>'测试2',
'3'=>'测试3',
'4'=>'测试4',
'5'=>'1234',
'6'=>'2345344',
'7'=>'1111114',
'8'=>'22222356664',
);
foreach ($arr as $k => $v ){
//echo $arr[$k];
if(strpos($arr[$k], $key)!==false){
//echo $arr[$k];
$a[] =$arr[$k];
}
}
echo json_encode($a);
<!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=utf-8" />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<title>By:DragonDean</title>
<script type="text/ecmascript">
function txtchange() {
var nnmae = $("#intxt").val();
$.ajax({
type: "post",
data:{key:nnmae},
url: "index.php",
dataType: "json",
success: function (data) {
$("#tbcontent").html(""); //删除原有数据
if (data != "null") {
for (var i = 0; i < $(data).length; i++) {
$("#tbcontent").append('<div class="item" οnclick="mousedown(this)">' + data[i] + '</div>');
}
$("#tbcontent").slideDown();
}
}
});
}
//选择其中的提示内容
function mousedown(object) {
$("#intxt").val($(object).text());
$("#tbcontent").fadeOut();
}
//文档框失去焦点,隐藏提示内容
function lost() {
$("#tbcontent").fadeOut();
}
</script>
<style type="text/css">
.item:hover
{
background-color: Gray;
cursor:pointer;
}
.show
{
width: 200px;
z-index: 10;
display: block;
}
.hidden
{
width: 200px;
z-index: 10;
display: none;
border:1px solid rgb(80,160,91);
border-top:none;
}
table tr td
{
margin:none;
padding:none;
border:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 210px; margin-left:auto; margin-right:auto">
<table>
<tr>
<td>
<input type="text" style="width: 200px;" id="intxt" οnkeyup="txtchange()" οnblur="lost()"/>
</td>
</tr>
<tr>
<td>
<div id="tbcontent" class="hidden">
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
7.append,appendTo,prepend,prependTo添加会将元素移动到添加位置,而不是复制添加。
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
<script>
$(function(){
$("p").append( $(".foo")[0] );
})
</script>
8.图片预览
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="expires">
<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>上传营业执照</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body{padding:10%;}
#licence{
margin:10%;
width:200px;
}
.preview{
padding:5%;
margin:auto;
min-width:90%;
}
h2{text-align:center;}
</style>
</head>
<body>
<h2>HTML5调用手机摄像头测试</h2>
<div><img class="preview" src="img/licence.png" /></div>
<br/>
<input type="file" id="licence" name="licence" accept="image/gif,image/jpeg,image/jpg,image/png" >
<br/>
<br/>
<br/>
</body>
<script>
$(function(){
$('#licence').change(function(){
var src = getObjectURL($(this)[0].files[0]);
$('.preview').attr('src', src);
});
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
})
</script>
</html>
9、遮罩层弹窗案例
<!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=utf-8" />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<title>By:DragonDean</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 40%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
</script>
</head>
<body>
<input id="Button1" type="button" value="点击弹出层" οnclick="ShowDiv('MyDiv','fade')" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
<div id="MyDiv" class="white_content">
<div style="text-align: right; cursor: default; height: 40px;">
<span style="font-size: 16px;" οnclick="CloseDiv('MyDiv','fade')">关闭</span>
</div>
目前来说,我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
</div>
</body>
</html>
10、文件上传form 的enctype="multipart/form-data" method="post"
11、ajax同步,无缓存,json返回的方法例子
var flag = true;
var url = $(this).attr('url');
var url_s = SITE_URL + '/index.php?app=api&act=check_userstatus';
$.ajax({
url:url_s,
async:false,
cache: false,
dataType:'json',
success:function(data){
if(data.status == 2) {
no_audit_alert();
flag = false
}
if(data.status == 3){
no_sign_alert();
flag = false
}
if(flag){
location.href = url;
}
}
});
12、匹配2位小数(任何匹配开始应该trim(),否则会出现各种bug)
preg_match('/^[0-9]+(.[0-9]{1,2})?$/',trim($_POST['value']));
13、 afterBlur:function(){this.sync();} 同步编辑器内容到description的input中
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="description"]', {
cssPath : '{res file=js/kindeditor/plugins/code/prettify.css}',
allowFileManager : true,
afterBlur:function(){this.sync();}
});
prettyPrint();
});
14、根据关键词的个数进行商品排序(通过替换关键词为'',算出长度,再除以关键词长度得到替换个数,然后排序。每个关键词替换个数>=1,则为1,多个关键词匹配度想加即总匹配度,然后按照总匹配度递减排序,匹配度最高的就是全部满足的条件)
if(count($param['keyword']) > 1 ){
foreach ($param['keyword'] as $k => $v){
$key_filds.=" ((CHAR_LENGTH(goods_name)-CHAR_LENGTH(replace(goods_name,'".$param['keyword'][$k]."','')))/CHAR_LENGTH('".$param['keyword'][$k]."')) as cntNum$k,";
$key_order = "cntNum$k desc,";
$key_add_name[]=" (case when ((CHAR_LENGTH(goods_name)-CHAR_LENGTH(replace(goods_name,'".$param['keyword'][$k]."','')))/CHAR_LENGTH('".$param['keyword'][$k]."'))>=1 then 1 else 0 end)";
}
$key_where =join('+', $key_add_name);
$key_filds .= "(".$key_where.") as cnt_count,";
$key_order ="cnt_count desc,".$key_order;
}
cate_name=cate_name.replace(/^,|,$/g, "");
2.将1,2,3,4,2变成数组
cate_name=cate_name.split(",");
3.将数组中重复元素进行去重
cate_name = unique4(cate_name);
function unique4(array){
array.sort();
var re=[array[0]];
for(var i = 1; i < array.length; i++){
if( array[i] !== re[re.length-1]){
re.push(array[i]);
}
}
return re;
}
4.a元素没有class on则添加上,有class on则去掉,用于样式切换
$('a').toggleClass("on");
5.如果需要等待ajax结果再进行下一步判断,可以设置ajax同步,async默认true,意思是异步,设为false,则为同步。
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var a = false;
$("button").click(function(){
htmlobj=$.ajax({url:"/index.php",async:false,success:function(res){
if(res){
a = true;
}
}});
alert(a);
});
});
</script>
6.搜索自动显示下拉待选结果
<?php
$key = $_REQUEST['key'];
$arr = array(
'0'=>'测试',
'1'=>'测试1',
'2'=>'测试2',
'3'=>'测试3',
'4'=>'测试4',
'5'=>'1234',
'6'=>'2345344',
'7'=>'1111114',
'8'=>'22222356664',
);
foreach ($arr as $k => $v ){
//echo $arr[$k];
if(strpos($arr[$k], $key)!==false){
//echo $arr[$k];
$a[] =$arr[$k];
}
}
echo json_encode($a);
<!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=utf-8" />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<title>By:DragonDean</title>
<script type="text/ecmascript">
function txtchange() {
var nnmae = $("#intxt").val();
$.ajax({
type: "post",
data:{key:nnmae},
url: "index.php",
dataType: "json",
success: function (data) {
$("#tbcontent").html(""); //删除原有数据
if (data != "null") {
for (var i = 0; i < $(data).length; i++) {
$("#tbcontent").append('<div class="item" οnclick="mousedown(this)">' + data[i] + '</div>');
}
$("#tbcontent").slideDown();
}
}
});
}
//选择其中的提示内容
function mousedown(object) {
$("#intxt").val($(object).text());
$("#tbcontent").fadeOut();
}
//文档框失去焦点,隐藏提示内容
function lost() {
$("#tbcontent").fadeOut();
}
</script>
<style type="text/css">
.item:hover
{
background-color: Gray;
cursor:pointer;
}
.show
{
width: 200px;
z-index: 10;
display: block;
}
.hidden
{
width: 200px;
z-index: 10;
display: none;
border:1px solid rgb(80,160,91);
border-top:none;
}
table tr td
{
margin:none;
padding:none;
border:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 210px; margin-left:auto; margin-right:auto">
<table>
<tr>
<td>
<input type="text" style="width: 200px;" id="intxt" οnkeyup="txtchange()" οnblur="lost()"/>
</td>
</tr>
<tr>
<td>
<div id="tbcontent" class="hidden">
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
7.append,appendTo,prepend,prependTo添加会将元素移动到添加位置,而不是复制添加。
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
<script>
$(function(){
$("p").append( $(".foo")[0] );
})
</script>
8.图片预览
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="expires">
<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>上传营业执照</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body{padding:10%;}
#licence{
margin:10%;
width:200px;
}
.preview{
padding:5%;
margin:auto;
min-width:90%;
}
h2{text-align:center;}
</style>
</head>
<body>
<h2>HTML5调用手机摄像头测试</h2>
<div><img class="preview" src="img/licence.png" /></div>
<br/>
<input type="file" id="licence" name="licence" accept="image/gif,image/jpeg,image/jpg,image/png" >
<br/>
<br/>
<br/>
</body>
<script>
$(function(){
$('#licence').change(function(){
var src = getObjectURL($(this)[0].files[0]);
$('.preview').attr('src', src);
});
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
})
</script>
</html>
9、遮罩层弹窗案例
<!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=utf-8" />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<title>By:DragonDean</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 40%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
</script>
</head>
<body>
<input id="Button1" type="button" value="点击弹出层" οnclick="ShowDiv('MyDiv','fade')" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
<div id="MyDiv" class="white_content">
<div style="text-align: right; cursor: default; height: 40px;">
<span style="font-size: 16px;" οnclick="CloseDiv('MyDiv','fade')">关闭</span>
</div>
目前来说,我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
</div>
</body>
</html>
10、文件上传form 的enctype="multipart/form-data" method="post"
11、ajax同步,无缓存,json返回的方法例子
var flag = true;
var url = $(this).attr('url');
var url_s = SITE_URL + '/index.php?app=api&act=check_userstatus';
$.ajax({
url:url_s,
async:false,
cache: false,
dataType:'json',
success:function(data){
if(data.status == 2) {
no_audit_alert();
flag = false
}
if(data.status == 3){
no_sign_alert();
flag = false
}
if(flag){
location.href = url;
}
}
});
12、匹配2位小数(任何匹配开始应该trim(),否则会出现各种bug)
preg_match('/^[0-9]+(.[0-9]{1,2})?$/',trim($_POST['value']));
13、 afterBlur:function(){this.sync();} 同步编辑器内容到description的input中
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="description"]', {
cssPath : '{res file=js/kindeditor/plugins/code/prettify.css}',
allowFileManager : true,
afterBlur:function(){this.sync();}
});
prettyPrint();
});
14、根据关键词的个数进行商品排序(通过替换关键词为'',算出长度,再除以关键词长度得到替换个数,然后排序。每个关键词替换个数>=1,则为1,多个关键词匹配度想加即总匹配度,然后按照总匹配度递减排序,匹配度最高的就是全部满足的条件)
if(count($param['keyword']) > 1 ){
foreach ($param['keyword'] as $k => $v){
$key_filds.=" ((CHAR_LENGTH(goods_name)-CHAR_LENGTH(replace(goods_name,'".$param['keyword'][$k]."','')))/CHAR_LENGTH('".$param['keyword'][$k]."')) as cntNum$k,";
$key_order = "cntNum$k desc,";
$key_add_name[]=" (case when ((CHAR_LENGTH(goods_name)-CHAR_LENGTH(replace(goods_name,'".$param['keyword'][$k]."','')))/CHAR_LENGTH('".$param['keyword'][$k]."'))>=1 then 1 else 0 end)";
}
$key_where =join('+', $key_add_name);
$key_filds .= "(".$key_where.") as cnt_count,";
$key_order ="cnt_count desc,".$key_order;
}