jq: 引用dom

在jQuery实参中，可以传

1. 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>
      

1. 原生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>
      

1. 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>
      

1. 空值： 可以填null false 空 ,反会空的jq对象

        console.log( $(null) )
console.log( $(false) )
console.log( $() )

      

1. 其他： 放入其他时会也会放在jq对象的0位中，可以放true 123 obj 等等，但注意不要同时放多个，那样会返回空，那样的话建议使用数组。

        console.log( $(true) )
console.log( $(123) )
console.log( $({name: "fanghuayong"}) )
console.log( $("abc", "d", "efg") )