1. 查找:
jQuery新增的选择器:
可见性过滤: 2个
:visible 选择可见的元素
:hidden 选择隐藏的元素
只能匹配: display:none和type="hidden"的两种隐藏元素
内容过滤: 2种:
1. 根据元素内容中的文本关键字作为搜索条件
:contains(关键字)
2. 根据元素下的子元素的特征作为搜索条件
:has(selector)
选择子元素中有符合selector要求的 父元素
:empty 选择内容为空的元素
:parent 选择内容不为空的元素
状态过滤: CSS3中的:
:disabled :enabled :checked :selected
表单元素过滤:
:input 选择表单中的表单元素: button input select textarea
input 是元素选择器，只能选择input元素
每一种type属性都对应着一种input
每一种type属性都有专门的一个选择器跟它对应
:text :password :checkbox :radio :submit :reset...
2. 修改: 同DOM
内容:
1. 原始HTML片段: $().html([新HTML片段]) .innerHTML
2. 纯文本内容: $().text([新文本]) .textContent
3. 表单元素的值: $().val ([新值]) .value
属性:
1. HTML标准属性: 2种访问方式:
1.核心DOM API:
$().attr("属性名"[,新值]) .getAttribute()/.setAttribute()
2. HTML DOM API:
$().prop("属性名"[,新值]) elem.属性名
2. 状态属性:
$().prop("状态"[,bool]) elem.状态
3. 自定义扩展属性:
$().attr("自定义属性") .getAttribute()/.setAttribute()
其实attr和prop可一次修改多个属性:
$().attr/prop({
属性名:值,
属性名:值,
})
样式:
$().css("css属性"[,新值]) 修改: elem.style.css属性=值
获取: var style=getComputedStyle(elem)
style.css属性
$().css({
css属性:值, //jQuery中长度数值不用加单位！
... : ... ,
})
用class批量修改元素的样式:
$().addClass("class1 class2")
$().removeClass("class1")
$().hasClass("class1")
$().toggleClass("class1") 在有或没有class1之前切换
相当于: if(!$btn.hasClass("down"))
//为当前按钮添加down class
$btn.addClass("down");
else//否则(有)
//为当前按钮移除down class
$btn.removeClass("down");
3. 按节点间关系查找:
2大类:
1. 父子:
$().parent() elem.parentNode
$().children(["selector"]) elem.children
$().find("selector") 查找所有后代元素中符合selector的元素
$().children(":first-child") elem.firstElementChild
$().children(":last-child") elem.lastElementChild
2. 兄弟:
$().prev() elem.previousElementSibling
$().prevAll() 之前所有
$().next() elem.nextElementSibling
$().nextAll() 之后所有
$().siblings() 选除当前元素自己之外的所有
4. 添加/删除/替换/克隆
添加: 2步:
1. 用$("html片段")创建新元素，及其子元素
var $elem=$("html片段");
2. 将$()创建的新元素追加到DOM树上
$(父元素).append($elem) 父元素.appendChild(elem)
$(elem).appendTo(父元素)
返回值: $(父元素).append() return 父元素
$(elem).appendTo() return 子元素elem
$(父元素).prepend($elem) 在开头插入
$(elem).prependTo(父元素)
$( child).before(elem) 父元素.insertBefore(elem, child)
$(child).after(elem) 将elem插入到child之后
$(child).replaceWith(elem)父元素.replaceChild(elem, child)
$(elem).replaceAll(child) return 新子元素elem
删除: $().remove()