锋利的jquery笔记

Jquery 对象转换成 DOM 对象的二中方法

var $cr = $('#id');
var cr = $cr[0];
var cr2 = $cr.get(0);

DOM 元素转换成 Jquery 对象的方法

var cr = document.getElementById('cr');
var $cr = $(cr);

Jquery 对象都是有 $() 方法制造而来，$() 函数就是一个 Jquery 对象的制造工厂

Jquery 判断复选框是否被选中

HTML 结构

点我

原生js

var $check = $('#check');
var check = $check[0];
$check.click(function(){
    if (check.checked) {
        console.log('已经被选中了!')
    } else {
        console.log('没有被选中!');
    }
})

jQuery 方法

var $check = $('#check');
$check.click(function(){
    if ($check.is(':checked')) {
        console.log('已经被选中了!')
    } else {
        console.log('没有被选中!');
    }
})

is(':checked')是jQuery中的方法，判断 jQuery 对象是否被选中，返回Boolean。

jQuery 判断元素是否存在

var $cur = $(cur);
if ($cur.length > 0) {
  // do something
}
// 或者转化为DOM对象
var cur = $cur[0];
if (cur) {
  // do something
}

一些不常用到的选择器

• ：hidden 选取所有不可见的元素
• ：visible 选取所有可见的元素
• ：contains(text) 选取文本中包含‘text’的元素
• ：empty 选取不包含子元素或者文本的空元素
• ：has(selector) 选取选择器所匹配元素的元素
• ：parent 选取包含子元素或者文本的元素
• ：enabled 选取所有可用元素
• ：disabled 选取所有不可用元素
• ：checked 选取所有被选中的元素（包含单选框，和复选框）
• ：selected 选取所有被选中的选项元素

插入元素的方法

• append() 向匹配元素内追加内容
• appendTo() 把内容追加到 参数元素中
• prepend() 向匹配元素内添加前置内容
• prependTo() 把内容添加 到参数元素内部（前）
• after() 向匹配元素之后添加内容
• insertAfter() 把内容添加到参数内容之后
• before() 向匹配元素之前添加内容
• insertBefore() 把内容添加 到参数内容之前

删除元素

$('ul li').remove('li[title!=菠萝]');
var $li = $('ul li:eq(0)').detach(); // 或者是remove()
$li.appendTo($('ul'));

detach() 删除的元素之前绑定的事件还是会存在，而 remove 删除的元素是不存在的

移动元素

$('ul li:eq(0)').appendTo($('ul'));

清空节点 empty()

$('body').empty(); // body 内容被清空

复制元素 clone()

$('ul li').click(function () {
  $(this).clone().appendTo($('ul')); // 复制当前元素 追加到 ul 列表中
});

当 clone(true) 的时候，复制的元素还可以保存其原有的事件，例如上边的点击事件。

替换元素

html 结构

  
你最喜欢的人!

方法1

$('p').replaceWith('你最讨厌的人');

方法2

$('你最讨厌的人1').replaceAll('p');

被替换完成之后原有元素添加的事件也不复存在, 想要事件需要重新添加

---

包裹节点

以下原始 HMTL 结构都是这样的

你最喜欢的人!
分割
你最讨厌的人

1. wrap

$('p').wrap("
");

转换后的HTML

    
你最喜欢的人!
    
分割
    
你最讨厌的人

wrap 在匹配元素外包裹元素 （单独）

2. wrapAll

$('p').wrapAll("
");

转换后的 HTML

    
你最喜欢的人!
你最讨厌的人
    
分割

wrapAll 将匹配的元素外添加一层 （一起） 如果中间间隔其他元素，其他元素会放到包裹元素之后

3. wrapInner

$('p').wrapInner("");

转换后的HTML

    
你最喜欢的人!
    
分割
    
你最讨厌的人

wrapInner 把匹配到的所有元素的内容 添加一层!

遍历元素

• children() 直接子元素合集
• next() 紧随其后的同辈元素
• prev() 在其前面的同辈元素
• siblings() 所有同辈元素
• closest() 获取最近的匹配元素

$('body').bind('click', function (e) {
    $(e.target).closest('p').css('color','red');
});
// 当前元素如果匹配直接返回，如果不匹配向上级查找，如果没有符合返回空jquery对象

• parent() 返回符合类型的直接父节点
• parents() 返回符合类型的所有父节点

CSS-DOM

1. offset()

var offset = $('p').offset();
var top = offset.top;   // 6
var left = offset.left; // 8

获得当前元素在当前视窗的相对偏移， 返回两个属性，top/left

2. position()

你最喜欢的人!
分割

js

var position = $('div').position();
var top = position.top;     // 300
var left = position.left; // 20

获得相对于最近一个样式为 position 样式属性设置为 relative 或者 absolute 的祖节点的偏移量 值包括 top/left

3. scrollTop() scrollLeft()

var $body = $('body');
var $bodyLeft = $body.scrollLeft(); // 获取左偏移
var $bodyTop = $body.scrollTop();   // 获取上偏移
// 设置滚动到指定位置
$('div').scrollLeft(300);
$('p').scrollTop(200);