本文主要是介绍jq: 引用dom,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
在jQuery实参中,可以传
- css选择器: 如css2的id class 子元素选择器,css3的等等
<div id="dom">Hello, world!</div><div class="dom1">1-1</div><div class="dom1">1-2</div><div class="dom1">1-3</div>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>console.log( $('#dom') )console.log( $('#dom')[0] )console.log( $('#dom').text() )console.log( $('.dom1') )console.log( $('.dom1')[2] )console.log( $('.dom1')[2].innerText )
</script>
- 原生dom,如原生dom 有索引的数组和类数组(索引会插入到对应的jq对象下)
<div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div><div class="div1">我是div</div>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>var oLi = document.getElementsByTagName('li');var div1 = document.getElementsByClassName('div1')[0];console.log( $(oLi) )console.log( $(div1) )console.log( $({0: 'a', 1: 'b'}) )console.log( $(['c', 'd']) )
</script>
- function: dom解析完成后执行,这种方式可以把script标签放在heard头部中(不推介),但是必须用函数包裹,不然执行的时候dom还没有解析完。
<div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>// dom文档解析完后执行
$(function() {console.log( $('li').text() )})// 相同
$(document).ready( function() {console.log( $('li').text() )})
</script>
- 空值: 可以填null false 空 ,反会空的jq对象
console.log( $(null) )
console.log( $(false) )
console.log( $() )
- 其他: 放入其他时会也会放在jq对象的0位中,可以放true 123 obj 等等,但注意不要同时放多个,那样会返回空,那样的话建议使用数组。
console.log( $(true) )
console.log( $(123) )
console.log( $({name: "fanghuayong"}) )
console.log( $("abc", "d", "efg") )
这篇关于jq: 引用dom的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!