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