什么是JQuery?
什么是JQuery?
JQuery是轻量级的JS库,因简单易学,所以在前端工作中颇受欢迎。
通俗的讲:就是JS的强化版,是新一代的JS,JQuery离不开JS,使用JQuery之前,一定要先引用JQuery文件。
使用JQuery可以减少许多的代码量,减轻工作压力,结构上更加完美,例如:
< h1>Hello World!< /h1>
这里有一个h1标签,我现在想选中它,并将“Hello World!”改为“我要学习JQuery”如果使用JS的话:
var h1 = document.getElementsByTagName(‘h1’)[0];
h1.innerText = “我要学习JQuery”;
而使用JQuery来写这段代码,就会方便很多
$(‘h1’).text(‘我要学习JQuery’);
写完了,就这么多。不要忘记引用JQuery文件,“< script src="./js/jquery.js">< /script>”
./表示当前路径下;如果是下一级目录,直接写目录名称;如果是上一级目录,就写…/
我猜阅读这篇文章的同学们都已经学习过DOM元素了,大家都晓得querySelector和querySelectorAll
JQuery中的$(’’)就相当于document.querySelectorAll(’’);
$(’’)会选中满足条件的所有元素,就是说有这样两个h1标签:
$(‘h1’).css(‘color’,‘red’);
会选中所有的h1标签,并把字体颜色改为红色。
如果你不想让它这么霸道,可以加各种选择器,这才是JQuery的真正强大之处。
这样结果就变成了
差不多了,接下来用我们刚刚学到的新知识做一个小案例:
现有一文本
< ol>
< li>< /li>
< li>< /li>
< li>< /li>
< /ol>
< p>< /p>
我想选中ol下方的所有单数li(第一个和第三个),把背景颜色改为绿色(green),并通过ol选中p标签,为p标签添加文字“JQuery真简单”;
尝试用JS和JQuery各做一遍
结果为:
JQuery代码如下:
告辞了同学们!
- 关于jQuery中的each方法(jQuery到底干了什么)
- jQuery的$.extend、$.fn.extend和$.fn什么意思及区别
- 事件冒泡是什么 如何用jquery阻止事件冒泡
- 使用jQuery能做什么?
- jQuery是什么,jQuery入门简介
- jQuery.fn的作用是什么
- jQuery中$是什么意思
- (function($){...})(jQuery)是什么意思
- jquery $(":text") 这是什么意思
- jquery和zepto有什么区别? 他俩对于现在的mv*框架及react这种专注视图层的框架有什么区别?
- jquery中,模糊查找选择器,带 *= 的写法具体什么含义?
- jQuery 源码分析 -1 $是什么?
- jQuery中$(function(){});与js中的window.onload的有什么区别?
- jQuery选择什么版本 1.x? 2.x? 3.x?
- chrome浏览器下用jQuery的load函数来跨域加载页面,响应状态status为(canceled)是什么情况? JSON和JSONP,也许你会豁然开朗,含jQuery用例
- $(".class")后到底发生了什么 -- jquery选择器分析
- (function($){...})(jQuery)是什么意思
- DOM对象与jquery对象有什么不同
- jQuery源码中的“new jQuery.fn.init()”什么意思?
- JQuery-EasyUI与EXTjs有什么区别?