jQuery DOM 操作

1.1 、 内容
方法 描述
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括 HTML 标记）
val() 设置或返回表单字段的值

1 .2 、 属性
方法 描述
attr() 设置或返回被选元素的属性值。
removeAttr() 从每一个匹配的元素中删除一个属性
prop() 1.6+
获取在匹配的元素集中的第一个元素的属性值。
removeProp() 1.6+ 删除由.prop()方法设置的属性集
attr()和 和 prop() 区别：
对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
具有 true 和 false 两个值的属性，如 checked, selected 或者 disabled,使用
prop()函数的结果:有相应的属性，返回指定的属性值；否则返回空字符串；
attr()函数的结果：有相应的属性，返回指定的属性值；否则返回 undefined。

1.3 、 CSS 类
方法 描述
addClass() 向被选元素添加一个或多个类
removeClass() 从被选元素删除一个或多个类
toggleClass() 对被选元素进行添加/删除类的切换操作

2 2 、 添加/ / 删除/ / 替换 元素
2.1 、添加元素
方法 描述
append() 在被选元素的结尾插入内容（结束标签之前插入）
appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合中。
prepend() 在被选元素的开头插入内容（开始标签之后插入）
prependTo() 把所有匹配的元素前置到另一个、指定的元素元素集合中。
after() 在被选元素之后插入内容
insertAfter() 在被选元素后插入 HTML 元素
before() 在被选元素之前插入内容
insertBefore() 在被选元素前插入 HTML 元素

2.2 、 删除元素
方法 描述
empty() 从被选元素中删除子元素
remove()
从 DOM 中删除所有匹配的元素，绑定的事件，附加的数据等都会被
移除
detach()
从 DOM 中删除所有匹配的元素，所有绑定的事件、附加的数据等都
会保留下来

2.3 、替换元素
方法 描述
replaceWith()
将所有匹配的元素替换成指定的 HTML 或 DOM 元素。
$(selector).replaceWith(content)
replaceAll()
用匹配的元素替换掉所有 selector 匹配到的元素
$(content).replaceAll(selector)

3 3 、 CSS) () 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性值：
1. $(selector).css("propertyname")
设置 CSS 属性值：（注意属性和值之间是 ， ）
1. $(selector).css("propertyname","value")
设置多个 CSS 属性值：（注意属性与属性之间用 ，隔开，属性和值之间是 ： ）
1. $(selector).css({"propertyname":"value","propertyname":"value",...})
更多 CSS 方法：
方法 描述
offset() 设置/获取匹配元素在当前视口的相对偏移。
position() 获取匹配元素相对父元素的偏移。
scrollTop() 设置/获取匹配元素相对滚动条顶部的偏移
scrollLeft() 设置/获取匹配元素相对滚动条左侧的偏移。
heigh() 设置/取得匹配元素当前计算的高度值（px）。
width() 设置/取得第一个匹配元素当前计算的宽度值（px）。
innerHeight()
设置/获取第一个匹配元素内部区域高度（包括内边距 padding、不包
括边框 border）。
innerWidth()
设置/获取第一个匹配元素内部区域宽度（包括内边距 padding、不包
括边框 border）。
outerHeight()
设置/获取第一个匹配元素外部高度（默认包括内边距 padding 和边框
border）。
outerWidth()
设置/获取第一个匹配元素外部宽度（默认包括内边距 padding 和边框
border）。

4、jquery事件
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调
用的方法。
分类 事件 描述
页面
载入
ready() 当 DOM 载入就绪可以查询及操纵时绑定一个要执行的函数。
事件处理：
on()
向元素添加事件处理程序
//为按钮绑定点击事件
$(".btn").on("click",function(){
alert("被点击了。");
});
off()

移除通过 on() 方法添加的事件处理程序
1. //移除按钮上的点击事件
2. $(".btn").off("click");
bind() 向元素添加事件处理程序

unbind()
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
自 jQuery 版本 1.7 起， on() 和 off() 方法是在元素上添加
和移除事件处理程序的首选方法。
one()
向被选元素添加一个或多个事件处理程序。该处理程序只能被
每个元素触发一次

 trigger()
触发绑定到被选元素的所有事件
1. //按钮点击事件触发文本框焦点事件,文本框获得焦点并执行
函数
2. $("#btn1").click(function(){
3. $("#ipt").trigger("focus");
4. });

triggerHandler()
触发绑定到被选元素的指定事件上的所有函数
1. //按钮点击事件触发文本框焦点事件函数，文本框未获得焦
点
2. $("#btn2").click(function(){
3. $("#ipt").triggerHandler("focus");
4. });

事件委派：
delegate()
向匹配元素的当前或未来的子元素添加处理程序
1. //为 div 的子元素 p 绑定点击事件
2. $("div").delegate("p","click",function(){
3. $("p").css("background-color","pink");
4. });

undelegate() 从现在或未来的被选元素上移除事件处理程序

事件切换：
hover()
规定当鼠标指针悬停以及离开在被选元素上时要运行的两个
函数
如果只指定一个函数，则 mouseenter 和 mouseleave 都
执行它toggle()

在版本 1.9 中被移除。
添加 click 事件之间要切换的两个或多个函数
常见事件：
click() 添加/触发 click 事件
dblclick() 添加/触发双击事件
mouseenter() 添加/触发鼠标移入事件
mouseleave()添加/触发鼠标离开事件
事件只有在离开被选元素的时候才会触发，该事件大多数时
候会与 mouseenter 事件一起使用。

mousemove() 添加/触发移动事件
mouseout()添加/触发鼠标离开事件
事件在鼠标离开被选元素的子元素时也会触发

mouseover()
当鼠标指针位于元素上方时触发的事件
事件在鼠标指针进入被选元素或任意子元素时都会被触发

mousedown() 添加/触发鼠标按下事件
mouseup() 添加/触发鼠标松开事件
keydown() 当键盘或按钮被按下时，发生 keydown 事件。（过程）
keypress() 当键盘或按钮被按下时，发生 keypress 事件。
keyup()
当按钮被松开时，发生 keyup 事件。
它发生在当前获得焦点的元素上。
submit() 当提交表单时，会发生 submit 事件。
change() 当元素的值发生改变时，会发生 change 事件。
focus() 当元素获得焦点时，触发 focus 事件。
blur() 当元素失去焦点时触发 blur 事件。
select()
当 textarea 或文本类型的 input 元素中的文本被选择时，会
发生 select 事件。
load() 在版本 1.8 中被废弃。添加事件处理程序到加载页面事件
unload() 在版本 1.8 中被废弃。添加事件处理程序到离开页面事件
resize() 当调整浏览器窗口的大小时，发生 resize 事件。
scroll() 当用户滚动指定的元素时，会发生 scroll 事件。

以上是我分享，还请多多指教。