面向前端开发的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