简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery的两种引入方式
Blogger Information
Blog 61
fans 0
comment 0
visits 62715
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery的两种引入方式
Pengsir
Original
4713 people have browsed it

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

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！