乐趣区

关于jquery:前端开发之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 文件即可。比方:

<script src=”js/jquery-3.3.1.min.js”></script>

JQuery 对象和 JS 对象

区别与转换

①区别

JQuery 对象在操作时,更加不便。

JQuery 对象和 js 对象办法不通用的。

②转换

jq–>js:jq 对象 [索引] 或者 jq 对象.get(索引)

js–>jq:$(js 对象)

JQuery 的简略应用

①事件绑定

比方,点击 id 为 b 的按钮弹出提示框。

JQuery 代码如下:

$(“#b”).click(function(){

alert("b");

});

作用雷同的 JS 代码如下,能够显著看出 JS 代码更简单一些。

document.getElementById(“b”).onclick=function () {

alert("b");

}

②入口函数

入口函数就是以后页面加载实现后运行的函数,JQuery 代码如下:

$(function () {

 alert("页面加载实现");

});

而 JS 代码如下:

window.onload = function () {

 alert("页面加载实现");

};

注:window.onload 和 $(function) 区别:window.onload 只能定义一次,如果定义屡次,后边的会将前边的笼罩掉;而 $(function) 能够定义屡次。

③款式管制

比方,设置 id 为 div1 的元素背景色彩为红色。JQuery 代码如下:

$(“#div1”).css(“background-color”,”red”);

或者:

$(“#div1”).css(“backgroundColor”,”red”);

等价于 JS 代码:

document.getElementById(“div1″).style.backgroundColor=”red”;

退出移动版