jQuery 学习笔记
一、jQuery
jQuery是一款优秀的js 库，jQuery主要是用来查询，jQuery = JavaScript + Query
版本区别：
1 x : 支持IE678
2 x : 不支持IE678，只维护，不添加新功能
3 x : 不支持IE678，很多老的jQuery插件不支持这个版本，
二、原生js与jQuery对比
1、语法
// 原生js
window.onload = function () { };
//jquery
$(document).ready(function () {
});
2、加载模式
- 原生js ，加载完DOM，加载完图片，才调用回调函数。
jQuery，加载完毕DOM就调用回调函数，不等到加载完毕图片
-
原生js如果编写了多个入口函数，后面编写的会覆盖掉前面编写的。
jQuery，则不会
3、入口函数的其他方法
//第一种写法
$(document).ready(function () {
alert(" ")
});
//第二种写法
$(function(){
alert(" ")
});
三、jQuery的核心函数
// 1.$()就是jQuery的核心函数
$(function () {
alert(" hello");
//2.1 接收一个字符串选择器
var div1 = $(".div1");
var div2 = $("#div2");
//2.2 接收一个字符串代码片段
var p = $("<p>我是段落</p>");//会根据代码片段创建DOM元素
//3 接收一个DOM元素
var span = document.getElementsByTagName("span")[0];
$(span); //会被包装成为一个jQuery对象返回
四、jQuery的核心方法
1. each（）方法
遍历谁返回谁，
/*使用jQuery的静态方法遍历数组 arr*/
/*arr:数组名
function:每遍历一个元素回调的函数
index：当前的索引
value：对应的元素值
*/
$.each(arr,function (index, value) {
});
2.map()方法
默认返回空数组
/*使用jQuery的静态方法遍历数组 arr*/
/*arr:数组名
function:每遍历一个元素回调的函数
index：当前的索引
value：对应的元素值
*/
$.map(arr,function (value, index) {
});
3. trim（）去空格方法
var str =1nj
var res = $. trim(str);
console. log( --- +str+ --- ) ;
4、事件绑定的两种方法
/*事件绑定
两种方式：
*（1） eventName(fn)
(2) on(eventName.fn)
**/
$(function () {
$("button").click(function () {
alert("btn");
});
});
$(function () {
$("button").on("click",function(){
alert("btn2")
})
});
5、鼠标的移入移出事件
/*移入事件*/
$(function () {
$("#id").mouseover(function () {
"鼠标移入";
});
});
/*移出事件*/
$(function () {
$("#id").mouseout(function () {
"鼠标移出";
});
});
$(function () {
$("#id").hover(function () {
"移入"
},function () {
"移出"
});
});
6、appendTo
/*appendTo*/
$(function () {
$("p").appendTo(".item");
/*source,需要加的某元素p，target，目标元素.item
* 将p 添加到.item所在元素的最后
*
* */
function appendTo( source,target) {
target.appendChild(source);
}
});
后续方法。。。
五、ajax
1、ajax概述
1.1 Ajax = Asynchronous JavaScript and XML
异步请求界面， 而不刷新整个界面与服务器进行通讯的，都叫alax。
1.2 ajax工具包
- ajax与服务器端语言无关
- XML = eXensible Markup Language,可扩展标记语言。是一种描述数据的格式。ajax需要某种格式再服务器与客户端之间传递信息，XML 可以作为选择。
- XHTML 使用扩超媒体标记语言，和CSS（ 级联样式单）标准化呈现。
- DOM文档对象模型，实现动态显示和交互
- 使用XMLHTTP组件XMLHttpRequest对象进行一步读取数据
- 使用JavaScript绑定和处理所有数据
2 ajax数据格式
2.1 HTML
HTML 是由一些普通文本组成，如果服务器通过XMLHttpRequest发送HTML，则可以直接使用。将其插入到页面中。
插入HTML最简单的方法是更新这个元素的innerHTML属性。
2.2 XML
2.3 JSON
使用最多，原生态js 对象。
{
“TOKEN”: “876cfdfece034057997b947eda37018”,
“LATN_ID”: “290”,
“STAFF_ID”: “123”,
“SYSTEM_USER_ID”: "223333 ",
“SYSTEM_USER_CODE”: "ceshi ",
“STAFF_NAME”: “测试工号”,
“EMPEE_MOB_NO”: “18191791987”,
“STAFF_ORG_REL_ID”:“123”
“OPT_TYPE”: “1”,
“orgRelList”: [{
“ORG_ID”: “1”,
“TREE_ID”: “10000001”,
“ORG_NAME”: “西安”,
“TREE_LEVEL”: “2”,
“REL_TYPE”: “”,
“REL_ROLE”: “”,
“LATN_ID”: “”,
“LATN_NAME”: “”
}]
}
3、jQuery 使用 ajax
步骤
-
创建一个异步对象
-
设置请求方式和请求地址
-
发送请求
-
监听状态的变化
-
处理返回的结果
jQuery对ajax进行了封装:
jQuery最底层的方法是：$.ajax()
第二层是：load()， . g e t ( ) ， .get()， .get()，.post()
第三层是：$.getScript()和getJSON()
3.1 load
load()方法是jQuery中最简单常用的方法，能远程载入html 代码，并载入到DOM中
结构：load(url，data，callback)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="static/js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function () {
$("a").click(function () {
//使用load方法处理ajax
var url = this.href;
var args = {"time": new Date()};
$("#content").load(url, args);
return false;
});
});
</script>
</head>
<body>
<a href="hello.txt">hello，点我</a>
<div id="content"> </div>
</body>
</html>
| 参数名 | 类型 | 说明 |
|---|---|---|
| url | String | 请求html 页面的url地址 |
| data | Object | 发送到服务器的key/value数据 |
| callback | function | 请求完成是回调函数 |
3.2 GET
/*使用ajax 方式 查询所有*/
$().ready(function () {
$.ajax({
type:"GET",
url:"${pageContext.request.contextPath}/questionServlet?method=findAllQuestion",
dataType:"JSON",
success:function (data) {
if (data!==null) {
var count = 8;//每行显示的列数
for (var i = 0;i<Math.ceil(data.length / count);i ++) {
for (var j = 0; j < count ; j++) {
var index = i*count +j;
$("#message").html(
"<td>" + data[index].questionId + "</td>"
+ "<td>" + data[index].questionContent + "</td>"
+ "<td>" + data[index].answerA + "</td>"
+ "<td>" + data[index].answerB + "</td>"
+ "<td>" + data[index].answerC + "</td>"
+ "<td>" + data[index].answerD + "</td>"
+ "<td>" + data[index].answer + "</td>"
+ "<td>" + data[index].subjectName + "</td>"
);
}
}
}
}
});
});
3.3 POST
/*模糊查询*/
function btn(){
//获取输入框内容
var subjectName = document.getElementById("subjectname").value;
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/questionServlet",
data: "method=searchBySubject&findName=" + subjectName,
dataType: "json",
success: function (data) {
if (data !== null) {
var count = 8;//每行显示的列数
for (var i = 0;i<Math.ceil(data.length/ count);i ++){
for (var j = 0; j<count ; j++) {
var index = i*count +j;
$("#message").html(
"<td>" + data[index].questionId + "</td>"
+ "<td>" + data[index].questionContent + " </td>"
+ "<td>" + data[index].answerA + "</td>"
+ "<td>" + data[index].answerB + "</td>"
+ "<td>" + data[index].answerC + "</td>"
+ "<td>" + data[index].answerD + "</td>"
+ "<td>" + data[index].answer + "</td>"
+ "<td>" + data[index].subjectName + "</td>"
);
}
}
}else {
// 将js 对象转成 JSON字符串内容即是：对不起。。。。
$("#message").html(
"<td>" + data + "</td>"
)
}
}
});
}
-----------------------------------------------------------------------------------------
//模糊查询
function search() {
//获取输入框内容
var goodName = document.getElementById("goodName").value;
//window.location.href="${pageContext.request.contextPath}/goods.jsp?sh1="+sh1;
$.ajax({
type:"GET",
url:"${pageContext.request.contextPath}/goodServlet",
data:"method=searchforone&goodName="+goodName,
dataType:"json",
success:function(data){
if (data != null || data != undefined) {
$("#myframe").hide();
//console.info(data);
var tbody = '<tbody>';
var tr = "<tr>";
var count = 4;//每行显示的列数
for (var i = 0; i < Math.ceil(data.length/ count); i++) {
for (var j = 0; j < count; j++) {
if ((i * count + j) >= data.length) {//空表格
tr += "<td></td>";
} else {
var index = i * count+ j;//动态计算出来的索引，有数据
var id = data[index].id;
var img = data[index].goodPic;
var name = data[index].goodName;
var price = parseFloat(data[index].goodPrice);
//console.info(img + ","+ name + ","+ price);
tr += "<td><img class='img-thumbnail' style='width:200px;height:160px' src='"+img+"'/><br/><a href='"+id+"'>"+ name+ "</a><br/><span style='color:red;'>￥"+ price+ "元</span></td>";
}
}
tr += "</tr>";
}
tbody += tr;
$('#tt').append(tbody);
}
},
error:function(){
alert("服务器请求异常！");
}
});
}
-----------------------------------------------------------------------------------------
/*servlet*/
public void searchforone(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 转码
request.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
// 获取前台传过来的参数name
String goodName = request.getParameter("goodName");
// 查询数据库
List<Good> list1 = null;
if (goodName == null || goodName.equals("")) {// 查询所有
} else {// 根商品名模糊查询
list1 = goodDao.findGoodByName(goodName);
if (list1 != null) {
// 使用json
ObjectMapper mapper = new ObjectMapper();
// 将集合转为json字符串
String json = mapper.writeValueAsString(list1);
// 使用打印流将数据写出去
PrintWriter out = response.getWriter();
out.write(json);
out.close();
}
}
}
4 、检验用户名是否存在
-
导入jQuery库
-
获取name = “username” 的节点
-
为username 添加change 响应函数。
-
获取username 的value值属性，去除前后空格不为空，发送ajax请求
-
发送请求，校验是否可用，在客户端返回一个html片段：该用户名已经存在
-
在客户端浏览器把其添加到#message所在的html 中
<script type="text/javascript"> $(function () { $(":input[name='username']").change(function () { var val = $(this).val(); val = $.trim(val); if (val !== ""){ var url = "${pageContext.request.contextPath}/valUserNameServlet"; var args = {"username":val,"time":new Date()}; $.post(url,args,function (data) { $("#message").html(data); }); } }); }); </script> </head> <form action="" method="post"> Username :<br> <label> <input type="text" name="username"/> <br> <span id="message"></span><br> </label> <input type="submit" value="submit"><br> </form> </body> </html>@WebServlet("/valUserNameServlet") public class ValUserNameServlet extends HttpServlet { protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { List<String> usernamelist = Arrays.asList("AA", "BB", "CC"); String username = req.getParameter("username"); String result =null; if (usernamelist.contains(username)) { result = "<font color = 'red'>该用户名已经存在</font>"; } else{ result = "<font color = 'green'>该用户名可以使用</font>"; } resp.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); resp.getWriter().print(result); } }
namelist = Arrays.asList(“AA”, “BB”, “CC”);
String username = req.getParameter(“username”);
String result =null;
if (usernamelist.contains(username)) {
result = “该用户名已经存在”;
} else{
result = "<font color = 'green'>该用户名可以使用</font>";
}
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().print(result);
}
}
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
