1.dom和jquery的互相转化
2.选择器
3.过滤器
4.DOM操作
1.dom和jquery的互相转化
dom转jquery:$(dom对象)
jquery转dom:
方法一:$(a)[0]
方法二:$(a).get(0)
2.选择器
(1).基本选择器
id选择器: $("#myDiv);
标签选择器: $("div");
类选择器: $(".myClass");
选择所有: $("*");
选择多个: $("div,#myDiv");
(2).层次选择器
选择祖先下的所有后代: $("form input");
选择父亲下的儿子: $("form>input");
选择紧跟后面的一个元素: $("label+input");
选择一个级别的后面的兄弟: $("form~input");
3.过滤器
(1).基本过滤器
选择第一个: :first $("tr:first");
选择最后一个: :last $("tr:last");
大于: :gt $("tr:gt(0)");
小于: :lt $("tr:lt(0)");
等于: :eq $("tr:eq(0)");
否: :not $("input:not(:checked)");
奇: :odd $("tr:odd");
偶: :even $("tr:even");
匹配标题元素: :header $(":header");//固定写法
匹配正在执行动画的元素 :annimated //固定写法
(2).内容过滤器
是否包含文本 :contains(text); $("div:contains('Pgg')");
是否含有选择器 :has(selector); $("div:has(p)");
是否为空 :empty $("td:empty");
含有子元素或文本元素 :parent $("td:parent");
(3).可见度过滤器
可见元素 :visible $("td:visible");
隐藏元素 :hidden $("td:hidden");
(4).属性过滤器
包含给定属性的元素 [arrtibute] $("div[id]");
属性值是给定值 [attribute=value] $("div[id="aa"]");
属性值不是给定值 [attribute!=value] $("div[id!="aa"]");
属性值以给定值开头 [attribute^=value] $("div[id^="aa"]");
属性值以给定值结尾 [attribute$=value] $("div[id$="aa"]");
属性值包含给定值 [attribute*=value] $("div[id*="aa"]");
多个属性值 [attribute1][attribute2] $("input[id][name=$='pgg']");
(5).子元素过滤器
第一个孩子 :first-child
最后一个孩子 :last-child
唯一的孩子 :only-child
奇数(偶数)孩子 :nth-child(odd/even)
第几个孩子 :nth-chile(2)
(6).表单过滤器
input :input
text :text
password :password
radio :radio
checkbox :checkbox
submit :submit
(7).表单属性过滤器
可用元素 :enabled
不可用元素 :disabled
单选、复选框 :checked
下拉框 :selected
4.DOM操作
(1).内部插入
append(content) 在文本内部最后插入content
appendTo(content) 将文本插入到content内部的最后
prepend(content) 在文本内部最前面插入content
prependTo(content) 将文本插入到content内部的最前面
(2).外部插入
after(content) 在文本外部最后插入content
insertAfter(content) 将文本插入到content外部最后
before(content) 在文本外部最前面插入content
insertBefore(content) 在文本外部最前面插入content
(3).创建新节点
$() $(html);
(4).克隆
clone(); 克隆节点不可隆事件
clone(true); 克隆节点克隆事件
(5).删除
remove(); 调用remove()方法的节点还在
empty(); 调用empty()方法的节点也被删除了
(6).替换节点
replaceWith(); 替换
replaceAll(); 替换所有
(7).操作属性
attr(); 查看属性,操作属性
removeAttr(); 删除属性
each(); 对选中的多个节点每个都进行操作
(8).操作样式
addClass(); 新增样式
removeClass(); 删除样式
toggleClass(); 变更样式
hasClass(); 判断是否有样式
(10).遍历
children(); 节点下所有子元素
next(); 节点同辈后面的元素
prev(); 节点同辈前面的元素
siblings(); 节点同辈所有兄弟元素
注:jQuery中的事件加载
常规js使用window.onload方法
jQuery中用$(document).ready()方法