Java知识整理（二十四）之jQuery

jQuery(write leee,do more(html，要引入jQuery文件)):优秀的JS框架,轻量级的JS库,使用户的HTML页面保持代码和内容分离
jQuery编程步骤:1.引入jQuery的js文件2.使用选择器定位要操作的节点3.调用jQuery的方法进行操作
jQuery对象:链式编程(每次返回的都是jQuery对象);$("div");$("#d1");都是jQuery对象
DOM对象-->jQuery对象:$(DOM对象);
jQuery对象-->DOM对象:$obj.get(0)或者$obj.get()[0];$obj是jQuery对象
jQuery选择器:
基本选择器:#id(最快),.class(.s1),element(元素选择器div等)
层次选择器:
过滤选择器:first(第一个元素);last(最后一个元素);not(selector):把selector排除在外;even(挑选偶数行);even(挑选奇数行);
eq(index):下标等于index的元素;gt(index):下标大于index的元素;lt(index):下标小于index的元素;
例:$("table tr:first");$("table tr:eq(1) td:eq(2)");$("table tr:not(#tr1)");
内容过滤选择器:contains(text):匹配包含给定文本的元素;empty:匹配所有不包含子元素或者文本的空元素;
has(selector):匹配含有选择器所匹配的元素;parent:匹配含有子元素或者文本的元素
可见性过滤选择器:hidden:匹配所有不可见元素,或type为hidden的元素;visible:匹配所有的可见元素;还有属性,子元素过滤器
表单过滤选择器:enabled,disabled,checked,selected
表单选择器:input,text,password,radio,checkbox,submit,image,reset,button,file,hidden
利用选择器定位节点:$("div");$("#di");相当于<div id="d1"></div>
调用方法操作节点:$("#d1").css("font-size","30px"); //修改id=d1的样式
合并选择器(selector1,selector2...):例如$("#d1,.s1,p");
从节点select1中找子节点(h或者子子等节点)select2(select1空格select2):例如$("#d1 div");
只查找直接子节点,不查找间接子节点(select1>select2):$("#d1>div");
select1+select(+表示下一个兄弟节点)$("#d1+div");d1的类型为div,查找它同级的之后的一个div
select1~select2(~表示下面所有兄弟):$('#d2~div');d1的类型为div,查找它同级的之后的所有div
jQuery操作DOM:
html():读取或修改节点的HTML内容;$("#d1").html() 相当于  document.getElementById("d1").innerHTML;
text():读取或修改节点的文本内容:$("#d1").text();
val():读取或修改节点的value属性值:$("#d1").val("空白格"); 相当于 document.getElementById("d1").value="空白格";
attr():读取或者修改节点的属性:$("#d1").attr("style","color:red;");
创建DOM节点:$('body').append('<div>...</div>');  放在body最后一个节点;$("#d1").before("<p>hello</p>");var $obj=$("#d2").clone(true);
append():作为最后一个子节点添加进来;prepend():作为第一个子节点添加进来;after():作为下一个兄弟节点添加进来;
before():作为上一个兄弟节点添加进来;remove():移除;remove(selector):按选择器定位后删除;empty():清空节点;
clone():复制节点;clone(true):将处理代码一块复制
样式操作:
attr("class",""):获取和设置;addClass(""):追加样式;removeClass(""):移除样式;removeClass():移除所有样式;
toggleClass(""):切换样式;hasClass(""):是否有某个样式;css(""):读取css的值;css("",""):设置多个样式;
遍历节点:
children():只考虑直接子节点;next():下一个兄弟节点;prev():上一个兄弟节点;siblings:其他兄弟;
find(selector):查找满足选择器的所有后代;parent():父节点;
分离js代码:
window.onload = function(){
var obj = document.getElementById("d1");
obj.οnclick=function(){
this.innerHTML="this很重要";
}
}


$(function(){
$("#d1").click(
function(){
$(this).html('helle Ajax');
}
);
}
);
两种方式完成的操作是等价的,都是在页面加载后,为div添加点击事件.
使用jQuery实现事件绑定:$obj.bind('click',fn)相当于$obj.click(fn);
取消事件冒泡:e.stopPropagation()
jQuery动画:效果很好;显示(显示之前要display:none):$("#d1").show(3000,f1),隐藏:$("#d2").hide(3000,function(){...}),f1为回调函数，可不写
上下滑动:slideDown()/slideUp();淡入:fadeIn(),淡出fadeOut,自定义动画;他们的用法都同show()/hide()
load():将服务器返回的数据字节添加到符合要求的节点之上;$obj.load(请求地址,请求参数);
jQuery对Ajax的支持:使用$.load(),$.get(),$.post(),$.ajax()方法发送异步请求(3种方法)
1.$(function(){
$("#d1").click(function(){
$(this).load('salary.do','eId='+eId);

});


});
2.function quoto(){
$.post('quoto.do','eId='+eId,function(data){...},'json');
}
$.get(请求地址,请求参数,回调函数,服务器返回的数据类型)
data是服务器返回的数据,json是返回数据格式的说明,如果data是json字符串,会自动转换为相应的javascript对象
修改post请求为get请求时,相关参数不变,要在请求地址后面追加一个随机数欺骗IE浏览器
3.function quoto(){
$.ajax(
{ url:"quoto.do",type:"post",dataType:"json",success:function(data){...},error:function(){...} }
);
}