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/