Python 前端开发之jquery介绍

一、引述

需求一：有html标签关系如下，请找到所有的含有a标签的li标签

<div>
        <ul>
            <li class="city">北京</li>
            <li class="city"><a href="">上海</a></li>
            <li class="city">天津</li>
        </ul>
    </div>

原生js实现：

<script>
    var objs = document.getElementsByClassName('city')
    for(var i=0;i< objs.length;i++){
        arry_a = objs[i].getElementsByTagName('a')
        if(arry_a.length>0){
            console.log(objs[i]
            )
        }
    }
</script>

jqeury实现：

$('li').has('a')

需求二：将上面的li标签实现隔行换色效果

原生js实现：

var objs = document.getElementsByClassName('city')
    for(var i=0;i< objs.length;i++){
        if(i%2==0){
            objs[i].style.backgroundColor = 'lightblue'
        }else{
            objs[i].style.backgroundColor = 'lightyellow'
        }
    }

jquery实现：

$('li:odd').css('background-color','lightblue')
$('li:even').css('background-color','lightyellow')

需求三：点击按钮，显示页面中的三个div，并给div添加文本内容

<!--样式-->
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>
    <!--body标签-->    
    <button>操作</button>
    <div></div>
    <div></div>
    <div></div>

原生js实现：

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

jquery实现：

<script src="jquery3.4.1.js"></script>
    <script>
            var oBtn = $('button'); //根据标签名获取元素
            var oDiv = $('div'); //根据标签名获取元素
            oBtn.click(function(){
                oDiv.show(2000).html('赵云');//显示盒子，设置内容
            })
    </script>

尽管，你现在啥也不知道，你就知道用上了jquery咱们写代码节省了很多操作，便利了很多就OK了～～～

二、jqeury介绍

1、为什么要使用jQuery

jQuery 的两大特点

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

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

2、什么是 jQuery

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

js库是把我们常用的复杂功能封装到简单的方法中，我们用的时候，将库直接引入然后调用方法即可。

初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能API。

这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。

版本说明

jQuery 有三个大版本：

• 1.x版本：最新版为 v1.11.3。

• 2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）。

• 3.x版本。

三、jQuery的使用

1、使用 jQuery 的基本步骤

下载 ：jQuery有两个文件，一个是jquery-3.4.1.js(未压缩版)，一个是jquery-3.4.1.min.js(压缩版,推荐项目上线时使用)

关于jQuery的相关资料：

• 官网：http://jquery.com/

• 官网API文档：http://api.jquery.com/

• 汉化API文档：http://www.css88.com/jqapi-1.9/

• jquery 在线手册 ：http://hemin.cn/jq/

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

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

1）、入口函数（重要）

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

原声js入口函数：

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

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

写法一：文档加载完毕，图片不加载的时候，就可以执行这个函数。

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

写法二：文档加载完毕，图片不加载的时候，就可以执行这个函数。（写法一的简洁版）

$(function () {
           alert(1);
       });

写法三：文档加载完毕，图片也加载完毕的时候，在执行这个函数。

$(window).ready(function () {
           alert(1);
       })

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

区别一：书写个数不同：

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

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

区别二：执行时机不同：

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

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

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

2）、jQuery的$符号

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

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

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

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