初识jQuery  jQuery是什么 jQuery三个版本区别

初识jQuery jQuery是什么 jQuery三个版本区别

jQuery是一款优秀的JavaScript库,从名字来看jQuery= js + Query,跟查询有关,学贷更少,做的更多! 使用原生的js寻找DOM元素:
<div class="box1"></div>
<div></div>
<div id="box2"></div>

<script>
    window.onload = function (env) {
        //利用原生的js查找DOM元素
        var div1 = document.getElementsByClassName('box1')[0];
        var div2 = document.getElementsByTagName('div')[0];
        var div3 = document.getElementById('box2');
        console.log(div1);
        console.log(div2);
        console.log(div3);

    }</script>
<script>
    //使用jquery
    $(function () {
        var $div1 = $('.box1')[0];
        var $div2 = $('div')[1];
        var $div3 = $('#box2')[0];
        console.log($div1);
        console.log($div2);
        console.log($div3);
    })</script>
修改设置样式:
<script>
    window.onload = function (env) {
        //利用原生的js查找DOM元素
        var div1 = document.getElementsByClassName('box1')[0];
        var div2 = document.getElementsByTagName('div')[0];
        var div3 = document.getElementById('box2');

        //利用元素的js修改背景颜色
        div1.style.backgroundColor = '#393049';
        div2.style.backgroundColor = '#393049';
        div3.style.backgroundColor = '#393049';

    }
</script>
<script>
    //使用jquery
    $(function () {
        var $div1 = $('.box1');
        var $div2 = $('div');
        var $div3 = $('#box2');

        $div1.css({
            margin: '20px auto',
            borderRadius: '4px',
            boxShadow: '0 3px 6px rgba(28,31,33,.1)',
            border: 'none',
            width: '600px',
            height: '100px'
        });

        $div2.css({
            margin: '20px auto',
            borderRadius: '4px',
            boxShadow: '0 3px 6px rgba(28,31,33,.1)',
            border: 'none',
            width: '600px',
            height: '100px'
        });
        $div3.css({
            margin: '20px auto',
            borderRadius: '4px',
            boxShadow: '0 3px 6px rgba(28,31,33,.1)',
            border: 'none',
            width: '600px',
            height: '100px'
        });
    })
</script>
除了代码写的少,样式操作丰富之外,还有最重要的一点:浏览器兼容 jQuery有3个版本,主要区别:
  1. 1.x兼容ie678,相对于其它版本文件较大,官方只做bug维护,功能不再更新,最终版本:1.12.4
  2. 2.x不兼容ie678,相对于1.x文件较小,官方制作bug维护,功能不再更新,最终版本:2.2.4
  3. 3.x不兼容ie678,只支持最新的浏览器,很多老的jQuery插件不支持这个版本,相对与1.x文件焦雄安,提供不包含Ajax/动画API版本
站在巨人的肩膀上,你浏览百度,会发现使用的时1.x版本的,所以选择使用1.x版本的!
分享到 :

发表评论

登录... 后才能评论