jQuery和ajax使用

最新推荐文章于 2021-11-16 17:04:59 发布

makersy

最新推荐文章于 2021-11-16 17:04:59 发布

阅读量195

点赞数 1

分类专栏： Web 文章标签： jQuery Ajax

本文链接：https://blog.csdn.net/makersy/article/details/86608192

版权

Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery

作用

jQuery选择器用于选中需要操作的页面元素。

基本语法

语法1： jQuery(选择器表达式)
语法2： $(选择器表达式)

几种jQuery选择器

基本选择器
$("#id") ID选择器
$("标签") 元素选择器
$(".class") 类选择器
$("S1,S2,SN") 组合选择器
层叠选择器
层叠选择器是根据元素的位置关系来获取元素的选择器表达式。
语法：
$("ancestor descendant") 后代选择器
$("ancestor>descendant") 子选择器
$("prev~siblings") 兄弟选择器。
着重说下兄弟标签，~符号的意思是只选择该符号前面的元素之后的同级元素。
属性选择器
属性选择器是根据元素的属性值来选择元素的选择其表达式。
语法：
$("selector[attribute=value]") 选中属性值等于具体值的组件
$("selector[attribute^=value]") 选中属性值以某值开头的组件
$("selector[attribute$=value]") 选中属性值以某值结尾的组件
$("selector[attribute*=value]") 选中属性值包含某值的组件
位置选择器
位置选择器是指通过位置获取指定的元素，例如“获取第3个元素”
语法：
$("selector:first") 获取第一份元素
$("selector:last") 获取最后一个元素
$("selector:even") 获取偶位置的元素（从0开始）
$("selector:odd") 获取奇位置的元素（从0开始）
$("selector:eq(n)") 获取指定位置的元素（从0开始）
表单选择器
表单选择器是获取表单元素的简化形式，例如：获取所有文本框
语法：
$("selector:input") 所有输入元素
$("selector:text") 获取文本框
$("selector:password") 获取密码框
$("selector:submit") 获取提交按钮
$("selector:reset") 获取重置按钮

Tips: 使用jQuery前，要先引入js库，如：
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

操作元素属性

attr(name|properties|key) 获取(只传一个元素)或设置(传两个元素)元素属性
获取属性值时，如果有多个，返回的是第一个符合要求的属性值；设置时将所有选中的元素进行赋值。
removeAttr(name) 移除元素属性

操作元素的CSS样式

css() 获取或设置匹配元素的样式属性
addClass() 为每个匹配的元素添加制定的类名
removeClass() 从所有匹配的元素中删除全部或者指定的类

设置元素内容

val() 获取或设置输入项的值
text() 获取或设置元素的纯文本
html() 获取或设置元素内部的HTML

jQuery事件处理方法

on("click",function) 为选中的页面元素绑定单击事件
click(function) 是绑定事件的简写形式
处理方法中提供了event参数包含了事件的相关信息

常用事件包括: 鼠标、键盘、表单、文档/窗口事件。

例子:

完成如下效果：
1、当加载页面时，弹出提示框：欢迎来到设置颜色的页面

2、当点击名为蓝色的div，下面的div背景色变为蓝色，并将文字设置成蓝色，如图2所示；当点击名为绿色的div时，下面的div背景色变为绿色，并将文字设置成绿色，并加粗斜体。

3、当在文本框中输入大写的字母B时，背景颜色变为蓝色，并清空div的内容；当输入大写字母G时，背景颜色变为绿色，并清空div的内容。

B的keyCode值是66，G的keyCode值是71

<!DOCTYPE html >
 
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery练习</title>
 
<style type="text/css">
.div1{
 
      float: left;
      width: 50px;
      line-height: 30px;
      background-color: lightgray;
      margin-left: 10px;
      text-align: center;
      vertical-align: middle;
}
.div2{
      width: 300px;
      height: 300px;
      border: solid gray 1px;
      margin-top: 60px;
      color: red;
}
</style>
 
</head>
<body>
      <h2>请选择背景颜色</h2>
      <div>
      <div id="blue">蓝色</div>
      <div id="green">绿色</div>
      </div>
      <div id="bg">
      </div>
      <div>输入颜色首字母： <input type="text" name="color"></div>
      <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
        	   alert("欢迎来到设置颜色的页面");
           });
           $("#blue,#green").addClass("div1");
           $("#bg").addClass("div2");
           $("#blue").click(function(){
        	  $("#bg").css({"background":"blue", "color":"red"});
        	  $("#bg").text("蓝色背景");
           });
           $("#green").click(function(){
         	  $("#bg").css({"background":"green", "color":"red","font-weight":"bold", "font-style":"italic"});
         	  $("#bg").text("绿色背景");
           });
           $("input[name='color']").keypress(function(event){
        	   if( event.keyCode==66 ){
        		   $("#bg").text("");
        		   $("#bg").css("background", "blue");
        	   }else if( event.keyCode==71 ){
        		   $("#bg").text("");
        		   $("#bg").css("background", "green");
        	   }
           })
      </script>
</body>
</html>

Ajax

介绍

Ajax（Asynchronous javascript and xml）实现了客户端与服务器进行异步数据交流过程。Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
使用该技术的好处是：不用页面刷新，并且在等待页面传输数据的同时可以进行其他操作。

使用流程

创建XmlHttpRequest对象；
发送Ajax请求；
处理服务器响应。

js实现Ajax

xmlhttp.onreadystatechange() 事件用于监听Ajax的执行过程
xmlhttp.readyState属性说明XMLHTTPRequest当前状态
共有0-4五个状态。分别是请求未初始化，连接已建立，请求已接收、正在处理，响应文本已被接收。
xmlhttp.status为属性服务器状态码。200–>成功，404–>未找到，500–>内部程序错误

示例代码：

<script>
document.getElementById("btnLoad").onclick = function(){
	//创建XmlHttpRequest对象
	var xmlhttp;
	if( window.XMLHttpRequest ){
		xmlhttp = new XMLHttpRequest();
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	//发送Ajax请求
	xmlhttp.open("GET", "/ajax/Content", "true");
	xmlhttp.send();
	//处理服务器响应
	xmlhttp.onreadystatechange = function(){
		if( xmlhttp.readyState==4 && xmlhttp.status==200 ){
			var t = xmlhttp.responseText;
			alert(t);
			document.getElementById("divContent").innerHTML = t;
		}
	}
}
</script>

jQuery实现Ajax

$.ajax({ 
  type: "GET", //发送是以POST还是GET
  url: "/ajax/practice", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "makersy","password": 000111}, //传输的数据
  //成功的回调函数
  success: function(json) { 
    console.log(json) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})

ajax同步和异步

xmlhttp.open("GET", "/ajax/Content", "true");
open方法中，设置为true时为异步，false为同步。
ajax设为同步后，xmlhttp.onreadystatechange内的程序会失效无法进行，需要将其内容按顺序放在后面。
同步的含义：前面的事情没执行完，后面的事情就不让执行，有一个等待的过程即会产生阻塞。

makersy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery和ajax使用

jQuery作用jQuery选择器用于选中需要操作的页面元素。基本语法语法1： jQuery(选择器表达式)语法2： $(选择器表达式)几种jQuery选择器基本选择器$("#id") ID选择器$("标签") 元素选择器$(".class") 类选择器$("S1,S2,SN") 组合选择器层叠选择器层叠选择器是根据元素的位置关系来获取元素的选择器表达式。语法...
复制链接

扫一扫

专栏目录