Jqeury

约定：jQuery对象一般在前面加一个$

jquery对象是一个数组对象：

jQuery对象转换成dom对象：

1.可以通过[index]方式获取dom对象,

2.也可以使用jquery的get(index)方法获取dom元素

example:

第一种：

var $td=$("td");

var domtd=$td[0];

第二种：

var $td=$("td");

var domtd=$td.get(0);

dom对象也可以转换为jquery对象:

方法一：使用$（）包装一下即可

 example:

 var domelement=document.getElementById("ccc");

 vat $element=$(documentelement);

jquery选择器：

基本选择器：

1. $("#idname") 相当于；docuement.getElementById("idname"); 当含有特殊字符时可用'\\'进行转义:

example:id="foo:ll"   #foo\\:   id="foo[ll]"  #foo\\[ll\\]

2. $("tagname")   相当于：document.getElementsByTagName("tagname");

3. $(".clasName")  相当于: document.getElementsByClassName("className");

4. $("*")   选中所有元素

层级选择器：

$("parent allsun")选取parent元素的所有后代元素,包括子孙

//$("#boot div").css("background-color","#0F0");

$("parent > directchild") 选取所有parent节点的直接孩子节点，不包括孙子等节点

//$("body > div").css("background-color","#0F0");

$("node + nextsibling")选取node的同级的下一个节点（必须相邻)

//$("#sun_3 + div").css("background-color","#0F0");

$("node ~ sibling")选取所有node节点后面的所有兄弟节点，不包括孙子节点

//$("#sun_2 ~ div").css("background-color","#0F0");

//选取node节点的所有兄弟节点 补分前后：方法siblings()

$("#sun_2 ~ div,#sun_1").css("background-color","#F00");

基本过滤选择器：

:first  获取第一个元素

:last   获取最后一个元素

:not(selecttor)

:even

:odd

:eq(index)

:gt(index)

:lt(index)

:header  选择标题元素

:animated 选取正在执行动画的所有元素

:contains(text)选择包含指定文本的元素

:empty 选择没有子元素的元素

 :parent 选择有子元素的元素

 :has(selector)匹配含有选择器包含元素的元素

 :hidden

 :visible

属性选择器：attribute:标签名[属性]

[attribute]选择包含指定属性的元素

[attribute=value]

[attribute!=value] 

[attribute^=value]

[attribute$=value]

[attribute*=value]

[attribute1][attribute2][attribute3]符合选择器，必须同时满足所有条件

子元素选择器（必须有父元素), 返回的是选中的子元素

:nth-child(index) 这里元素是从1开始的，index可以使用:odd,even,3n.3n+1  等形式；匹配其父元素下的第n   个元素

:first-child为每个父元素匹配第一个子元素

:last-child  为每个子元素匹配最后一个元素

:only-child   如果某个元素时父元素的唯一元素将会匹配

表单元素：

:input  匹配所有的input元素

:text  匹配所有的文本框

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

example:

$(:text)

表单对象属性：

:enabled 匹配所有可用的元素

:disabled 匹配所有不可用的元素

:checked 匹配所有选中的复选框元素

:selected 匹配所有选中的option

    example:$("input:checked")

操作文本节点：通过text()方法

操作属性：通过attr()方法

创建节点：使用jquery  的工厂函数$()

插入节点（内部插入）：

append()     $(A).append(B)   A把B加为A的子节点( 加载尾部）

appendTo()  $(A).appendTo(B) 将A 被B加为 B 的子节点（加载尾部）

prepend()   $(A).prepend(B)        A把B加为A的自己的子节点（加载第一个子节点的前面）

prependTo()  $(A).prependTo(B)    A被Ｂ加为Ｂ的子节点（加载第一个子节点的前面）

外部插入（同级插入):

insertAfter() $(A).insertAfter(B) A 插入到B的后面

after()      $(A).after(B)   A的后面有Ｂ

insertBefore() $(A).insertBefore(B) A 插入到B的前面

before()     $(A).before(B)   A的前面有Ｂ

删除元素：

remove()

empty()

detach()

复制元素：

clone()只复制节点，不复制绑定的事件和数据；clone(true)  处理复制节点外也复制绑定的事件和数据，（如果节点有id属性注意）

替换： replaceWith()  如果替换双方都是已存在的，那么被替换过程时移动替换而不是复制替换

     replaceAll()

包裹元素：

wrap() 一个一个的包（将所有匹配的元素用指定的标签一个一个的包起来 )

wrapall()全部包起来（只是用一个标签将所有匹配的元素包起来）

wrapInner()将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

样式操作：

class属于节点的一个属性所以可以使用attr（）方法设置

addClass()

hasClass()

removeClass()

toggleClass() 切换样式

 css()获取和设置 css 样式 （opacity  透明度）

尺寸：

height()获取和设置元素的高度

width()

innerHeight() 获取元素的内部高度

innerWidth() 获取元素的内部宽度

位置：

offset().left  offset().top 获取元素在当前视口的相对偏移

position().left  position.top 获取元素相对于父窗口的位移

scrollTop() 获取和设置匹配元素相对于滚动条顶部的位移

scrollLeft() 获取和设置匹配元素相对于滚动条左侧的位移

事件：

不绑定的写法：

$(".head").click(function(){});

is()方法用来判定某个jquery对象是否符合给定的选择器 example:$(".head").is(":hidden");

事件绑定：bind()  example:$(".head").bind("click",function(){});

模拟悬停事件：hover(function(){},function(){})  当鼠标移到元素上时触发第一个事件，离开时触发另第二个事件

toggle(function1,function2,function3,...)循环执行函数

事件冒泡：内部元素触发的事件会一层一层的向顶层元素冒，阻止事件冒泡函数末尾加上： return false;

 事件对象的属性：

event.pageX

event.pageY 鼠标相对于页面的坐标

移除事件：unbind() example:$("#bj").unbind("click");

one() 只为某个元素添加一次事件响应，事件处理函数只会被处理一次；

example:

$("#bj").one("click",function(){});

动画：

show()显示

hide()隐藏 方法中可以传入毫秒数

slideDown()

slideUp()  上下的隐藏可以传入毫秒数

fadeIn()

fadeOut()  只改变透明度, 可以传入毫秒数

toggle()可以切换元素的可见性

 slideToggle() 通过高度切换元素的可见性

  fadeToggle()通过透明度切换元素的可见性

  fadeTo(speed,opacity) speed可选 slow,normal,fast; opacity透明度的值为0-1：以渐变的方式将透明度调到指定的值

5.  组合选择中间用','隔开 $("#button,button,.myclass")

6.css方法： $object.css("css属性","值");

text()方法：不加参数获取文本值，加参数设置文本值

attr()方法：获取和设置属性值

使用val()方法为元素复制复选框和单选框传递的参数为数组

val()方法只能获取复选框的一个值

*/

//$("#button").click(function(){alert("heeolow")});

//$(".myclass").click(function(){alert("kk")});

方法：siblings()  选择所有的兄弟，部分前后 $("#two").siblings("div").css("background-color","red");

   next()取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

   nextAll()查找当前元素之后所有的同辈元素。

   find()搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

   prev()取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

   prevAll()查找当前元素之前所有的同辈元素

   each()

 事件：

blur()

change()文本域的内容发生改变时触发

click()

dbclick()

focus()

keydown()

keypress()

keyup()

鼠标事件

提交事件