jQuery学习课程笔记----概念

什么是jQuery

　　什么JavaScript库

总结：把JavaScript写的方法和函数封装了的特定集合

　　常见的JavaScript库

• jQuery
• prototype
• YUI
• Dojo
• Ext JS
• 移动端的zepto

　　什么是jQuery

总结：jQuery就是一个简洁快速的JavaScript库

1. jQuery：j就是JavaScript，query就是查询
2. jQuery封装了JavaScript的常用代码，优化了DOM操作，事件处理，动画设计和ajax交互
3. 学习jQuery的本质就是学习调用这些函数（方法）

jQuery的优点

1. 轻量级：核心文件几十kb，不会影响页面加载速度
2. 跨浏览器兼容：基本兼容了现在的主流浏览器
3. 链式编程，隐式迭代
4. 支持事件，样式，动画，简化了DOM操作
5. 支持插件扩展开发
6. 免费，开源

jQuery的基本使用

　　jQuery的入口函数

　　

　　　　 <script>
            /* 
                第一种：写在末尾
            */
            $('div').hide();
            /* 
                第二种：写在文章开头时由于DOM没有加载完，所以第一种写法不会生效，然后我们使用第二种方法
                    第二种方法有两种方式
            */
            // 方式一
            $(function(){
                // ... 此处是页面DOM加载完成的入口
            })
            // 方式二
            $(document).ready(function(){
                // ... 此处是页面DOM加载完成的入口
            });
        </script>

　　jQuery的顶级对象　$

　　总结：1、$是jQuery的别称

　　　　　2、$是jQuery中的顶级对象，相当于原生js中的window、

        <script>
　　　　　　　//这两种方式是一样的
　　　　　　　//方式一
           jQuery(function(){
                jQuery('div').hide();
           });
　　　　　　　//方式二
           $(function(){
               $('div').hide();
           })
        </script>    

DOM对象和jQuery对象的区别

DOM对象和jQuery对象

        <script>
            // 1. DOM对象，用原生js获取到的对象就是DOM对象
            var myDiv = document.querySelector('div');
            // 2. jQuery对象，用jQuery方式获取到的对象就是jQuery对象。本质：通过$符把DOM元素进行了包装
            $('div');
            // 3. jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法
        </script>

DOM对象和jQuery对象的相互转换

总结：要使用jQuery没有封装的原生的属性和方法，就需要把jQuery对象转换为DOM对象才能使用

• DOM对象转换为jQuery对象：$(DOM对象）

      var myDiv = document.querySelector('div');　　　　//DOM对象
      $(myDiv).hide();　　　　　　　　　　　　　　　　　　　　//jQuery对象

• jQuery对象转换为DOM对象
  • 　$('div')[index]            //index是索引号
  • 　$('div').get(index)       //index是索引号