今天我们接着来学习jQuery中的内容，包括css的操作、尺寸的操作、文档的操作、动画（有待补充），事件处理操作。
一、CSS
在css中可以设置css的基本属性
- .css("color") ?-> 获取color css值- .css("color", "#ff0000") -> 设置值- .css({"color": "#cccccc", "border": "1px solid #ff0000"}) ?-> 设置多个值- .css(["color", "border"]) ?-> 获取多个值offset([coordinates])
概述：
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
参数：
规定以像素计的 top 和 left 坐标。
- 值对，比如 {top:100,left:0}
- 带有 top 和 left 属性的对象
无参数描述:
获取第二段的偏移
html代码：
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:last");var offset = p.offset();p.html( "left: " + offset.left + ", top: " + offset.top );结果：
<p>Hello</p><p>left: 0, top: 35</p>
有参数描述:
获取第二段的偏移
html代码：
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
$("p:last").offset({ top: 10, left: 30 });position()
概述：
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
注：
- 获取相对已经定位的父标签的位置
- 比较的是最近的那个做过定位的祖先标签
scrollTop([val])
- 返回顶部
scrollLeft([val])
其中val设置的是水平滚动条的值
二、尺寸
height([val|fn])- 元素的高度width([val|fn])innerHeight()- 带padding的高度innerWidth()outerHeight([soptions])- 在innerHeight的基础上再加border的高度outerWidth([options])
jQuery代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>尺寸</title> ???<style> ???????.c1 { ???????????height: 100px; ???????????width: 80px; ???????????background-color: red; ???????} ???</style></head><body><div id="d1" class="c1"></div><script src="jquery-3.2.1.js"></script></body></html>执行的操作：
$(‘#d1‘).height()$(‘#d1‘).width()$(‘#d1‘).innerHeight() ?$(‘#d1‘).css(‘padding‘,20px)$(‘#d1‘).css(‘boder‘,‘2px solid #336699‘)$(‘#d1‘).outerHeight()
三、文档的操作
1.内部插入
在内部插入包括append和prevendappend（content|fn） ?appendTo(content)A.append(B)---把B添加到A的后面A.appendTo(B)---把A添加到B的后面prevend(content|fn)prevend(contend)A.prevend(B)---把B添加到A的前面A.prevendTo(B)---把A添加到B的前面
2.外部插入
在外部插入包括after和beforeafter(content|fn) ??--> 往后加insertAfter(content) ???A.after(B) ??????????---把B添加到A的后面A.insertAfter(B) ???---把A添加到B的后面 ???before(content|fn) ??--> 往前加insertBefore(content) ???A.before(B) ?????????---把B添加到A的前面A.insertBefore(B) ????---把A添加到B的前面
3.包裹
包裹(把所有匹配的元素用其他元素的结构化标记包裹起来。) ???wrap(html|ele|fn)A.wrap(B) ?--> B包Aunwrap() ???- 不要加参数 ???????????wrapAll(html|ele)--将所有匹配的元素用单个元素包裹起来wrapInner(html|ele|fn) ?--将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
4.替换
replaceWith(content|fn)A.replaceWith(B) ?--> B替换A ???????replaceAll(selector)A.replaceAll(B) ??--> A替换B
5.删除
empty()- 清空 内部清空remove([expr])- 删除 整体都删除detach([expr])- 剪切 ?多保存在变量中，方便再次使用
6.复制
clone([Even[,deepEven]])例：创建一个按钮，他可以复制自己，并且他的副本也有同样功能。html代码：<button>Clone Me!</button>jQuery 代码:$("button").click(function(){ ?$(this).clone(true).insertAfter(this);});四、 动画
基本show([s,[e],[fn]]) ????图片的显示hide([s,[e],[fn]]) ?????图片的隐藏toggle([s],[e],[fn]) ??????滑动slideDown([s],[e],[fn])slideUp([s,[e],[fn]])slideToggle([s],[e],[fn]) ???淡入淡出fadeIn([s],[e],[fn])fadeOut([s],[e],[fn]) ???????fadeTo([[s],o,[e],[fn]]) ???????- 淡出到0.66透明度 ???fadeToggle([s,[e],[fn]]) ???????- .fadeToggle(3000, function () { ???????????alert("真没用3"); ???????}); ???????自定义animate(p,[s],[e],[fn])1.8* ???- css属性值都可以设置 五、事件处理
之前绑定事件的方式： ???????1. onclick=clickMe(); ?function clickMe() {} ???????2. ele.onclick = function(){} ???????3. ele.addEventListener("click", function(){}) ???jQuery绑定事件的方式： ???????1. $(ele).on("click", function(){}) ???????2. $("tbody").delegate(".btn-warning", "click", function(){}) ???????3. $("tbody").on("click",".btn-warning",function(){}) ?我们要用的事件委派jquery进阶(1)
原文地址：http://www.cnblogs.com/moning/p/7678362.html