JQuery

jQuery

来源：https://www.liaoxuefeng.com/
http://www.runoob.com/
http://how2j.cn/

Ajax

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

【在页面某一部分单独和服务器联系】

1.创建XHR

创建XHR对象 XMLHttpRequest XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互 AJAX就是通过它做到无刷新效果的

2.设置响应函数

XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。 当服务器响应回来的时候，调用怎么处理呢？ 通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。

3.设置并发出请求

通过open函数设置背后的这个小线程，将要访问的页面url ，在本例中就是
/study/checkName.jsp

xmlhttp.open("GET",url,true);

通过send函数进行实际的访问

xmlhttp.send(null);

null表示没有参数，因为参数已经通过“GET" 方式，放在url里了。
只有在用"POST"，并且需要发送参数的时候，才会使用到send。
类似这样：
xmlhttp.send("user="+username+"&password="+password)

4.在checkResult 函数中处理响应

function checkResult(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}

xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本

Ajax具体流程

  1. 创建XHR对象 2. 设置响应函数 3. 设置要访问的页面 4. 发出请求 5. 当服务端的响应返回，响应函数被调用。 6. 在响应函数中，判断响应是否成功，如果成功获取服务端返回的文本，并显示在span中。
<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text"> 
<span id="checkResult"></span>
  
<script>
var xmlhttp;
function check(){
  var name = document.getElementById("name").value;
  var url = "http://how2j.cn/study/checkName.jsp?name="+name;
  //用get发送参数的形式，用post应该不是这样。
  xmlhttp =new XMLHttpRequest();
  xmlhttp.onreadystatechange=checkResult; //响应函数
  xmlhttp.open("GET",url,true);   //设置访问的页面
  xmlhttp.send(null);  //执行访问
}
  
function checkResult(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
   
}
  
</script>

checkResult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
 
<%
    String name = request.getParameter("name");
     
    if("abc".equals(name))
        out.print("<font color='red'>已经存在</font>");
    else
        out.print("<font color='green'>可以使用</font>");
     
%>

jQuery

定义

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

  • 美元符号定义 jQuery
  • 选择符（selector）"查询"和"查找" HTML 元素
  • jQuery 的 action() 执行对元素的操作

实例:

  • $(this).hide() - 隐藏当前元素
  • $("p").hide() - 隐藏所有 <p> 元素
  • $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
  • $("#test").hide() - 隐藏所有 id="test" 的元素

文档加载

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){ // 开始写 jQuery 代码... });

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小

提示：简洁写法（与以上写法效果相同）:

$(function(){ // 开始写 jQuery 代码... });

以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。

具体操作

与javascript通过id获取元素节点的方式(document.getElementById )不同
JQuery通过 $("#id") 就可以获取了

需要注意的是，通过 document.getElementById 获取到的是 DOM里的 元素节点而通过$("#id") 获取到的是一个 JQuery 对象。

DOM和jQuery对象可以相互转化

<script src="http://how2j.cn/study/jquery.min.js"></script>
 
<script >
 
$(function(){
     $("#b1").click(function(){
        alert("点击了按钮");
     });
});
 
</script>
 
<button id="b1">按钮</button>

隐藏和显示div

<script src="http://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").hide();
   });
   $("#b2").click(function(){
      $("#d").show();
   });
});
 
</script>
 
<button id="b1">隐藏div</button>
 
<button id="b2">显示div</button>
 
<br>
<br>
 
<div id="d">
 
这是一个div
 
</div>

常见方法

取值

通过JQuery对象的val()方法获取值 相当于document.getElementById("input1").value;

<script>
$(function(){
   $("#b1").click(function(){
      alert($("#input1").val());
   });
});
   
</script>
$(function(){//获取d1内标签的HTML，包括标签和文本
   $("#b1").click(function(){
      alert($("#d1").html());
   });
});
<script>
$(function(){
   $("#b1").click(function(){//仅获取文本，不获取标签
      alert($("#d1").text());
   });
});

增删切CSS

<script>
$(function(){
   $("#b1").click(function(){
      $("#d").addClass("pink");
   });
  
});
  
</script>
  <button id="b1">增加背景色</button>
<br>
<br>
 
<style>
.pink{
   background-color:pink;
}
</style>
  
<div id="d">
  
Hello JQuery
  
</div>

切换css

直接设置CSS

<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").css("background-color","pink");
   });
   
   $("#b2").click(function(){
      $("#d2").css({"background-color":"pink","color":"green"});
   });
 
});
   
</script>

选择器+筛选器

http://how2j.cn/k/jquery/jquery-selector/468.html#nowhere

配合操纵改变特定标签

$("# ")

获得各种属性 有各种效果函数，有简易的监听技术

简化使用Ajax

JQuery也有对AJAX的支持，使得其对AJAX的操作简化了很多

Ajax

$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开 第一个参数 url:page 表示访问的是page页面

第二个参数 data:{name:value} 表示提交的参数

第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数

<script src="http://how2j.cn/study/jquery.min.js"></script>
 
<div id="checkResult"></div>
  
输入账号 :<input id="name" type="text">
  
<script>
$(function(){
   $("#name").keyup(function(){
     var page = "/study/checkName.jsp";
     var value = $(this).val();
        $.ajax({
            url: page,
            data:{"name":value},
            success: function(result){//返回结果
              $("#checkResult").html(result);
            }
        });
   });
});
 
</script>
get

是.get 是

.ajax的简化版，专门用于发送GET请求

.get( page, {"name":value}, function(result){("#checkResult").html(result);
}
);

$.get 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选

post

是.post 是

.ajax的简化版，专门用于发送POST请求

.post( page, {"name":value}, function(result){("#checkResult").html(result);
}
);

$.post 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选

load

load比起 .get,.post 就更简单了
$("#id").load(page,[data]);
id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据，可选。 在本例中，直接在page里加上了参数列表

<script src="http://how2j.cn/study/jquery.min.js"></script>
   
<div id="checkResult"></div>
    
输入账号 :<input id="name" type="text">
    
<script>
$(function(){
   $("#name").keyup(function(){
     var value = $(this).val();
     var page = "/study/checkName.jsp?name="+value;
     $("#checkResult").load(page);
   });
});
   
</script>

使用json

方法链接

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示： 这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

实例

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • Jquery知识点总结
    一：认识jquery jquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Aj...
    xuguibin阅读 5,641评论 1赞 7
  • jquery 权威指南 笔记
    第一章 入门 基本功能：访问和操作 dom 元素，控制页面样式，对页面的事件处理，与ajax完美结合，有丰富的插件...
    X_Arts阅读 4,721评论 0赞 2
  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,288评论 0赞 2
  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,940评论 0赞 1
  • jQuery
    请记得在进行JQuery类库的运用时，加入JQuery类库，并且要保证先写文档就绪函数 $(document).r...
    Sunshinemm阅读 8,017评论 1赞 40

友情链接更多精彩内容