CGB2105第二阶段-10前端网页技术JQuery

目录

一、异步请求局部刷新

 执行过程

 二、jQuery

1、定义

2、jQuery使用以及入门

2.1入门案例:

3、jQuery的文档就绪

三、JQuery的语法

1,选择器

–2,常用函数

–3,常用事件

3.1、事件的定义

4、jq语法以及事件的结合练习

四、json

1、概念

2、作用

3、json语法

3.1、json的数据属性

3.2、json的对象

3.3、json数组

3.4、json工具类

3.5js对象和JSON串的区别

五、ajax

1、概念

2、原理

3、格式

3.1测试读取服务器信息

六、客户端和服务器的交互过程


一、异步请求局部刷新

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jzQG1CPR-1622609771127)(RackMultipart20210602-4-1s7eaya_html_9fd13dfcebd9ac4.png)]

 执行过程


用户页面中触发ajax请求,访问后端服务器,Web中间件拦截用户请求,转发后端程序进行数据处理,一般还需访问数据库,然后逐层返回。数据库返回数据处理服务,数据处理服务返回Web中间件,Web中间件返回ajax调用,将数据封装到返回的js对象中,目前主流返回数据为json字符串。在回调callback的方法中解析json中的数据,最终回显到页面上。通常我们使用jquery封装过的ajax,写法更加简洁灵活。
 

 二、jQuery

1、定义

jQuery是一门轻量的、免费开源的JS函数库,主要作用是用于简化JS代码

代码或项目对该技术的依赖程度,依赖程度越低,这个技术越轻,反之,依赖程度越高,这个技术越重。推荐使用轻量级的技术框架

jQuery的核心思想:"写的更少,但做的更多"

通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)。

jQuery** 库包含以下功能:**

  • HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素)
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX

2、jQuery使用以及入门

如何引入jQuery的文件:复制jQuery压缩包,找到HBuilder的文件夹指定项目名,粘贴进去

通过选取 HTML 元素,并对选取的元素执行某些操作。

语法格式:$(选择器).事件

$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

2.1入门案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试jq语法</title>
		<script src="jquery-1.8.3.min.js"></script>
		<script>
			// //获取p标签的元素,并修改样式
			 function fun(){
			// 	//dom树方法获取元素
			// 	// var a=document.getElementsByTagName("p");
			// 	// a[0].innerHTML="变变变";
				
			// 	//jq获取元素--语法格式:$(CSS选择器).事件
			// 	//$("p").hide();//隐藏元素
				var z=$("p").text("爸爸的爸爸叫爷爷");//jq使用.text()修改内容
			    $("p").click(function(){
					$("p").text("高桌子低板凳都是木头")
				});
			 }
		</script>
	</head>
	<body>
		<div id="m">
			------d1------
		</div>
		<p onclick="fun();">----p1----</p>
	</body>
</html>

3、jQuery的文档就绪

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 jq的文档就绪</title>
		
		<!-- 1. 导入jq文件 -->
		<script src="jquery-1.8.3.min.js"></script>
		
		<script>
			//写法1的问题:想用的h1还没被加载,用时会报错
					// 解决方案:写在h1加载之后 + 使用文档就绪函数(先导入jq)
			// document.getElementsByTagName("h1")[0].innerHTML="我变了。。";
			
			//写法2的:使用文档就绪函数(先导入jq)--是指文档都就绪了再用元素
			//$(document).ready(function(){
            $(function(){//文档就绪的简写方式
				//document.getElementsByTagName("h1")[0].innerHTML="我变了。。";//js的dom写法
				$("h1").text("我变了。。");//jq的写法
			});
		</script>
	</head>
	<body>
		
		<h1>我是h1</h1>
		
	</body>
</html>

三、JQuery的语法

1,选择器


标签名选择器: $(“div”) – 选中div
id选择器: $("#d1") – 选中id=d1的元素
class选择器: $(".cls") – 选中class=cls的元素
属性选择器: $("[href]") – 选中有href属性的元素
高级选择器: $(“div.d3”) – 选中class=d3的div

常用选择器:

	过滤选择器
$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
	内容过滤选择器
$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
	可见性过滤选择器
$("li:hidden")       //匹配所有不可见元素,或type为hidden的元素
$("li:visible")      //匹配所有可见元素
	属性过滤选择器
$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
	状态过滤选择器
$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option
	表单选择器
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

–2,常用函数


text() html() val() — 获取或者设置值
hide() – 隐藏
$(“p”).css(“background-color”,“yellow”); --设置样式
show()—显示
fadeIn() — 淡入
fadeOut() — 淡出

–3,常用事件


单击事件–click !!!
双击事件–dblclick
鼠标移入事件–mouseenter
鼠标移出事件–mousleave
鼠标悬停事件–hover
键盘事件–keydown keyup keypress

3.1、事件的定义

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

常见的DOM事件有很多:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OT1mLgQ3-1622609771155)(RackMultipart20210602-4-1s7eaya_html_41934a8b8ef4f294.png)]

常见事件: 

click()  -- 单击事件
$("p").click( function(){ $(this).hide(); });
dblclick()  -- 双击事件
$("p").dblclick(function(){ $(this).hide(); });
mouseenter() -- 鼠标指针穿过元素
$("#p1").mouseenter(function(){ alert('鼠标移到了 id="p1" 的元素上!'); });
mouseleave() -- 鼠标指针离开元素
$("#p1").mouseleave(function(){ alert("再见,您的鼠标离开了该段落。"); });
hover() -- 光标悬停事件
$("#p1").hover( 
function(){ alert("你进入了 p1!"); }, //当鼠标移动到元素上时触发
function(){ alert("拜拜! 现在你离开了 p1!"); //当鼠标移出这个元素时触发
});
可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){ $("p").hide(); });
$("#show").click(function(){ $("p").show(); });


4、jq语法以及事件的结合练习

body里写网页元素,head里使用script修饰元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试jq语法、事件</title>
		
		<!-- 1.引入jq -->
		<script src="jquery-1.8.3.min.js"></script>
		
		<!-- 2.使用jq语法 :$(选择器).事件-->
		<script>
			//jq文档就绪函数:保证元素都被加载,否则使用时会报错
			$(function(){
				//练习1.单击id=d1的元素,隐藏id=p1的
				$("#d1").click(function(){
					$("#p1").hide();
				});
			});
			
			//练习2.双击clas=“dd”的元素,给div加背景色
			$(function(){
				$(".dd").dblclick(function(){
					$("div").css("background-color","green");
				})
			});
			
			//练习3.鼠标进入id=“d1”的div,隐藏有href属性的元素
			$(function(){
			$("#d1").mouseenter(function(){
				$("[href]").hide();
			   })
			});
		</script>
	</head>
	<body>
		<div id="d1">---div1---</div>
		<div class="dd">---div2---</div>
		<div>---div3---</div>
		<div class="dd">---div4---</div>
		
		<p id="p1">---p1---</p>
		<p>---p2---</p>
		
		<a class="dd">---a1---</a>
		<a href="#">---a2---</a>
		<a href="#">---a3---</a>
	</body>
</html>

四、json

1、概念

ajax往往要完整应用还会配合一个技术:JSON,那什么是JSON呢?

JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)

JSON(JavaScript Object Notation,JS 对象简谱) ,它是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者,成为主流开发方式(ajax异步请求,json返回)。

JSON 是使用 JavaScript 语法来描述数据对象。 它是轻量级的文本数据交换格式,独立于语言和平台,JSON 解析器和 JSON 库支持许多不同的编程语言。 它具有自我描述性

2、作用

JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时,这些数据只能是文本。

JSON 属于文本,并且我们能够把任何 JavaScript 对象转换为 JSON,然后将 JSON 发送到服务器。

我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式,我们能够把数据作为 JavaScript 对象来处理,无需复杂的解析和转译。

3、json语法

3.1、json的数据属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试json的语法</title>
		<!-- 在网页中嵌入js代码 -->
		<script>
			var a=" 'name':'张三' ";//定义json的属性
			var b=' "age":"18" ';//双单引号内外都行,但格式要一致
			console.log(a);
			console.log(b);	
		</script>
	</head>
	<body>		
	</body>
</html>

3.2、json的对象

	//2.定义json对象'{k:v}'
			a="{'name':'张三' , 'age':'18'}";
			b="{'name':'李四' , 'age':'20'}";
			console.log(a);
			//因为a是字符串,所以可以使用它的部分方法
			console.log(a.length);//长度
			console.log(a.concat(123));//拼接

3.3、json数组

//3.定义json数组'[{"k1":"v1","k2":"v2"}]'
a='[{"name":"张三" , "age":"18"},{"name":"李四" , "age":"20"}]';
console.log(a);

3.4、json工具类JSON.parse()与JSON.stringify()相互转换

1)接受服务器的数据:json字符串转成js对象--JSON.parse("json字符串")

2)给服务器发送数据:将js对象转换成json字符串--JSON.stringify(js对象)

转成字符串后可以使用字符串的一些方法length、concat拼接、substr截取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试json的语法</title>
		<!-- 在网页中嵌入js代码 -->
		<script>
			//1.定义json的属性
			var a=" 'name':'张三' ";
			var b=' "age":"18" ';//双单引号内外都行,但格式要一致
			console.log(a);
			console.log(b);	
			
			//2.定义json对象'{k:v}'
			a="{'name':'张三' , 'age':'18'}";
			b="{'name':'李四' , 'age':'20'}";
			console.log(a);
			//因为a是字符串,所以可以使用它的部分方法
			console.log(a.length);//长度
			console.log(a.concat(123));//拼接
			
			//3.定义json数组'[{"k1":"v1","k2":"v2"}]'
			a='[ {"name":"张三" , "age":"18"},{"name":"李四" , "age":"20"}]';
			console.log(a);
			
			//4.js对象与json串的相互转换--JSON工具类
			/*js对象可以解析对象的各种属性值
			 *json串可以对字符串拼接、长度、截取、替换等操作*/
			 //4.1接受服务器的数据:json字符串转成js对象--JSON.parse("json字符串")
			 var jsa=JSON.parse(a);
			 console.log(jsa);//把a从字符串变成js对象
			 console.log(jsa[0].age);//获取jsa对象中数组下标0的age值:18
			 console.log(jsa[1].name);//获取jsa对象中数组下标1的name值:李四
			 
			 //4.2给服务器发送数据:将js对象转换成json字符串--JSON.stringify(js对象)
			 jsona=JSON.stringify(jsa);
			 console.log(jsona);
			 //json串可以使用字符串的方法
			 console.log(jsona.length);//长度
			 console.log(jsona.concat(147));//拼接
			 console.log(jsona.substr(3));//截取,从下标3开始截取完为止
			 console.log(jsona.substr(3,6));//截取含头不含尾,从下标3开始截取到下标6为止
		</script>
	</head>
	<body>		
	</body>
</html>

3.5js对象和JSON串的区别

json字符串: { "id":"100","name":"tony","salary":"30000" }
js对象:{ "id":100,"name":"tony","salary":30000 }

可以看出js对象中value值如果是整数,小数,无需加双引号

含义不同:json是一种数据格式,js表示类的实例
传输:json用于跨平台、跨网络传输,速度快;js不能传输
展现:json键值对方式,值是字符串不能是对象方法函数;js值不一定加双引号,值可以是对象、函数、字符串等
转换:JSON.parse(jsonStr) JSON已经作为浏览器内置对象,eval(json);JSON.stringify(obj)
 

五、ajax

1、概念

Ajax 即Asynchronous Javascript And XML( 异步的 )

Ajax并不是一种新的编程语言,而是多种技术的综合应用

Ajax是 客户端 的技术,它可以实现 局部刷新 网页

优点:在不刷新整个网页的前提下,局部更新数据。

2、原理

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bJcZLtUh-1622609771162)(RackMultipart20210602-4-1s7eaya_html_a3c5ab779ef32318.png)]

2.1 常见Ajax写法

  1. $.ajax({})
  2. $.get({})
  3. $.post({})
  4. $.getJSON()

3、格式

七个参数:

$.ajax({//$代表需要导入jquery工具包
	type:  ,//要使用的请求方式,get或者post
	url:  ,//要使用的请求路径 ,交给具体哪个程序去处理--必须写
	contentType: ,//请求时数据的类型
	data:  ,//请求时要携带的数据(参数)
	dataType:  ,//服务器返回数据的类型text、html、jpg、json--必须写
	success: function(data){ //请求成功后自动调用的方案 
		
	},
	error: function(data){ //请求失败时调用的方案
		
	}
})

3.1测试读取服务器信息

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>测试 ajax语法</title>
		
	<script src="jquery-1.8.3.min.js"></script>
	<script>
	$(function(){//文档就绪事件
	$.ajax({ //发起Ajax请求数据
		type: "POST",
		url: "https://p.3.cn/prices/mgets",
		contentType: "application/json;charset=utf-8",
		data: {		//拼接的参数
			"skuIds": "J_100003717483"
		},
		dataType: "jsonp",
		success: function(data) {	//返回的结果是js对象
	//0: {p: "-1.00", op: "2499.00", cbf: "0", id: "J_100003717483", m: "10000.00"}
		console.log(data);
/*解析价格,因为返回结果是js对象,可以根据属性名获取属性值*/			
		console.log(data[0].op);
		$("#p").text("商品价格是:"+data[0].op);//价格展示在网页上
        $("#p1").text("商品id是:"+data[0].id);
		},	
		error: function(data) {
			alert(data);
		}
	});
});
	</script>
		
	</head>
	<body>
	     <div id="p" />我是div1</div><!-- 价格展示在网页上 -->
         <div id="p1" />我是div2</div>
	</body>
</html>

六、客户端和服务器的交互过程

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值