6.jQuery Web中的应用

最新推荐文章于 2022-08-24 21:31:35 发布
最新推荐文章于 2022-08-24 21:31:35 发布
阅读量190 收藏
点赞数
分类专栏： 自我学习总结 JavaWeb 第十四章 JavaScript 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huang_kuh/article/details/107641397
版权

文章目录

一.验证用户名

先搭建web环境

jquery-1.11.3.js

image

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <!--过滤器-->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>


    <!--配置SpringMVC的前端控制器-->
    <servlet>
        <servlet-name>mvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:mvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>mvc</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
    
    
</web-app>

mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="
		   http://www.springframework.org/schema/context
		   http://www.springframework.org/schema/context/spring-context.xsd
           http://www.springframework.org/schema/beans
           http://www.springframework.org/schema/beans/spring-beans.xsd
           http://www.springframework.org/schema/mvc
           http://www.springframework.org/schema/mvc/spring-mvc.xsd">
           <!-- IoC注解解析器-->
    <context:component-scan base-package="cn.dusk"/>
    <!-- DI注解驱动器 -->
	<context:annotation-config/>
    <!-- 注解驱动器 -->
	<mvc:annotation-driven/>
	<!-- 视图解析器 -->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/views/"/>
		<property name="suffix" value=".jsp"/>
	</bean>
</beans>

Controller类checkqueryname

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="
		   http://www.springframework.org/schema/context
		   http://www.springframework.org/schema/context/spring-context.xsd
           http://www.springframework.org/schema/beans
           http://www.springframework.org/schema/beans/spring-beans.xsd
           http://www.springframework.org/schema/mvc
           http://www.springframework.org/schema/mvc/spring-mvc.xsd">
           <!-- IoC注解解析器-->
    <context:component-scan base-package="cn.dusk"/>
    <!-- DI注解驱动器 -->
	<context:annotation-config/>
    <!-- 注解驱动器 -->
	<mvc:annotation-driven/>
	<!-- 视图解析器 -->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/views/"/>
		<property name="suffix" value=".jsp"/>
	</bean>
</beans>

JsonResult类

//json返回值信息
@Setter
@Getter
public class JsonResult {
	//返回状态
	private boolean success=true;
	//返回数据
	private String msg;
	//如果状态为false才返回信息
	public JsonResult(String msg) {
		this.success=false;
		this.msg=msg;
	}
	public JsonResult(boolean success,String msg) {
		this.success=success;
		this.msg=msg;
	}
	public JsonResult() {
	}
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
	账号:<input type="text" id="nameId">
	<span id="sp"></span>
</body>
</html>

image

index.js

//内部操作
$(function(){
	$("#nameId").blur(function(){
		//this: 表示当前这个输入框
		var uname=this.value;
		//发送ajax请求
		//$.get(url,params,fn,返回数据类型);
		//回调函数表示请求回来的数据
		$.get("/jquery/checkjqueryName.do",{username:uname},function(data){
			if(data.success){
				$("#sp").html(data.msg).css("color","green");
			}else{
				$("#sp").html(data.msg).css("color","red");
			}
		},"json");
		
	})
});

二.登录验证

类LoginJQueryController

@Controller
@RequestMapping("login")
public class LoginJQueryController {
	@RequestMapping("jquerylogin")
	@ResponseBody
	public JsonResult login(String username,String password,HttpServletResponse response) throws IOException {
		if ("admain".equals(username) && "12".equals(password)) {
			System.out.println("登录成功:"+username+password);
			return new JsonResult();
		}else {
			return new JsonResult(false,"账号密码不正确");
		}
	}
	@RequestMapping("main")
	public String main() {
		return "redirect:/jQuery/12_login/main.html";
	}
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
	账号:<input type="text" id="nameId" name="username"><span id="sp"></span><br>
	密码:<input type="text" id="pwdId" name="password"><br>
	<input type="button" id="btn" value="登录"><br>
	
</body>
</html>

main.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
欢迎ooxx
</body>
</html>

image

index.js

//内部操作
$(function(){
	//登录
	$("#btn").click(function(){
		var uname=$("#nameId").val();
		var upwd=$("#pwdId").val();
		$.post("/login/jquerylogin.do",{username:uname,password:upwd},function(data){
			if(data.success){
				window.location.href="/login/main.do";
			}else{
				$("#sp").html(data.msg).css("color","red");
			}
		},"json");
	})
});

三.rbac的应用

准备一份rbac项目
commonAll.js替换

//禁用jQuery对数组参数做的序列化操作,对数组参数名带上[]
jQuery.ajaxSettings.traditional = true;
/** table鼠标悬停换色* */
$(function() {
	// 如果鼠标移到行上时，执行函数
	$(".table tr").mouseover(function() {
		$(this).css({
			background : "#CDDAEB"
		});
		$(this).children('td').each(function(index, ele) {
			$(ele).css({
				color : "#1D1E21"
			});
		});
	}).mouseout(function() {
		$(this).css({
			background : "#FFF"
		});
		$(this).children('td').each(function(index, ele) {
			$(ele).css({
				color : "#909090"
			});
		});
	});
});

/** 翻页操作 */
/*$(function() {
	// 翻页操作
	$(".btn_page").click(
			function() {
				// 获取data-page属性的值
				var pageNo = $(this).data("page")
						|| $(":input[name='currentPage']").val();
				$(":input[name='currentPage']").val(pageNo);
				$("#searchForm").submit();
			});
	// 设置每页显示多少条数据:改变ageSize
	$(":input[name='pageSize']").change(function() {
		$(":input[name='currentPage']").val(1);
		$("#searchForm").submit();
	});
});*/
/** 点击,跳转到指定URL */
/*$(function() {
	$(".btn_redirect").click(function() {
		window.location.href = $(this).data("url");
	});
});*/
/** 批量删除操作 */
$(function() {
	// 全选/全不选:复选框
	$("#all").click(function() {
		$(":input[name=IDCheck]").prop("checked", $(this).prop("checked"));
	});
});
/** 确定删除的对话框 */
/*$(function() {
	$(".btn_delete").click(function() {
		var deleteUrl = $(this).data("url");
		$.dialog({
			title : "温馨提示",
			content : "你确定要删除吗?",
			icon : "face-smile",
			cancel : true,
			ok : function() {
				var dialog =  $.dialog({icon : "face-smile"});//初始化对话框
				$.get(deleteUrl,{}, function(data) {
					dialog.title("温馨提示").content("删除成功!").button({
						name:"确定",
						callback:function(){
							window.location.reload();
						}
					});
				});
			}
		});
	});
});
// 对话框
function showDialog(content, icon, cancel, ok) {
	$.dialog({
		title : "温馨提示",
		content : content || "",
		icon : icon || "face-smile",
		cancel : cancel || true,
		ok : ok || true
	});
}*/

input.jsp替换

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>信息管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
<link href="/style/common_style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/commonAll.js"></script>
</head>
<body>
<form action="/department/saveOrUpdate.do" method="post" id="editForm">
	<input type="hidden" name="id" value="${entity.id}"/>
	<div id="container">
		<div id="nav_links">
			<span style="color: #1A5CC6;">部门编辑</span>
			<div id="page_close">
				<a>
					<img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
				</a>
			</div>
		</div>
		<div class="ui_content">
			<table cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
				<tr>
					<td class="ui_text_rt" width="140">部门名称</td>
					<td class="ui_text_lt">
						<input type="text" name="name" value="${entity.name}" class="ui_input_txt02"/>
					</td>
				</tr>
				<tr>
					<td class="ui_text_rt" width="140">部门代码</td>
					<td class="ui_text_lt">
						<input type="text" name="sn" value="${entity.sn}" class="ui_input_txt02"/>
					</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td class="ui_text_lt">
						&nbsp;<input type="submit" value="确定保存" class="ui_input_btn01"/>
						&nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
					</td>
				</tr>
			</table>
		</div>
	</div>
</form>
</body>
</html>

list.jsp替换

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
<link href="/style/common_style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/commonAll.js"></script>
<title>PSS-部门管理</title>
<style>
	.alt td{ background:black !important;}
</style>
</head>
<body>
	<form id="searchForm" action="/department/query.do" method="post">
		<div id="container">
			<div class="ui_content">
				<div class="ui_text_indent">
					<div id="box_border">
						<div id="box_top">搜索</div>
						<div id="box_bottom">
							<input type="button" value="新增" class="ui_input_btn01 " />
						</div>
					</div>
				</div>
			</div>
			<div class="ui_content">
				<div class="ui_tb">
					<table class="table" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
						<tr>
							<th width="30"><input type="checkbox" id="all" /></th>
							<th>编号</th>
							<th>名称</th>
							<th>编码</th>
							<th></th>
						</tr>
						<tbody>
							<c:forEach var="d" items="${result.data}">
								<tr>
									<td><input type="checkbox" name="IDCheck" class="acb" /></td>
									<td>${d.id}</td>
									<td>${d.name}</td>
									<td>${d.sn}</td>
									<td>
										<a href="#">编辑</a>
										<a href="#">删除</a>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
				<!-- 分页操作 -->
				<div class="ui_tb_h30">
				<div class="ui_flt" style="height: 30px; line-height: 30px;">
					共有
					<span class="ui_txt_bold04">xx</span>
					条记录，当前第
					<span class="ui_txt_bold04">1/22</span>
					页
				</div>
				<div class="ui_frt">
					<input type="button" value="首页" class="ui_input_btn01 " />
					<input type="button" value="上一页" class="ui_input_btn01 "/>
					<input type="button" value="下一页" class="ui_input_btn01 " />
					<input type="button" value="尾页" class="ui_input_btn01 " />
					
					<select  name="pageSize" class="ui_select02">
						<option value="3">3</option>
						<option value="5">5</option>
						<option value="10">10</option>
					</select>
					转到第<input type="text" name="currentPage" value="" class="ui_input_txt01" style="width:50px;"/>
						 <input type="button" class="ui_input_btn01 " value="跳转"/>
				</div>
			</div>
			</div>
		</div>
	</form>
</body>
</html>

以上是把之前的js注释现在再写一遍

新增/编辑

给新增添加一个样式btn_redirect,自定义属性data-url

<div id="box_bottom">
	<input type="button" value="新增" class="ui_input_btn01 btn_redirect" data-url="/department/input.do"/>
</div>

<a href="javascript:;" class="btn_redirect" data-url="/department/input.do?id=${d.id}">编辑</a>

删除
给删除元素添加自定义样式: btn_delete, 同时添加data-url自定义的属性

<a href="javascript:;" class="btn_delete" data-url="/department/delete.do?id=${d.id}">删除</a>

给首页/上一页/下一页/尾页/ 跳转 添加自定义样式 btn_page, 除了跳转都添加了data-page属性

<input type="button" value="首页" class="ui_input_btn01 btn_page" data-page="1"/>
<input type="button" value="上一页" class="ui_input_btn01 btn_page" data-page="${result.prevPage}"/>
<input type="button" value="下一页" class="ui_input_btn01 btn_page" data-page="${result.nextPage}"/>
<input type="button" value="尾页" class="ui_input_btn01 btn_page" data-page="${result.totalPage}"/>

最终js

//xinzeng
	$(function(){
		//$(".btn_redirect");
		//添加或编辑
		$(".btn_redirect").click(function () {
			//被点击的元素
			window.location.href=$(this).data("url");
		});
		//删除
		$(".btn_delete").click(function(){
			//询问用户是否确定要删除
			var ret=confirm("你确定要删除吗?");
			if(ret){
				//发送ajax删除
				$.get($(this).data("url"),function(data){
					window.location.reload();
				})
			}
		});

		//参数1,数组或对象,参数2:操作函数
		$.each($(":input[name='pageSize'] option"),function(index,item){
			//当用于回的pageSize等于option中的value值时,才选择
			if(${result.pageSize} == $(item).val()){
				$(item).prop("selected",true);
			}
		});
		//下拉框发生改变的时候,执行刷新操作,重新加载一次数据
		$(":input[name='pageSize']").change(function(){
			$(":input[name='currentPage']").val(1);
			$("#searchForm").submit();
		})
		//分页
		$(".btn_page").click(function(){
			//如果点击跳转button,出现400因为没有制定data-page属性
			//而这个跳转button对应的currentPage应该是currentPage值,有用户输入
			var pageNo =$(this).data('page') || $(":input[name='currentPage']").val() || 1;

			//获取当前页,然后修改成制定的跳转的页码数
			$(":input[name='currentPage']").val(pageNo);
			//找到form表单,然后直接提交表单
			$("#searchForm").submit();
		})

	});

	</script>

最总的list.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
<link href="/style/common_style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/commonAll.js"></script>

	<script type="text/javascript">
	//xinzeng
	$(function(){
		//$(".btn_redirect");
		//添加或编辑
		$(".btn_redirect").click(function () {
			//被点击的元素
			window.location.href=$(this).data("url");
		});
		//删除
		$(".btn_delete").click(function(){
			//询问用户是否确定要删除
			var ret=confirm("你确定要删除吗?");
			if(ret){
				//发送ajax删除
				$.get($(this).data("url"),function(data){
					window.location.reload();
				})
			}
		});

		//参数1,数组或对象,参数2:操作函数
		$.each($(":input[name='pageSize'] option"),function(index,item){
			//当用于回的pageSize等于option中的value值时,才选择
			if(${result.pageSize} == $(item).val()){
				$(item).prop("selected",true);
			}
		});
		//下拉框发生改变的时候,执行刷新操作,重新加载一次数据
		$(":input[name='pageSize']").change(function(){
			$(":input[name='currentPage']").val(1);
			$("#searchForm").submit();
		})
		//分页
		$(".btn_page").click(function(){
			//如果点击跳转button,出现400因为没有制定data-page属性
			//而这个跳转button对应的currentPage应该是currentPage值,有用户输入
			var pageNo =$(this).data('page') || $(":input[name='currentPage']").val() || 1;

			//获取当前页,然后修改成制定的跳转的页码数
			$(":input[name='currentPage']").val(pageNo);
			//找到form表单,然后直接提交表单
			$("#searchForm").submit();
		})

	});




	</script>
<title>PSS-部门管理</title>
<style>
	.alt td{ background:black !important;}
</style>
</head>
<body>
	<form id="searchForm" action="/department/list.do" method="post">
		<div id="container">
			<div class="ui_content">
				<div class="ui_text_indent">
					<div id="box_border">
						<div id="box_top">搜索</div>
						<div id="box_bottom">
							<input type="button" value="新增" class="ui_input_btn01 btn_redirect" data-url="/department/input.do"/>
						</div>
					</div>
				</div>
			</div>
			<div class="ui_content">
				<div class="ui_tb">
					<table class="table" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
						<tr>
							<th width="30"><input type="checkbox" id="all" /></th>
							<th>编号</th>
							<th>名称</th>
							<th>编码</th>
							<th></th>
						</tr>
						<tbody>
							<c:forEach var="d" items="${result.data}">
								<tr>
									<td><input type="checkbox" name="IDCheck" class="acb" /></td>
									<td>${d.id}</td>
									<td>${d.name}</td>
									<td>${d.sn}</td>
									<td>
										<a href="javascript:;" class="btn_redirect" data-url="/department/input.do?id=${d.id}">编辑</a>
										<a href="javascript:;" class="btn_delete" data-url="/department/delete.do?id=${d.id}">删除</a>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
				<!-- 分页操作 -->
				<div class="ui_tb_h30">
				<div class="ui_flt" style="height: 30px; line-height: 30px;">
					共有
					<span class="ui_txt_bold04">${result.totalCount}</span>
					条记录，当前第
					<span class="ui_txt_bold04">${result.currentPage}/${result.totalPage}</span>
					页
				</div>
				<div class="ui_frt">
					<input type="button" value="首页" class="ui_input_btn01 btn_page" data-page="1"/>
					<input type="button" value="上一页" class="ui_input_btn01 btn_page" data-page="${result.prevPage}"/>
					<input type="button" value="下一页" class="ui_input_btn01 btn_page" data-page="${result.nextPage}"/>
					<input type="button" value="尾页" class="ui_input_btn01 btn_page" data-page="${result.totalPage}"/>

					<select  name="pageSize" class="ui_select02">
						<option value="3">3</option>
						<option value="5">5</option>
						<option value="10">10</option>
					</select>
					转到第<input type="text" name="currentPage" value="${result.currentPage}" class="ui_input_txt01" style="width:50px;"/>
						 <input type="button" class="ui_input_btn01 btn_page" value="跳转"/>
				</div>
			</div>
			</div>
		</div>
	</form>
</body>
</html>
huang_kuh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用jQuery和Bootstrap：构建快速，简单的Web应用程序
禅与计算机程序设计艺术
07-19 3137
作者：禅与计算机程序设计艺术 随着互联网的飞速发展，信息化服务已经成为当今社会的一项重要支柱产业。许多企业及个人都希望借助互联网的力量，提供更高质量的信息服务。如何用较少的人力、财力和时间，建立起一个功能丰富、美观、易于维护的网站是一个非常值得思考的问题。由于缺乏专业技能的个人开发者很难胜任此类工作。幸运的是，现如今有很多成熟框架和工具可
3.DOM
自我学习总结
07-08 7113
文章目录一.DOM概述二.DOM获取元素的三种方式三.Node对象的属性和方法四.元素节点的操作五.节点操作 一.DOM概述 DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件 D：文档 – html 文档 或 xml 文档 O：对象 – document 对象的属性和方法 M：模型 二.DOM获取元素的三种方式 index.html <!DOCTYPE
禁用jQuery对数组参数做的序列化操作,对数组参数名带上[]
weixin_41124484的博客
10-12 434
//禁用jQuery对数组参数做的序列化操作,对数组参数名带上[] jQuery.ajaxSettings.traditional = true;  
如何在javaweb项目中引入jquery库函数，以及如何使用
么西的IT世界你不懂
10-15 7440
把jquery.js放在了web/js文件夹里面比如你在跟web下面的test.jsp里面要引入jquery，那只需要在 test.jsp中添加   （一般在head和之间加入）如果你同时还引入了
Vue 修改 elementUI table tr th 的高度，以及背景颜色
热门推荐
u012499506的博客
07-26 2万+
先看样式截图： CSS代码： 我是把样式写在index.html 中的   /* 设置table header的背景颜色 */ .el-table__header th, .el-table__header tr { background-color: #17B3A3; color: black; } /* 设置表主体的高度 */ .el-table__body td,...
Web开发之jQuery框架的使用
nuist_NJUPT的博客
08-24 1792
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jquery它的插件机制特别丰富,在开发中可以选择非常多的相关插件，例如，表单校验插件，树型结构。
使用jQuery.wechat构建微信WEB应用
10-25
本期要讲的就是我痛苦中挣扎徘徊后写的jQuery.wechat，一个提供了统一API的、基于jQuery.promise的jQuery.plugin。希望能多少帮助到大家。
jQuery.Validate在Web中的应用.pdf
01-01
《jQuery.Validate在Web中的应用》这篇文章主要探讨了jQuery Validate这一流行的JavaScript库在Web表单验证中的使用。jQuery Validate是一款强大的验证插件，它为开发者提供了便捷的表单验证功能，适用于各种复杂的...
jquery-3.7.1.zip web组件
02-05
《jQuery 3.7.1：Web组件的核心与应用》 在现代Web开发中，jQuery是一个不可或缺的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。标题中的“jquery-3.7.1.zip”表明我们讨论的是...
jquery.webfonts：基于jQuery的Webfonts库
02-04
jquery.webfonts 基于jQuery的webfonts扩展。 这是Wikimedia基金会 介绍 jQuery WebFonts扩展使用WebFonts技术为jquery添加了字体嵌入功能。 该扩展提供了一种灵活的方法，可以从字体库中选择字体并应用于html元素...
jquery.base64.js jquery-1.12.4.min.js
12-11
通过深入学习和实践这些知识点，开发者可以更好地利用`jquery-1.12.4.min.js` 和 `jquery.base64.js` 来提升Web应用的用户体验和功能完整性。在实际项目中，结合其他前端技术和框架（如Bootstrap、Vue.js或React.js...
4.事件驱动编程
自我学习总结
07-08 1367
文章目录一.事件驱动编程二.事件绑定三.事件相关四.综合练习五.AJAX六.获取服务端的时间-后台七.检查账号是否存在八.用户登录操作九.二级联动HTML格式十.二级联动 XML格式十一.JSON数据格式十二.操作JSON的库十三.二级联动-JSON数据格式实现 一.事件驱动编程 事件驱动编程 所谓事件驱动,简单地说就是你点什么按钮(即产生什么事件),电脑执行什么操作(即调用什么函数).当然事件不仅限于用户的操作. 当对象处于某种状态时，可以发出一个消息通知，然后对这个消息感兴趣的程序就可以执行。
1.javascript基础
自我学习总结
06-30 216
文章目录一.JS概述二.js的摆放位置三.变量四.基本类型和常量五.运算符六.函数定义和调用七.全局变量和局部变量八.全局函数九.面向对象十.参数传值十一.内置对象十二.数组十三.数组的属性与方法十四.数组深入十五.prototype 一.JS概述 基本特点 是一种解释性脚本语言（代码不进行预编译）。 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。 日常用途 嵌入动态文本于HTML页面。 对浏览器事件
07.JQuery总结
自我学习总结
07-29 149
文章目录一.js基础二.jQuery 一.js基础 逻辑运算符: && 操作:从左往右依次判断,返回第一个为false的值,否则返回最后一个值 || 操作:从左往右依次判断,返回第一个为true的值,否则返回最后一个值 for in 循环 当遍历是数组, 遍历的变量是索引 当遍历是对象, 遍历的变量是属性名/方法名 for index in arr{ arr[index] } 函数 函数定义与调用: function 函数名([形参1, 形参2...]){
2.BOM
自我学习总结
07-08 135
文章目录一.Document对象的常见属性和方法二.框三.打开或关闭窗口四.访问页面的url五.定时器 一.Document对象的常见属性和方法 BOM是browser object model的缩写，简称浏览器对象模型 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="indext.js"><
5.jQuery
自我学习总结
07-28 131
文章目录一.JQuery概述二.引入三.jQuery初体验四.jQuery对象五.jQuery常用方法六.jQuery常用选择器七.jQuery层次选择器八.过滤选择器九.jQuery事件绑定十.jQueryDOM操作 一.JQuery概述 jQuery是继prototype之后又一个优秀的Javascript框架。 jQuery是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+） jQuery是免费、开源的。 jQue
java毕设&课设-图书管理系统（完整的）.zip
最新发布
07-21
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
使用jQuery轻松开发Web应用
书中详细展示了jQuery的API组件，解释了框架如何协同工作，帮助开发者高效构建Web应用。同时，还涵盖了jQuery UI库，这个库简化了客户端的用户界面任务，对JavaScript编程经验不足的开发者也很友好，提供了如对话框...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值