您现在的位置:首页 >> 前端 >> 内容

jQuery快速查询大全

时间:2017/1/7 9:23:00 点击:

  核心提示:常用的选择器:#id 根据给定的id匹配.classname 根据给定的类名匹配name 根据给定的元素名匹配*匹配所有的元素select1,select2 将每一个匹配到的元素合并后一起返回s1s2...
常用的选择器:

#id 根据给定的id匹配

.classname 根据给定的类名匹配

name 根据给定的元素名匹配

*匹配所有的元素

select1,select2 将每一个匹配到的元素合并后一起返回

s1s2 选取s1元素里所有的s2元素 子孙

parent>child获取parent元素下的child元素 儿子

prev+next 选取紧接在prev元素后的next元素

prev~siblings选取prev之后所有的siblings元素

常用的过滤选择器:

:first 选取第一个元素

:last 选取最后一个元素

:not(selector) 去除所有与给定选择器匹配的元素

:even 选取索引值为偶数的元素,从0开始

:odd 选取索引值为奇数的元素

:eq(index) 匹配一个给定索引值的元素

:gt(index) 匹配大于给定索引值的元素

:lt(index) 匹配小于给定索引值的元素

:header 选择h1,h2....一类的标签

:animated 匹配正执行动画效果的元素

常用的内容过滤选择器:

:contains(text) 匹配包含给定文本的元素

:empty 匹配所有不包含子元素或者文本的空元素

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

:parent 选取含有子元素或文本的元素

:hidden 选取所有不可见元素

:visible 选取所有可见元素

常用的属性过滤选择器(跟在元素后面用,过滤器):

【attr】 选取拥有此属性的元素

【arrt=val】等于val 【arrt!=val】不等于val 【arrt^=val】以val开始的

【arrt$=val】以val结束的 【arrt*=val】 包含val的 【arrt~=val】 包含val且以空格隔开【attr1】【attr2】... 多个属性选择器合并成一个复合属性选择器

常用的表单选择器(直接使用):

:input 选取所有<input>、<textarea>、<select>、<button>元素

:text 选取所有的单行文本框

:password 选取所有的密码框

:radio 选取所有的单选按钮

:checkbox 选取所有的复选框

:submit 选取所有的提交按钮

:image 选取所有的图像按钮

:reset 选取所有的重置按钮

:button 选取所有的按钮

:file 选取所有的上传域

常用的表单对象属性过滤选择器:

:disabled 选取所有不可用元素

:enabled 选取所有可用元素

:checked 选取所有被选中的元素

:selected 选取所有被选中的选项元素

管理选择器得到的结果:

size()获取选择器中元素的个数

index(element)查找元素在集合中的位置

add()给集合添加元素

not()去除元素集合中的某个元素

filter()筛选去除元素集合中的元素获得新集合

find()通过查询获取新的元素集合

each()对选择器中的元素进行遍历

end()回到操作对象的上一个对象

andself()将前面的对象进行组合后共同处理

创建元素节点:

用$()来创建节点

var $node = $(“<p title=”hello”> hello </p>”);

插入元素节点:

append()向每个匹配的元素内部追加子元素内容 appendTo()

prepend()向每个匹配的元素内容前置子元素内容 prependTo()

after()在每个匹配元素后插入同辈内容 insertAfter()

before()在每个匹配元素之前插入内容 insertbefore()

删除元素节点:

remove()

var$remove_li = $(“ul li:eq( 1 )”).remove( ); 删除ul第2个li,返回被删除的li对象

$(“ulli”).remove(“ li[ title=’ a ’ ] ”); 通过参数来选择性删除

detach()

var $remove_li =$(“ul li:eq( 1 )”).detach( ); 和remove类似,但绑定的事件、附加的数据会保留下来

empty()

$(“ulli:eq( 1 )”).remove( ); 清空所选元素中所有的后代元素内容

复制元素节点:

clone()

$(“li:eq(1)”).clone(true).appendTo(“ul”);复制第二个li元素插入到ul中,并传递了一个参数true代表复制元素同时复制元素中绑定的事件。

替换元素节点:

replaceWith()

$(“li:eq(1)”).replaceWith(“<li>c</li>”);替换掉第二个li元素

replaceAll()

和replaceWith()颠倒语法

包裹元素节点:

wrap() 用参数标签把外面的标签包裹起来

$(“li”).wrap(“<i></i>“);

wrapAll()用参数标签把多个标签整体包裹起来,如其中有其他标签则放到包裹元素后

wrapInner()把匹配到元素内部的内容用参数标签包裹起来

节点属性操作:

attr()获取前面元素的参数中的属性,参数可以kv对用来设置属性

removeAttr()删除属性

节点样式操作:

addClass()追加参数中的类选择器,不同会叠加,相同会覆盖

removeClass()删除类选择器

toggleClass()重复切换参数中的类选择器,有就去除,没有就使用

hasClass()判断是否含有参数中的类选择器样式,返回boolean值

设置获取值:

html() 设置内容会解析html语句,无参数时获取

text()设置内容不会解析语句,无参数时获取

val() 设置input元素value值,下拉框选中项,下拉列表多选项(需要用【】括起来,逗号分开多个值),复选框选中项,单选框选中项,无参数时获取

遍历节点操作:

children()取得匹配元素的子元素集合

next()取得后面紧邻的同辈元素

prev()取得前面紧邻的同辈元素

parent()取得匹配元素的父级元素

parents()取得匹配元素的先辈元素的集合

siblings()取得匹配元素前后所有的同辈元素

closest()取得最近的匹配元素,先取自身如果自身不存在,则向父元素取最近的一个先辈

CSS-DOM技术:

不加参数是获取,加参数是修改

$(“p”).css({color”:”#ff0000”,”background”:”blue”});

scrollTop()和scrollLeft()设置相对滚动条顶部和左侧的偏移

offset()获取和设置元素在当前视窗的相对偏移

$(“#dv”).offset({top:10,left:30});

var$offset=$(“#dv”).offset();

$(“#dv”).html(“left : ”+$offset.left+”,top:”+$offset.top);

position()获取匹配元素相对父元素的偏移

 

Tags:JQ QU UE ER 
作者:网络 来源:QuinnNorri