jQuery实战技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/yym836659673/article/details/72903071
jquery笔记
	开发步骤
	1）导入juery库
	2）在 $(function(){}) 中的{}中写进 jQuery代码
	<script type="text/javascript" src="jquery-版本号.js"></script>  ----(1)
	<script type="text/javascript">         ----(2)
		$(function(){
			$('#btn1').click(function(){
				$(":text:enabled").val("赋值");
			});
		})
	</script>

 	3) jQuery对象不能使用Dom对象的属性和方法，反之也一样
 	   但是jQuery对象是一个Dom对象的数组，可以使用下表的方式转换为Dom对象
 	   
 	   var $btn = $("button");
 	   var btn = $btn[0];
 	   
 	   jquery对象为$()选择器产生的对象

 	   $('select : selected').each(function(){
 	   		alert($(this).val());
 	   });

 	4） 选择器
 	    获取下拉框选中的option
 		$('select[name='test'] :selected').each(function(){
 		//...
 		});

 		根据html元素的属性值拿值 (拿到改元素的 addrId属性)
 		var addrId = $('#submitAddr').attr('addrId');

 		给一个<input>标签设置值
 		$('#hidden').val("test");

 		获取表单数据

 		//提交表单，按钮绑定监听事件，组织冒泡，获取数据
	function setSave(){
		$("#submitAddr").on("click", function(e){
			e.stopPropagation();
			e.preventDefault();
			//获取表单数据
			var id = $(this).attr("addrId");
			var userName = $("#userName").val();
			var country = $("#country option:selected").val();
			var stateCode = $("#stateCode option:selected").val();
			var state = $("#stateInput").val();
			var custom = $("#custom").val();
			var city = $("#city").val();
			var mobile = $("#mobile").val();
			var phone = $("#phone").val();
			var zipCode = $("#zipCode").val();
			var street = $("#street").val();
			var federalEin = $("#federalEin").val();
			var tax = $("#tax").val();
			var hsCode = $("#hsCode").val();
			var vat = $("#vat").val();
			var ein = $("#ein").val();
			var cityselect = $("#cityselect").val();
			};		
		获取指定表单的组件(输入框，下拉框，文本域)，将其设置为只读状态
		var $mainForm = $("#myForm");
		$("input,select,textarea"，mianForm).attr("readonly","readonly");
		指定组件为只读状态
		$("test").attr("readonly", "readonly");

		

 	5）将 jQuery对象的几个方法

 		.val() 获取或设置表单元素的值
 			$(':text:enabled').val("值");  //设置值
 			alert($(':text:enabled').val()); //获取值
 		.attr()
 		.each() 对jQuery对象进行遍历，其参数为 function， 函数内部的this是正在遍历的Dom对象

 		$('select :selected').each(function(){
 			alert(this.value);
 		});
 		.text()

		#jquery - 删除元素
	* remove() - 删除被选元素（及其子元素）  如：$("#div1").remove();  
	  remove（）还可以接受jquery选择器语句 
	  删除 class="italic" 的所有 <p> 元素： $("p").remove(".italic");
	* empty() - 从被选元素中删除子元素 如：$("#div1").empty();


			#jquery - 查找元素节点
				var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”);


			#jquery - 查找元素属性
				attr()
				当参数是一个时，则是要查询的属性名称。
			    当参数是两个时，则可以设置属性的值。
			    alert($(“#id”).attr(“title”)); //输出元素的title属性.一个参数
			    $(“#id”).attr(“title”,”改变title值”); //改变元素的title属性值.二个参数


			#jquery - 添加元素节点
			    var $htmlLi = $(”  <li title=’香蕉’>香蕉</li>”); 
			    var $ul = $(“ul”);   //获取UL对象
			    $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表


			#jquery - 判断jquery对象是否为空
				var target_obj = jQuery('#target_obj_id');
				  if (target_obj.length > 0) { 
				  	//不为空
				  	//因为 target_obj 是一个jquery对象，即DOM元素数组，如果这个数组长度大于0的话，那么就代表这个数组不为空，即jquery对象不为空
				 
				  } else {
				 
				  }


			#jquery - 判断并遍历每个对象
			if($("#t_specialsearch select").length <= 0){
			          alert("对象为空");
			}else{
			    $("#t_specialsearch select").each(function(){
			      console.log($(this));
			      // this 代表数组内的当前dom对象，即我们可以通过 this 访问和设置dom对象的各种属性，例如各种html的各种属性 type value id ...等
			      // $(this) 代表当前dom对象封装而成的jquery对象，可以使用jquery的函数
			      // dom 对象不能使用 jquery函数， jquery对象不能直接使用 dom对象属性
			      // jquery对象可以使用函数访问和设置dom元素实行，上面介绍过 attr()
			    });JQUERY的父，子，兄弟节点查找方法


jQuery.parent(expr)  找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")


jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素


jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点


jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个


jQuery对象返回，children()则只会返回节点


jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点


jQuery.prevAll()，返回所有之前的兄弟节点


jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点


jQuery.nextAll()，返回所有之后的兄弟节点


jQuery.siblings(),返回兄弟姐妹节点，不分前后


jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()


的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从<p>元素开始找<span>,等同于$("p span")
 		-----------------



 	



 		-----------------
 		三级联动 : 城市 --》 部门 --》 员工信息

 		1.获取 #city 绑定 change 响应事件
 		2. department 只保留第一个 option 子节点
 		3. 获取 #city 选择的值， 如果是 “” 标示选择的未 请选择... 不需要发送 ajax 请求
 		4. 若值不为 “” 则表明city 发生了改变， 准备发送 ajax 请求
 		 4.1 url : EmployeeServlet?method=listDepartments
 		 4.2 args : {"locationId":loactionId, "time":new Date()}
 		5.返回一个json数组，
 		  5.1 如果返回的数组中的元素为0 提示没有部门
 		  5.2 如果返回的数组中元素不为0，遍历，创建节点 <option value="departmentId">departmentName</option>
 		  并将其加为 #department 的子节点

 		  js代码：


 		 <script type="text/javascript">
 		 	$(function(){
 		 		$('#city').change(function(){
 		 			$('#department option:not(:first)').remove();
 		 			var loctionId = this.value;
 		 			if (locationId != null){
 		 				var url = "EmployeeServlet?method=listDepartments";
 		 				var args = {"locationId":locationId, "time":new Date()};
 		 				$.getJSON(url,args,function(data){
 		 					if(data.length == 0){
 		 						alert("该城市不存在部门");
 		 					}else{
 		 						for(var i = 0; i < data.length; i++){
 		 							var deptId = data[i].deptId;
 		 							var deptName = data[i].deptName;
 		 							$('#department').append("<option value='" + deptId + "'>" + deptName + "</option>");
 		 						}
 		 					}
 		 				});
 		 			}
 		 		});
 		 		$('#department').change(function(){
 		 			$('#employee option:not(:first)').remove();
 		 			var departmentId = this.value;
 		 			if(departmentId != null){
 		 				var url = "EmployeeServlet?method=listEmployees";
 		 				var args = {"departmentId":departmentId, "time":new Date()};
 		 				$.getJSON(url, args, function(data){
 		 					if(data.length == 0){
 		 						alert("该部门没有员工！");
 		 					}else{
 		 						for(var i = 0; i < data.length; i++){
 		 							var employeeId = data[i].employmentId;
 		 							var employmentName = data[i].employmentName;
 		 							$('#employment').append("<option value='" + employeeId + "'>" + employeeName + "</option>");
 		 						}
 		 					}
 		 				});
 		 			}
 		 		});
 		 		$('#employee').change(function(){
 		 			var employeeId = this.value;
 		 			var url = "EmployeeServlet?method=listEmployee";
 		 			var args = {"employeeId":employeeId, "time":new Date()};
 		 			$.getJSON(url,args,function(data){
 		 				var id = data[0].employeeId;
 		 				var name = data[0].employeeName;
 		 				var email = data[0].email;
 		 				var salary = data[0].salary;
 		 				$('#id').text(id);
 		 				$('#name').text(name);
 		 				$('#email').text(email);
 		 				$('#salary').text(salary);
 		 			});
 		 		});
 		 	});
 		 </script>



 		笔记：
 		html代码：
 		加在数据时旋转的图片：
 			<img id="loading" src="images/loading.gif" style="display:none"></img>

 		<br><br>
 		City:

 		<select id="city">
 			<option value="">请选择...</option>
 			<c:forEach items="${locations}" var="location">
 				<option value="${location.locationId}">${location.city}</option>
 			</c:forEach>
 		</select>

 		<br><br>

 		Department:

 		<select id="department">
 			<option value="">请选择...</option>
 		</select>

 		Employee:

 		<select id="employee">
 			<option value="">请选择...</option>
 		</select>

 		<br><br>

 		<table id="empdetails" style="display:none">
 			<tr>
 				<th>Id</th>
 				<th>Name</th>
 				<th>Email</th>
 				<th>Salary</th>
 			</tr>
 			<tr>
 				<td id="id"></td>
 				<td id="name"></td>
 				<td id="email"></td>
 				<td id="salary"></td>
 			</tr>
 		</table>




-------------------------------------------------
		 ajax 交互的另一种方式

		 function test(No){
		 	$.ajax({
		 		type : "POST",
		 		url : 'test/'+No+"method",
		 		success : function(data){
		 		if(data.err){
		 			alert(data.msg);
		 		}else{
		 			for (var i = 0; i < data.data.length; i++){
		 				alert(data.data[i]);
		 			}
		 		}},
		 		error : function(){
		 			alert('ERROR');
		 		}
		 	});
		 }

后段负责交互的java对象设计：
	public class AjaxJsonBean {
	
	private boolean err;
	private String msg;
	private Object data;

	
	public AjaxJsonBean() {
		this.err = false;
		this.msg = "";
	}
	
	public boolean isErr() {
		return err;
	}

	public void setErr(boolean err) {
		this.err = err;
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}

	public Object getData() {
		return data;
	}

	public void setData(Object data) {
		this.data = data;
	}

}


在Spring中使用 @ResponseBody 标签可以将设计的java类序列化成JSon对象返回到前端，这个序列化后的对象对应前端function(data){}中的data,我们可以
在data中获取相应的数据



------------------------------------
jquery常用笔记
