Day19_Jquery入门_ajax(笔记)
文章目录
1.Jquery的入门
导入jquery的js库
jquery的两种版本
压缩版jquery-3.4.1.min.js:占用空间小 —项目部署上线,都是用压缩版
jquery-3.4.1.js:不压缩版:占用空间大
<script src="js/jquery-3.4.1.min.js"></script>
原生js:在body给onload属性:让body内容加载完毕触发指定函数
原生js:dom操作
<body onload="init()"> <!--原生js:在body给onload属性:让body内容加载完毕触发指定函数-->
<span id="spanTip">hello,span</span>
</body>
<script>
function init(){
alert("原生js页面载入事件触发了") ;
}
//原生js:dom操作
//1)获取id="spanTip"的标签对象
var spanObj = document.getElementById("spanTip");
//2)操作这个标签的内置属性:innerHTML
spanObj.innerHTML = "<h3>hello,原生js操作标签的文本</h3>" ;
</script>
Jquery的入门----:Jquery的程序入口:页面载入事件:将body中的内容加载完毕
<script>
$(function(){ //推荐的写法
alert("页面载入事件触发了") ;
//使用Jquery的id选择器,快速获取标签对象
var $span = $("#spanTip") ;
//就改变标签的文本内容 html方法()
$span.html("<h1>hello,这是Jquery的方式改变文本</h1>") ;
}) ;
</script>
2.原生js对象和Jq对象相互转换.
2.1 js----转换成Jq对象很简单(前提:导入jquery的js库)
1)获取原生Js对象: var 原生js的标签对象 = document.getElementById(“id属性值”);
2)var $变量名 = ( 原 生 j s 的 标 签 对 象 ) ; 建 议 变 量 名 加 上 (原生js的标签对象) ; 建议变量名加上 (原生js的标签对象);建议变量名加上:表示jq对象
3)$变量名使用jquery提供的api:有各种样的方法
2.2 将jquery标签对象转换原生js对象
1)程序 入口:页面载入事件:body内容加载完毕 2)通过Jquery的选择器:获取到标签对象 3)给Jquery标签对象设置点击事件 jq标签对象.click(function(){...业务....}) 4)在点击事件中:需要将jq对象转成原生js对象 5)改变value属性值
<script>
//页面载入事件:程序入口
$(function(){
//获取Jq标签对象 :id选择器
//同时,给这个jq标签对象,设置点击事件
$("#jqBtn").click(function(){
//通过$("标签名称").get(index:表示第几个元素,从0开始)--原生Js标签对象
//要么$("#id属性值").get(index)
//var inputObject = $("input").get(1) ;
var inputObject = $("#jqBtn").get(0) ;
//通过原生Js对象.value="赋值";
inputObject.value ="切换成原生Js方式了" ;
}) ;
}) ;
</script>
3.JQ选择器
3.1 基本选择器
基本选择器:使用最多
id选择器
element选择器:标签名称选择器
class:类选择器
通过基本选择器:就可以获取标签对象
#id选择器------>$("#标签上指定的id属性值")
element选择器---->$("标签名称")
class选择呢亲---->$(".class属性值")
并集选择器:
$("selector1,selector2,selector3....") :将多个标签对象同时获取
3.2 Jquery层级选择器
Jquery的后代选择器
$("ancestor descendant"):后代选择器:选中的标签无论是ancestor这个标签的子标签还是孙标签全部选中
Jquery的子元素选择器:
$("parent > child"):在给定的父元素下匹配所有的子元素
3.3 Jquery的属性选择器
[attribute]: $("元素名称[属性名称]"):匹配带指定属性的元素
[attribute=value]: $("元素名称[属性名称=值]"):匹配给定属性的是指定的值的元素
[attribute!=value]:$("元素名称[属性名称!=值]"):匹配给定的属性不是指定指定的元素
[attribute^=value]:$("元素名称[属性名称^=值]"):匹配给定的元素属性是以指定的值开头的元素
[attribute$=value]:$("元素名称[属性名称$=值]"):匹配属性是以指定值结束的元素
[attribute*=value]:$("元素名称[顺序名称*=值]"):匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN]:
$("[selector1][selector2][selectorN]")
复合属性选择器,同时满足多个条件
4.Jq的html方法,val()以及,text()方法
html():相当于原生Js标签对象的innerHTML属性:设置能够被html渲染的文本
text():相当于原生Js标签对象的innerText属性:设置普通文本
val():获取文本输入框/按钮,默认的属性值---原生js标签对象value属性
val("xx"):给文本输入框/按钮设置内容
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jq的html_文本_值使用</title>
<!--导入js库-->
<script src="js/jquery-3.4.1.min.js"></script>
<!--
Jquery提供的
html():相当于原生Js标签对象的innerHTML属性:设置能够被html渲染的文本
text():相当于原生Js标签对象的innerText属性:设置普通文本
val():获取文本输入框/按钮,默认的属性值---原生js标签对象value属性
val("xx"):给文本输入框/按钮设置内容
-->
<script>
//页面载入事件
$(function () {
//给id="d1"设置文本内容
$("#d1").html("<h3>这是一个块标签</h3>") ; //可以使用html标签解析
//text():普通文本,不会解析html标签,将标签直接输出了
$("#d1").text("<h3>这是一个块标签</h3>") ;
//文本输入框中输入完内容之后,触发失去焦点事件,获取文本输入的内容
//之前标签onblur属性----blur(function(){....})
$("#name").blur(function () { //监听失去焦点事件
//alert("触发失去焦点事件了") ;
//获取文本输入的内容---Jq的方法val()---代表之前value属性
var username = $("#name").val() ;
alert(username) ;
}) ;
}) ;
</script>
</head>
<body>
<div id="d1"></div>
用户名:<input type="text" placeholder="请您输入用户名" id="name" />
</body>
</html>
5.Jquery的dom之文档处理
1)对象1.append(对象2):将对象2这个元素追加对象1的后面
2)对象2.appendTo(对象1):将对象2这个元素追加对象1的后面
3)对象1.prepend(对象2):将对象2追加对象1的前面
4)对象2.prependTo(对象1):将对象2追加对象1的前面
5)对象1.after(对象2):将对象插入到对象的1的后面
6.原生ajax的格式
6.1 步骤
1)创建浏览器代理对象 XMLHttpRequest对象
2)建立连接 open()
3)发送 send()
4)接收服务器响应的数据 onreadystatechange
5)获取字符串形式的响应数据 responseText
6.2 代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生ajax的格式</title>
<!--
导入的jquery的js库
-->
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//页面载入事件
$(function () {
//alert("页面载入事件处理了") ;
//给id="btn"标签对象设置点击事件
$("#btn").click(function () {
//alert("点击事件触发") ;
//原生Ajax的操作步骤
//1)创建浏览器代理对象
//创建XMLHttpRequest对象
var xhttpRequest;
if (window.XMLHttpRequest) {
//IE7+,firefox,chrome...
xhttpRequest = new XMLHttpRequest();
} else {
// code for IE6, IE5 :低版本Ie浏览器
xhttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//http://localhost:8080/xxx/regist?username=xx :get方式就可以地址栏携带参数
//2)建立连接 ---open() ---->发送请求:默认get
//open(method, url, async)
//参数1:请求方式
//参数2:后台的servlet的地址(后台接口地址)
//参数3:是否是异步,默认值true(异步)
//get提交
//xhttpRequest.open("get","http://localhost:8080/Maven_01_war/myAjax?username=tom",true) ;
//post提交
xhttpRequest.open("post","http://localhost:8080/Maven_01_war/myAjax",true) ;
//3)发送send()
//xhttpRequest.send() ; //get方式发送
//post发送设置ajax的post的请求头:固定写法
xhttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttpRequest.send("username=亓桑")
//4)接收服务器响应的数据
//onreadystatechange:服务器响应给浏览器中的代理对象xhttpRequest的回调函数
//回调函数业务:就是考虑属性:readyState响应的状态 的值 是4 (请求完成,响应就绪)
//status:响应状态200响应成功
xhttpRequest.onreadystatechange = function(){
//考虑两个属性
if(this.readyState==4 && this.status==200){
//响应就绪而且响应成功
//responseText 获取字符串形式的响应数据
var content = this.responseText ;
//测试
alert(content) ;
}
}
}) ;
}) ;
</script>
</head>
<body>
<input type="button" value="点我试试" id="btn"/> <!--原生js/jquery设置点击事件-->
</body>
</html>
6.3注意
建立连接 —open() ---->发送请求:默认为get
get方式提交:
open()方法的参数二要在后边写?xxxxx
然后发送的时候 xhttpRequest.send() send方法参数就不用写了
post方式提交:
open()方法的参数二不用在后边写?xxxxx
7.Jquery_ajax的使用方式
方式1
<script>
$(function () {
//给id"btn"触发点击事件
$("#btn").click(function () {
//Jquery将原生ajax进行简单封装
//通用方式
$.ajax({
//key:value格式:键值对格式
type: "get", //提交方式,将get提交的参数放在url?key=value
url: "/Maven_01_war/myAjax?username=高圆圆" , //url请求后台的接口地址(控制器servlet地址)
success: function (data) { //服务器响应给浏览器的成功的回调函数 参数data:服务器响应过来的数据
if(data=="1"){
alert("获取数据成功"+data) ;
}else{
alert("获取数据失败") ;
}
}
}) ;
}) ;
}) ;
</script>
方式2
<script>
$(function () {
//给id"btn"触发点击事件
$("#btn").click(function () {
//Jquery的ajax方式2
//$.get(url, [data], [callback], [type])
//url:请求的后台的接口地址
//data:请求的参数数据
//callback服务器响应的过来的回调函数
//type:服务器响应过来的数据格式
$.get("/Maven_01_war/myAjax?username=张佳宁",function(data){
if(data=="1"){
alert(data) ; //提示1 成功
}
},"text") ;
}) ;
}) ;
</script>
方式3
<script>
$(function () {
//给id"btn"触发点击事件
$("#btn").click(function () {
//Jquery的ajax方式3
//$.post(url, [data], [callback], [type])
//url:请求的后台的接口地址
//data:请求的参数数据 --->支持json{key:value}
//callback服务器响应的过来的回调函数
//type:服务器响应过来的数据格式
$.post("/Maven_01_war/myAjax",{username:"秦桑"},function(data){
if(data=="1"){
alert(data) ; //提示1 成功
}
},"text") ;
}) ;
}) ;
</script>
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
