01.jQuery:介绍和体验

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/vivian_1122/article/details/89065485

1.什么是javaScript库

javaScript框架库：就是一个普通的js文件，封装了很多的很多的函数，
封装了很多的兼容的代码；

常见的框架库

prototype,YUI,Dojo,ExtJS,jQuery等，这些库对javaScript进行了封装，
简化了开发，这些库都是对javaScript的封装，内部都是JavaScript实现的；
ps：有的需要花钱，有的做的并不是很好，选择不花钱的，免费的，做的又好的；

2.什么是jQuery

jQuery就是一个javaScript函数库；

3.为什么要学习jQuery?

DOM 中一个简单的功能需要大量的代码
DOM 中兼容的问题很多
DOM 中代码的兼容性很差
DOM 中window.onload也只能有一个...

特点：Write Less, Do More
1.很好的解决了不同浏览器的兼容问题
2.体积小，链式编程，隐式迭代
3.插件丰富，开源，免费（插件多，缺什么找什么，让编写javaScript程序更简单，
更强大！）

4.jQuery初体验

    <div id="dv"></div>
    <button id="btn">点击</button>
    <script>
        // 点击按钮，改变盒子的宽，高，背景颜色
        $('#btn').click(function() {
            $('#dv').css({
                width: 300,
                height: 500,
                background: 'blue'
            })
        })
    </script>

//原生
            var dv = document.getElementById('dv');
            var btn = document.getElementById('btn');
            btn.onclick = function() {
                dv.style.width = '300px';
                dv.style.height = '300px';
                dv.style.backgroundColor = 'green';
            }

5.jQuery中的顶级对象 $

Dom 中的顶级对象：document ---页面中的顶级对象
document 点出来的是DOM中的属性和方法；

Bom 中的顶级对象：window ---浏览器中的顶级对象
window 点出来的是浏览器中的属性和方法
window.document

jQuery 中的顶级对象：jQuery ---$
$ 点出来的是jQuery中的方法

6.页面的加载事件

<!--javaScript 页面加载事件-->
window.onload 只能写一次，重复会被后面的干掉
页面所有的标签，图片，外部引入加载后触发


<!--jQuery 页面加载事件-->
$(function(){}) DOM基本标签加载就触发，可以写多个

7.为什么jQuery对象和DOM对象要互转

DOM对象转jQuery对象：操作方便，因为jQuery中方法都是封装好了的，
而且兼容问题解决的很好，代码少方便

jquery对象转DOM对象，因为jquery中文件一直在更新，很多东西都是随着使用
而进行封装和升级，不太可能把所有的dom中用到的进行封装，还有很多未知的
兼容问题没有封装进去，所有，有的时候jquery中不能解决的问题，还需要原生
js代码来解决，所以，jquery对象有时候需要转成dom对象来进行操作；

<!--把jquery对象转成DOM对象有两种方式：-->
1.$().get(0);
2.$()[0];

var btn = document.getElementById('btn');//DOM对象
var btn1 = $(btn).get(0);//转成DOM对象

8.再次体验jQuery代码的便捷

body背景开关灯效果

    <button class="btn">关灯</button>
    <script>
        // 点击按钮，改变盒子的宽，高，背景颜色
        $('.btn').click(function() {
            console.log($('.btn').text())
            if ($(this).text() == '关灯') {
                $('body').css({
                    backgroundColor: 'black'
                })
                $(this).text('开灯')
            } else if ($(this).text() == '开灯') {
                $('body').css('backgroundColor', 'white')
                $(this).text('关灯')
            }
        })
    </script>