jquery常用笔记

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中获取相应的数据------------------------------------