介绍
介绍
jQuery是一款非常流行的前端Javascript库，jQuery相比原生的Javascript要更加简单、更加直观。jQuery除了简化JS代码之外，还提供了一系列的常用属性的获取，常用功能的封装。不仅如此，jQuery还将JS的事件处理封装的更加友好。最重要的是使用jQuery编写JS代码可以忘记各个浏览器之间的差异导致的兼容问题，让我们写起JS代码时候更爽！
jQuery还提供了一种封装方式，可以将一系列JS动态事件封装成为一个独立的控件。可以通过纯JS代码实现HTML的自定义控件目的。
强大的jQuery已经成为了大多数的网页必引入的JS库，有了jQuery之后老前端工程师不再写原生JS代码，有了jQuery之后新前端工程师不再学原生JS代码。
安装
下载
官网下载地址
发现死活下载不了，换用wget试试？
额，这是什么情况？用npm试试？
终于成功了！
网盘下载地址
这里福哥给出一个网盘的下载地址，如果童鞋们下载不了，又不想（不会）使用npm下载的话，可以使用网盘下载。
链接: https://pan.baidu.com/s/1FrW544KjeqWvfNYP1VkIGw 提取码: m422
安装
既然jQuery是JS库所以我们也把它放到js目录下面
安装jQuery很简单，直接通过script标签引入到网页里即可。
<!DOCTYPE html> <html> <head> <title>jQuery库演示</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="<% $TFReq->server->BASE_URI %>js/jquery.min.js"></script> </head> <body> </body> </html>
使用
选择器
在原生JS里定位一个元素需要使用document.getElementById、document.getElementsByClassName、document.getElementsByName、document.getElementsByTagName、document.querySelector等等这些方法，而JQ里可以使用选择器定位元素。
原生
<div class="row" style="width: 280px; background: #fff; padding: 12px; margin: 0 auto;">
<div class="col-sm-12">
<h3 class="m-t-none m-b">登录</h3>
<p>请输入正确的用户名和密码。</p>
<form name="form" class="form">
<div class="form-group">
<label>用户名</label>
<input type="text" name="user" class="form-control" />
</div>
<div class="form-group">
<label>密码</label>
<input type="password" name="pass" class="form-control" />
</div>
<div>
<button class="btn btn-primary">登录</button>
</div>
</form>
</div>
</div>
<script>
var form = document.getElementsByClassName('form');
var text = document.getElementsByName('user');
var button = document.getElementsByTagName('button');
form[0].onsubmit=function () {
alert('你好，'+document.getElementsByName('user')[0].value+'！');
return false;
};
text[0].value = '鬼谷子叔叔';
setTimeout(function () {
button[0].click();
});
</script>jQuery
<div class="row" style="width: 280px; background: #fff; padding: 12px; margin: 0 auto;">
<div class="col-sm-12">
<h3 class="m-t-none m-b">登录</h3>
<p>请输入正确的用户名和密码。</p>
<form name="form" class="form">
<div class="form-group">
<label>用户名</label>
<input type="text" name="user" class="form-control" />
</div>
<div class="form-group">
<label>密码</label>
<input type="password" name="pass" class="form-control" />
</div>
<div>
<button class="btn btn-primary">登录</button>
</div>
</form>
</div>
</div>
<script>
var form = $('.form');
var text = $('[name="user"]');
var button = $('button');
form.bind('submit',function () {
alert('你好，'+$('[name="user"]').val()+'！');
return false;
});
text.val('鬼谷子叔叔');
setTimeout(function () {
button.click();
});
</script>
样式修改
使用原生JS修改元素的样式需要通过style这个集合，而JQ可以通过css方法完成一个或者多个样式的修改操作。
原生
<script>
var user = document.getElementsByName('user');
user[0].style.backgroundColor = '#ccc';
user[0].style.color = '#ff6600';
user[0].style.fontSize = '16px';
user[0].value = '鬼谷子叔叔';
</script>jQuery
<script>
$('[name="user"]').css({
backgroundColor:'#ccc',
color:'#ff6600',
fontSize:'16px'
}).val('鬼谷子叔叔');
</script>
事件绑定
使用JQ的事件绑定可以大大简化编写代码的复杂程度，这里面原生JS的实现方法是通过addEventListener和removeEventListener函数实现，在JQ里换成了bind和unbind方法。
绑定事件
var user = $('[name="user"]');
user.val('鬼谷子叔叔');
user.bind('focus',function () {
$(this).css({color:'blue'});
});
user.bind('blur',function () {
$(this).css({color:'black'});
});清除单个事件
var user = $('[name="user"]');
user.unbind('focus');
user.unbind('blur');清除全部事件
var user = $('[name="user"]');
user.unbind();总结
今天童鞋们和福哥一起学习了jQuery库的基本使用技巧，这里面只包括jQuery的元素选择、属性修改、事件绑定这些基本操作，后面福哥再专门开课教给大家使用jQuery开发自定义的控件。