一、使用jQuery的步骤：
1、在html文档中的head节点中添加jQuery的引用代码如下：
<script type="text/javascript" src="jQuery的函数库文件路径"></script>
2、把jQuery扩展包中的三个文件拷到Dreamweaver安装路径的指定文件夹中，这是为了在编写代码时获得提示。
3、查看jQuery的中文帮助文档进行编程。
4、如果希望页面加载完之后就可以把jQuery代码加载进来则需要在页面的<head>中添加如下代码：
<script type="text/javascript">
$(function(){
..... //把所有的jQuery代码方法这里
}
1、在html文档中的head节点中添加jQuery的引用代码如下：
<script type="text/javascript" src="jQuery的函数库文件路径"></script>
2、把jQuery扩展包中的三个文件拷到Dreamweaver安装路径的指定文件夹中，这是为了在编写代码时获得提示。
3、查看jQuery的中文帮助文档进行编程。
4、如果希望页面加载完之后就可以把jQuery代码加载进来则需要在页面的<head>中添加如下代码：
<script type="text/javascript">
$(function(){
..... //把所有的jQuery代码方法这里
}
)
</script>
</script>
二、jQuery对象和DOM对象的转换
1、假如obj为一个DOM对象，则$(obj)就是对应的jQuery对象。
2、$("p").get(0)则可以把jQuery对象转换为对应的DOM对象，其中get中的数字代表把jQuery对象集中的第几个对象转换成对应的DOM对象。
1、假如obj为一个DOM对象，则$(obj)就是对应的jQuery对象。
2、$("p").get(0)则可以把jQuery对象转换为对应的DOM对象，其中get中的数字代表把jQuery对象集中的第几个对象转换成对应的DOM对象。
三、jQuery选择器
1、元素选择器，利用html中的元素来创建jQuery对象
(1)标签选择器 $("p") 获得所有<p>元素的jQuery对象
(2)id选择器 $("#demo") 获得ID="demo"的jQuery对象
(3)类样式选择器 $(".intro") 获得class="intro"的jQuery对象
(4)层级选择器 $(".demo .intro") 获得类样式demo下的所有类样式为intro的jQuery对象；$(".demo>.intro") 获得获得类样式demo下的子标签中类样式为intro的jQuery对象，注意只是包括子标签。
2、属性选择器，通过标签的相关属性选择元素
(1)$("form[name='regForm']") 获得name为regForm的form表单元素
(2)$("form[name='regForm'] input[name='username']") 获得所有name为regForm的form表单元素下的name='username'的所有input元素
(3)$("form[name='regForm']>input[name='username']")获得所有name为regForm的form表单元素的子元素中name='username'的input元素
3、筛选
(1)children(exp) 匹配的子元素集合 $("#demo").children("tr") 获得id为demo的元素的子元素中的所有<tr>元素集合。
(2)find(exp) 匹配的后代元素集合 $("#demo").find("tr") 获得id为demo的元素的后代元素中的所有<tr>元素集合。
(3)parent(exp) 匹配的父元素 $("#demo").parent() 获得id为demo的元素的父元素。
(4)parents(exp) 匹配的上级元素集合 $("#demo").parents("tr") 获得id为demo的元素的父代元素中的所有<tr>元素集合。
(5)siblings(exp) 匹配的同辈元素集合 $("#demo").siblings("tr") 获得id为demo的元素的兄弟元素中的所有<tr>元素集合。
1、元素选择器，利用html中的元素来创建jQuery对象
(1)标签选择器 $("p") 获得所有<p>元素的jQuery对象
(2)id选择器 $("#demo") 获得ID="demo"的jQuery对象
(3)类样式选择器 $(".intro") 获得class="intro"的jQuery对象
(4)层级选择器 $(".demo .intro") 获得类样式demo下的所有类样式为intro的jQuery对象；$(".demo>.intro") 获得获得类样式demo下的子标签中类样式为intro的jQuery对象，注意只是包括子标签。
2、属性选择器，通过标签的相关属性选择元素
(1)$("form[name='regForm']") 获得name为regForm的form表单元素
(2)$("form[name='regForm'] input[name='username']") 获得所有name为regForm的form表单元素下的name='username'的所有input元素
(3)$("form[name='regForm']>input[name='username']")获得所有name为regForm的form表单元素的子元素中name='username'的input元素
3、筛选
(1)children(exp) 匹配的子元素集合 $("#demo").children("tr") 获得id为demo的元素的子元素中的所有<tr>元素集合。
(2)find(exp) 匹配的后代元素集合 $("#demo").find("tr") 获得id为demo的元素的后代元素中的所有<tr>元素集合。
(3)parent(exp) 匹配的父元素 $("#demo").parent() 获得id为demo的元素的父元素。
(4)parents(exp) 匹配的上级元素集合 $("#demo").parents("tr") 获得id为demo的元素的父代元素中的所有<tr>元素集合。
(5)siblings(exp) 匹配的同辈元素集合 $("#demo").siblings("tr") 获得id为demo的元素的兄弟元素中的所有<tr>元素集合。
四、操作标签属性
1、获取标签属性 attr(name) 例如: $("#demo").attr("href")
2、修改标签属性 attr(key,value) 例如： $("#demo").attr("href","http://www.baidu.com")
3、删除标签属性 removeAttr(name) 例如： $("#demo").removeAttr("href")
警告：1.6+的jQuery要用prop代替attr，否则会有兼容性问题 。
1、获取标签属性 attr(name) 例如: $("#demo").attr("href")
2、修改标签属性 attr(key,value) 例如： $("#demo").attr("href","http://www.baidu.com")
3、删除标签属性 removeAttr(name) 例如： $("#demo").removeAttr("href")
警告：1.6+的jQuery要用prop代替attr，否则会有兼容性问题 。
五、操作CSS
1、获取样式 css(name) 例如：$("#demo").css("background-color") id为demo的元素的css样式中的background-color值
2、修改单个样式 css(key,value) 例如：$("#demo").css("background-color","#0c0") 把id为demo的元素的css样式中的background-color值更改为#0c0 。
3、修改多个样式
(1)$("#demo").css("background-color","#0c0").css("height","100px")
(2)使用json对象 {key1:value1,key2:value2} 例如css({key1:value1,key2:value2,.....})
1、获取样式 css(name) 例如：$("#demo").css("background-color") id为demo的元素的css样式中的background-color值
2、修改单个样式 css(key,value) 例如：$("#demo").css("background-color","#0c0") 把id为demo的元素的css样式中的background-color值更改为#0c0 。
3、修改多个样式
(1)$("#demo").css("background-color","#0c0").css("height","100px")
(2)使用json对象 {key1:value1,key2:value2} 例如css({key1:value1,key2:value2,.....})
六、操作类样式
1、添加类样式 addClass(class) 例如有两个类样式current1和current2 ，如果需要为某个元素增加这两个类样式 则可以使用以下语句$("#demo").addClass("current1 current2")
2、移除类样式 removeClass(class) 如果需要删除类样式，则可以使用$("#demo").removeClass("current1 current2")
七、内容操作
1、获取html内容 $("#demo").html() 这样就可以获取指定元素中的html代码，例如<p>....</p>
2、设置html内容 $("#demo").html(val) 这样就可以设定指定元素中的html代码，例如把上述的<p>....</p>修改为<h1>....</h1>
$("#demo").html("<h1>....</h1>")
3、获取表单的值 $("#username").val() 获取id=username的文本框的值
4、设置表单的值 $("#username").val(val) 把id=username的文本框的值设置为val
5、追加内容 $("#demo").append("content"),该方法与html()方法类似，不过前者是追加内容，就是在原来的内容后面增加内容，后者是覆盖之前的内容。
6、移除节点 $("#demo").remove() 该方法是把元素$("#demo")删除 。
1、获取html内容 $("#demo").html() 这样就可以获取指定元素中的html代码，例如<p>....</p>
2、设置html内容 $("#demo").html(val) 这样就可以设定指定元素中的html代码，例如把上述的<p>....</p>修改为<h1>....</h1>
$("#demo").html("<h1>....</h1>")
3、获取表单的值 $("#username").val() 获取id=username的文本框的值
4、设置表单的值 $("#username").val(val) 把id=username的文本框的值设置为val
5、追加内容 $("#demo").append("content"),该方法与html()方法类似，不过前者是追加内容，就是在原来的内容后面增加内容，后者是覆盖之前的内容。
6、移除节点 $("#demo").remove() 该方法是把元素$("#demo")删除 。
八、事件处理
1、绑定事件 $("#demo").bind(type,fn) 该方法的作用是可以为指定元素绑定指定类型的事件，其中的type为事件类型，例如click表示单击事件，而fn代表事件触发后执行的函数。
2、触发事件 $("#demo").trigger(type) 该方法是触发指定元素执行指定事件，例如有个表单id为regForm，则$("#regForm").trigger("submit") 就是触发表单提交事件；也可以调用提交函数，例如：$("#regForm").submit(),效果一样。
3、事件委派 $("#demo").live(type,fn) 该方法的作用和bind的作用类似，但是bind方法只能为当前已经存在的元素添加事件，而live可以为动态生成的元素添加事件。例如：
live("click",function(){......});
1、绑定事件 $("#demo").bind(type,fn) 该方法的作用是可以为指定元素绑定指定类型的事件，其中的type为事件类型，例如click表示单击事件，而fn代表事件触发后执行的函数。
2、触发事件 $("#demo").trigger(type) 该方法是触发指定元素执行指定事件，例如有个表单id为regForm，则$("#regForm").trigger("submit") 就是触发表单提交事件；也可以调用提交函数，例如：$("#regForm").submit(),效果一样。
3、事件委派 $("#demo").live(type,fn) 该方法的作用和bind的作用类似，但是bind方法只能为当前已经存在的元素添加事件，而live可以为动态生成的元素添加事件。例如：
live("click",function(){......});
九、制作动画效果
1、显示隐藏效果
(1)显示效果 show(speed[,callback]) 该方法可以使原本隐藏的元素显示出来，可以带参数，也可以不带。其中speed参数是动画时长，以毫秒为单位，也可以使用预定义好的参数：slow、fast、normal（需要加""号） 。callback为动画结束后执行的事件 。
(2)隐藏效果 hide(speed[,callback]) 该方法是把原本显示的元素隐藏起来，使用方法和show类似。
2、滑动效果
(1)向上滑动 slideUp(speed[,callback]) 该方法是把元素从显示状态变成隐藏状态，效果为向上滑动，所以元素原本需为显示状态
(2)向下滑动 slideDown(speed[,callback]) 该方法是把元素从隐藏状态变成显示状态，效果为向下滑动，所以元素原本需为隐藏状态
3、淡入淡出效果
(1)淡入效果 fadeIn(speed[,callback]) 该方法修改的是元素的透明度和显示状态，上述的是修改元素尺寸，其它类似。
(2)淡出效果 fadeOut(speed[,callback]) 同上 。
4、自定义效果 animate(params[,duration][,callback]) 其中params参数代表元素最终效果，使用json对象。duration为动画时长，单位毫秒，callback为动画结束后执行的事件。
1、显示隐藏效果
(1)显示效果 show(speed[,callback]) 该方法可以使原本隐藏的元素显示出来，可以带参数，也可以不带。其中speed参数是动画时长，以毫秒为单位，也可以使用预定义好的参数：slow、fast、normal（需要加""号） 。callback为动画结束后执行的事件 。
(2)隐藏效果 hide(speed[,callback]) 该方法是把原本显示的元素隐藏起来，使用方法和show类似。
2、滑动效果
(1)向上滑动 slideUp(speed[,callback]) 该方法是把元素从显示状态变成隐藏状态，效果为向上滑动，所以元素原本需为显示状态
(2)向下滑动 slideDown(speed[,callback]) 该方法是把元素从隐藏状态变成显示状态，效果为向下滑动，所以元素原本需为隐藏状态
3、淡入淡出效果
(1)淡入效果 fadeIn(speed[,callback]) 该方法修改的是元素的透明度和显示状态，上述的是修改元素尺寸，其它类似。
(2)淡出效果 fadeOut(speed[,callback]) 同上 。
4、自定义效果 animate(params[,duration][,callback]) 其中params参数代表元素最终效果，使用json对象。duration为动画时长，单位毫秒，callback为动画结束后执行的事件。
十、jQuery实现Ajax
1、GET请求 $.get(url[,data][,callback]) 其中url为请求的地址，data为json类型的数据{username:username,password:password} 注意使用{}和内容不需要双引号，是指传递的参数，callback指回调函数
2、POST请求 $.post(url[,data][,callback]) ,使用方法与上述的类似。
1、GET请求 $.get(url[,data][,callback]) 其中url为请求的地址，data为json类型的数据{username:username,password:password} 注意使用{}和内容不需要双引号，是指传递的参数，callback指回调函数
2、POST请求 $.post(url[,data][,callback]) ,使用方法与上述的类似。
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
