jQuery入门
jQuery入门
1、基础语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有
<p>元素 - $("p.test").hide() - 隐藏所有 class="test" 的
元素
- $("#test").hide() - 隐藏 id="test" 的元素
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合，因此选择页面中元素时使用css选择器选择
2、文档就绪事件
类似于原生JS中的window.onload，作用是当文档完全加载完毕后再运行jQuery代码
$(document).ready(function(){
// 开始写 jQuery 代码...
});
// 简写
$(function() {
})
jQuery 入口函数与 JavaScript 入口函数window.onload的区别：
- jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行，可以执行多次
- JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行，只能执行一次，如果执行多次，会覆盖前面前面执行
3、jQuery选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
4、jQuery事件
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
$("#mybutton").click(function(){
// 动作触发后执行的代码!!
});
// 注意：绑定事件不是等号赋值，而是以参数形式传入
5、jQuery捕获
jQuery 拥有可操作 HTML 元素和属性的强大方法。
获得内容 - text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标签）
- val() - 设置或返回表单字段的值
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
用户名<input type="text" id="user"><br>
密码<input type="password" id="pass">
<script>
$(function() {
$("#user").blur(function() {
console.log($("#user").attr("type")) // text
console.log($("#user").val()) // xxx
})
})
</script>
设置css样式
$("button").click(function(){
$("p").css("color","red");
});
6、添加元素
向HTML中添加元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。
append
<p>
<span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>
结果
<p>
<span class="s1">s1</span>
<span class="s2">s2</span>
</p>
After
<p>
<span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>
结果
<p>
<span class="s1">s1</span>
</p>
<span class="s2">s2</span>
7、删除元素
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p>元素：
$("p").remove(".italic")
8、Ajax
8.1、背景
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
-
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
-
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
-
实例：当您在搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
-
传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
-
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
-
使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
8.2、利用Ajax可以做什么？
- 注册时，输入用户名自动检测用户是否已经存在。
- 登陆时，提示用户名密码错误
- 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
- 等等……
8.3、发送异步请求
- Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
- jQuery 提供多个与 AJAX 有关的方法。
- 通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。
- jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！
jQuery.ajax(...) // 通用请求
jQuery.get(...) // get请求
jQuery.post(...) // post请求
部分参数：
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据
contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)
accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
dataType：将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
一般只用给两个参数：url和success，参数有两种传入方式，一种是JSON格式，一种是普通参数
$.post({
url:"",
success:function(data) {
}
}) {}
$.post("[[@{/list}]]",function (data) {}
4、Demo01请求后端数据
1、编写控制器方法
@Controller
public class AjaxController {
@RequestMapping("/a1")
public void ajax1(String name , HttpServletResponse response) throws IOException {
if ("admin".equals(name)){
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
}
2、导入jQuery
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
3、编写前端代码
<input type="button" id="show" value="显示所有书籍">
<table>
<tr>
<th>id</th>
<th>书名</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
</tr>
<tbody id="tbodyid">
</tbody>
</table>
<script>
$(function () {
$("#show").click(function () {
$.post("[[@{/list}]]",function (resp) {
console.log(resp)
var html="";
for (var i = 0; i <resp.length ; i++) {
html += "<tr>";
html += "<td>" + resp[i].bookId + "</td>"
html += "<td>" + resp[i].bookName + "</td>"
html += "<td>" + resp[i].bookPrice + "</td>"
html += "<td>" + resp[i].bookCount + "</td>"
html += "<td>" + resp[i].bookType + "</td>"
html += "</tr>"
}
console.log(html)
$("#tbodyid").html(html)
});
})
})
</script>
5、Demo02注册验证用户名
用户名<input type="text" id="user"><span></span><br>
<input type="button" id="mb" value="提交">
<script>
$(function () {
$("#mb").click(function () {
$.post("[[@{/register}]]", {"name": $("#user").val()}, function (data) {
var sp = $("span")
if("ok" == data) {
sp.html(data)
sp.attr("style","color:green")
} else {
sp.html(data)
sp.attr("style","color:red")
}
})
})
})
</script>
