js document
$(function(){
// do something
});
其实这个就是jq ready()的简写,他等价于:
$(document).ready(function(){
//do something
})
监听下拉框
$(".business_select").change(function(){
selected=$(this).children('option:selected').val();
if(selected==1){
$(".business_info2").show();
}else{
$(".business_info2").hide();
}
});
获取textarea的内容
$("textarea").val();
获取input元素的内容
$("input").val();
获取元素的属性值
$("选择器").attr("属性");
添加和删除class属性
addClass("class名称");
removeClass("class名称");
获取下拉框自定义属性的值
$(".idComboBox").change(function(){
var circleYear=$(this).find("option:selected").attr("circle-year");
});
限制网页无右键
$(function(){
document.oncontextmenu = function (){
return false;
}
});
//只需要一个window.print()即可打印页面
//下面是局部打印
function printdiv() {
var oldhtml = document.body.innerHTML;
var newhtml = '<img alt="" id="img1"style="height: 100%;width:100%;"'
+ 'src="<%=request.getContextPath()%>/stu_honor_updateshow.html?id=${stu_honor.id}">';
document.body.innerHTML = newhtml;
window.print();
// 将原来窗口body的html值回填展示
document.body.innerHTML = oldhtml;
return false;
}
寻找页面所包含的字,将其变红(替换的方式)
//俩中写法
<p id="d">例如一个里面有个文章:开发部分的二次开发简要说明文档我设置一个关键字,例开发,然后我让这个文章里的“开发”两个字全变红,怎么设置</p>
<span style='color: red;'></span>
//js写法
<script type="text/javascript">
document.body.innerHTML = document.body.innerHTML.replace(/开发/ig,"<span style='color: red;'>$&</span>");
</script>
//jquery写法\
<script type="text/javascript">
$('#d').html(function(i,oldHTML){
return oldHTML.replace(/开发/g,'<font color="red">开发</font>');
})
</script>
jq遍历json
//第一种方式
$.each(json,function(i,bus){
var html1='<li onclick="location.href=\'<%=request.getContextPath()%>/pho/
bus_search_detail.html?id='+bus.id+'\'"><img src="../images/here.png" class="here"/><span>';
var html2='</span><img src="../images/line.png" class="line right"/></li>';
var $li=html1+bus.name+html2;
$(".border").append($li);
});
jq遍历元素
var enclosures = []; //文件路径与名字集合
var fileListDom = $(".upload-img>p>a");
if(fileListDom.length > 0) {
fileListDom.each(function(i,ele) {
var fileObj = new Object;
fileObj.value = $(this).attr("data-href");
fileObj.original_name = $(this).html();
enclosures.push(fileObj);
});
}
js获取url后缀
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
使用实例
url 实例:
http://www.runoob.com/index.php?id=1&image=awesome.jpg
调用 getQueryVariable("id") 返回 1。
调用 getQueryVariable("image") 返回 "awesome.jpg"。
js定时器
var countDown=15;
var timeRemain=window.setInterval(setRemainTime,1000);
function setRemainTime(){
$(".time").html(countDown);
if(countDown==0){
window.clearInterval(timeRemain);// 停止计时器
parent.location.href="../index.html";//跳转到首页
}else{
countDown--;
}
}
js 的input回车事件以及点击其他获取光标
//当点击input的兄弟节点时,让input获取光标
$("#school-name-input").siblings().click(function(){
$("#school-name-input").focus();
});
//当input获得焦点时,回车事件,键盘按下事件中的回车事件
$("#school-name-input").keyup(function(){
if(event.keyCode ==13){
var schName=$.trim($("#school-name-input").val());
getSchoolList(schName);
}
});
js滑动加载
// 滚动条到页面底部加载更多案例
$(window).scroll(function() {
var scrollTop = $(this).scrollTop(); // 滚动条距离顶部的高度
var scrollHeight = $(document).height(); // 当前页面的总高度
var clientHeight = $(this).height(); // 当前可视的页面高度
// console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
if (scrollTop + clientHeight >= scrollHeight) { // 距离顶部+当前高度 >=文档总高度
// 即代表滑动到底部 count++;
if (pageC < page) {
pageC++; // 每次滑动页数加1
var load=layer.load();
setTimeout(function() {
renderNewsList(pageC,searchInfo);
layer.close(load);
}, 500);
} else if (pageC == page) {
pageC++;
var newsHtml = '<p style="text-align:center;margin:1rem;color:#999;">已经没有数据了!</p>';
$(".news_list_content").append(newsHtml);
}
} else if (scrollTop <= 0) {//暂不需要下拉刷新
// 滚动条距离顶部的高度小于等于0
// alert("下拉刷新,要在这调用啥方法?");
}
});
点击手机输入法上的搜索
<form id="myform" onsubmit="return false;">
<div class="notice-search">
<input type="search" placeholder="请输入关键字" />
<i class="iconfont icon-search"></i>
<!--<input type="text" style="display:none;">-->
</div>
</form>
$("#myform input").bind('search', function() {
clickSearch();
return false;
});
Ajax提交form表单上传文件
<!--上传文件-->
<div class="upload-file" style="display: none;">
<form id="formFile" enctype="multipart/form-data">
<input type="file" class="file-upload-input" name="file"/>
</form>
</div>
//文件上传
$(function(){
$("body").on("click",".upload-img>i:first-child",function(){
$(".file-upload-input").click();
});
$(".file-upload-input").change(function(){
var loading=null;
if($("#formFile")[0].size/1024>1){//如果文件大小大于50M
layer.msg("文件不能大于50m");
return false;
}
var size1=$("#formFile")[0][0].size;
if(size1/1024>50){//如果文件大小大于50M
layer.msg("文件不能大于50m");
return false;
}
var formData=new FormData($("#formFile")[0]);
$.ajax({
type:"post",
url:requestUrl3,
async:false,
data:formData,
cache:false,
processData:false,
contentType:false,
beforeSend: function() {
loading=layer.load(2, {time: 10*1000});
},
success:function(responseJson){
layer.close(loading);
var dataObj=JSON.parse(responseJson);
if(dataObj!=null&&dataObj!=""){
}
var fileHtml='<p><a class="on-blue2 on-underline" data-href="'+dataObj.data.src+'">'
+dataObj.data.oldName
+'</a><i class="iconfont icon-error on-red"></i></p>';
$(".upload-img").append(fileHtml);
}
});
});
});
//验证图片大小
function validate_img(ele){
// 返回 KB,保留小数点后两位
var file = ele.value;
if(!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file)){
layer.msg("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
return false;
}else{
if(((ele.files[0].size).toFixed(2))>=(1024*1024)){
layer.msg("请上传小于1M的图片");
return false;
}
}
return true;
}
图片加载onerror
'<img src="pho/images/1.png" class="slide_img" onerror="imgNone();"/>'
function imgNone(){
var img=event.srcElement;
img.src="pho/images/logo5.png";
img.onerror=null; //控制不要一直跳动
}
验证数组是否有重复值
//验证数组是否有重复值
function arrRepeat(a){
return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test("\x0f"+a.join("\x0f\x0f") +"\x0f");
}