Python 前端开发之jquery介绍

一、引述

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

原生js实现：

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添加文本内容

             div{             width: 100px;             height: 100px;             background-color: green;             margin-top: 20px;             display: none;         }                   操作     

原生js实现：

jquery实现：

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

二、jqeury介绍

1、为什么要使用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 的入口函数和 $ 符号

原生 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了，不用等到所有的外部资源都加载完成。

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

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

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

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

软件开发 人工智能 云计算 机器学习

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。