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.onclick=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(){...} }
);

}