jQuery 对象与 JavaScript DOM 对象

jQuery 对象与DOM对象的关系

• jQuery对象类似数组，它的每个元素都是一个引用了DOM节点的对象。

• jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法。

• DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法。

一般而言，jQuery 的对象命名以 $打头，以示区别。

$("#img").attr("src","test.jpg");// 这里的 $("#img")就是 jQuery 对象。
document.getElementById("img").src = "test.jpg";//这是DOM对象

DOM 对象转 jQuery 对象

把DOM对象包装起来，即$(DOM对象) 就可以获得 jQuery 对象，之后就可以使用 jQuery 的方法。

var val = document.getElementById("val"); //DOM对象
var $val = $(val); //jQuery 对象

jQuery 对象转DOM对象

• jQuery 对象是一个数据对象，可以通过 [i] 的方法，来得到相应的 DOM 对象。

• 通过 .get(i) 的方式得到 DOM 对象。

• 如果找不到对象，返回[]，而不是 undefined 或者 null。

var $val = $("#val"); //jQuery 对象
var val = $val[0]; // 索引为[0]DOM 对象
var val = $val.get(0) 
alert(val.checked); //检测这个checkbox是否被选中

jQuery 选择器返回

按照 tag，class，属性（如：[name=value]，[name$=tail]，[name^=head] 等）

$('p,div'); // 把<p>和<div>都选出来
$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来
var tr = $('tr.red'); // 找出<tr class="red ...">...</tr>
var a = $('.red.green'); // 注意没有空格！
// 符合条件的节点：
// <div class="red green">...</div>
// <div class="blue green red">...</div>
var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM
// 例如: class="icon-clock", class="abc icon-home"

层级选择器‘ ’、子选择器 ‘>’、过滤器 ‘：’、表单选择器

<!-- HTML结构 -->
<div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>

$('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
$('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]

$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], 无法选出，因为<div>和<li>不构成父子关系

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

jQuery.find() /.each() 等返回为 DOM 对象

var jsons = {};
//直接用 DOM 对象的方法获取属性
var $forms = $('form#test-form p');
var matchs = $forms.find('input[name][type!=radio], input:checked, select');
matchs.each((index, ele)=> {
    jsons[ele.name] = ele.value;
});
var json = JSON.stringify(jsons)
//.each()处理每个被返回的DOM对象->jQuery获取属性
json = {};
$('input:not(:radio),select').each(function(){
    json[$(this).attr('name')] = $(this).val();
});
$('input:radio:checked').each(function(){
    json[$(this).attr('name')] = $(this).val();
});
json = JSON.stringify(json)

参考资料

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001437023139167510b90eb2c924f72aeba0db592a9eb54000
http://www.css88.com/jqapi-1.9/find/