前端开发之JQuery入门基础操作

技术前端开发之JQuery入门基础操作 前端开发之JQuery入门基础操作下载JQuery
目前jQuery有三个大版本:
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此

面向前端开发的JQuery基本操作。

下载JQuery

jQuery目前有三个主要版本:

1.x:兼容应用最广泛的ie678,官方只做BUG维护,没有新增功能。因此,对于一般项目,使用1.x版本是可以的,

2.x:与很少使用的ie678不兼容。官方只做BUG维护,没有新增功能。如果不考虑与低版本浏览器的兼容性,可以使用2.x,

3.x:与ie678不兼容,只支持最新的浏览器。除非特别要求,否则不会使用3.x版本,这是许多旧的jQuery插件不支持的。目前这个版本是以更新维护为主的官方版本。

注意:jquery-xxx.js和jquery-xxx.min.js的区别:jquery-xxx.js是开发版,是给程序员看的,有很好的缩进和注释,还有更大的前端培训. Jquery-XXX . min . js:生产版,用在程序中,没有缩进,体积更小,程序加载更快。

导入JQuery的js文件

直接导入min.js文件。例如:

脚本src=' js/jquery-3 . 3 . 1 . min . js '/脚本

JQuery对象和JS对象

差异与转化。

差异

JQuery对象操作起来更方便。

JQuery对象和js对象的方法并不常见。

转化

Jq-js: Jq对象[index]或jq对象。get(索引)。

Js-jq: $ (js对象)

JQuery的简单使用

事件绑定。

比如点击id为B的按钮,弹出提示框。

JQuery代码如下:

$('#b ')。单击(函数(){ 0

警报(' b ');

});

功能相同的JS代码如下,很明显JS代码比较复杂。

document.getElementById('b ')。onclick=function(){ 0

警报(' b ');

}

进入功能

入口函数是当前页面加载后运行的函数。JQuery代码如下:

$(function(){ 0

警报(“页面加载完成”);

});

而JS代码如下:

window . onload=function(){ 0

警报(“页面加载完成”);

};

注意:window.onload和$(函数)的区别:window.onload只能定义一次,如果定义多次,后者会覆盖前者;和$(function)可以多次定义。

风格控制。

例如,将id为div1的元素的背景颜色设置为红色。JQuery代码如下:

$('#div1 ')。css('背景色','红色');

或者:

$('#div1 ')。css('backgroundColor ',' red ');

相当于JS代码:

document . getelementbyid(' div 1 '). style . background COlOr=' red ';

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/62049.html

(0)

相关推荐

  • postman自动调用获取token

    技术postman自动调用获取token postman自动调用获取tokenPostman不光支持单次请求,还支持环境变量、全局变量、集合变量
    本文使用Collection Variable
    Coll

    礼包 2021年12月2日
  • 野蛮生长的电子烟凛冬将至

    技术野蛮生长的电子烟凛冬将至 野蛮生长的电子烟凛冬将至11月26日,随着相关“烟草专卖法实施条例”的修改,电子烟正式纳入烟草管理规定。就在不久前,国家卫健委等8部门联合印发了《关于进一步加强青少年控烟工

    礼包 2021年11月30日
  • C++怎么定义变量的引用

    技术C++怎么定义变量的引用本篇内容介绍了“C++怎么定义变量的引用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!数组的

    攻略 2021年11月30日
  • 怎么用Java实现PC人脸识别登录

    技术怎么用Java实现PC人脸识别登录这篇文章主要讲解了“怎么用Java实现PC人脸识别登录”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用Java实现PC人脸识别登

    攻略 2021年10月29日
  • laravel队列使用场景(laravel的队列)

    技术Laravel的队列机制怎么用这篇文章主要介绍了Laravel的队列机制怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。为什么 ?首先,我们要知道

    攻略 2021年12月20日
  • 如何理解Elasticsearch倒排索引与分词

    技术如何理解Elasticsearch倒排索引与分词本篇内容主要讲解“如何理解Elasticsearch倒排索引与分词”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何理解E

    攻略 2021年10月23日