jquery的介绍及使用

1. jQuery的定义

jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。

2. jQuery的作用

jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。

3. jQuery的优点

• jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。
• jQuery简化了 JavaScript 编程，代码编写更加简单。

4. 小结

• jQuery是一个免费、开源的JavaScript函数库
• jQuery的作用和JavaScript一样，都是负责网页和用户的交互效果。
• jQuery的优点就是兼容主流浏览器，代码编写更加简单。

1. jQuery的引入

<script src="js/jquery-1.12.4.min.js"></script>

2. jQuery的入口函数

我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。

入口函数示例代码:

<script src="js/jquery-1.12.4.min.js"></script>
<script>
    window.onload = function(){
        var oDiv = document.getElementById('div01');
        alert('原生就是获取的div：' + oDiv);
    };
    $(document).ready(function(){
        var $div = $('#div01');
        alert('jquery获取的div：' + $div);
    });
</script>

<div id="div01">这是一个div</div>

入口函数的简写示例代码:

<script src="js/jquery-1.12.4.min.js"></script>
<script>
    window.onload = function(){
        var oDiv = document.getElementById('div01');
        alert('原生就是获取的div：' + oDiv);
    };

    /*
    $(document).ready(function(){
        var $div = $('#div01');
        alert('jquery获取的div：' + $div);
    });
    */

    // 上面ready的写法可以简写成下面的形式：
    $(function(){
        var $div = $('#div01');
        alert('jquery获取的div：' + $div);
    }); 
</script>

<div id="div01">这是一个div</div>

3. 小结

• 引入jQuery

• 获取标签元素需要在入口函数来完成，它的速度比原生的 window.onload 更快

• jQuery入口函数有两种写法:

    // 完整写法
    $(document).ready(function(){
         ...
    });
  
    // 简化写法
    $(function(){
         ...
    });