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

鳄鱼君

发表文章数:643

热门标签

, ,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 经验教程 » 初识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版本的!

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《初识jQuery jQuery是什么 jQuery三个版本区别》 发布于2020-08-06

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

1 + 5 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册