正课:
查询:
修改:
按节点间关系查找
添加/删除/替换/克隆
事件绑定
查询: 内容过滤:
:contains(文本) 用元素的内容文本作为条件
:has(selector) 选择包含符合条件的子元素的父元素
:parent和:empty: 选择非空的或空的元素 可见性过滤: :visible :hidden :hidden只能选择: display:none的和input type=hidden的 属性过滤: 同CSS 表单过滤: 表单元素过滤: :input 查询所有表单元素: input select button textarea 每种type都有专门的选择器: :text :password :checkbox :radio :file :submit … 表单状态过滤: :enabled :disabled :checked :selected
修改: 内容: 3种
html片段: .html()纯文本: .text()表单元素的值: .val() 属性: 3种HTML标准属性: $elem.attr(“属性名”[,“新值”]) //getAttribute/setAttribute 可以获得开始标签中的一切字符串类型的属性状态属性: $elem.prop(“状态”[,bool]) 可以获得内存中可用.访问的所有属性自定义扩展属性: $elem.attr() 问题: .attr()和.prop()一次只能修改一个属性 解决: .attr/prop({ 属性:值, … : … }) 样式: 修改css属性: $elem.css(“css属性”[,新值]) .style.css属性 $elem.css({ css属性:新值, … : … }) 福利: 数值类型的css属性，不再需要加px单位 获取css属性: $elem.css(“css属性”) getComputedStyle()用class批量管理样式: .addClass(“class”) .removeClass(“class”) .hasClass(“class”)
.toggleClass(“class”) 相当于: if($btn.hasClass(“down”)) $btn.removeClass(“down”) else $btn.addClass(“down”)
按节点间关系查找:
父子关系: .parent() .children([“selector”]) 仅选择符合条件的直接子元素 .find(“selector”) 可在所有后代中查找符合条件的直接子元素 .children(":first-child") 仅选择直接子元素中第一个元素 .children(":last-child") 仅选择直接子元素中最后一个元素
兄弟关系: .prev() 前一个 .prevAll() 之前所有 .next() 后一个 .nextAll() 之后所有 .siblings() 除自己之外所有
添加/删除/替换/克隆 添加: 2步:
用$创建一个新元素: var e l e m = elem= elem=(“html片段”)
将新元素追加到DOM树 p a r e n t . a p p e n d ( parent.append( parent.append(elem) 末尾追加 e l e m . a p p e n d T o ( elem.appendTo( elem.appendTo(parent) return $elem p a r e n t . p r e p e n d ( parent.prepend( parent.prepend(elem) 开头插入 e l e m . p r e p e n d T o ( elem.prependTo( elem.prependTo(parent) return $elem
c h i l d . b e f o r e ( child.before( child.before(elem) 将 e l e m 插 入 到 elem插入到 elem插入到child之前 e l e m . i n s e r t B e f o r e ( elem.insertBefore( elem.insertBefore(child) c h i l d . a f t e r ( child.after( child.after(elem) 将 e l e m 插 入 到 elem插入到 elem插入到child之后 e l e m . i n s e r t A f t e r ( elem.insertAfter( elem.insertAfter(child) 删除: $elem.remove() 替换: c h i l d . r e p l a c e W i t h ( child.replaceWith( child.replaceWith(elem) $elem.replaceAll(“child”) 克隆: var n e w E l e m = newElem= newElem=elem.clone() 默认: .clone()是浅克隆，仅复制样式和属性，不复制行为 改为: .clone(true) 深克隆，即复制样式和属性，又复制行为
事件绑定:普通绑定: .on(“事件名”,function(){ … }) <==> addEventListener() 简写: .事件名(function(){ … })利用冒泡: $parent.on(“事件名”,“selector”,function(){ //this->e.target //执行操作 })移除事件绑定: .off(“事件名”,原处理函数) <==> removeEventListener()