JQeury1

1. 第一个JQuery

$(document).ready()与onload的区别

<script type="text/javascript">
    // 当文件加载完毕再执行
    // 原生js写法
    onload = function(){
        alert('原生js');
    }

    // jquery 写法
    $(document).ready(function(){
        alert('jquery');
    })
    
    // 简写
    $(function(){
        alert('简写');
    })

    
</script>

2. DOM对象和JQuery对象

js语言:
DOM 对象，只能使用原生js的方法及属性
DOM对象不能使用jQuery的属性及方法

jQuery语言:
jQuery语法创建的对象，建议使用$开头
jQuery对象：是一个jQuery的结果集
jQuery创建出来的对象只能jQuery的属性及方法
jQuery对象就是对DOM对象的包装
jQuery对象只能使用jQuery对象的方法及属性

// 二者之间的相互转换
// jQuery对象转为DOM对象
var divJs1 = $div[0];
console.log(divJs1);
    
var divJs2 = $div.get(0);
console.log(divJs2);
    
// DOM对象转为jQuery对象
var $div2 = $(div1);
console.log($div2);

3.JQuery选择器

jQuery选择器的返回值为jQuery对象的结果集 本身是一组
jQuery对象
标签的选择器的结果不能直接使用，需要获取到里面的独立的对象在进行调用属性或方法

可以使用2种方法获取对象；
1.get(index)或 [index] ===>返回DOM对象，只能调用DOM的属性
2.eq(index) ===返回jQuery对象 只能调用jQuery的属性和方法

// 过滤选择器的小应用
<!--下拉框-->
<!--onchange:下拉框的事件-->
<select onchange="func()">
    <option selected="selected">11</option>
    <option>22</option>
    <option>33</option>
</select>

<script>
    // 当下拉框被触发时执行 ！！！
    function func () {
        //console.log('123');
        // 获取当前被选中的option
        var $se = $('select option:selected');
        console.log($se.get(0).innerText);  // get(0) dom对象
    }
</script>

JQuery2