jQuery选择器
document.getElementById("p");
document.getElementsByTagName("img");
document.getElementsByName("hobby");
function $(id) {
return document.getElementById(id);
}
代码简洁
选择器功能强大
链式风格
123
123
document.getElementsByTagName("p");
查找有居中的段落
$("p[align='center'])
在没有第二个函数库存在时，
jQuery==$
jQuery("p") == $("p")
jQuery(选择器或过滤器)：根据表达式筛选DOM元素，并转换为jQuery的对象集合（二次封装的结果）
jQuery(HTML标签)：用于动态创建jQuery的对象集合
jQuery(DOM对象)：将DOM对象二次封装成jQuery对象集合
jQuery(回调函数callback)：当DOM元素加载完成时自动调用的函数，类似于onload事件。是jQuery(document).ready(回调函数callback)的简写
区别：
1、onload是所有元素（包括引用的图片等文件）下载到本机之后才调用；jQuery是DOM元素加载完毕就立即调用
2、onload只能绑定一个函数；jQuery可以绑定多个函数
firebug
jQuery元素使用$开头
DOM元素和jQuery元素集合：
1、DOM对象的函数和jQuery元素集合的函数不能通用
2、jQuery元素是一个集合，具备length属性
两种元素的转换：
DOM-->jQuery：jQuery(DOM对象)
jQuery-->DOM：jQuery对象.get(下标)或jQuery对象[下标]
选择器：
基本选择器：
标签选择器：直接写标签的名称，不包括<>
类选择器：.类名
ID选择器：#ID
并列选择器：,相隔
层次选择器：
父子选择器：>
后代选择器：空格
下一个兄弟：+
所有后面的兄弟节点：~
过滤器：
基本过滤器：
:first：过滤出所有符合选择器规则的元素的第一个元素
:last
:eq(index)
---------------------------------前三个仅筛选出唯一一个
:gt(index) great than >
:lt(index) less than <
:even
:odd
:not(选择器)
:header
:animated
内容过滤器：针对标签主体
:contains(文本)
:empty：筛选出不包含子元素和文本的空元素
:parent：筛选出包含子元素或文本的非空元素
:has(选择器)：筛选出符合选择器规则的元素
可见性过滤器：
:hidden：过滤出display=none和visibility=unvisibility
:visible
子元素过滤器：
first-child：过滤出每一个符合选择器规则的父元素的第一个子元素
last-child
nth-child
only-child
表单域元素过滤器：
:input：所有表单域 input textarea select
:text：type="text"的元素
:password：type="password"的元素
....
:checked：获取拥有checked="checked"和selected="selected"的所有元素（radio checkbox select）
:selected：获取selected="selected"的所有元素(select)
:enabled：所有启用的元素
:disabled：所有禁用的元素
属性过滤器：[]
[属性名]：筛选拥有指定属性的元素
[属性名="值"]：筛选出指定属性等于指定值的元素
[属性名!="值"]：筛选出指定属性不等于指定值的元素
[属性名*="值"]：筛选出指定属性包含指定值的元素
[属性名^="值"]：筛选出指定属性以指定值开头的元素
[属性名$="值"]：筛选出指定属性以指定值结尾的元素
第三章 DOM操作
树根：没有父节点
树枝：有父节点且有子节点
枝叶：没有子节点
DOM树：
垂直关系：
父：parentNode
子：childNodes
水平关系：
哥、姐：previousSibling
弟、妹：nextSibling
节点的方法和属性：node
属性：
nodeName
nodeType
nodeValue
方法：
增：
document.createElement("p")
document.createTextNode("Hello")
setAttribute(name,value)
getAttribute(name)
appendChild()
insertBefore()
删：
removeChild()
改
replaceChild(新节点,老节点)
遍历
节点类型：
元素节点
属性节点
文本节点
文档节点 document
注释节点
文档节点：nodeName="#document" nodeValue=null nodeType=9
元素节点：nodeName=标签 nodeValue=null nodeType=1
属性节点：nodeName=属性 nodeValue=属性值 nodeType=2
文本节点：nodeName="#text" nodeValue=文本 nodeType=3
文本节点：
Hello World
获取值：不带参
text()：获取不包含HTML的普通文本 innerText
Hello World
html()：获取节点之内的所有标签主体 innerHTML
Hello Worldval()：针对带有value属性的节点
设置值：带参
属性节点：
获取值
attr(name)
设置值：
attr(name,value)
一次性设置多个属性
attr({name:value, name:value, ...})
removeAttr(name)：移除属性值
元素节点：
增加新节点：
$("HTML标签带<>")
后置附加节点：
子节点.appendTo(父节点目标)
父节点.append(子节点)
前置附加节点：
父节点.prepend(子节点)
子节点.prependTo(父节点)
在指定位置插入：
原节点.before(新节点)
新节点.insertBefore(原节点)
原节点.after(新节点)
新节点.insertAfter(原节点)
删除节点：
remove()：删除节点和它的子节点
empty()：清空节点的内容（不包含节点本身）
![]()
$("p").remove()
和![]()
都不存在
$("p").empty()
存在 变成空段落
修改节点：
原节点.replaceWith(新节点)
新节点.replaceAll(原节点)
复制（克隆）节点：
节点.clone()
包裹节点：
wrap("要进行包裹的标签");//外包裹
wrapInner("要进行包裹的标签");//内包裹
123
$("p").wrap("
");
123$("p").wrapInner("
");
123wrapAll()
$("ul>li").wrap("
");
$("ul>li").wrapAll("
");
节点遍历：
遍历一
个节点：选择器
遍历多个节点：
children()：获取所有子节点
parent()：获取父节点
parents()：获取所有祖先节点
parentsUntil()：获取直到符合某选择器的祖先节点为止
each(function(index,element))：在遍历的同时针对每个子节点进行操作
element：当前遍历到的DOM元素
index：当前遍历到的元素下标
全局
$.each(集合,function(index,element));
next()：下一个兄弟节点
nextAll()：后面的所有兄弟节点
prev()：上一个兄弟节点
prevAll()：前面的所有兄弟节点
nextUntil()：后面的兄弟节点直到指定选择器为止
prevUntil()：前面的兄弟节点直到指定选择器为止
siblings()：所有同辈元素
closest()：匹配最接近的父元素(包含自己)
CSS函数：
css(name,value)
css(name)
css({name:value, name:value, ....})
addClass(类名)：追加类样式，不破坏原有类样式
removeClass(类名)：删除指定类样式
class="类名1 类名2"
toggleClass(类名)：在指定的类样式和原有样式之间来回切换
width()
height()
offset()：返回一个相对于屏幕左上角坐标（包含top和left)
position()：返回一个具备定位的父元素的坐标
scrollTop()：滚动高度
scrollLeft()：滚动宽度
