日常实用资料记录一

最新推荐文章于 2018-10-08 23:58:46 发布

水木清华1986

最新推荐文章于 2018-10-08 23:58:46 发布

阅读量361

点赞数

分类专栏： php 文章标签： php js 资料记录

本文链接：https://blog.csdn.net/xiaoqiang3146/article/details/65431493

版权

php 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

记录一些经常用到的一些小知识，进行记录，大部分来源网络，但也是辛苦找到的，放在这里让自己保存记录的习惯。

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 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>

水木清华1986

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
日常实用资料记录一

记录一些经常用到的一些小知识，进行记录，大部分来源网络，但也是辛苦找到的，放在这里让自己保存记录的习惯。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 = unique
复制链接

扫一扫

专栏目录