JQuery+Ajax 学习笔记
潇潇雨歇_
www
展开
-
XMLHttpRequest 对象实现异步交互
代码: index.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>Insert title here//使用Ajax 实现异步刷新的案例//创建异步对象 var xmlHttp; function createXMLHttpRequ原创 2016-11-06 12:21:26 · 1927 阅读 · 0 评论 -
JQuery 事件相关内容练习1
1.$(document).ready()和window.onload方法的比较$()和window.onload区别 /* window.onload=function(){ alert($("img").width()); } */ /* $(function(){ alert($("img").width()); }); */ /*原创 2016-11-10 12:05:20 · 872 阅读 · 0 评论 -
Ajax在JQuery的运用(load方法练习)
1.index.htmltest load() $(function() { $("input:eq(0)").click(function() { $("#content").load("LoadServlet"); //$("#content").load("LoadServlet #myli");//过滤筛选 });原创 2016-11-13 13:13:45 · 718 阅读 · 0 评论 -
Ajax在JQuery中的应用(get方法练习1)
index.htmltest get() $(function() { $("input:eq(2)").click(function(){ $.get("GetServlet", {'username':encodeURI(encodeURI($("#username").val())), 'passwo原创 2016-11-13 13:13:57 · 285 阅读 · 0 评论 -
Ajax在JQuery中的运用(Post方法)
1.$.Post() index4.htmltest get() $(function() { $("input:eq(0)").click(function(){ $.getScript("script/MyJs.js",function(){ f(); }); }); //可原创 2016-11-13 13:25:28 · 449 阅读 · 0 评论 -
Ajax在JQuery中的应用(Get方法练习2)
1.xml传递数据 index2.htmltest get() $(function() { $("input:eq(2)").click(function(){ $.get("GetXMLServlet", {'username':encodeURI(encodeURI($("#username").val())),原创 2016-11-13 13:25:55 · 295 阅读 · 0 评论 -
Ajax获取响应的纯文本
代码: GetStudentServlet.javapackage com.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import ja原创 2016-12-17 18:02:23 · 2372 阅读 · 0 评论 -
Ajax获取响应XML
代码:GetStudentServlet.javapackage com.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import jav原创 2016-12-17 18:02:43 · 649 阅读 · 0 评论 -
Ajax即时检查用户名是否可用
代码:Usermodel.javapackage com.bean;public class Usermodel { public boolean validate(String username){ boolean valid=false; if("ajax".equals(username)){ valid=true; } return vali原创 2016-12-17 18:02:59 · 385 阅读 · 0 评论 -
Ajax无刷新用户登录
代码: login.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>无刷新用户登录 function getXMLHTTPRequest() { var xRequest = null; if (window.XMLHtt原创 2016-12-22 12:50:38 · 647 阅读 · 0 评论 -
Ajax搜索自动提示
代码:index.htmlAJAX实现搜索提示 function getXMLHTTPRequest() { var xRequest = null; if (window.XMLHttpRequest) { xRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) {原创 2016-12-22 12:50:58 · 3418 阅读 · 5 评论 -
JQuery 实现动画与特效练习2
1.制作多级菜单制作多级菜单 ul{ font-size:12px; font-family:Arial, Helvetica, sans-serif; } li{ padding:1px; margin:0px; } $(function(){ /* //第一种方法 $("li:has('ul')")原创 2016-11-10 12:07:05 · 594 阅读 · 0 评论 -
JQuery 实现动画与特效练习1
1.简单的动画函数简单的动画函数 input{ border:1px solid #060; font-size:14px; padding:4px; font-family:Arial, Helvetica, sans-serif; background-color:#999; color:#0FF; } $(原创 2016-11-10 12:06:39 · 1200 阅读 · 0 评论 -
JQuery 的简单应用
代码:Insert title here $(function(){ var span=document.getElementById("show").firstChild.nextSibling; // alert(span.innerHTML); //alert($(span).html()); var $span=$("span原创 2016-11-06 12:21:46 · 282 阅读 · 0 评论 -
JQuery 常见选择器详解练习1
1.常见基本选择器代码Insert title here$(function(){ //alert($("#ID").val());//查找ID并显示其内容 //alert($("a").html());//查找ID并显示其内容 //alert($('.classname').val()); //alert($("*").length);原创 2016-11-06 12:22:17 · 1175 阅读 · 0 评论 -
JQuery 常见选择器详解练习2
1.常见的内容过滤选择器Insert title here$(function(){ //alert($("li:contains('haige')").html());//过滤出包含haige的li //alert($("li:empty").length); //alert($("li:has(a)").html());//匹配含有选择器所匹配元素的元原创 2016-11-06 12:22:53 · 358 阅读 · 0 评论 -
JQuery 常见选择器详解练习3
1.常见的表单选择器Insert title here$(function(){ //alert($(":input").length); // alert($(":text").length); // alert($(":password").length); // alert($(":radio").val()); // alert($(":checkbox").原创 2016-11-06 12:23:08 · 350 阅读 · 0 评论 -
JQuery 常见DOM操作练习1
1.管理选择器(size()方法)所得的结果size()方法<!-- html{ cursor:help; font-size:12px; font-family:Arial, Helvetica, sans-serif; } div{ border:1px solid #003a75; background-color:#FFFF0原创 2016-11-06 12:33:21 · 1917 阅读 · 0 评论 -
JQuery 常见DOM操作练习2
1.插入元素节点size()方法<!-- html{ cursor:help; font-size:12px; font-family:Arial, Helvetica, sans-serif; } div{ border:1px solid #003a75; background-color:#FFFF00; margin原创 2016-11-06 12:38:01 · 659 阅读 · 0 评论 -
JQuery 常用DOM操作3
1.包裹节点复制和替换元素<!--p{ font-size:14px; margin:0px; padding:5px;}--> $(function(){ $("input:eq(0)").click(function(){ $("p").wrap("");//每一个元素都拿div元素包裹 }); $原创 2016-11-10 12:02:27 · 275 阅读 · 0 评论 -
JQuery 常用DOM操作4
1.遍历节点操作遍历节点操作 $(function(){ //alert($('ul').children().size());查询孩子节点的个数 //alert($('li:eq(0)').next().text());//查询以第一个元素为节点的下一个元素 //alert($('li:eq(3)').prev().prev().text());//上原创 2016-11-10 12:02:44 · 320 阅读 · 0 评论 -
JQuery 常用DOM操作5
1.元素定位的常用方法漂浮广告 var xin=true,yin=true;//标记xin=true往右移动,false往左 var step=1;//移动步伐 var delay=10;//时间间隔 var $obj; function move(){ var left=$obj.offs原创 2016-11-10 12:04:46 · 269 阅读 · 0 评论 -
JQuery 事件相关内容练习2
1.事件冒泡行为toggle事件 span{ width:200px; margin:10px; background:#666; cursor:pointer; color:#FFF; display:block; } p{ width:200px; background:#0FF; c原创 2016-11-10 12:06:05 · 433 阅读 · 0 评论 -
Ajax上传文件返回参数
代码: 文件上传 /* layout.css Style */ .upload-drop-zone { height: 200px; border-width: 2px; margin-bottom: 20px; } /* skin.原创 2017-08-17 18:25:56 · 495 阅读 · 0 评论