jQuery(基础总结)

---

处理库之间的冲突

目前，很多库也都是以$作为基准起始符，如果想和jQuery共荣有两种方法：
1 若jQuery库在Base库（假想库，也是以$符为起始）之前引入，那么"$"符归Base库所有，而jQuery可以用jQuery对象调用，或者创建一个"$$"符号给jQuery使用

var $$ = jQuery;  //创建一个$$的jQuery对象
$((function)(){      //这是Base 的$
  alert($("#box").width());  //这是Base 的$
  alert($$("#box").width()); //这是jQuery 的$$
});

2 如果jQuery库在Base库之后引入，那么"$"的所有权归jQuery库所有，而Base库将会冲突而失去作用。

jQuery.noConflict();  将$符所有权剔除
var $$ = jQuery;
$((function)(){      //这是Base 的$
  alert($("#box").width());  //这是Base 的$
  alert($$("#box").width()); //这是jQuery 的$$
});

选择器

理论上讲，jQuery提供的方法find(),next(),nextAll(),children()等方法运行速度要快于高级选择器。因为他们实现的算法有所不同,高级选择器是通过解析字符串来获取节点对象,而 jQuery 提供的方法一般都是单个选择器,是可以直接获取的。

设置元素及内容

html() 获取元素中HTML内容
html(value) 设置元素中HTML内容
text()  获取元素中文本内容,会自动清理html标签
text(value) 设置文本内容，会自动转义html标签

Css方法

width() 获取某个元素的宽度
height() 获取某个元素的长度
innerWidth()  获取元素宽度，包含内边距padding
innerHeight() 获取元素高度，包含内边距padding
outerWidth()  获取元素宽度，包含边框border和内边距padding
outerHeight() 获取元素高度，包含边框border和内边距padding
outerWidth(true) 同上，且包含外边距
outerHeight(true) 同上，且包含外边距

offset()    获取某个元素相对于视口的便宜位置
position()    获取某个元素相对于父元素的便宜位置
scrollTop()    获取垂直滚动条的值
scrollTop(value)    设置垂直滚动条的值
scrollLeft()    获取水平滚动条的值
scrollLeft(value)    设置水平滚动条的值

操作节点

内部插入节点：

append(content)    向指定元素内部后面插入节点content
appendTo(content)    将指定元素迁入到指定元素content内部后面
prepend(content)    向指定元素content内部的前门插入节点
prependTo(content)    将指定元素移入到指定元素content内部前面

外部插入节点

after(content)    向指定元素的外部后面插入节点content
before(content)    向指定元素的外部前面插入节点content
insertAfter(content)    将指定节点移到指定元素content外部的后面
insertBefore(content)    将指定节点移到指定元素content外部的前面

包裹节点

wrap(html)    向指定元素包裹一层html代码
wrap(element)    向指定元素包裹一层DOM对象节点
unwrap(html)    移除一层指定元素包裹内容
wrapAll(html)    用html将所有元素包裹到一起
wrapAll(element)    用DOM对象将所有元素包裹在一起
wrapInner(html)    向指定元素的子内容包裹一层html
wrapInner(element)    向指定元素的子内容包裹一层DOM对象节点

注意:.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体,分别包含一层外层;后者将所有元素作为一个整体作为一个独立体,只包含一层外层。这两种都是在外层包含,而.wrapInner()在内层包含。

节点操作
复制节点：当clone(true)参数为空，表示只复制元素和内容，不复制事件行为。而加上true参数的话，这个元素附带的事件处理行为也复制出来了。

$('body').append($('div').clone(true));

删除节点

$('div').remove();

清空节点

$('div').empty();

替换节点

$('div').replaceWith('<span>节点</span>'); //将div替换成span元素
$('<span>节点</span>').replaceAll('div'); //同上