调试小招：a.通过看浏览器的netWork下的请求头，如果jquery引用出错报404错误
b.不论是js还是jquery里面的，均可以先用alert()进行调试，然后再用debug模式
c.js里面只要有一个地方错了，页面就可能显示不出来。
重点：jQuery函数汇总加载dom对象
1.$(document).ready(function(){});
2.$().ready(function(){});
3.$(function(){});
1.jquery库有完整版如jquery-1.6.js（无压缩、用于测试和学习）和jquery.min.js（压缩版、体积小、用于项目和产品）
2.使用jquery，需先在页面上引用jquery库<script type="text/javascript" src="../jquery.js"></script>
3.jquery对象与dom对象转换
dom下的取值有三种形式：id、name、tagname；
分别是：document.getElementById('id'); document.getElementsByName('name'); document.getElementsByTagName('tagName');
id选择器
a.dom对象取值 eg:var td40=document.getElementById('td_04');
b.jquery对象取值 eg:var td41=$('#td_04');
c.从dom对象转到jquery对象 eg: var td4=document.getElementById('td_04'); var $td4=$(td4);
4.引入多个js库，如prototype、Base库等，有冲突了怎么解决
4.1 如果jquery是在它们之前引入，那么“$”的所有权将归Base库使用，可以直接用Jquery对象调用，也可以创建一个“$$”给jQuery，则不存使用JQuery.noConflict()方法
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
var $$=jQuery; //创建一个$$jquery对象
$(function(){} //这里的“$”是Base对象
alert($('#box').get(0)); //这里是Base对象
alert($$('#box').width()); //这里是Jquery对象
</script>
4.2 如果jquery是在它们之后引入，那么“$”的控制权就将归jquery了。
jQuery.noConflict(); //将$符所有权剔除
var $$=jQuery;
$(function(){
alert($('#box').get(0));
alert($$('#box').width());
});
5.选择器（常用：id、.class、标签）
5.1 id选择器
var id04=$("#id_04"); //相当于document.getElementById("id_04");
5.2 class选择器
var id04=$(".id_04");
5.3 标签选择器（元素选择器）
var p1=$("p");
5.4 层次选择器
a.形式：$("parent>child"); //选择parent元素里面的集合元素 eg:$("div>p").css("background-color","red");
b.形式：$("prev+next"); 或$("prev").next(); //取prev元素后的首个next集合元素 eg:$(".one+div")或$(".one").next("div");
c.形式：$("pre~silings");或$("prev").nextAll();//取prev元素后的所有元素 eg:$("#two~div")取id为two元素后的div兄弟元素
d.形式：$("prev").siblings() //取prev元素的所有同集合元素辈元素 eg:$("#prev").siblings("div")取所有与prev后面div同辈元素，无论前后位置
5.5 过滤选择器
基本选择器
a.:first //选择第一个元素 eg:$("div:first");
b.:last //选择最后一个元素 eg:$("div:last");
c.:not(select) //去除与给定选择器匹配的元素 eg:$("input:not(.myclass)"); //选择class不是myclass的input元素
d.:even //取索引是偶数的元素 eg:$("input:even");
e.:odd //取索引是奇数的元素 eg:$("input:odd")
f.:eq(index) //取索引等于index的元素 eg:$("input:eq(1)");
g.:gt(index) //取索引大于index的元素，集合元素索引都从0开始计算
h.:lt(index) //取索引小于index的元素
i.:header //取所有标题元素
j.:animated //取当前正在执行的动画的元素
内容过滤
a.:contains(text) //取内容为text的元素
b.:empty //取不包含子元素或文本的空元素
c.:has(select) //取含有选择器匹配的元素的元素
d.:parent //取所有子元素或文本元素
可见过滤
a.:hidden //取所有不可见的元素
b.:visible //去所有可见的元素
属性过滤器
a.[attribute] //取此属性的元素 eg:$("div[id]");
b.[attribute=value] //取等于value的元素 eg:$("div[title=test"]);
c.[attribute!=value] //
d.[attribute^=value] //取值以value开始的元素
e.[attribute$=value] //取值以value结束的元素
f.[attribute*=value] //取值含有value的元素
子元素和表单属性过滤
5.6 表单选择器
a.:input //所有的<input><textarea><select>和<button>元素
b.:text //所有文本
c.:password //所有密码框
d.:radio //所有单选框
e.:checkbox //所有多选框
f.:submit //所有提交按钮
g.:image //所有图像按钮
h.:reset //所有取消按钮
i.:file //所有上传的元素
j:hidden //所有不可见的元素
DOM操作
1.查找节点和创建节点
var $li=$("ul li:eq(1)"); //取出ul中的第二个节点，然后用attr()方法来获取各种属性
$(HTML)来创建
eg：var $li_1=$("<li></li>");
var $li_2=$("<li></li>");var $parent=$("ul"); //创建<li>和<li>的父节点<ul>
$parent.append($li_1); $parent.append($li_2); //将<li>元素添加<ul>节点 也可采取链式写法：$parent.append($li_1).append($li_2);
2.插入节点
a.append() //在被选元素的后追加内容 eg:$("p").append("<b>hello</b>");
b.appendTo() //是append的逆用，将内容（必须用HTML包起来）追加到被选元素上 eg:$("b>hello</b>").appendTo("p") 结果<p><b>hello</b></p>
c.prepend() //在被选元素前追加内容 eg:$("a").prepend("<a href='#'>prepend<a>");
d.prependTo() //prepend()的逆用，将内容（必须用HTML标签包起来） eg:$("<a href='#'>prependTo</a>").prependTo("a");
e.after() //在被选元素的后面追加内容 A.after(B)参数B被追加到A的后面
f.insertAfter() //after的逆用 A.insertAfter(B) AB位置调换
g.before() //被选元素前加内容
h.insertBefore() //before的逆用
3.删除节点
a.remove() //删除被选择元素以及子元素
b.empty() //清空节点（删除子节点），不删除被选节点
4.克隆和替换
a.clone() //克隆 eg:$("p").append($("a"))
b.html() //替换被选元素的内容（不含被选元素） eg:$('#div1').html('<a>Hello World</a>');
b.replaceWith() //替换被选元素以及子元素 eg:$("#div1").replaceWidth("Hello World");
c.replaceAll() //replaceWith的逆用，必须用标签将内容包起来 eg:$('<a>Hello</a>').replaceAll('#div1');
5.包裹节点
a.wrap() //用指定的标签将被选元素包裹起来 eg:$("li").wrap("<div></div>"); //给每个a标签选择器加div层
b.wrapAll() //用指定的标签在被选元素最外侧包围一次 eg:$("li").wrap("<div></div>"); //最外围加一个div标签
c.wrapInner() //说是给指定的标签的内容加标签 --失败，与wrapAll()一样，在li元素一组结束后放一个如a标签就显现出不同了，wrapAll会将a移到最尾不加div
6.属性操作
a.attr(key); //获取元素属性值 eg:var title=$("ul li:eq(1)").attr("title"); //获取下标为1（第二个）li元素title属性值
b.attr(key,value); //设置单个元素属性 eg:$(".td_13").attr("width","80px");
c.attr({key:value,key2:value2,……}) //设置多个元素属性 eg:$(".td_13").attr({width:"23px;",height:"50px;",……});
d.attr(key,function(){//代码}) //为所有匹配的元素设置一个计算的属性值 eg:$("ul li:gt(1)").attr("title",function(){ alert("pink"); }) //操作已有的属性，与css不同
e.removeAttr(key); //移除某个属性 eg:$(".td_13").attr("title");
7.样式操作
a.attr() //获取样式 eg:var td_13 = $("td_13").attr("class");
b.attr(); //设置样式 eg:$("td_13").attr("td_13","td_04"); //更新样式
c.addClass() //添加样式 eg:$("td_17").addClass("td_17 td_13"); //可一个或多个，【验证下】
d.removeClass() //移除样式 eg:$("td_17").removeClass(); //可指定，不指定则是全部移除
e.toggleClass() //切换样式 eg:$("#td_17").toggleClass("td_13"); //本身没有这个样式则添加，有这个样式则是删除
f.hasClass() //判断样式是否存在 eg:alert($("td_17").hasClass("td_13")==$("td_17").is("td_041")); //为true 单个都是false
8.CSS-DOM操作
a.css(); //获取css属性值 eg:var td_17_color=$(".td_041").css("color"); $(".td_13").height(); //若没有设置则是默认的高度，设置了200，实际198.
b.css(key,value); //设置单个css属性 eg:$(".td_13").css("color","blue"); //设置单个css属性
c.css(key,value,……) //设置多个css属性 eg:$(".td_13").css({"color":"blue","background-color":"white",……}); //注意与attr想区别attr中key不带引号
d.css(key,function(){}) //设置function设置 eg:$(".td_10").css("color",function(){ return "red"}) //与attr不同，这里可以增加设置样式，而attr则是设置修改已经存在的属性。
e.offset() //获得元素在当前视窗的偏移量（上下） eg:$(".td_13").offset(); alert("offset="+offset+"\noffset.left="+offset.left+"\noffset_top="+offset.top);
f.position() //与offset类似 测试的结果值是一样的 eg:var position =$("ul li:gt(1)").position(); alert("position="+position+"\nposition.left="+position.left+"\nposition.top="+position.top);
g.scrollTop() scrollLeft() //当前元素滚动条距顶端/左侧的距离 eg:alert($("#td_17").scrollTop()+"\n"+$(".td_10").scrollLeft());
小结：1.height()与css()方法获得的值是有区别的，前者是不带单位的，后者是单位的
2.atr()与css()区别，前者都可以设置的，id,name,type ,title,class,style等，后者只是针对css样式,css样式中有“-”，换成驼峰式如font-size变成“fontSize”
eg:1.alert($("#tab").attr("style","width:400px;background-color:pink;align:center")); //这是针对stytle的，若是属性则样子与css一样
2.alert($("#tab").css({"padding":"5px","background-color":"#98bf21","fontSize":"48px"}));
9.设置和获取HTML文本和值
1.html() //获取页面的HTMl页面元素和文本信息，类似于js中的innerHTML属性,html不能用于xml文档
2.text() //获取页面上的text文本，类似于js和xml中的innerText属性【js效果没测出来】
3.val //类似于js中的value属性，这里对于表单元素可以使用val()方法获取或设置元素值 eg:alert($("#sex1").val="HE"); $(":text").val("HelloWorld");
10.遍历节点
a.pre() //匹配元素前紧邻的同辈元素 eg:alert($(".td_13").pre().attr("style","width:100px;height:200px;background-color:green"));
b.next() //匹配元素后紧邻的同辈元素 eg:alert($("div").next().attr("background-color","pink"))
c.siblings() //取得匹配元素前后的所有同辈元素 eg:alert($("p").siblings().css({"color":"blue","fontSize":"48px"}));
d.children() //用来取得匹配元素的所有子元素，不考虑后代元素 eg:alert($("p").children().css("color","red"));
e.closest() //用来取得最近的匹配元素
f.find() //在被操作的元素内部查找元素 eg:var $find = $("div").find(".td_13"); alert($find.html());
g.filter() //在被操作的元素自身找匹配的元素 eg:var $filter =$("div").filter(".td_13"); alert($filter.html());
h.prev() //当前元素的前一个元素 eg:$(this).prev().css("background","blue"); //当存在两个或两个以上元素时，匹配当前元素的前一个元素
11.事件、效果和动画
1.事件绑定 bind[解绑 unbind]、on[解绑 off]、delegate[undelegate]、click [解绑 unbind] 四种bind与click可行，另外的on、delegate无效
形如：$("a").bind('click',function(){alert("ok");}); //事件绑定 点击a标签上的字出现提示框
$("p").unbind("click",function(){alert("ok pp");}); //事件解绑
2.各类事件
ready() //文档就绪时的事件 a.$(document).ready(function(){});b.$().ready(function(){});c.$(function(){})
focus() //聚焦
blur() //失去焦点，这一组主要是针对input类型而言的
change() //当输入域发生改变时触发
click() //当点击时触发
dblclick() //双击按钮时触发
error() //就是挽救的方法，如图片加载不了替换成文本 eg：$("img").error(function(){ $("img").replaceWith("<p>服务器维护中……</p>");});
keyup() //针对input类型的，当按下复位的时候触发
keydown() //针对input类型的，当按下的时候触发
keypress() //按键时触发
mousedown() //鼠标点击时触发
mouseenter() //鼠标划过时触发
mooseleave() //鼠标离开的时触发
mousemove() //鼠标在作用范围内移动时触发
moueseout() //鼠标离开时触发，经常与mouseover()一起用
mouseover() //鼠标移至元素上时触发
mouseup() //鼠标松开时触发
resize() //调整浏览器窗口大小 实践没看到效果
scroll() //滚动时触发 样式voerflow:scroll
select() //选择操作时触发
submit(0 //表单提交事件
load() //加载事件，但在火狐和IE，如果有缓存可就不允许加载了
3.效果
a.show() //显示
b.hide() //隐藏
c.toggle(speed,callback,switch) //元素可见和隐藏设置有两种 1.speed（单位毫秒，默认不写的0）；2.switch（true显示，false隐藏）
d.slideUp(speed,callback) //元素隐藏 eg:$("#td_13").slidUp(2000,setDateTime()); function setDateTime(){var Date = new Date() alert(date);}
e.slideDown(speed,callback) //元素显示
f.slideToggle(speed,callback) //上下滑动切换可见与隐藏
g.fadeIn(speed,callback) //元素淡入即慢慢出现，显示
h.fadeOut(speed,callback) //元素淡出即慢慢消失，隐藏
i.fadeTo(speed,opacity,callback) //元素可见度减弱至opacity eg:$("#typing").fadeTo(3000,0.1,setDateTime());
动画：animate(style,speed,easing,callback) //eg:$("p:eq(0)").animate({textIndent:"20px"},3000,setDateTime()); easing（函数）有swing和linear报错
stop(stopAll,stopEnd); stop(true)停止所有动画，stop(true,true)在当前动画执行完后停止动画
HTMl元素
padding：是自身体积变大，撑大了
margin:是相对于一个位置的距离
letterSpacing:字符间距（字母即是单个字母，中文即是文字），正值增大，负值缩小 //letterSpacing与wordSpacing实践没效果
wordSpacing:拉开一个词的距离
lineHeight：行高
textIndent:首行缩进
总结Jquer属性操作：
a.addClass(); //向匹配的元素添加class样式，可添加多个
b.attr() //设置匹配元素的属性和值
c.hasClass() //检查是否拥有指定的类
d.html() //设置或返回匹配元素的HTML内容，与dom中的innerHTML一样的
e.removeAttr() //从匹配的元素中移除指定的属性
f.removeClass()//从匹配的元素中移除指定的class样式，没有指定则是全部移除
g.toggleClass()//从匹配的元素中添加或移除class样式，没有则是添加，有则是删除
h.val() //从匹配的元素设置或返回指定的内容
i.prop() //检查是否存在该属性，如判断是否存在disabled，有则返回true，否则false
12.表单和表格
13.ajax
浏览器端：参数
头信息(请求头和请求头信息) 内容长度、内容类型、时间、服务器、能接受的编码、能接受的语言、cookie等
响应
Cookies 名称JSEESSIONID,
ajax学习（一）
ajax (Asynchronous JavaScript and XML 异步的javascript和xml)
ajax是一种快速创建动态的网页技术，通过在后台与服务器进行少量的交换数据，在不用重载整个页面的情况下对页面的一部分进行更新。
jquery对ajax作了封装，兼容各大浏览器，其中$.ajax()是最低层的方法，第2层是$.load()、$.get()、$.post()，并且get和post方法是全局函数，第
三层是$.getScript()和$.getJson()方法
常用方法学习
1.$.ajax() //执行异步ajax请求
<script type="text/javascript" >
$(document).ready(function(){
$("#start").click(function(){
$.ajax({url:"foot.jsp",success:function(result){
$("#showStar").html(result);
}});
});
});
</script>
<p><button id="start">Start Animation</button>
<table background="pink">
<tr id="showStar"><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
ajax方法常用参数列表
（1.url：String类型的，用于发送请求的地址的，默认是当前页
（2.type：String类型的，请求方式(GET或POST)，默认是Get
（3.Data:Object和String类型，规定要发送到服务器的数据。Get请求中将附加在URL后，如果不是字符串将自动转换为字符串格式。对象必须是key—value格式
（4.dataType:String类型，预期服务器响应的数据类型。如果不指定，Jquery将自动根据Http包的Mime信息返回responseXML和responseText，作为回调
函数传递。可用的类型有XML/html/script/json/text
（5.success(result,status,xhr):function 请求成功时运行的函数，有两个参数，a.由服务器返回的dataType指定的数据;b.描述状态的字符串。
（6.Async:Boolean类型，是否异步提交，为true时异步，false时同步提交。
（7.Complete:function,请求完成后调用的回调函数（成功或失败时均调用），参数是XMLHttpRequest对象和一个描述成功请求类型的字符串。
（8.Error(xhr,status,error):function,请求失败时调用的函数，有三个参数，a.XMLHttpRequest对象;b.错误信息textStatus;c.捕获的错误errorThrown对象。
2.$.get(url,data,function(data,status,xhr),dataType) //使用Http Get请求从服务器加载数据
<script type="text/javascript" >
$(document).ready(function(){
$("#start").click(function(){
$.get("foot.jsp",function(data,status){
$("#showStar").html("数据： "+data+" \n状态："+status);
});
});
});
</script>
get方法参数列表
（1.url：请求的路径，必须。
（2.data:规定连同请求发送到服务器的数据，可选
（3.function(data,status,xhr)可选，规定定请求成功时运行的函数
a.data：请求的结果数据
b.status:请求的状态(success、notmodified、error、timeout、parsererror)
c.xhr:XMLHtttpRequest对象
（4.dataType:规定预期的服务器响应的数据类型，可选，Jquery能智能判断属于xml、html、text、script、json、jsonp
3.post(url,data,function(data,status,xhr),dataType)
<script type="text/javascript" >
$(document).ready(function(){
$("#start").click(function(){
$.post("../manager/login.jsp",
function(data,status){
$("#showStar").html("数据： "+data+" \n状态："+status);
});
});
});
</script>
post方法参数列表
(1.url:规定将请求发送到哪个URl，必须
（2.data:连同请求发送到服务器的数据，可选
（3.function(data,status,xhr)
(4.dataType:规定预期服务器响应的数据类型
4.load(url,data,function(response,status,xhr)) //从服务器加载数据，并把返回的数据放置到指定的元素中
<script type="text/javascript" >
$(document).ready(function(){
$("#start").click(function(){
$("#showStar").load("foot.jsp");
});
});
</script>
5.getScript(url,success(reponse,status)) //使用ajax的Http GET请求获取和执行javascript
<script type="text/javascript" >
$(document).ready(function(){
$("#start").click(function(){
$("#showStar").getScript("login.js");
});
});
</script>
getScript方法参数列表
(1.url:将请求发送到哪个url，必须
(2.success(reposonse,status)：规定请求成功时运行的函数，可选
a.request:包含请求的结果数据
b.status:参见get方法status的五种状态
6.getJSON(url,data,success(data,status,xhr)) //使用ajax的Http GET方法获取JSON数据
b.不论是js还是jquery里面的，均可以先用alert()进行调试，然后再用debug模式
c.js里面只要有一个地方错了，页面就可能显示不出来。
重点：jQuery函数汇总加载dom对象
1.$(document).ready(function(){});
2.$().ready(function(){});
3.$(function(){});
1.jquery库有完整版如jquery-1.6.js（无压缩、用于测试和学习）和jquery.min.js（压缩版、体积小、用于项目和产品）
2.使用jquery，需先在页面上引用jquery库<script type="text/javascript" src="../jquery.js"></script>
3.jquery对象与dom对象转换
dom下的取值有三种形式：id、name、tagname；
分别是：document.getElementById('id'); document.getElementsByName('name'); document.getElementsByTagName('tagName');
id选择器
a.dom对象取值 eg:var td40=document.getElementById('td_04');
b.jquery对象取值 eg:var td41=$('#td_04');
c.从dom对象转到jquery对象 eg: var td4=document.getElementById('td_04'); var $td4=$(td4);
4.引入多个js库，如prototype、Base库等，有冲突了怎么解决
4.1 如果jquery是在它们之前引入，那么“$”的所有权将归Base库使用，可以直接用Jquery对象调用，也可以创建一个“$$”给jQuery，则不存使用JQuery.noConflict()方法
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
var $$=jQuery; //创建一个$$jquery对象
$(function(){} //这里的“$”是Base对象
alert($('#box').get(0)); //这里是Base对象
alert($$('#box').width()); //这里是Jquery对象
</script>
4.2 如果jquery是在它们之后引入，那么“$”的控制权就将归jquery了。
jQuery.noConflict(); //将$符所有权剔除
var $$=jQuery;
$(function(){
alert($('#box').get(0));
alert($$('#box').width());
});
5.选择器（常用：id、.class、标签）
5.1 id选择器
var id04=$("#id_04"); //相当于document.getElementById("id_04");
5.2 class选择器
var id04=$(".id_04");
5.3 标签选择器（元素选择器）
var p1=$("p");
5.4 层次选择器
a.形式：$("parent>child"); //选择parent元素里面的集合元素 eg:$("div>p").css("background-color","red");
b.形式：$("prev+next"); 或$("prev").next(); //取prev元素后的首个next集合元素 eg:$(".one+div")或$(".one").next("div");
c.形式：$("pre~silings");或$("prev").nextAll();//取prev元素后的所有元素 eg:$("#two~div")取id为two元素后的div兄弟元素
d.形式：$("prev").siblings() //取prev元素的所有同集合元素辈元素 eg:$("#prev").siblings("div")取所有与prev后面div同辈元素，无论前后位置
5.5 过滤选择器
基本选择器
a.:first //选择第一个元素 eg:$("div:first");
b.:last //选择最后一个元素 eg:$("div:last");
c.:not(select) //去除与给定选择器匹配的元素 eg:$("input:not(.myclass)"); //选择class不是myclass的input元素
d.:even //取索引是偶数的元素 eg:$("input:even");
e.:odd //取索引是奇数的元素 eg:$("input:odd")
f.:eq(index) //取索引等于index的元素 eg:$("input:eq(1)");
g.:gt(index) //取索引大于index的元素，集合元素索引都从0开始计算
h.:lt(index) //取索引小于index的元素
i.:header //取所有标题元素
j.:animated //取当前正在执行的动画的元素
内容过滤
a.:contains(text) //取内容为text的元素
b.:empty //取不包含子元素或文本的空元素
c.:has(select) //取含有选择器匹配的元素的元素
d.:parent //取所有子元素或文本元素
可见过滤
a.:hidden //取所有不可见的元素
b.:visible //去所有可见的元素
属性过滤器
a.[attribute] //取此属性的元素 eg:$("div[id]");
b.[attribute=value] //取等于value的元素 eg:$("div[title=test"]);
c.[attribute!=value] //
d.[attribute^=value] //取值以value开始的元素
e.[attribute$=value] //取值以value结束的元素
f.[attribute*=value] //取值含有value的元素
子元素和表单属性过滤
5.6 表单选择器
a.:input //所有的<input><textarea><select>和<button>元素
b.:text //所有文本
c.:password //所有密码框
d.:radio //所有单选框
e.:checkbox //所有多选框
f.:submit //所有提交按钮
g.:image //所有图像按钮
h.:reset //所有取消按钮
i.:file //所有上传的元素
j:hidden //所有不可见的元素
DOM操作
1.查找节点和创建节点
var $li=$("ul li:eq(1)"); //取出ul中的第二个节点，然后用attr()方法来获取各种属性
$(HTML)来创建
eg：var $li_1=$("<li></li>");
var $li_2=$("<li></li>");var $parent=$("ul"); //创建<li>和<li>的父节点<ul>
$parent.append($li_1); $parent.append($li_2); //将<li>元素添加<ul>节点 也可采取链式写法：$parent.append($li_1).append($li_2);
2.插入节点
a.append() //在被选元素的后追加内容 eg:$("p").append("<b>hello</b>");
b.appendTo() //是append的逆用，将内容（必须用HTML包起来）追加到被选元素上 eg:$("b>hello</b>").appendTo("p") 结果<p><b>hello</b></p>
c.prepend() //在被选元素前追加内容 eg:$("a").prepend("<a href='#'>prepend<a>");
d.prependTo() //prepend()的逆用，将内容（必须用HTML标签包起来） eg:$("<a href='#'>prependTo</a>").prependTo("a");
e.after() //在被选元素的后面追加内容 A.after(B)参数B被追加到A的后面
f.insertAfter() //after的逆用 A.insertAfter(B) AB位置调换
g.before() //被选元素前加内容
h.insertBefore() //before的逆用
3.删除节点
a.remove() //删除被选择元素以及子元素
b.empty() //清空节点（删除子节点），不删除被选节点
4.克隆和替换
a.clone() //克隆 eg:$("p").append($("a"))
b.html() //替换被选元素的内容（不含被选元素） eg:$('#div1').html('<a>Hello World</a>');
b.replaceWith() //替换被选元素以及子元素 eg:$("#div1").replaceWidth("Hello World");
c.replaceAll() //replaceWith的逆用，必须用标签将内容包起来 eg:$('<a>Hello</a>').replaceAll('#div1');
5.包裹节点
a.wrap() //用指定的标签将被选元素包裹起来 eg:$("li").wrap("<div></div>"); //给每个a标签选择器加div层
b.wrapAll() //用指定的标签在被选元素最外侧包围一次 eg:$("li").wrap("<div></div>"); //最外围加一个div标签
c.wrapInner() //说是给指定的标签的内容加标签 --失败，与wrapAll()一样，在li元素一组结束后放一个如a标签就显现出不同了，wrapAll会将a移到最尾不加div
6.属性操作
a.attr(key); //获取元素属性值 eg:var title=$("ul li:eq(1)").attr("title"); //获取下标为1（第二个）li元素title属性值
b.attr(key,value); //设置单个元素属性 eg:$(".td_13").attr("width","80px");
c.attr({key:value,key2:value2,……}) //设置多个元素属性 eg:$(".td_13").attr({width:"23px;",height:"50px;",……});
d.attr(key,function(){//代码}) //为所有匹配的元素设置一个计算的属性值 eg:$("ul li:gt(1)").attr("title",function(){ alert("pink"); }) //操作已有的属性，与css不同
e.removeAttr(key); //移除某个属性 eg:$(".td_13").attr("title");
7.样式操作
a.attr() //获取样式 eg:var td_13 = $("td_13").attr("class");
b.attr(); //设置样式 eg:$("td_13").attr("td_13","td_04"); //更新样式
c.addClass() //添加样式 eg:$("td_17").addClass("td_17 td_13"); //可一个或多个，【验证下】
d.removeClass() //移除样式 eg:$("td_17").removeClass(); //可指定，不指定则是全部移除
e.toggleClass() //切换样式 eg:$("#td_17").toggleClass("td_13"); //本身没有这个样式则添加，有这个样式则是删除
f.hasClass() //判断样式是否存在 eg:alert($("td_17").hasClass("td_13")==$("td_17").is("td_041")); //为true 单个都是false
8.CSS-DOM操作
a.css(); //获取css属性值 eg:var td_17_color=$(".td_041").css("color"); $(".td_13").height(); //若没有设置则是默认的高度，设置了200，实际198.
b.css(key,value); //设置单个css属性 eg:$(".td_13").css("color","blue"); //设置单个css属性
c.css(key,value,……) //设置多个css属性 eg:$(".td_13").css({"color":"blue","background-color":"white",……}); //注意与attr想区别attr中key不带引号
d.css(key,function(){}) //设置function设置 eg:$(".td_10").css("color",function(){ return "red"}) //与attr不同，这里可以增加设置样式，而attr则是设置修改已经存在的属性。
e.offset() //获得元素在当前视窗的偏移量（上下） eg:$(".td_13").offset(); alert("offset="+offset+"\noffset.left="+offset.left+"\noffset_top="+offset.top);
f.position() //与offset类似 测试的结果值是一样的 eg:var position =$("ul li:gt(1)").position(); alert("position="+position+"\nposition.left="+position.left+"\nposition.top="+position.top);
g.scrollTop() scrollLeft() //当前元素滚动条距顶端/左侧的距离 eg:alert($("#td_17").scrollTop()+"\n"+$(".td_10").scrollLeft());
小结：1.height()与css()方法获得的值是有区别的，前者是不带单位的，后者是单位的
2.atr()与css()区别，前者都可以设置的，id,name,type ,title,class,style等，后者只是针对css样式,css样式中有“-”，换成驼峰式如font-size变成“fontSize”
eg:1.alert($("#tab").attr("style","width:400px;background-color:pink;align:center")); //这是针对stytle的，若是属性则样子与css一样
2.alert($("#tab").css({"padding":"5px","background-color":"#98bf21","fontSize":"48px"}));
9.设置和获取HTML文本和值
1.html() //获取页面的HTMl页面元素和文本信息，类似于js中的innerHTML属性,html不能用于xml文档
2.text() //获取页面上的text文本，类似于js和xml中的innerText属性【js效果没测出来】
3.val //类似于js中的value属性，这里对于表单元素可以使用val()方法获取或设置元素值 eg:alert($("#sex1").val="HE"); $(":text").val("HelloWorld");
10.遍历节点
a.pre() //匹配元素前紧邻的同辈元素 eg:alert($(".td_13").pre().attr("style","width:100px;height:200px;background-color:green"));
b.next() //匹配元素后紧邻的同辈元素 eg:alert($("div").next().attr("background-color","pink"))
c.siblings() //取得匹配元素前后的所有同辈元素 eg:alert($("p").siblings().css({"color":"blue","fontSize":"48px"}));
d.children() //用来取得匹配元素的所有子元素，不考虑后代元素 eg:alert($("p").children().css("color","red"));
e.closest() //用来取得最近的匹配元素
f.find() //在被操作的元素内部查找元素 eg:var $find = $("div").find(".td_13"); alert($find.html());
g.filter() //在被操作的元素自身找匹配的元素 eg:var $filter =$("div").filter(".td_13"); alert($filter.html());
h.prev() //当前元素的前一个元素 eg:$(this).prev().css("background","blue"); //当存在两个或两个以上元素时，匹配当前元素的前一个元素
11.事件、效果和动画
1.事件绑定 bind[解绑 unbind]、on[解绑 off]、delegate[undelegate]、click [解绑 unbind] 四种bind与click可行，另外的on、delegate无效
形如：$("a").bind('click',function(){alert("ok");}); //事件绑定 点击a标签上的字出现提示框
$("p").unbind("click",function(){alert("ok pp");}); //事件解绑
2.各类事件
ready() //文档就绪时的事件 a.$(document).ready(function(){});b.$().ready(function(){});c.$(function(){})
focus() //聚焦
blur() //失去焦点，这一组主要是针对input类型而言的
change() //当输入域发生改变时触发
click() //当点击时触发
dblclick() //双击按钮时触发
error() //就是挽救的方法，如图片加载不了替换成文本 eg：$("img").error(function(){ $("img").replaceWith("<p>服务器维护中……</p>");});
keyup() //针对input类型的，当按下复位的时候触发
keydown() //针对input类型的，当按下的时候触发
keypress() //按键时触发
mousedown() //鼠标点击时触发
mouseenter() //鼠标划过时触发
mooseleave() //鼠标离开的时触发
mousemove() //鼠标在作用范围内移动时触发
moueseout() //鼠标离开时触发，经常与mouseover()一起用
mouseover() //鼠标移至元素上时触发
mouseup() //鼠标松开时触发
resize() //调整浏览器窗口大小 实践没看到效果
scroll() //滚动时触发 样式voerflow:scroll
select() //选择操作时触发
submit(0 //表单提交事件
load() //加载事件，但在火狐和IE，如果有缓存可就不允许加载了
3.效果
a.show() //显示
b.hide() //隐藏
c.toggle(speed,callback,switch) //元素可见和隐藏设置有两种 1.speed（单位毫秒，默认不写的0）；2.switch（true显示，false隐藏）
d.slideUp(speed,callback) //元素隐藏 eg:$("#td_13").slidUp(2000,setDateTime()); function setDateTime(){var Date = new Date() alert(date);}
e.slideDown(speed,callback) //元素显示
f.slideToggle(speed,callback) //上下滑动切换可见与隐藏
g.fadeIn(speed,callback) //元素淡入即慢慢出现，显示
h.fadeOut(speed,callback) //元素淡出即慢慢消失，隐藏
i.fadeTo(speed,opacity,callback) //元素可见度减弱至opacity eg:$("#typing").fadeTo(3000,0.1,setDateTime());
动画：animate(style,speed,easing,callback) //eg:$("p:eq(0)").animate({textIndent:"20px"},3000,setDateTime()); easing（函数）有swing和linear报错
stop(stopAll,stopEnd); stop(true)停止所有动画，stop(true,true)在当前动画执行完后停止动画
HTMl元素
padding：是自身体积变大，撑大了
margin:是相对于一个位置的距离
letterSpacing:字符间距（字母即是单个字母，中文即是文字），正值增大，负值缩小 //letterSpacing与wordSpacing实践没效果
wordSpacing:拉开一个词的距离
lineHeight：行高
textIndent:首行缩进
总结Jquer属性操作：
a.addClass(); //向匹配的元素添加class样式，可添加多个
b.attr() //设置匹配元素的属性和值
c.hasClass() //检查是否拥有指定的类
d.html() //设置或返回匹配元素的HTML内容，与dom中的innerHTML一样的
e.removeAttr() //从匹配的元素中移除指定的属性
f.removeClass()//从匹配的元素中移除指定的class样式，没有指定则是全部移除
g.toggleClass()//从匹配的元素中添加或移除class样式，没有则是添加，有则是删除
h.val() //从匹配的元素设置或返回指定的内容
i.prop() //检查是否存在该属性，如判断是否存在disabled，有则返回true，否则false
12.表单和表格
13.ajax
浏览器端：参数
头信息(请求头和请求头信息) 内容长度、内容类型、时间、服务器、能接受的编码、能接受的语言、cookie等
响应
Cookies 名称JSEESSIONID,
ajax学习（一）
ajax (Asynchronous JavaScript and XML 异步的javascript和xml)
ajax是一种快速创建动态的网页技术，通过在后台与服务器进行少量的交换数据，在不用重载整个页面的情况下对页面的一部分进行更新。
jquery对ajax作了封装，兼容各大浏览器，其中$.ajax()是最低层的方法，第2层是$.load()、$.get()、$.post()，并且get和post方法是全局函数，第
三层是$.getScript()和$.getJson()方法
常用方法学习
1.$.ajax() //执行异步ajax请求
<script type="text/javascript" >
$(document).ready(function(){
$("#start").click(function(){
$.ajax({url:"foot.jsp",success:function(result){
$("#showStar").html(result);
}});
});
});
</script>
<p><button id="start">Start Animation</button>
<table background="pink">
<tr id="showStar"><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
ajax方法常用参数列表
（1.url：String类型的，用于发送请求的地址的，默认是当前页
（2.type：String类型的，请求方式(GET或POST)，默认是Get
（3.Data:Object和String类型，规定要发送到服务器的数据。Get请求中将附加在URL后，如果不是字符串将自动转换为字符串格式。对象必须是key—value格式
（4.dataType:String类型，预期服务器响应的数据类型。如果不指定，Jquery将自动根据Http包的Mime信息返回responseXML和responseText，作为回调
函数传递。可用的类型有XML/html/script/json/text
（5.success(result,status,xhr):function 请求成功时运行的函数，有两个参数，a.由服务器返回的dataType指定的数据;b.描述状态的字符串。
（6.Async:Boolean类型，是否异步提交，为true时异步，false时同步提交。
（7.Complete:function,请求完成后调用的回调函数（成功或失败时均调用），参数是XMLHttpRequest对象和一个描述成功请求类型的字符串。
（8.Error(xhr,status,error):function,请求失败时调用的函数，有三个参数，a.XMLHttpRequest对象;b.错误信息textStatus;c.捕获的错误errorThrown对象。
2.$.get(url,data,function(data,status,xhr),dataType) //使用Http Get请求从服务器加载数据
<script type="text/javascript" >
$(document).ready(function(){
$("#start").click(function(){
$.get("foot.jsp",function(data,status){
$("#showStar").html("数据： "+data+" \n状态："+status);
});
});
});
</script>
get方法参数列表
（1.url：请求的路径，必须。
（2.data:规定连同请求发送到服务器的数据，可选
（3.function(data,status,xhr)可选，规定定请求成功时运行的函数
a.data：请求的结果数据
b.status:请求的状态(success、notmodified、error、timeout、parsererror)
c.xhr:XMLHtttpRequest对象
（4.dataType:规定预期的服务器响应的数据类型，可选，Jquery能智能判断属于xml、html、text、script、json、jsonp
3.post(url,data,function(data,status,xhr),dataType)
<script type="text/javascript" >
$(document).ready(function(){
$("#start").click(function(){
$.post("../manager/login.jsp",
function(data,status){
$("#showStar").html("数据： "+data+" \n状态："+status);
});
});
});
</script>
post方法参数列表
(1.url:规定将请求发送到哪个URl，必须
（2.data:连同请求发送到服务器的数据，可选
（3.function(data,status,xhr)
(4.dataType:规定预期服务器响应的数据类型
4.load(url,data,function(response,status,xhr)) //从服务器加载数据，并把返回的数据放置到指定的元素中
<script type="text/javascript" >
$(document).ready(function(){
$("#start").click(function(){
$("#showStar").load("foot.jsp");
});
});
</script>
5.getScript(url,success(reponse,status)) //使用ajax的Http GET请求获取和执行javascript
<script type="text/javascript" >
$(document).ready(function(){
$("#start").click(function(){
$("#showStar").getScript("login.js");
});
});
</script>
getScript方法参数列表
(1.url:将请求发送到哪个url，必须
(2.success(reposonse,status)：规定请求成功时运行的函数，可选
a.request:包含请求的结果数据
b.status:参见get方法status的五种状态
6.getJSON(url,data,success(data,status,xhr)) //使用ajax的Http GET方法获取JSON数据
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
