前端开发之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)

相关推荐

  • 春节来历50字,春节贴对联的由来50字

    技术春节来历50字,春节贴对联的由来50字春联作为一种独特的文学形式,在我国有着悠久的历史春节来历50字。它从五代十国时开始,明清两代尤为兴盛,发展到今天已经有一千多年了。早在秦汉以前,我国民间每逢过年,有在大门的左右悬

    生活 2021年11月1日
  • git_stats web代码图形统计工具怎么使用

    技术git_stats web代码图形统计工具怎么使用这篇文章主要讲解了“git_stats web代码图形统计工具怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“

    攻略 2021年12月10日
  • 如何安装spark 2.2.0独立版并演示字数统计

    技术如何进行spark 2.2.0 Standalone安装及wordCount演示本篇文章为大家展示了如何进行spark 2.2.0 Standalone安装及wordCount演示,内容简明扼要并且容易理解,绝对能使

    攻略 2021年12月17日
  • Spring Cloud微服务的概念是什么

    技术Spring Cloud微服务的概念是什么本篇文章为大家展示了Spring Cloud微服务的概念是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。单体架构简介在软件设计中

    攻略 2021年12月2日
  • 如何深入理解Java虚拟机JVM类加载初始化

    技术如何深入理解Java虚拟机JVM类加载初始化如何深入理解Java虚拟机JVM类加载初始化,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1

    2021年11月21日
  • golang 相同结构体比较方式比较

    技术golang 相同结构体比较方式比较 golang 相同结构体比较方式比较golang 相同结构体比较方式比较
    使用==
    示例:
    type Student struct {Name stringAg

    礼包 2021年12月24日