介绍 + 快速尝试 ¶
本文导航
作者：KK
发表日期：2017.7.14
从冗长麻烦到简短便捷 ¶
先看这段代码：
document.getElementById('div1').innerHTML = 'abc'; //修改div1的内部HTML
document.getElementById('div2').innerHTML = 'bbc'; //修改div2的内部HTML
document.getElementById('div2').style.color = '#FF0000'; //修改div的字体色为红色
这段代码做了三个事情，但其实它写起来很长是吧，如果你尝试手抄一下这个代码会真心觉得累，接下来给你一个简短的版本：
//定义一个名称为 $ 的函数，JS允许使用$号作为函数名
function $(id){
return document.getElementById(id);
}
$('div1').innerHTML = 'abc';
$('div2').innerHTML = 'bbc';
$('div2').style.color = '#FF0000';
这么看起来代码短短的是不是很爽很舒服？以后经常要做这些DOM节点操作时你就更加感觉到爽快了
介绍jQuery ¶
其实所谓的jQuery就是一个函数，这个函数的名称叫做$或者jQuery。它之所以出名，是因为这套函数一定程度上太实用了！所以得到了全世界JavaScript程序员的亲睐
这套函数有个特点，通常都是以$(...).xxx()这样来用的，前面会有一个$符号（美元符）
和上面的例子一样，这个$函数也是为了获取DOM节点，但是它的过程并不简单，有很强大的功能，比方说要获取div里的a标签但不获取p里的a标签：$('div a')，哎呀你看看这个参数div a是不是有点眼熟，就是CSS选择器！可以用CSS选择器描述目标节点哦
这个函数由美国人John Resig在2006年编写完成并发布给大家使用，核心理念是“写少点代码，做多点事情”
尝试 ¶
复制以下代码建一个HTML进行测试
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery测试</title>
<script src="http://www.kkh86.com/it/assets/js/jquery.js"></script>
<script>
function test(){
var str = prompt('请输入要设置的内容');
if(!str){
return;
}
$('#content').html(str); //设置内容
}
function test2(){
var element = $('#content'); //获取节点
if(element.is(':hidden')){ //判断节点是否不可见
element.fadeIn(); //淡入
}else{
element.fadeOut(); //淡出
}
}
function test3(){
$('#controlaaa button').css('color', '#FF0000')
}
</script>
</head>
<body>
<div id="controlaaa">
<button type="button" onclick="test()">点击修改 #content 的内容</button>
<button type="button" onclick="test2()">点击切换淡入淡出动画</button>
</div><br/>
<button type="button" onclick="test3()">上面2个按钮变红</button>
<hr/>
<div id="content">内容默认为空</div>
</body>
</html>
从以上代码可以看出要使用jQuery是需要先引入一个JS文件才可以，这个文件里就是jQuery函数库（你可以认为是插件），然后代码里就可以使用$这个函数做别的事了
解释 ¶
上面出现的$('#content')其实跟document.getElementById('content')是差不多的，而后者要写很长的代码才能获取DOM节点对象，前者只要很短的代码就行了
可是jQuery的$不是这么简单，它返回的不是DOM对象，所以它不直接具备innerHTML这样的属性，而是一个包装过的对象，这个对象也能操作DOM的属性