核心提示:常用的选择器:#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()获取匹配元素相对父元素的偏移