一、 jQuery简介
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便的处理HTML Document、Events、动画、Ajax交互,能极大的简化JavaScript编程的代码量。
二、 jQuery的使用
使用jQuery的方式首先要下载jQuery文件,一般现在使用的jQuery版本是3.2.1。jQuery从2.0版本便不再支持IE8及以下版本,而现在最新版本更新到3.4.1。并不是版本越高就好,而要根据自己的需要选择需要的版本。
1.引用jQuery
将下载好的jQuery文件放到创建的js文件夹中,
然后在HTML代码界面引用jQuery文件。
注意:
(1) 当页面加载时,HTML代码是从上往下执行,所以一般js文件不会在head标签内引用,有可能会加载js代码时页面代码还没加载出来,方法体内获取到的元素不存在而报错,所以js文件一般在body标签内的最后引用,当页面的东西都加载完成之后再加载js代码就不会报错了(当然有时候也不会,毕竟所有东西版本都在更新和优化,容错率也大大提高)。
(2) jQuery文件一定要引用到所有有使用jQuery方法写jQuery代码文件或代码上面,根据从上到下加载,还没有加载出jQuery文件就出现了jQuery代码必然会报错。 - jQuery的使用
(1) jQuery代码不像js代码那样只能写一个window加载事件。在jQuery中可以写无数个加载事件。
(2) jQuery的加载事件是通过一个英文状态在的“$
”符号开头,然后一个英文状态下的“()”,小括号里面写document。然后点ready()方法,方法内写function(){ }
并且它还有简写形式,对比与原生js的加载事件:
→→
(3) 使用jQuery代码获取元素更方便:
直接通过英文状态下的$符号,然后一个英文状态下的小括号,小括号里面以string类型写通过什么方式去获取元素(.:通过类获取;#:通过id获取等等)。
这种形式对比原生js获取元素更鲜明。
(4) 调用的函数方法也不同了:
调用的函数使用的方法和调用函数名都被精简了,比如说点击事件。
原生的点击事件:先获取到元素,然后点出函数onclick,通过赋值的方式写方法体。
jQuery的点击事件:先获取元素,然后点出click()方法,在方法的括号内写方法体。
(5) 设置样式
通过js代码来改变html元素属性等方式在前端也算是一个小重点吧。
原生js是通过一个style属性点出具体样式进行样式改变,而jQuery则是通过一个css()方法来进行样式改变。
Js语法:改变样式的元素.style.样式名 = 改变的值;
jQuery语法:改变样式的元素.css(样式名,改变的值);
或者:改变样式的元素.css({样式名:改变的值, 样式名:改变的值});
通过jQuery的方式该变属性元素的方法不仅可以单个改变,而且需要多个改变的时候就直接通过一个花括号以键值对方式传递参数,就可以一次性修改,而原生Js改变样式就需要一个一个的修改,通过jQuery就节省了很多冗余的代码。