操作 jQuery 对象
- 检查数量
- 父子邻居关系
- 过滤元素的集合
- 遍历
用 jQuery 创建 html 元素
dom 对象(元素)与 jQuery 对象:前者是浏览器的网页页面中渲染出来的元素,而后者是对一组 dom 元素的包装。
检查 DOM 对象:if(obj.nodeType)
检查 jQuery 对象: if(obj.jquery)
转换:
var jqueryObj = $(domObj);
var domObj = jqueryObj.get([index]);
<script type="text/javascript">
var domObj = document.getElementById('div');
var jqueryObj = $('div');
console.log(domObj);
console.log(jqueryObj);
console.log(domObj.nodeType);
console.log(jqueryObj.jquery);
console.log(domObj.jquery);
console.log(jqueryObj.nodeType);
</script>
创建元素
- 使用:$('<div>Hello</div>'); 创建一个元素
- 使用:jQuery 对象的 appendTo 方法,可以把该元素放到网页上。
- 属性设置:
<script type="text/javascript">
$(function(){
var link1 = $('<a>',{
text: 'thisisalink',
href: '#',
target: '_blank',
title: 'goto somewhere'
});
link1.appendTo('body');
var link2 = $('<a>link2</a>').attr({
text: 'thisisalink',
href: '#',
target: '_blank',
title: 'goto somewhere'
});
link2.appendTo('body');
var div = $('<div>Hello</div>');
div.appendTo('body')
console.log($('div'))
})
</script>
检查和获取元素
- 检查元素数量 $('xxx').length
- 提取元素:(1)[index] 返回DOM元素 (2)get([index]) 返回DOM元素或集合元素 (3)eq(index) 返回jQuery对象 (4) first()
last() 返回jQuery对象 (5) toArray() 把 jQuery 对象直接转换为 DOM 元素的数组
<script type="text/javascript">
var lis = $('li');
lis2 = lis.eq(1);
console.log(lis2);
console.log(lis.toArray());
</script>