zoukankan      html  css  js  c++  java

  • jQuery系列（一）：jQuery介绍

    1、为什么要使用jQuery

    （1）什么是jQuery

    jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

    js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。

     关于jQuery的相关资料：

    （2）jQuery的第一个代码

    使用原生js来实现下面代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(){
            let oBtn = document.getElementsByTagName('button')[0];
            let divArr = document.getElementsByTagName('div');
            oBtn.onclick = function () {
                for (let i = 0; i < divArr.length; i++) {
                    divArr[i].style.display = "block";
                    divArr[i].innerHTML = "赵云";
                }
            }
        }
    </script>

</head>
<body>

<button>操作</button>
<div></div>
<div></div>
<div></div>


</body>
</html>

    如果使用jQuery来写，保持其他代码不变，<script>部分的代码修改为：（需要导入jQuery）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>
<button>操作</button>
<div></div>
<div></div>
<div></div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // 获取dom元素
        let oBtn = $('button'); //根据标签名获取元素
        let oDiv = $('div'); //根据标签名获取元素
        oBtn.click(function(){
            oDiv.show(1000);//显示盒子
            oDiv.html('赵云'); // 设置内容
        });//事件是通过方法绑定的
    })
</script>

</body>
</html>

    （3）：jQuery的两大特点

    • 链式编程：比如.show()和.html()可以连写成.show().html()。

    • 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

    2、jQuery的使用

    （1）jQuery的基本使用：

    a、导包    b、入口函数    （3）：功能实现代码（事件处理）

    注意：导包的代码一定要放在js代码的最上面

    （2）jQuery代码会有两个版本，一个是.min.js，一个是.js文件。

    他们的区别是：

    • 第一个是未压缩版，第二个是压缩版。

    • 平时开发过程中，可以使用任意一个版本；但是，项目上线的时候，推荐使用压缩版。

    3、jQuery的入口函数和$符号

    （1）入口函数（重要）

    原生js的入口函数指的是：windows.onload = function(){};如下：

    //原生 js 的入口函数。页面上所有内容加载完毕，才执行。
//不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
window.onload = function () {
     alert(1);
}

    jQuery的入口函数，有如下几种写法：

    写法1：
 //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(document).ready(function () {
           alert(1);
       })

写法2：
 //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(function () {
           alert(1);
       });

写法3：
  //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
       $(window).ready(function () {
           alert(1);
       })

    注意：

    jQuery入口函数与js入口函数的区别：

    区别一：书写个数不同：

    • Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。

    • jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

    区别二：执行时机不同：

    • Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

    • jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

    文档加载的顺序：从上往下，边解析边执行。

    （2）jQuery的$符号

    jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

    jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script>
    console.log($);
    console.log(jQuery);
    console.log($===jQuery);
</script>

    执行效果：

    从打印结果可以看出，$代表的就是jQuery。

     4、js中的DOM对象和jQuery对象比较

    （1）二者区别

    通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：

    针对下面这样一个div结构：

    <div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div

    通过原生js获取这些元素节点的方式：

    let myBox = document.getElementById("app");           //通过 id 获取单个元素
let boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
let divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

    通过jQuery获取这些元素节点的方式：（获取的都是数组）

     //获取的是数组，里面包含着原生 JS 中的DOM对象。
console.log($('#app'));
console.log($('.box'));
console.log($('div'));

    设置当前4个div的样式：

        $('div').css({
        'width': '200px',
        'height': '200px',
        "background-color": 'red',
        'margin-top': '20px'
    })

    由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。

    总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

    5、DOM对象和jQuery对象互相转换

    （1）DOM对象转为jQuery对象

    $(js对象);

    （2）jQuery对象转换为DOM对象

    jquery对象[index];      //方式1（推荐）
jquery对象.get(index);  //方式2

    jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

    $('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';

    总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。

    6、一个实例

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        //入口函数
        $(function () {
            let jqLi = $("li");
            for (let i = 0; i < jqLi.length; i++) {
                if (i % 2 === 0) {
                    //jquery对象，转换成了js对象
                    jqLi[i].style.backgroundColor = "pink";
                } else {
                    jqLi[i].style.backgroundColor = "yellow";
                }
            }
        });
    </script>
</head>
<body>
<ul>
    <li>felix</li>
    <li>felix</li>
    <li>felix</li>
    <li>felix</li>
    <li>felix</li>
    <li>felix</li>
</ul>
</body>
</html>

    效果图：
  • 相关阅读:
    [转载]四大Java EE容器
    [转载]javaEE规范和SSH三大框架到底有什么关系
    javaee包含的服务和组件
    Java类文件最大限制
    oracle给字段添加描述
    apache commons工具包
    redis教程
    git学习
    编程人物
    程序员必须了解的5大编程准则
  • 原文地址：https://www.cnblogs.com/felixwang2/p/9873874.html
Copyright © 2011-2022 走看看