jQuery学习笔记——jQuery基本介绍

1.jQuery简介

jQuery是JavaScript的一个函数库，本质上就是一堆JavaScript封装的函数和代码。
jQuery的好处：代码量少、解决浏览器兼容问题、文件的体积少、使用操作方便、链式编程、隐式迭代、插件丰富、开源、免费。
jQuery的顶级对象：jQuery或者**$**，一般为了方便使用$。
jQuery文件的引入：在script中的src属性中引入正常的jQuery文件或者是压缩版。

//引入jQuery文件之后，才可以在js代码中调用jQuery中的函数
<script src="jquery-1.12.2.js"></script>

2.jQuery对象和DOM对象互转

虽然jQuery对象是封装好的JavaScript函数，很好解决浏览器兼容性问题，但是依然存在很多未知的兼容问题，所以jQuery文件一直都在更新，所以jQuery对象有时也需要转换为DOM对象来解决问题。
DOM对象转为jQuery对象：$(DOM对象)。
jQuery对象转为DOM对象：jQuery对象后加上[0]或者get(0)。

window.onload = function() {
         var btn = document.getElementById('btn');
    //    DOM对象转换为jQuery对象 $(DOM对象)
         $(btn).click(function() {
         $(this).css("backgroundColor","yellow");
        });
         btn.onclick = function() {
          this.style.backgroundColor = 'red';
       }
   // jquery对象转换为DOM对象 $(DOM对象).get(0)/[0]
         var btn = $(btn).get(0);
         btn.onclick = function() {
         this.style.backgroundColor = 'green';
         }
}

3.jQuery页面加载事件

DOM的页面加载事件：window.onload = function() {} 只会执行最后一次window.onload事件
jQuery页面加载事件的方式：

方式1：$(window).load(function{}); //这种方式和DOM页面加载事件一样
方式2：$(document).ready(function()) {}; //页面中基本的标签加载完毕后才会触发
方式3：$/jQuery(function() {});// 页面基本标签加载完毕后触发
使用$(function() {});//这种方式较多

例如：
$(window).load(function() { 
         // 页面中所有内容包括图片 css文件 js文件加载完毕后，才会执行
         console.log('张三');
     });
     $(document).ready(function() {
        // 页面基本标签执行完后才执行
         console.log("张三");
    });
     $(document).ready(function() {
         console.log("张三");
     });
     $(function() {
         // 页面基本标签执行完后才执行
         console.log('张三');
     });