JQuery的使用指南

JQuery的功能：1、html元素的选取 2、html元素的操作 3、Css操作 4、HTML事件函数 5、javaScript特效和动画 6、Html Dom 的遍历和修改

  7、Ajax  8、utilities

javascript与JQuery比较：

                                                 javaScript                                                                                                JQuery

获取对象的方式：var obj=document.getElementById("id");                                                        $("选择器")/jQuery("选择器")

页面加载:              window.οnlοad=function(){}//在一个页面中只能使用一次                              $(function(){...})/$(document).ready(function(){});//在一个页面中可以使用多次

派发事件:             dom对象.οnclick=function(){....}                                                                           $("选择器").click(function(){...});                 (focus/blur/submit/change/click用法相似)

DOM&&Jquery  

dom对象和jquery对象之间的转换
dom对象===>jquery对象
$(dom对象)
jquery对象===>dom对象
方式1:
jquery对象[index]
方式2:
jquery对象.get(index)

jquery中效果:
隐藏或展示
show(毫秒数) hide(毫秒数)
滑入或滑出
slideDown(毫秒数):向下滑入
slideUp(毫秒数):向上滑出
淡入或淡出
fadeIn(int):淡入
fadeOut(int):淡出

Jquery选择器：
基本选择器★
$("#id值")  $(".class值")  $("标签名")  

了解:$("*")
理解:获取多个选择器 用逗号隔开
$("#id值,.class值")
层次选择器 ★
a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟(大弟弟)
a~b:a的所有弟弟
基本过滤选择器:★
:frist 第一个
:last 最后一个
:odd  索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <
内容过滤:
:has("选择器"):包含指定选择器的元素
可见过滤:
:hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
:visible 
属性过滤器:★
[属性名]
[属性名="值"]
表单过滤:
:input  所有的表单子标签  input select textarea button

表单对象属性过滤选择器
:enabled   可用的
:disabled  不可用
:checked 选中的(针对于单选框和复选框的)
:selected 选中的(针对于下拉选)
Jquery对属性的操作：

attr():设置或者获取元素的属性
方式1:获取
attr("属性名称")
方式2:设置一个属性
attr("属性名称","值");
方式3:设置多个属性  json
attr({
"属性1":"值1",
"属性2":"值2"
})
removeAttr("属性名称"):移除指定属性

//添加class属性的时候 
// attr("class","值");
addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
removeClass("指定的样式值");

版本号>1.6推荐使用prop设置属性。。。。

Jquery对css的操作

css():获取或者设置css样式
方式1:获取
css("属性名")
方式2:设置一个属性
css("属性名","值")
方式3:设置多个
css({
"属性1":"值1",
"属性2":"值2"
});
获取元素的尺寸:
width()
height()

Jquery文档操作

内部插入
a.append(c):将c插入到a的内部(标签体)后面
a.prepend(c):将c插入到a的内部的前面

appendTo
prependTo
外部插入
a.after(c):将c放到a的后面
a.before(c):将c放到a的前面

a.insertAfter(c)
a.insertBefore(c)
删除
empty() 清空元素
remove() 删除元素

关于Jquery对DOM的进行筛选判断，样式上的操作，事件上的操作，样式上的操作持续更新中..........

案例一：使用JQuery完成广告弹出效果

案例二：使用JQuery完成表格的隔行换色

案例三：使用JQuery完成复选框的全选和全不选

案例四：使用JQuery完成省市联动

案例五：使用JQuery完成下拉列表的左右选择

遍历数组

数组.each(function(){});
$.each(遍历数组,function(){});

注意:
each的function中可以加两个参数 index和dom
index是当前遍历的索引值
dom指代的是当前遍历的dom对象(开发中一般使用this即可)

设置或者获取value属性
jquery对象.val():获取
jquery对象.val("...."):设置

设置获取获取标签体的内容 

html()
text()

xxxxx():获取标签体的内容
xxxxx("....."):设置标签体的内容

设置的区别:
html:会把字符串解析
text:只做为普通的字符串
获取的区别:
html:获取的html源码
text:获取只是页面展示的内容