js,jq小功能

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");
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值