操作元素的样式
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("p").attr("class", "ddiiyy"); //设置p元素的class为 "ddiiyy"
$("#nm_p").addClass("another"); // 追加样式
$("p").removeClass("ddiiyy another"); //溢出样式
$("p").toggleClass("ddiiyy"); //如果存在（不存在）就删除（添加）名为ddiiyy的class
$("p").hasClass("another"); //是否含有某个class。是返true，否返false
$("p").is(".another"); //is("."+class);//JQuery实现，增强代码可读性
readonly和disabled
表单中readOnly和disabled的区别：
readonly只针对input(text/ password)和textarea有效，而disabled对于所有的表单元素都有效，包括select,radio, checkbox, button等。
但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去（这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit或button却是可以使用的）。
隐藏和显示(操作display属性)
$("#id").show();//表示display:block,
$("#id").hide();//表示display:none;
$("#id").toggle();//切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
$("#id").css('display','none');
$("#id").css('display','block');
或
$("#id")[0].style.display = 'none';
操作disabled属性
js操作：
function disableElement(element,val){
document.getElementById(element).disabled=val;d
}
jQuery进行操作：
//两种方法设置disabled属性
$('#areaSelect').attr("disabled",true);
$('#areaSelect').attr("disabled","disabled");
//三种方法移除disabled属性
$('#areaSelect').attr("disabled",false);
$('#areaSelect').removeAttr("disabled");
$('#areaSelect').attr("disabled","");
获取s:textfield，并设置其disabled属性：
functiondisableTextfieldofAccountDiv(element,val) {
$(element).find(":textfield").attr('disabled',val);
}
禁用a，button点击
1.jquery禁用a标签方法1
$(document).ready(function () {
$("a").each(function () {
var textValue = $(this).html();
if (textValue == "XX概况" || textValue == "服务导航") {
$(this).css("cursor", "default");
$(this).attr('href', '#'); //修改<a>的 href属性值为 # 这样状态栏不会显示链接地址
$(this).click(function (event) {
event.preventDefault(); // 如果<a>定义了 target="_blank“ 需要这句来阻止打开新页面
});
}
});
});
2.jquery禁用a标签方法2
$('a.tooltip').live('click', function(event) {
alert("抱歉,已停用！");
event.preventDefault();
});
3.jquery禁用a标签方法3
$(function(){
$('.disableCss').removeAttr('href');//去掉a标签中的href属性
$('.disableCss').removeAttr('onclick');//去掉a标签中的onclick事件
});
4.jquery控制按钮的禁用与启用
$('#button').attr('disabled',"true");//添加disabled属性
$('#button').removeAttr("disabled"); //移除disabled属性
5.css3
<a style="pointer-events: none;" onclick="alert('ok');">无法点击</a>
操作checked属性\回显
<input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked="checked" />
1.jquery判断checked的三种方法：
.attr('checked') //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false
.prop('checked') //16+:true/false
.is(':checked') //所有版本:true/false
2.jquery赋值checked的几种写法:
//所有的jquery版本都可以这样赋值
$("#cb1").attr("checked","checked");
$("#cb1").attr("checked",true);
//jquery1.6+:prop的4种赋值
$("#cb1").prop("checked",true); //很简单就不说了哦
$("#cb1").prop({checked:true}); //map键值对
$("#cb1").prop("checked",function(){ return true; }); //函数返回true或false
$("#cb1").prop("checked","checked");
3.check回显的一个demo：
if(list){
if(type==1){
var checkBoxAll = $("input[name='outsideFileName']");
for(var i=0;i<list.length;i++){
$.each(checkBoxAll,function(j,checkbox){
//获取复选框的value属性
var checkValue=$(checkbox).val();
if(list[i].filePath==checkValue){
$(checkbox).attr("checked",true);
}
})
}
}
}
checkbox（全选反选..）
demo：
注：jquery1.9.0+无法正常显示
<!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" />
<title>jQuery 对checkbox的操作</title>
</HEAD>
<body style="text-align:center;margin: 0 auto;font-size: 12px;" mce_style="text-align:center;margin: 0 auto;font-size: 12px;">
<div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;">
<form name="form1" method="post" action="">
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">
<br /><br />
<input type="checkbox" name="checkbox" value="checkbox1">
checkbox1
<input type="checkbox" name="checkbox" value="checkbox2">
checkbox2
<input type="checkbox" name="checkbox" value="checkbox3">
checkbox3
<input type="checkbox" name="checkbox" value="checkbox4">
checkbox4
<input type="checkbox" name="checkbox" value="checkbox5">
checkbox5
<input type="checkbox" name="checkbox" value="checkbox6">
checkbox6
</form>
</div>
</body>
</HTML>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.js"></script>
<script type="text/javascript">
<!--
$("document").ready(function(){
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
})
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
})
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
})
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){//反选
if($(this).attr("checked")){
$(this).removeAttr("checked");
}
else{
$(this).attr("checked",'true');
}
})
})
$("#btn5").click(function(){//输出选中的值
var str="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"/r/n";
//alert($(this).val());
})
alert(str);
})
})
-->
</script>
2.获取checkbox选中的值
var chk_value =[];
$('input[name="test"]:checked').each(function(){
chk_value.push($(this).val());
});
3.点击全选 非全选
$('input[name="pCheckBox"]').click(function(){
//alert(this.checked);
if($(this).is(':checked')){
$('input[name="eventIds"]').each(function(){
//此处如果用attr，会出现第三次失效的情况
$(this).prop("checked",true);
});
}else{
$('input[name="eventIds"]').each(function(){
$(this).removeAttr("checked",false);
});
//$(this).removeAttr("checked");
}
});
radio
1.获取选中值
$('input:radio :checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
2.设置第一个Radio为选中值
$('input:radio :first').attr('checked', 'checked');
$('input:radio :first').attr('checked', 'true');
3.设置最后一个Radio为选中值
$('input:radio :last').attr('checked', 'checked');
$('input:radio :last').attr('checked', 'true');
4.根据索引值设置任意一个radio为选中值
$('input:radio').eq(索引值).attr('checked', 'true');//索引值=0,1,2....
$('input:radio').slice(1,2).attr('checked', 'true');
5.根据Value值设置Radio为选中值
$("input:radio[value='rd2']").attr('checked','true');
$("input[value='rd2']").attr('checked','true');
select
<select id="s">
<option value="1">嘻嘻</option>
<option value="2">呵呵</option>
</select>
1.获取select中option被选中的文本值
误：$("#s").text(); //获取所有option的文本值
$("#s option:selected").text(); //获取选中的option的文本值
$("#s").find("option:selected").text(); //获取选中的option的文本值
2.获取select中option被选中的value值
$("#s").val();
$("#s option:selected").val();
3.js获取select选中的值
var sel=document.getElementById("s");
var index = sel.selectedIndex; // 选中索引
albumid= sel.options[index].value;//要的值
textarea
<textarea name="content" id="content" rows="8" cols="5">这是textarea内容</textarea>
1.获取textarea文本值（用name和id）
$("textarea[name='content']").val() $("#content").val()
$("textarea[name='content']").text() $("#content").text()
2.赋值textarea文本值（只能用id）
$("#content").val("这是要写入的textarea文本内容")
$("#content").text("这是要写入的textarea文本内容")
val和text的区别是：val()可以体现换行符，而text()不能。
3.禁止文本域textarea可拖拽的方法：
textarea{ resize:none;}
4.让textarea没有黄框且不能拖拽：
textarea{outline:none;resize:none;}
confirm，二次确认
if(confirm("确定要删除该记录吗？")){
doSomething();
}
重置表单reset
使用jquery方法重置form表单
误：$('#formName').reset();//得到的是数组。
正：$('#formName')[0].reset();//得到的是jQuery对象。
注：这种方式虽然可以重置表单，但是不能重置隐藏字段。隐藏字段要单独处理。
小知识：$('#formName').get(0)得到的是DOM对象。
jquery 获取元素个数
$('#div1').children().length;
$('#div1').children('span').length;//获取id=div1下的span元素个数
定位
<div id =''localid"> xixi</div>
window.location.href='#localid';
修改标题title
document.title="批量业务单";
JQ的事件处理功能
1.hover
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(
function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});
demo鼠标移入出现悬浮框
<td class='linkTd'>
<div style='position:relative;'>
@link<span class='linkHover'>@detailLink</span>
</div>
</td>
.linkHover{
position: absolute;
top: 20px;
width: 320px;
max-height: 250px; /* 设置最大高度，当高度达到此值时出现滚动条 */
z-index: 10;
background-color: #E0E5E5;
overflow: auto; /* 自动添加滚动条 */
box-shadow:0px 0px 10px #000; /* 外阴影 */
display:none;
}
$('.linkTd').hover(
function(){
$(this).find('.linkHover').show();
} ,
function(){
$(this).find('.linkHover').hide();
}
);
进化
```
<!doctype html>
<html>
<head>
<title class="lang" langKey="xxxx">index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
.linkHover{
position: absolute;
top: 20px;
width: 320px;
max-height: 250px; /* 设置最大高度，当高度达到此值时出现滚动条 */
z-index: 10;
background-color: #E0E5E5;
overflow: auto; /* 自动添加滚动条 */
box-shadow:0px 0px 10px #000; /* 外阴影 */
display:none;
}
</style>
</head>
<body>
<div class='linkTd'>
123123
</div>
</body>
<script>
$(function () {
var tip ="<div style='position:relative;'> <span class='linkHover'>1111</span> </div>";
$('.linkTd').append(tip);
})
$('.linkTd').hover(
function(){
$(this).find('.linkHover').show();
} ,
function(){
$(this).find('.linkHover').hide();
}
);
</script
</html>
```
2.ready
在文档加载后激活函数：
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideToggle();
});
});
语法 1 $(document).ready(function)
语法 2 $().ready(function)
语法 3 $(function)
3.toggle
toggle()和slidetoggle()方法提供了状态切换功能。
toggle()方法包括了hide()和show()方法。 slideToggle()方法包括了slideDown()和slideUp()方法。
//每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
4.trigger
在每一个匹配的元素上触发某类事件,如模拟点击，回车登录
//模拟点击
$("#b").click(function(){$("#a").trigger("click")})
$("#a").trigger("click");//执行#a的click事件
//回车点击
$(document).keyup(function(event){
if(event.keyCode ==13){
$("#btn_login").trigger("click");
}
});
form表单增加<input type="text" style="display:none"/>可以防止回车提交自动提交表单
推荐：keyup，防止笔记本键盘不小心触摸到了 有些文档中有写成这样：
$(window).keydown（function(){
...
}）
XP系统IE6下是不成功的。
5.bind(eventtype,fn)，unbind(eventtype)
事件的绑定与反绑定
$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件
JQ集合遍历
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//实现表格的隔行换色效果
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容
$("p").click(function(){alert($(this).html())})
demo遍历table的tr获取td的值：
<tbody id="history_income_list">
<tr>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><a class="" onclick="history_income_del(this);" href="###">删除</a></td>
</tr>
<tr>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><a class="" href="###">删除</a></td>
</tr>
<tr>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><a class="" href="###">删除</a></td>
</tr>
</tbody>
for循环遍历
var trList = $("#history_income_list").children("tr")
for (var i=0;i<trList.length;i++) {
var tdArr = trList.eq(i).find("td");
var history_income_type = tdArr.eq(0).find("input").val();//收入类别
var history_income_money = tdArr.eq(1).find("input").val();//收入金额
var history_income_remark = tdArr.eq(2).find("input").val();// 备注
...
}
JQ遍历
$("#history_income_list").find("tr").each(function(){
var tdArr = $(this).children();
var history_income_type = tdArr.eq(0).find("input").val();//收入类别
var history_income_money = tdArr.eq(1).find("input").val();//收入金额
var history_income_remark = tdArr.eq(2).find("input").val();// 备注
...
});
Map集合遍历
//{"code":"1","desc":"操作成功","data":{"shfwxt":"售后服务系统","cs_win":"测试_win","qdglxt":"渠道管理系统"}}
success: function(result) {
if(result.code == '1'){
var data = result.data;
var html = "<option selected='selected' value=''>请选择权限代码</option>";
$.each(data, function (key, value) {
html += "<option value= '" + key + "'>" + value +"(" + key+")</option>";
});
$("#permissionCode").html('').append(html);
layui.use('form', function() {
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
form.render();
});
}else{
_msgShowToFunc(result.desc);
}
}
jquery $.
$.extend
//为jquery扩展了min,max两个方法
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
});
使用扩展的方法（通过“$.方法名”调用）：
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
$.each
$.each(obj, fn)：通用的迭代函数。可用于代替循环。 如
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
//等价
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){ alert("Item #"+i+": "+tempArr[i]); }
也可以处理json数据，如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
$.map
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。 如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });//[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });//[2,3]
$.merge
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。 如：
$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim
$.trim(str)：删除字符串两端的空白字符。 如：
$.trim(" hello, how are you? "); //返回"hello,how are you? "
JS 获取数组长度
var myarray = [1,2,3];
myarray.length // 初始的长度是3
myarray.length = 2; // 删除最后一个元素
myarray.length = 20 // 添加18个元素到数组中
JS 判断 undefined
if(typeof(value)=="undefined"){
alert("undefined");
}
JS join将数组转字符串
<input class="chcekInp" type="checkbox" name="nextDeal" value="zs"/>张三
<input class="chcekInp" type="checkbox" name="nextDeal" value="ls"/>李四
<input class="chcekInp" type="checkbox" name="nextDeal" value="we"/>王二
<input class="chcekInp" type="checkbox" name="nextDeal" value="sw"/>三五
<input class="chcekInp" type="checkbox" name="nextDeal" value="sl"/>四六
var chk_value =[];
$('input[name="nextDeal"]:checked').each(function(){
chk_value.push($(this).val());
});
var userNames = chk_value.join(",");
JS 遮罩功能
HTML
<!--弹窗背景-->
<div class="flexBg" style="display: none;"></div>
<!--loading-->
<div class="loading" style="display: none;">
<i></i>
<p>加载中...</p>
<%-- <img src="${baseURL}/images/loading.gif"></img> --%>
</div>
CSS
.flexBg {
background: url(../images/flexBg.png);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
}
.loading {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
z-index: 999;
background: #fff;
padding: 15px;
border-radius: 5px;
}
JS
function sZZ(){
$('.flexBg').show();
$('.loading').show();
}
function hZZ(){
$('.flexBg').hide();
$('.loading').hide();
}
IMG
js中的encodeURI、decodeURI、decodeURIComponent,解决传值中文乱码
一、基本概念
encodeURI和decodeURI是成对来使用的，因为浏览器的地址栏有中文字符的话，可以会出现不可预期的错误，所以可以encodeURI把非英文字符转化为英文编码，decodeURI可以用来把字符还原回来。
encodeURI方法不会对下列字符进行编码：":"、"/"、";" 和 “?"，encodeURIComponent方法可以对这些字符进行编码。
decodeURI()方法相当于java.net.URLDecoder.decode(URIString, “UTF-8”);
encodeURI()方法相当于java.net.URLEncoder.encode(URIString, “UTF-8”);
二、例子
window.location.href = encodeURI(encodeURI(jumpURL));
//http://127.0.0.1:8081/zsyx/jsp/component/demandwork/functiontest/functiontest.jsp?id=NEW20183123134021852&slink=%25E9%259C%2580%25E6%25B1%2582%25E5%25A4%2584%25E7%2590%2586
var slink = decodeURI(decodeURI('${param.slink}'));
JS判断文件是否存在
方法1：判断图片是否存在
function isHasImg(pathImg){
var ImgObj=new Image();
ImgObj.src= pathImg;
if(ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0))
{
return true;
} else {
return false;
}
}
方法2：AJAX验证图片或文件链接是否存在
function validateImage(url) {
var xmlHttp ;
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open("Get",url,false);
xmlHttp.send();
if(xmlHttp.status==404)
return false;
else
return true;
}
方法3：用onerror替换不存在的图片
<img src="images/img1.jpg" height="300" width="800" onerror="images/defaultImg.jpg">
解决自定义方法或其他类库与jQuery的冲突
//使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可
jQuery.noConflict();
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';
获取iframe中文档内容
function getIframeContent(){ //获取iframe中文档内容
var doc;
if (document.all){ // IE
doc = document.frames["ueditor_0"].document;
}else{ // 标准
doc = document.getElementById("ueditor_0").contentDocument;
}
return doc.body.innerHTML;
}
子窗体调父窗体方法
父窗体
function selectProduct(commitBrand){ window.open("${baseURL}/jsp/component/selectlist/SelectProductList.jsp?ecs=ecs&productName=productName&brandId=brandId&brandName=brandName&specification=specification","选择产品",
"width=1366,height=768,top=0,left=0,scrollbars=YES,resizable=yes");
}
function setProductValue(ecs,productName,brandId,brandNameDesc,guige,guigeDesc,color,colorDesc,productXinghao,productXinghaoDesc,haveImei,fundCost){
$("#ecs").attr("value",ecs);
$("#productName").attr("value",productName);
$("#brandId").attr("value",brandId);
}
子窗体 SelectProductList.jsp
window.opener.setProductValue(content.ecs,content.productName,content.zhongduanPinpai,content.zhongduanPinpaiDesc,content.guige,content.guigeDesc,content.color,content.colorDesc,content.productXinghao,content.productXinghaoDesc,content.haveImei,content.fundCost);
window.close();
JQ AJAX请求demo
$(function() {
$('#send').click(function() {
$.ajax({
type: "GET", //GET或POST,
async:true, //默认设置为true，所有请求均为异步请求。
url: "http://www.idaima.com/xxxxx.php",
data: {
username: $("#username").val(),
content: $("#content").val()
},
dataType: "json", //xml、html、script、jsonp、text
beforeSend:function(){},
complete:function(){},
success: function(data) {
alert(data)
},
error:function(){},
});
});
});
$.get(baseURL+'/childorderdeal/childorderdealActAction!getWorkSati.action', { orderId: "NEW2018425164215552" }, function(data){
if(data.code=="0"){
$('input:[value="'+data.data.code+'"]').attr('checked','true');
}
},'json');
JQ 设置AJAX同步
由于$.post() 和 $.get() 默认是 异步请求，如果需要同步请求，则可以进行如下使用：
在$.post()前把ajax设置为同步：$.ajaxSettings.async = false;
在$.post()后把ajax改回为异步：$.ajaxSettings.async = true;
如：
$.ajaxSettings.async = false;
$.post("/finance/getLastTimeCard", data, function(result) {
// 请求处理
},"json");
$.ajaxSettings.async = true;
页面刷新篇
1.刷新
reload 方法，该方法强迫浏览器刷新当前页面。
语法：location.reload([bForceGet])
参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)
replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。
语法： location.replace(URL)
在实际应用的时候，重新刷新页面的时候，我们通常使用： location.reload() 或者是 history.go(0) 来做。
因为这种做法就像是客户端点F5刷新页面，所以页面的method=“post"的时候，会出现"网页过期"的提示。那是因为Session的安全保护机制。
这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。
你可以这么写： location.replace(location.href);
2.返回并刷新页面
location.replace(document.referrer); //document.referre为r前一个页面的URL
不要用 history.go(-1)，或 history.back();来返回并刷新页面，这两种方法不会刷新页面。
Javascript刷新页面的几种方法
1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand(‘Refresh’)
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href
自动刷新页面的方法
1.页面自动刷新：把如下代码加入区域中,20秒刷新一次页面.
<meta http-equiv="refresh" content="20">
2.页面自动跳转：把如下代码加入区域中,20秒后跳转到https://ianeiu.github.io/页面
<meta http-equiv="refresh" content="20;url=https://ianeiu.github.io/">
3.页面自动刷新js版
<script type="text/javascript">
function myrefresh(){ window.location.reload(); }
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>
窗口刷新
1.JS刷新框架的脚本语句
//如何刷新包含该框架的页面用
<script language=JavaScript>
parent.location.reload();
</script>
2.子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
//或 <a href="javascript:opener.location.reload()">刷新</a>
3.如何刷新另一个框架的页面用
<script language=JavaScript>
parent.另一FrameID.location.reload();
</script>
4.如果想关闭窗口时刷新或者想开窗时刷新的话，在中调用以下语句即可。
<body onload="opener.location.reload()"> 开窗时刷新
<body onUnload="opener.location.reload()"> 关闭时刷新
<script language="javascript">
window.opener.document.location.reload()
</script>
jQuery对象与dom对象
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。
转换
普通的dom对象一般可以通过$()转换成jquery对象。
$(document.getElementById("msg"))
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
$("#msg")[0]，
$("div").eq(1)[0]，
$("div").get()[1]，
$("td")[5]
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
获取jQuery集合的某一项(获取第三个div元素的内容)
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性
form表单 注意点
- 查询页面，有绑定回车事件提交表单的，要在form中加上onsubmit=“return false;"。不然会出现回车查询时页面直接显示JSON数据了。
- 直接在form标签中加入属性accept-charset=‘UTF-8’,防止中文乱码。
js 截取字符串
去除字符串最后一位(进化版)
<SCRIPT type="text/javascript">
function delfh(str){
str=str.replace(",,",",");
if(str.substring(str.length-1,str.length)==","){
str2=str.substring(0,str.length-1);
delfh(str2);
}else{
str2=str;
}
return str2;
}
var s2="1,,,2,,,,3,,,,4,54,454,,,,,,,,,,,,,,,,";
var s="415929,415930,415931,415932,415933,415934,415935,415936,415937,415938,415939,415940,415941,415942,415943,415944,415945,415946,415947,415948,1,2,3";
alert(delfh(s2));
</script>
元素上下居中
<style type="text/css">
.parent {
display: flex;
flex-direction: column;
justify-content: center; /* 上下 */
align-items: center; /* 水平 */
}
</style>
<div class="parent" style="height: 1000px; border: 1px solid #000">
<div class="child" style="height: 500px; width: 100px; border: 1px solid #00f"></div>
</div>
检查IE
/* 注意：不能使用较新的jquery */
/* $.browser.msie在1.9以后的jquery中不存在了 */
/* 2.0 版本中，将不再支持 IE 6/7/8 */
$(function() {
checkOne();
checkTwo();
});
function checkOne(){
var userAgent = window.navigator.userAgent.toLowerCase();
$.browser.msie10 = $.browser.msie && /msie 10\.0/i.test(userAgent);
$.browser.msie9 = $.browser.msie && /msie 9\.0/i.test(userAgent);
$.browser.msie8 = $.browser.msie && /msie 8\.0/i.test(userAgent);
$.browser.msie7 = $.browser.msie && /msie 7\.0/i.test(userAgent);
$.browser.msie6 = !$.browser.msie8 && !$.browser.msie7 && $.browser.msie && /msie 6\.0/i.test(userAgent);
$(".info").html(
"<h3>userAgent:</h3>" + userAgent + "<br />" +
"<h3>Is IE 10?</h3>" + $.browser.msie10 +
"<h3>Is IE 9?</h3>" + $.browser.msie9 +
"<h3>Is IE 8?</h3>" + $.browser.msie8 +
"<h3>Is IE 7?</h3>" + $.browser.msie7 +
"<h3>Is IE 6?</h3>" + $.browser.msie6
);
if($.browser.msie8){
alert('IE8真让人头疼！！');
}
}
//new
function checkTwo(){
$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase()); //判断是否是IE
if(/msie/.test(navigator.userAgent.toLowerCase())){
console.log('IE5-10');
}
if ('undefined' == typeof (document.body.style.maxHeight)) {
console.log('IE6');
}
if (!$.support.leadingWhitespace) {
console.log('IE5-8');
}
}
文件上传限制
<div>
<h3>限制文件类型上传及多文件上传</h3>
<input id="moreFile" type="file" accept=".doc,.docx,.xls,.xlsx"
multiple /> <input type="button" onclick="checkFile()" value="提交" />
</div>
<div>
<h3>限制文件类型上传-显示限制</h3>
<br />浏览时只显示指定文件类型 xls、xlsx、csv <input id="fileSelect" type="file"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
<br />
<br />For CSV files (.csv), use: <br />
<input type="file" accept=".csv" /> <br />
<br />For Excel Files 2003-2007 (.xls), use: <br />
<input type="file" accept="application/vnd.ms-excel" /> <br />
<br />For Excel Files 2010 (.xlsx), use: <br />
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
<br />
<br />For Text Files (.txt) use: <br />
<input type="file" accept="text/plain" /> <br />
<br />For Image Files (.png/.jpg/etc), use: <br />
<input type="file" accept="image/*" /> <br />
<br />For HTML Files (.htm,.html), use: <br />
<input type="file" accept="text/html" /> <br />
<br />For Video Files (.avi, .mpg, .mpeg, .mp4), use: <br />
<input type="file" accept="video/*" /> <br />
<br />For Audio Files (.mp3, .wav, etc), use: <br />
<input type="file" accept="audio/*" /> <br />
<br />For PDF Files, use: <br />
<input type="file" accept=".pdf" />
</div>
<script type="text/javascript">
function checkFile(){
var fileAccept = $("#moreFile").val().split(".")[1];//获取上传文件的后缀
if( fileAccept!="doc" && fileAccept!="docx"&& fileAccept!="xls"&& fileAccept!="xlsx" ){
alert("只能上传.doc,.docx,.xls,.xlsx的文件！");
}
//获取多文件上传的所有文件名
var filePaths = $("#moreFile")[0].files;//或者这样写 document.getElementById("id").files;
for( var i=0;i<filePaths.length; i++ ){
alert(filePaths[i].name);
}
}
</script>
输入框input校验
<br />JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入)
<br />
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
<br />
<br />2.只能输入数字,能输小数点.
<br />
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<br />
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">
<br />
<br />3.数字和小数点方法二
<br />
<input type=text t_value="" o_value=""
onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">
<br />
<br />4.只能输入字母和汉字
<br />
<input onkeyup="value=value.replace(/[\d]/g,'')" maxlength=10 name="Numbers"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">
<br />
<br />5.只能输入英文字母和数字,不能输入中文
<br />
<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
<br />
<br />6.只能输入数字和英文
<font color="Red">chun</font>
<br />
<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">
<br />
<br />7.小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:
<br />
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">
<br />
<br />8.小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:
<br />
<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">
contenteditable 进行文本输入编辑
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
table 模版
<table class="tableCommon" width="30%" border="1" cellspacing="5" cellpadding="10">
<thead style="display: block;">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody style="display: block; height: 50px; overflow-y: scroll;">
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
</tr>
</tbody>
</table>
append追加元素用法例子
<ul class="selectUserList"></ul>
<script type="text/javascript">
$(function(){
for(var i = 0;i<10;i++){
addUser({id: i, userName: i+'a', name: i+'b',mobile: i*10});
}
})
function addUser(data) {
var _li = $("<li></li>");//li
var _em = $("<em></em>");//li-em
var _a = $('<a class="closebtn" href="javascript:void(0);" onclick="closeBtnFunc(this)"></a>');//li-a
var _hiden_username = $('<input type="hidden" class="_hidenUsername"/>');//li-input name:_hidenUsername
var _hiden_tel = $('<input type="hidden" class="_hidenMobile"/>');//li-input name:_hiden_tel
_hiden_username.val(data.userName);
_hiden_tel.val(data.mobile);
_em.text(data.userName + "(" + data.mobile + ")");
_li.append(_em);
_li.append(_a);
_li.append(_hiden_username);
_li.append(_hiden_tel);
$(".selectUserList").append(_li);
}
</script>
a标签 调用方法的正确姿势
<a href="javascript:xixi();">a1</a>
这是我们平台上常用的方法，但是这种方法在传递this等参数的时候很容易出问题，
而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，
在IE里面更会使gif动画图片停止播放。
W3C标准不推荐在href里面执行javascript语句
<a href="javascript:void(0);" onclick="xixi()">a2</a>
这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，
而void是一个操作符，void(0)返回undefined，地址不发生跳转。
而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
<a href="javascript:;" onclick="xixi()">a3</a>
这种方法跟跟2种类似，区别只是执行了一条空的js代码。
<a href="#" onclick="xixi()">a4</a>
这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。
所以用这种方法点击后网页后返回到页面的最顶端。
<a href="#" onclick="xixi();return false">a5</a>
这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。
综合上述，在a中调用js函数最适当的方法推荐使用：
<a href="javascript:void(0);" onclick="xixi()">a2</a><br />
<a href="javascript:;" onclick="xixi()">a3</a><br />
<a href="#" onclick="xixi();return false">a5</a>
video h5播放视频不主动弹出
x5-playsinline=“true” playsinline=“true” webkit-playsinline=“true”