一、jquery使用:
1.与服务器端交互:
节点.load("服务器端url",{参数名:'参数值',参数名:'参数值'},function(服务器传回来的data,status,xmlHttp对象){
}); //将该url中的页面内容装载到该节点中
XMLHttpRequest xmlHttp = $.get("服务器端url",{参数名:'参数值',参数名:'参数值'},function(服务器传回来的data,服务器传回来的status){
处理代码
});
$.post("服务器端url",$("#form表单id").serialize(),function(服务器传回来的data,服务器传回来的status){
处理代码
});//也可和get一样传参
$.getJSON("服务器端url",{参数名:'参数值',参数名:'参数值'},function(服务器传回来的data,服务器传回来的status){
data已经是JSON格式了,
});
jQery解析xml文件:
$.get("xml文件",function(xml,textstatus){ //xml为对象,textstatus为返回状态,成功时才执行方法内部代码
节点集 = $(xml).find("节点名"); //查找xml文档中该名的节点集
});
2.注册事件:
$(document).ready(function(){ //页面装载时运行的方法
执行代码;
});
节点数组或节点.click(function(){ //给节点注册单击事件,改变值时发生:change();双击时发生:dbclick();
执行代码;
});
节点数组或节点.focus(function(){ //给节点注册获得焦点事件
执行代码;
});
节点数组或节点.blue(function(){ //给节点注册失去焦点事件
执行代码;
});
节点数组或节点.keyup(function(){ //给节点注册按下键盘时触发的事件
执行代码;
});
节点数组或节点.mouseover(方法); //鼠标进入时触发的事件
节点数组或节点.mouseout(方法); //鼠标离开时触发的事件
节点.unbind("事件名"); //移除节点上的该名事件
this.clientX; //鼠标所在的x轴位置数值
this.clienty; //鼠标所在的y轴位置数值
3.操作节点:
节点.offset(); //得到该节点的top和left的偏移数值
this.defaultValue; //得到文本框默认值
$; //代表jQuery对象
jQuery对象或节点[0]; //将jQuery对象或节点转换成DOM对象或节点
jQuery对象或节点.get(0); //同上
$(DOM对象或节点); //将DOM对象或节点转化成jQuery对象或节点
$("#id值"); //得到该id所在的节点
$(this); //得到触发事件的节点
节点.parent; //得到该节点父节点
节点.html(); //得到该节点第一个html内容
节点.text(); //得到该节点文本内容
$.trim("字符串"); //去掉空格
节点集 = $("节点名"); //得到所有该名的节点
节点集 = $(".class值"); //按节点class查,得到所有该class的节点集
节点集 = $("*"); //返回所有节点集
节点集 = $("节点名,#id值,.class值"); //将这三个查找到的结果合并到节点集中返回
节点集.each(function(){
遍历节点集;
});
$.each(节点集,function(){
遍历节点集;
});
$.each(节点集,function(i,obj){ //i为当前循环索引值,obj为当前循环的对象
遍历节点集;
});
节点集.each(function(i,obj){
遍历节点集;
});
$("节点名:visible"); //得到所有可见的该节点集
$("节点名:hidden"); //得到所有隐藏的该节点集
以下为表单用的多:
节点.text(); //得到该节点的文本内容(只是下拉列表的值)
节点.val(); //得到该节点的value属性值(所有表单的值)
节点.val(["空格或其他不存在的值"]); //让下拉列表中全部选中的值处于不选状态
节点.val("值"); //设置该节点的值
节点.val(["值1","值2"]); //设置该节点的值,设置多个时要有中括号
$("节点名:enabled"); //得到可用节点集
$("节点名:disabled"); //得到不可用节点集
$("节点名:checked"); //得到单复选框中所有被选中的节点集
$("节点名:selected"); //得到select中所有被选中的节点集
$("select[id='id值']>option:checked"); //得到指定id的select节点中所有被选中的option节点集
节点集 = $(":text"); //得到表单中所有text节点集
$(":checkbox"); //得到表单中所有checkbox节点集
4.操作节点属性:
节点.attr("属性名"); //得到该属性值
$("节点名[属性名]"); //得到该属性值
$("节点名[属性名=值]"); //得到属性值等于此值的节点
$("节点名[属性名!=值]"); //得到属性值不等于此值的节点
$("节点名[属性名^=值]"); //得到属性值以此值开头的节点
$("节点名[属性名$=值]"); //得到属性值以此值结束的节点
$("节点名[属性名*=值]"); //得到属性值包含此值的节点
$("节点名[id名][属性名*=值]"); //得到id属性且属性值包含此值的节点
节点.addClass("class值"); //为节点增加class属性值
节点.removeClass("class值"); //删除节点的class属性值
节点.toggleClass("class值"); //设置节点class属性值
节点.hasClass("class值"); //判断节点的class属性值是否为此值
5.操作子节点:
节点集 = 节点.children("子节点名"); //得到该节点下所有该名的子节点
节点集 = $("节点名 子节点名"); //得到节点下所有该名的节点(包括子及孙子)
节点集 = $("节点名>子节点名"); //得到该节点下所有该子节点,不包含孙子节点
$("节点 :nth-child(even/odd)"); //得到所有该节点子节点集中索引值等于奇或偶数的子节点
$("节点 :nth-child(3)"); //得到该节点的子节点集中索引值等于3的子节点(从1开始)
$("节点 :nth-child(even/odd)"); //得到所有该节点子节点集中索引值等于3的子节点
$("节点 :first-child"); //得到节点下第一个子节点
$("节点 :last-child"); //得到节点下最后一个子节点
$("节点 :only-child"); //如果节点下只有一个子节点,则得到该节点
6.操作同层兄弟节点:
$("节点名:first"); //得到所有该节点集中第一个节点
$("节点名:last"); //得到所有该名节点集中最后一个节点
节点集 = $("节点名:not(.class名)"); //得到所有该名节点集中class名不为这个名的节点
节点集 = $("节点名:even"); //得到所有该名节点集中偶数节点
节点集 = $("节点名:odd"); //得到所有该名节点集中奇数节点
节点集 = $("节点名:gt(3)"); //得到所有该名节点集中索引值大于3
节点集 = $("节点名:lt(3)"); //得到所有该名节点集中索引值小于3
节点 = $("节点:eq(1)"); //得到所有该名节点集中索引值为1的节点(从0开始)
节点 = $("#id值+后面节点名"); //得到该id所在节点的下一个同层节点
节点集 = $("#id值~后面节点名"); //得到该id对应节点后面所有该名的同层节点集()
节点集 = $("#id值").siblings("节点名"); //得到该名的所有同层节点集
节点.next(); //得到后面所有同层节点
$("节点:contains('文本')"); //得到包含有该文本的节点集
$("节点:empty"); //得到不包含文本或子元素的节点集
$("节点:has(.class名)"); //得到含有该class的节点集
$("节点:parent"); //得到含有子内容的节点集
$("节点:not contains('文本')"); //得到不包含该文本的节点集
$("节点:hidden"); //得到所有隐藏节点集
$(":header"); //得到所有标题节点,如h1
$(":animated"); //得到正在执行动画的节点
7.设置效果:
节点.is(":hidden"); //判断该节点是否隐藏节点
节点集.toggle("show"); //显示或隐藏当前节点集(点一下显示,再点一下隐藏)
节点.attr("style","display:none"); //设置节点css,使节点显示
节点.css("display","block"); //设置节点css,使节点显示
节点.css("display","none"); //设置节点css,使节点隐藏
节点或节点集.css("background","red"); //设置节点css,改变背景色
节点.show("slow"); //将该节点动态显示出来
节点.hide("slow"); //将该节点动态隐藏
节点.fadeIn("slow"); //将该节点动态显示出来
节点.fadeOut("slow"); //将该节点动态隐藏
节点或节点集.slideToggle("fast或slow或normal或毫秒值"); //将节点动态隐藏
8.创建节点:
节点 = $("<节点名></节点名>"); //创建节点
节点.attr("属性名","属性值"); //设置属性
节点.text("文本"); //创建文本节点
父子插入:
父节点.append(节点); //将创建的节点加入父节点最尾部
节点.appendTo(父节点); //将创建的节点加入父节点最尾部
节点.appendTo(父节点); //将创建的节点加入父节点最尾部
同级插入:
9.删除节点:
$("id值").remove(); //删除该id值对应的节点
$("父id值").empty(); //删除该父节点下所有子节点
10.复制节点:
要复制的节点.clone().appendTo("目标节点"); //复制节点到目标节点位置,但不复制该节点的事件
要复制的节点.clone(true).appendTo("目标节点"); //复制节点到目标节点位置,事件也复制
11.替换节点:
替换的节点.replaceWith(要替换的节点); //将一节点替换成另一节点
替换的节点.replaceAll("要替换的节点名"); //将该名节点集全部替换成另一节点