第2章基础核心 – PM开源达人

一．代码风格

$(function () {});

//执行一个匿名函数

$(‘#box’);

//进行执行的ID元素选择

$(‘#box’).css(‘color’, ‘red’);

//执行功能函数

jQuery(function () {});

jQuery(‘#box’);

jQuery(‘#box’).css(‘color’, ‘red’);

$().css(‘color’, ’red’);

//理论上合法，但实际上缺少元素而报错

$(‘#box’).css(‘color’, ‘red’).css(‘font-size’, ’50px’); //连缀

二．加载模式

window.onload = function () {};

//JavaScript等待加载

$(document).ready(function () {});

//jQuery等待加载

三．对象互换

alert($);

//jQuery 对象方法内部

alert($());

//jQuery 对象返回的对象，还是 jQuery

alert($(‘#box’));

//包裹 ID 元素返回对象，还是 jQuery

从上面三组代码我们发现：只要使用了包裹后，最终返回的都是 jQuery 对象。这样的好处显而易见，就是可以连缀处理。但有时，我们也需要返回原生的 DOM 对象，比如：

alert(document.getElementById(‘box’));

//[object HTMLDivElement]

四．多个库之间的冲突

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery-2.0.2.js"></script>
    <script src="js/demo.js"></script>
    <script src="js/base.js"></script>
    <script src="js/tool.js"></script>
</head>

<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        $(function() {
            // 库的冲突第1种解决方案。
            /*
            <script src="js/jquery-2.0.2.js"></script>
            <script src="js/demo.js"></script>
            因为两个的库会有冲突所以，要改成如下：
            alert($(".box").get(0)); //[object HTMLDivElement]
            alert($(".box").ge());
            */
            var $$ = jQuery;
            alert($$(".box").get(0)); //[object HTMLDivElement]
            //alert(jQuery(".box").get(0)); //[object HTMLDivElement]
            alert($(".box").ge()); //[object HTMLDivElement]

            // 库冲突的第2种方法

            jQuery.noConflict(); //将$符所有权剔除
            var $$ = jQuery;
            $(function () {
                alert($('#box').ge(0));
                alert($$('#box').width());
            })
        })
    </script>
</body>

</html>

JQUERY

我们要如何帮助您？