JQuery基本的知识

-----------------------JQuery基本的知识------------------------------

JQuery基本选择器----选择出来是一个集合，既是数组

$("#id")

$(".class")

$("p")

$("span")

$("*")

$("div ul li")

$("div,ul,li")

$().ready(function(){});等价于window.onload=function(){};

$().click(function(){});等价于obj1.onclick=function(){};

$().css("属性","值");等价于obj1.style.属性="值";

$().removeAttr("style");等价于obj1.style.属性="none";

$("div").attr("title")可以获取div元素title属性值

$("div").empty()清除div下的所有元素

JQuery层次选择器---针对性选择（父子元素）

$("div span")选择div元素下面所有span子元素，包括后代元素

$("div>span")选择div元素下面所有span子元素，不包括后代元素---注意是层次（二级层）

$("#one~div")id为one的元素之后所有同辈div元素

$(".one+div")class为one的下一个div兄弟元素。即紧接在.one元素后的div元素(平行层)

JQuery基本过滤器---对自己过滤

$("div:first")第一个div元素

$("div:last")最后一个div元素

$("div:not(.one)")不是.one的所有div元素

$("div:even")偶数div元素

$("div:odd")奇数div元素

$("div:eq(1)")索引是1的元素。。。索引是从0开始

$("div:gt(3)")索引大于3的div

$("div:lt(3)")小于3

$(":header")网页中所有<h1>、<h2>、<h3>.。。相当于$("*:header")

$("div:animated")选取正在执行动画的div元素

JQuery内容过滤选择器

$("div:contains('你好')")选出文本中有“你好”的div元素

$("div:empty")不含子元素（包括文本元素）的子元素

$("div:has(p)")含p元素的div元素

$("div:parent")选取拥有子元素（包括文本元素）div

JQuery属性过滤选择器

第一种

$("div[id]")拥有属性id

$("div[title=other]")属性title等于other的div元素-----border=2

$("div[title!=other]")属性title不等于other的div元素----border!=2

$("div[title^=other]")属性title以other开始的div元素----title="张三*"

$("div[title$=other]")属性title以other结束的div元素-----title="*张三"

$("div[title*=other]")属性title含有other的div元素

$("div[id][title=other]")拥有属性id，且属性title等于other的div元素

第二种

var a=$().attr(),if(a=="other")...

JQuery子元素过滤器

$("tr td:nth-child(index/even/odd)")

$("tr td:first-child")

$("tr td:last-child")

$("tr td:only-child")--------找只有一个子元素tr元素

JQuery表单选择器

$(":input")获取所有input/textarea/selsect

$(":password")

$(":text")

$(":radio")

$(":checkbox")

$(":submit")

$(":reset")

$(":file")

$(":hidden")

$(":reset")

$(":button")

$(":image")所有图像域

JQuery表单对象属性选择器

$(":enabled")表单中

可用元素

$(":disabled")表单中不可用元素

$(":checked")

$(":selected")

JQuery插入元素节点

append()内部追加

appendTo()内部追加到

prepend()内部前面追加

prependTo()内部前面追加到

after()外部后面插入

before()外部前面插入

--------------------------------AJAX-----------------------------

$.getJSON()

$.getScript()

load()方法可以很快地加载数据到页面中，但有时需要对获取的数据进行处理，如果将用load()方法进行遍历，也可以进行数据的处理，但这样获取的内容必须先插入页面中，然后才能进行，因此执行的效率不高。

$.get()

$.post()

$.get()和$.post()向服务器传递参数时，其中的参数是通过名称属性逐个搜索输入字段的方式进行传输的，如果表单的输入字段过多，这种方式就比较麻烦，而且不利于拓展。为了解决这个问题，Jquery引入了serializa()方法，该方法可以简化参数传值的方式。

$.ajax()除了可以使用全局函数load()get()post()实现页面的异步调用和与服务器交互数据外，在JQuery中，还有一个功能更为强悍的最底层的方法$.ajax(),该方法不仅可以很方便地实现上述三个全局函数完成的功能，还更多地关注实现过程中的细节。下面我们详细介绍该方法。

小结：

pre+next等价于.next()

pre~siblings等价于nextAll()

first()或:first

last()或:last

html()用于获取元素的HTML内容，只用于XHTML，不用于XML

text()用于获取元素的文本内容，即可用XHTML，也可用于XML

event.stopProPagation();//阻止冒泡或通过return false来实现

-------------函数绑定---------------------------------------------

只绑定一个函数时 bind("函数名称",函数fn)

绑定好多函数的时 bind({函数1名称：函数1,函数2名称：函数2})

unbind([type],[fn])没有参数时,意思为移除全部绑定 例如:$(":input").unbind()

----------------算窗口的长宽和滚动条的TOP与LEFT--------------------

$(window).width()窗口的宽

$(window).height()窗口的长

$(window).scrollLeft()滚动条的LEFT

$(window).scrollTop()滚动条的TOP

$("div").width()div的宽

$("div").height()div的长

------------------动画效果综述----------------------------------------

各种动画方法说明:

show()与hide()

fadeIn()与fadeOut()

slideUp()与slideDown()

fadeTo()可以代替fadeIn()与fadeOut()

toggle()可以代替show()与hide()

slideToggle()可以代替slideUp()与slideDown()，用法也一样

animate()方法，自定义元素的动画效果，可以实现以上6种动画效果。 同时，还可以用动画的效果，改变其它的元素的属性，该方法是上述6种方法的核心

1）animate()方法代替hide()方法，代码如下：

$("页面元素").animate({height:"

hide",width:"hide",opacity:"hide"},600);

等价于

$("页面元素").hide(600);

2）animate()方法代替fadeOut()方法，代码如下：

$("页面元素").animate({opacity:"hide"},600);

等价于

$("页面元素").fadeOut(600);

3）animate()方法代替slideUp()方法，代码如下：

$("页面元素").animate({height:"hide"},600);

等价于

$("页面元素").slideUp(600);

4）animate()方法代替fadeTo()方法，代码如下：

$("页面元素").animate({opacity:"0.8"},600);

等价于

$("页面元素").fadeTo(600);

stop()停止

delay()延时

-------------------------JQuery常用插件----------------------------------------

验证插件validate---------------http://plugins.jquery.com/project/validate

表单插件form-------------------http://plugins.jquery.com/project/form

Cookie插件cookie---------------http://plugins.jquery.com/project/cookie

搜索插件AutoComplete---------------http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip

图片灯箱插件notesforlightbox--------http://www.notesfor.net/file.axd?file=NFLightBox.zip

右键菜单插件contextmenu---------------http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js

图片放大镜插件jqzoon---------------http://www.mind-projects.it/project/jqzoom/archives/jqzoom_ev1.0.1.zip

自定义JQuery插件--------学习相应的开发Jquery的相关格式。。。

uploadify插件实现文件上传功能---------------http://www.uploadify.com/download/

---------------------切换效果----------------------------

toggle(fn1,fn2,fn3,fn4);按顺序依次调用方法。。

hover(fn1,fn2)相当于mouseenter与mouseleave进行替换。。

one()方法绑定的函数只执行一次就失效了。。。

解除绑定用unbind()

toggleClass()方法切换Css

$(object).each(function(){this或$(this)})

$.each(object,function(index){})

var $(obj1).val()=$(obj2).is("checked|selected")?"":"";