博客列表 >jQuery的两种引入方式

jQuery的两种引入方式

Pengsir
Pengsir原创
2018年04月03日 16:52:454721浏览

jquery的第一种引入方式:使用cdn在线引用

   网络上的在线的一个jQuery类库(百度静态资源库:cdn.code.baidu.com)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery的二种引入方式</title>
    <!--<!–jquery的第一种引入方式:使用cdn在线引用 网络上的在线的一个jQuery类库(百度静态资源库:cdn.code.baidu.com)–>-->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
//    window.onload:在页面元素全部加载完后自动调用的事件 ===$(document).ready(function(){})
//   $(document).ready(function(){})的简写 $(function () {})
        $(function () {
            $('h2').css('background','yellow')
        })
    </script>
   
</head>
<body>
    <h2>jQuery的第一种引入方式(使用cdn在线引用)</h2>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

jquery的第二种引入方式:本地引用   

        在jquery官网下载(jquery.com)jquery文件到本地,复制到网站根目录,再用script标签引用即可

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery的二种引入方式</title>
    <!--jquery的第二种引入方式:本地引用   在jquery官网下载jquery文件到本地,复制到网站根目录,再用script标签引用即可-->
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('h2').css('background','green')
        })
    </script>
</head>
<body>
  
    <h2>jQuery的第二种引入方式(本地引用)</h2>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:

  1. 如何使用css的语法来选择元素?

    jquery基本语法:$('选择器').css('属性','值')

  2. jQuery是什么?

    就是一个javascript的类库,函数库

  3. 我们为什么要学jQuery?
    a:各个浏览器之间的兼容性
    b:jquery:写的更少,做的更多
    c:为看懂其它程序猿的代码,也必须掌握它

  4. jquery 的编程思想:查询+操作,内置循环,迭代
    jquery基本语法:例:$('选择器').方法()

  5. 在jquery对象上不能直接调用DOM方法,jquery是一个DOM对象的数组

  6. jQuery对象与DOM对象之间的转换方法,举例?

    jQuery对象是包装DOM对象后产生的,但是两者却不能混用,DOM对象才能使用DOM方法,jQuery对象才能使用jQuery方法 


  7. jQuery对象转成DOM对象:

    (1)jQuery对象实际上是一个数据对象,可以通过[index]方法获得相应的DOM对象。

    如:var $v=$("#v"); //得到jQuery对象

    var v=$("v")[0];//转换成DOM对象

    (2)jQuery本身可以通过.get(index)方法得到相应的DOM对象

    如:var $v=$("#v"); //得到jQuery对象

    var v=$v.get(0);


    DOM对象转成jQuery对象:

    对于已经是一个DOM对象,只需要用$()将DOM对象包装起来,就能获得jQuery对象了

    如:var v=document.getElementById("v"); //得到DOM对象

    var $v=$(v); //转成jQuery对象

    转换后,就可以任意使用jQuery的方法了


    以下方法都正确:

    $("#div").html();

    $("#div")[0].innerTHML;

    $("#div").eq(0)[0].innerHTML;

    $("#div").get(0).innerHTML;

    $(document.getElementById("div")).html()


    平时在使用过程中可以在变量前面加$以区分DOM对象和jQuery对象,添加$的为jQuery对象,没有的则为DOM对象


效果图:

jquery第一种引用方式(使用cdn在线引用).pngjquery第二种引入方式(本地引用).png

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议