jQuery基础语法

一.选择器(同css)

　　1.基本选择器

　　　　$("div")　　　　通过标签名获取标签

　　　　$("#id")　　　　通过id获取标签

　　　　$(".class")　　　通过class获取标签

　　2.高级选择器

　　　　 $("div p")　　　　后代选择器

　　　　$("div ,p")　　　 组合选择器

　　3.属性选择器

　　　　$("[type]")　　　　有type属性的

　　　　$("[type=text]")　　type属性为text的

二.筛选器

　　筛选器就是经过选择器选择后再次筛选

　　1.基本筛选器

　　　　$("ul li:first")　　　 选取ul标签中的li后再筛选出第一个

　　　　:last　　　　　　　最后一个

　　　　:eq(index)　　　　 索引筛选

　　　　:even　　　　　　 索引为偶数的

　　　　:odd　　　　　　　 索引为奇数的

　　　　:gt(index)　　　　 大于索引的

　　　　:lt(index)　　　　　 小于索引的

　　　　:not(选择器)　　　　不满足选择器的

　　　　:has(选择器)　　　　has后的选择器是子级标签中的

　　2.表单筛选器(多用于form表单)

　　　　:text　　　　　　　　type=text的标签

　　　　:password　　　　　 password类型的标签

　　　　:file　　　　　　　　 file类型的标签

　　　　:radio　　　　　　　　radio类型的标签

　　　　:checkbox　　　　　　checkbox类型的标签

　　　　:submit　　　　　　　 submit类型的标签

　　　　:button　　　　　　　 button类型的标签

　　　　:reset　　　　　　　　reset类型的标签

　　　　:enable　　　　　　　 可用的标签

　　　　:disable　　　　　　　你可用的标签

　　　　:checked　　　　　　 被选择的标签

　　　　:selected　　　　　　 被选中的标签

三.筛选器方法

　　1.下一个标签

　　　　$("#id").next()　　　　

　　　　$("#id").nextAll()　　　　往下所有同级元素

　　　　$("#id").nextUntil("#id2") 从id开始到id2的元素,开区间

　　2.上一个标签

　　　　$("#id").prev()　　　　　　

　　　　$("#id").prevAll()

　　　　$("#id").prevUntil("#id2")

　　3.父级标签

　　　　$("#id").parent()　　　　　　 父级标签

　　　　$("#id").parents()　　　　　　父级及以上标签

　　　　$("#id").parentsUntil("#id2")

　　4.子级和兄弟标签

　　　　$("#id").children()　　　　　　所有子级标签

　　　　$("#id").siblings()　　　　　　所有兄弟标签

　　5.查找标签

　　　　$("div").find("p")　　　　　　等价于$("div p")

　　6.筛选标签

　　　　$("div").filter(".c1")　　　　　从所有div标签中筛选class=c1的标签

四.样式操作

　　1.class操作

　　　　.addClass(cls)　　　　　　添加类

　　　　.removeClass(cls)　　　　 删除类

　　　　.hasClass(cls)　　　　　　 判断类存在不存在

　　　　.toggleClass(cls)　　　　　　切换类,有就移除,没有就添加

　　2.css样式操作

　　　　.css("color","red")　　　　　　直接修改

　　　　.css({"width":"100px","height":"100px"})　　修改多个值

五.位置操作

　　1.获取位置和设置位置

　　　　offset()　　　　　　获取元素在当前窗口的相对偏移

　　　　offset({top:100,left:100})　　　　设置标签位置

　　　　position()　　　　　　获取元素相对(有relative或absolute)父级标签的偏移

　　　　$(window).scrollTop()　　获取上下滚轮的位置,参数可以设置滚轮位置

　　　　$(window).scrollTop(0)　　设置上下滚轮的位置

　　　　$(window).scrollLeft()　　获取左右滚轮的位置,参数可以设置滚轮位置

　　2.尺寸

　　　　.height()　　　　 盒子模型中content的大小

　　　　.width()　　　　

　　　　.innerHeight()　　 内容高度+2padding高度

　　　　.innerWidth()

　　　　.outerHeigt()　　　内容高度+2padding高度+2border宽度

　　　　.outerWidth()　　　

六.文本操作

　　.html()　　　　　　获取标签的内容,包含标签

　　.html(val)　　　　 设置标签文本内容,能识别标签

　　.text()　　　　　　获取标签文本,不包含标签

　　.text(val)　　　　 设置标签文本内容,不能识别标签

　　.val()　　　　　　 获取标签的value

　　.val("value")　　　 给标签设置value值

　　.val(["v1","v2"])　　 给标签设置多个value值

七.属性操作

　　1.多用于自定义属性

　　　　.attr(属性)　　　　　　 获取属性的值

　　　　.attr(属性,值)　　　　 给标签设置或修改属性值

　　　　.attr({属性1:值1,属性2:值2})　　　　设置多个属性值

　　　　.removeAttr(属性)　　　删除属性

　　2.多用于固有属性

　　　　.prop(属性)　　　　　　 获取属性

　　　　.removeProp(属性)　　　删除属性

八.文档处理

　　1.追加到标签子级后面

　　　　$("div").append(a)　　　　

　　　　$(a).appendTo($("div"))

　　2.添加到标签子级前面

　　　　$("div").prepend(a)

　　　　$(a).prependTo($("div"))

　　3.添加到标签前面(before),后面(after)

　　　　$("div").before(a)

　　　　$(a).insertBefore($("div"))

　　4.删除和清空标签

　　　　.remove()　　　　删除标签

　　　　.empty()　　　　 清空标签里面的内容

　　5.替换

　　　　$("div").replaceWith(a)

　　　　$(a).replaceAll("div")

　　6.克隆

　　　　.clone(true)　　　　克隆标签,带上true参数可以把事件也克隆