锋利的jquery笔记
2017-12-19 本文已影响0人
何必自找失落_
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 结构
<label><input type="checkbox" id="check"/>点我</label>
原生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 结构
<body>
<p>你最喜欢的人!</p>
</body>
方法1
$('p').replaceWith('<strong>你最讨厌的人</strong>');
方法2
$('<strong>你最讨厌的人1</strong>').replaceAll('p');
被替换完成之后原有元素添加的事件也不复存在, 想要事件需要重新添加
包裹节点
以下原始 HMTL 结构都是这样的
<p>你最喜欢的人!</p>
<div>分割</div>
<p>你最讨厌的人</p>
- wrap
$('p').wrap("<div></div>");
转换后的HTML
<body>
<div><p>你最喜欢的人!</p></div>
<div>分割</div>
<div><p>你最讨厌的人</p></div>
</body>
wrap 在匹配元素外包裹元素 （单独）
- wrapAll
$('p').wrapAll("<div></div>");
转换后的 HTML
<body>
<div><p>你最喜欢的人!</p><p>你最讨厌的人</p></div>
<div>分割</div>
</body>
wrapAll 将匹配的元素外添加一层 （一起） 如果中间间隔其他元素，其他元素会放到包裹元素之后
- wrapInner
$('p').wrapInner("<b></b>");
转换后的HTML
<body>
<p><b><span>你最喜欢的人</span>!</b></p>
<div>分割</div>
<p><b>你最讨厌的人</b></p>
</body>
wrapInner 把匹配到的所有元素的内容 添加一层!
遍历元素
- children() 直接子元素合集
- next() 紧随其后的同辈元素
- prev() 在其前面的同辈元素
- siblings() 所有同辈元素
- closest() 获取最近的匹配元素
$('body').bind('click', function (e) {
$(e.target).closest('p').css('color','red');
});
// 当前元素如果匹配直接返回，如果不匹配向上级查找，如果没有符合返回空jquery对象
- parent() 返回符合类型的直接父节点
- parents() 返回符合类型的所有父节点
CSS-DOM
- offset()
var offset = $('p').offset();
var top = offset.top; // 6
var left = offset.left; // 8
获得当前元素在当前视窗的相对偏移， 返回两个属性，top/left
- position()
<p><span>你最喜欢的人</span>!</p>
<div style="position:absolute; left: 20px; top: 300px;">分割</div>
js
var position = $('div').position();
var top = position.top; // 300
var left = position.left; // 20
获得相对于最近一个样式为 position 样式属性设置为 relative 或者 absolute 的祖节点的偏移量 值包括 top/left
- scrollTop() scrollLeft()
var $body = $('body');
var $bodyLeft = $body.scrollLeft(); // 获取左偏移
var $bodyTop = $body.scrollTop(); // 获取上偏移
// 设置滚动到指定位置
$('div').scrollLeft(300);
$('p').scrollTop(200);
