【js:jquery】jquery选择器与事件监听

最新推荐文章于 2023-04-15 21:59:55 发布

不善言辞-不行于色

最新推荐文章于 2023-04-15 21:59:55 发布

阅读量3.9k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/u010918847/article/details/52582916

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.所谓为选择器就是像js中getElementById或者getElementByClass一样获取页面中的元素。

以下为jQuery选择器获取到对象的方法：

$('')中填写的内容不一样，选择器也不一样。大致的有以下几种：

 格式        实例                          选取
   *          $('*')                       获取页面中所有元素
   #          $('#id')                     获取对应ID元素
   .          $('.class')                  获取对象类名的元素组
   element    $('p')                       获取所有的p标签元素组
   ..         $('.class1.class2')          获取类名为class1&&class2的元素

当然还有很多小技巧，例如在选择器后边加:first 获取元素组里的第一个元素或者使用[name=""]，

Example:$('p[name=""]')可以获取到元素组中name=相应参数的元素~

2.关于事件监听。

例如我们在script 标签中写了监听事件：

$("#content").click(function(){
alert('这是一个监听事件');
})

这个监听事件的位置很重要。如果我们的元素是动态加载一定要写在动态加载完毕之后，

尤其是AJAX。AJAX 还有个一问题在于，一定要把监听事件写在回执函数里。注意这里是（里）！具体

为什么还在研究,貌似和sync有关系。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>用户管理</title>
<meta name="description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<!-- js -->
<script type="text/javascript" src="__PUBLIC__/Home/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/Home/js/layer.js"></script>
<script type="text/javascript" src="__PUBLIC__/Home/js/jquery.cookie.js"></script>
<script type="text/javascript" src="__PUBLIC__/Home/js/bootstrap.js"></script>
<!-- css -->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/bootstrap.min.css">
</head>
<body>
    
    <div class="container-fluid headercontainer" style="height:10%">
	    <div>
	    	<a href="">
	    		知识库管理系统
	    	</a>
	    </div>
    </div>
    <div class="col-md-2 li_head" style=" ">
    <div class="row">
    	<ul style="padding-left: 0px">
    		<li><a href="{:U('home/modular/index')}"><i class="fa fa-dashboard fa-fw"></i> 模块管理</a></li>
    		<li><a href="{:U('home/type/index')}"><i class="fa fa-dashboard fa-fw"></i> 类别管理</a></li>
    		<li><a href="modular.html"><i class="fa fa-dashboard fa-fw"></i> 知识表管理</a></li>
    		<li><a href="modular.html"><i class="fa fa-dashboard fa-fw"></i> 用户管理</a></li>
    		<li><a href="modular.html"><i class="fa fa-dashboard fa-fw"></i> 角色管理</a></li>
    	</ul>
    </div>
    	
    </div>
    <div class="col-md-10 h1-content" style="border-left: 1px solid #e7e7e7;background-color:#ffffff">
    	<div class="col-lg-12">
    		<h1>用户管理</h1>
    	</div>
    	<div>
    	<div class="col-lg-12 boder-bottom" style="">
    	   <div class="col-lg-2 selectModular" style="background-color:">
    	   	<a  id="adduser" class='button' οnclick="al();">新增</a>   	   
    	   </div>
    	   <div class="col-lg-10" style="background-color:">
    	   <input type="text" name="" id="addName" class="" placeholder="用户名称">
    	   	<input type="text" name="" id="addNumber" class="" placeholder="用户编号">
    	   	<input type="text" name="" id="addRole" class="" placeholder="用户角色	" style="">
    	   	<input type="password" name="" id="addPassword" class="" placeholder="用户密码	" style="">
    	   	<input type="password" name="" id="addCpassword" class="" placeholder="确认用户密码	" style="">
    	   </div>
    		
    	</div>
    	<div class="col-lg-12 boder-bottom" style="">
    	   <div class="col-lg-2 selectModular" style="background-color:">   	   
    	   	<a  id="selectuser" class='button'>查询</a>
    	   </div>
    	   <div class="col-lg-10" style="background-color:">
    	   	<input type="text" name="" id="selectName" class="" placeholder="用户名称">
    	   	<input type="text" name="" id="selectNumber" class="" placeholder="用户编号">
    	   	<input type="text" name="" id="selectRole" class="" placeholder="用户角色	" style="">
    	   </div>
    		
    	</div>
    	<div class="col-lg-12">
    		<div class="user" >    		   
	    		<div class="col-lg-12 user-head display-line margin-left">
	    			
	    			<div class="col-lg-2"><p>用户ID</p></div>
	    			<div class="col-lg-2"><p>用户名</p></div>
	    			<div class="col-lg-2"><p>用户角色</p></div>
	    			<div class="col-lg-2"><p>用户性别</p></div>
	    			<p style="float: right;margin-right: 0%;margin-left:0%">操作</p>
	    			<p style="float: right;margin-right: 10%;margin-left:0%">操作</p>
	    			<p style="clear: both"></p>
	    		</div>	    		
    		</div>
    		<div style="clear: both"></div>
	    		<div class="user-content" id="content">
	    		<volist id="vo" name="list">
	    			<div class="col-lg-12 user-head display-line margin-left">
	    			<div class="col-lg-2"><p>{$vo.userid}</p></div>
	    			<div class="col-lg-2"><p>{$vo.username}</p></div>
	    			<div class="col-lg-2"><p>{$vo.userrole}</p></div>
	    			<div class="col-lg-2"><p>{$vo.gender}</p></div>
	    			
	    			
	    			
	    			<a id="{$vo.userid}" class="deleteuser" style="float: right;margin-right: 0%;margin-left:0%" href="">删除</a>
	    			<a style="float: right;margin-right: 10%;margin-left:0%" href="">修改</a>
	    		</div>
	    		<div style="clear: both"></div>
	    		</volist>	    			
	    		</div>
    		
    	</div>
    	<div class="col-lg-12" style="text-align: center">
    	<div class="pages" style="margin-left: auto"></div>
    	</div>           
    	</div>    	
    </div>
    <button id="update" ></button>   
</body>
<script type="text/javascript">
 $("#update").click(
	function(){
		update();
	});
    //数据更新
function update(){
	  layer.open({
	  type: 1,
	  skin: 'layui-layer-rim', //加上边框
	  area: ['420px', '240px'], //宽高
	  content: '  <div class="col-lg-10" style="background-color:">'+
	     	   '<input type="text" name="" id="modular" class="" placeholder="用户名称">'+
	     	   	'<input type="text" name="" id="Type" class="" placeholder="用户编号">'+
	     	   	'<input type="text" name="" id="Title" class="" placeholder="用户角色" style="">'+
	     	   '	<input type="text" name="" id="Title" class="" placeholder="用户密码" style="">'+
	     	   	'<input type="text" name="" id="Title" class="" placeholder="确认用户密" >'+
	     	   '<button id="update-frame" style="margin-left:32%"></button></div> '
});
	}

  
  //新增用户
  $('#adduser').click(function(){
  	adddate();
  });
  function adddate(){
     var Name =$('#addName').val();
     var Number =$('#addNumber').val();
     var Role =$('#addRole').val();
     var Password =$('#addPassword').val();
     var Cpassword =$('#addCpassword').val();
     //检测
   
     if(!/^[a-zA-Z0-9]{2,15}$/.test(Name)){
     	layer.tips("请输入2-15字符","#addName",{tips:3});
     	return false;
     }
     if(!/^[0-9]{5,10}$/.test(Number)){
     	layer.tips("请输入5-10位编号","#addNumber",{tips:3});
     	return false;
     }

     if(!/^[\u4e00-\u9fa5]{2,4}$/.test(Role)){
     	layer.tips('请输入2—4位汉字','#addRole',{tips:3});
     	return false;
     }
     if(!/^[a-zA-Z0-9]{6,15}$/.test(Password)){
     	layer.tips('请输入6-15位密码','#addPassword',{tips:3});
     	return false;
     }
     if(!/^[a-zA-Z0-9]{6,15}$/.test(Cpassword)){
     	layer.tips('请去人6-15位密码','#addCpassword',{tips:3});
     	 return false;
     }
     if(Cpassword!=Password){
     	layer.msg('两次密码不一致',{icon:2});
     	return false;
     }
     $.post("{:U('/home/user/adduser')}",{Name:Name,Number:Number,Role:Role,Password:Password,Cpassword:Cpassword},function(data){
     	if(data.status==1){
     		layer.msg(data.info,{icon:1});
     	}else{
			      		
			layer.msg(data.info,{icon:2});
		}

     },"json"
     )
    
     
     
  }
  //查询
  function selectuser(){
  	var Name = $('#selectName').val();
  	var Number = $('#selectNumber').val();
  	var Role =$('#selectRole').val();
  	if(Name==""&& Number==""&&Role==""){
  		layer.msg('请输入查询条件',{icon:2});
  		return false;
  	}else{
  		if(Name){
  			
	  		if(!/^[a-zA-Z0-9]{2,15}$/.test(Name)){
	  		layer.tips('请输入正确查询名字','#selectName',{tips:3});
	  		return false;
	  	    }

  			  	}
  		if(Number){
  			if(!/^[0-9]{5,10}$/.test(Number)){
  				layer.tips('请输入正确查询编号','#selectNumber',{tips:3});
	  		return false;
  			}
  		          }
  		if(Role){
  			if(!/^[\u4e00-\u9fa5]{2,4}$/.test(Role)){
  				layer.tips('请输入正确查询角色','#selectRole',{tips:3});
	  		    return false;
  			}
  		}

  		$.post("{:U('/home/user/selectuser')}",{Name:Name,Number:Number,Role:Role},function(data){
  			if(data.info){
  			layer.msg(data.info,{icon:1});
  		}else{
  			//alert(data[0]['username']);
  			var selectcontent=''	;
  			for(i=0;i<data.length;i++){
  				
  			 selectcontent +=
  			    '<div class="col-lg-12 user-head  display-line margin-left" >'+
	    			'<div class="col-lg-2"><p>'+data[i]['userid']+'</p></div>'+
	    			'<div class="col-lg-2"><p>'+data[i]['username']+'</p></div>'+
	    			'<div class="col-lg-2"><p>'+data[i]['userrole']+'</p></div>'+
	    			'<div class="col-lg-2"><p>'+data[i]['gender']+'</p></div>'+	    				    			
	    			'<a class="deleteuser" οnclick="" id="'+data[i]['userid']+'" style="float: right;margin-right: 0%;margin-left:0%" href="">删除</a>'+
	    			'<a style="float: right;margin-right: 10%;margin-left:0%" href="">修改</a>'+
	    		'</div>'
  			}
  			
  			$('#content').html(selectcontent);
  			//a标签监听事件
			<span style="color:#ff0000;"> $(".deleteuser").click(function(){
				$.post("{:U('home/user/deleteuser')}",{userid:this.id},function(data){
  		              layer.msg(data.info,{icon:1});
  	                 },'json')
			 });</span>
  		}

  		},'json')
  	}
  	  }
  $('#selectuser').click(function(){
  	selectuser();
 
  	
  })
  //删除用户/
  //
  $(".deleteuser").click(function(){
				$.post("{:U('home/user/deleteuser')}",{userid:this.id},function(data){
  		              layer.msg(data.info,{icon:1});
  	            },'json')
			});    
</script>
</html>

不善言辞-不行于色

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【js:jquery】jquery选择器与事件监听

1.所谓为选择器就是像js中 getElementById 或者getElementByClass 一样获取页面中的元素。以下为jQuery选择器获取到对象的方法：$('')中填写的内容不一样，选择器也不一样。大致的有以下几种：格式实例选取*$('*') 获取页面中所有元素#$('#id') 获取对应ID元素.$('.class') 获取对象类名的
复制链接

扫一扫