jquery的attr属性js，jquery获取节点以及内容和属性
JS获取DOM元素的⽅法:
document.querySelector('.animated');            通过选择器获取⼀个元素
document.querySelectorAll('.animated');        通过选择器获取⼀组元素
document.documentElement                        获取html的⽅法document.documentElement是专门获取html这个标签的
document.body                                  获取body的⽅法document.body是专门获取body这个标签的。
所有获取DOM对象的⽅法中，只有getElementById()和querySelector()这两个⽅法直接返回的DOM对象本⾝，可直接为其绑定事件。
getElementXXX类型的⽅法，除了通过Id获取元素，其他都返回⼀个集合，如果需要取到具体的DOM元素，需要加索引，如：ElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第⼀个DOM元素。
querySelector()与querySelectorAll()两者的联系与区别：
联系： 两者括号中的取值都是选择器
区别： 当有多个class相同的元素时，使⽤querySelector()⽅法只能获取到第⼀个class为box的元素，⽽querySelectorAll()获取到了所有class为box的元素集合。
原⽣javascript⽅法：
var a = ElementById(“dom”)；通过id获取到该节点
del_space(a)；清理空格
var b = a.childNodes；获取a的全部⼦节点；
var c = a.parentNode；获取a的⽗节点；
var d = a.nextSibling；获取a的下⼀个兄弟节点
var e = a.previousSibling；获取a的上⼀个兄弟节点
var f = a.firstChild；获取a的第⼀个⼦节点
var g = a.lastChild；获取a的最后⼀个⼦节点jQuery⽅法：
jQuery.parent(expr) ；⽗元素
jQuery.parents(expr) ；到所有祖先元素，不限于⽗元素
jQuery.children(expr) ；查所有⼦元素，只会到直接的孩⼦节点，不会返回所有⼦孙
jQuery.prev() ；查上⼀个兄弟节点，不是所有的兄弟节点
jQuery.prevAll() ；查所有之前的兄弟节点
<() ；查下⼀个兄弟节点，不是所有的兄弟节
jQuery.siblings() ；查兄弟节点，不分前后
jQuery.find(expr);
跟jQuery.filter(expr)完全不⼀样⽽jQuery.find()的返回结果，不会有初始集中筛选出⼀部分，⽽$ (“p”).find(“span”)是从元素开始,
$ (“p”).find(“span”)是从元素开始,
等于$(“p span”)跟jQuery.filter(expr)完全不⼀样⽽jQuery.find()的返回结果，不会有初始集中筛选出⼀部分，⽽jQuery.find()的返回结果，不会有初始集合中的内容，
jQuery.filter(expr)；是从初始的jQuery对象集合中筛选出⼀部分jQuery.parent(expr) ；⽗元素
内容和属性值
js获取text、html、属性值、value的⽅法
jQuery获取text、html、属性值、value的⽅法
$("#test").text()或者$("#test").innerText
$("#test").html()或者$("#test").innerHTML
$("#test").attr("id")
$("#test").attr("value")或者$("#test1").val()或者$("#test1").value
结果对⽐
html:
<p id="test">这是段落中的 <b>粗体</b> ⽂本。</p>
js:
js与jQuery，text与innerText获取
$("#btn10").click(function(){
alert("Text: " + $("#test").text());
<!--结果  Text: 这是段落中的粗体⽂本。-->
});
$("#btn11").click(function(){
alert("Text: " + $("#test").innerText);
<!--结果  Text: undefined。-->
});
$("#btn12").click(function(){
alert("Text: " + ElementById("test").innerTEXT);
<!--结果  Text: test-->
});
js与jQuery，html与innerHTML获取
$("#btn20").click(function(){
alert("HTML: " + $("#test").html());
<!--结果  HTML: 这是段落中的 <b>粗体</b> ⽂本。 -->
});
$("#btn21").click(function(){
alert("HTML: " + $("#test").innerHTML);
<!--结果  HTML: undefined -->
});
$("#btn22").click(function(){
alert("HTML: " + ElementById("test").innerHTML);
<!--结果  HTML: 这是段落中的 <b>粗体</b> ⽂本。 -->
});
js与jQuery，属性值获取
$("#btn30").click(function(){
alert("id: " + ElementById("test").id);
<!--结果  id: test -->
});
$("#btn31").click(function(){
alert("id: " + $("#test").attr("id"));
<!--结果  id: test -->
});
html:
<input id='test1' value='aaa' class='test'>
js与jQuery，value获取
$("#btn40").click(function(){
alert("value: " + ElementById("test1").value);      <!--结果  value: aaa -->
});
$("#btn41").click(function(){
alert("value: " + $("#test1").val());
<!--结果  value: aaa -->
val()只能⽤于input元素的value值获取
});
$("#btn42").click(function(){
alert("value: " + $("#test1").attr("value"));
<!--结果  value: aaa -->
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。