jquery的$

jQuery是什么

jQuery是一个快速、简洁的JavaScript框架,jQuery设计的宗旨是“write Less,Do More”。

jQuery的$

使用过jQuery的应该都知道jQuery的$,看到源码中的这一段就能知道相当于jquery的简写,

jquery有两种用法,一种是用$表示,还有一种是jQuery
 // Map over jQuery in case of overwrite
       var   _jQuery = window.jQuery,

        // Map over the $ in case of overwrite
        _$ = window.$;

    jQuery.noConflict = function(deep) {
        if (window.$ === jQuery) {
            window.$ = _$;
        }

        if (deep && window.jQuery === jQuery) {
            window.jQuery = _jQuery;
        }

        return jQuery;
    };

jQuery的$()函数

主要的用法有下面几种

1. 作为选择器 jQuery(selector,context)

在函数中接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象。默认情况下,查找时从根元素上开始找,也就是说查找范围是整棵文档树。但是如果给定了上下文context,则在指定上下文中查找,也可以直接写在css选择器表达式(selector)后,如下

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 80px;
            margin-top: 30px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div1 sos"></div>
    <div class="div2"></div>
    <div class="div1"></div>
    <div class="div2"></div>
    <script src="/jquery.js"></script>
    <script>
        // 入口函数
        $(document).ready(function() {
            console.log($('.div1'));
            console.log($('.div1.sos'));
            console.log($('.div1', '.sos'));


        })
    </script>
</body>

</html>

打印结果,第二个和第三个选择了一样,但是要注意的是返回的是伪数组,自己可以使用($(‘.div1’, ‘.sos’) instanceof Array)打印看下
jquery的$_第1张图片

2.创建dom元素

后面一起放图

  $('
我是傻瓜
'
).appendTo('body')

3.入口函数

当传进去的参数是函数的时候,则在document对象上绑定一个ready事件监听函数,当DOM结构加载完成的时候执行

// jquery入口函数
        $(document).ready(function() {
            console.log('入口2');
        })
        $(function() {
                console.log('入口1');
            })
            // 原生的入口函数
        window.onload = function() {
                console.log('原生的入口函数');
            }

两者之间的区别随便百度下就有,这里不在多说

4.将dom对象转换为Jquery对象

下面介绍了两者相互转换的方法

 <div class="contain">
    </div>
    <script src="./jquery.js"></script>
    <script>
        var contain = document.querySelector('.contain');
        console.log(contain);
        //将dom对象变为jq对象
        console.log($(contain));
        //将jq对象转为dom对象
        console.log($(contain)[0], $(contain).get(0));
    </script>

jquery的$_第2张图片

两者的区别

    $可以调用那些不需要操作对象的方法,如$.prototype,如果是给某个对象赋值(注意,这里有操作对象),就需要用$('#abc').val('123')的方式,因为像val()等方法中会用到$(this)去操作当前对象。

你可能感兴趣的:(jquery,前端,javascript)