Jquery和Ajax
JQuery和Ajax
1.JQuery的 入门
//1）导入Jquery的js库
<script src="js/jquery-3.4.1.min.js"></script>
//2)使用Jquery的页面载入事件:将body的内容加载完毕
$(function(){ //Jquery的程序入口
//测试
alert("页面载入事件触发了") ;
//完成的自己业务....
}) ;
2.原生Js和Jquery对象的相互转换
2.1原生Js标签对象—转换成Jq标签对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js对象和Jq对象相互转换</title>
<!--导入jquery的js库:里面有很多函数-->
<script src="js/jquery-3.4.1.min.js"></script>
<!--
js----转换成Jq对象很简单(前提:导入jquery的js库)
1)获取原生Js对象: var 原生js的标签对象 = document.getElementById("id属性值");
2) var $变量名 = $(原生js的标签对象) ; 建议变量名加上$:表示jq对象
3)$变量名使用jquery提供的api:有各种样的方法
-->
<script>
function changeValue() {
//1)获取id="btn"的标签对象 :获取原生js对象
var inputObject = document.getElementById("btn");
//2)将原生js标签对象--->Jquerr对象
var $jqObject = $(inputObject) ;
//3)使用Jquery的里面内置方法
//将value的值改变 :val()方法:获取value的值或者给val(xxx):设置value值
$jqObject.val("切换Jquery方式") ;
}
</script>
</head>
<body>
<!--点击按钮 将按钮的value的值更改了-->
<input type="button" id="btn" onclick="changeValue()" value="点击按钮-原生Js方式"><br/>
<input type="button" value="点击按钮-Jquery方式"><br/>
</body>
</html>
2.2 Jq对象转换成原生Js对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js对象和Jq对象相互转换</title>
<!--导入jquery的js库:里面有很多函数-->
<script src="js/jquery-3.4.1.min.js"></script>
<!--将jquery标签对象转换原生js对象
1)程序 入口:页面载入事件:body内容加载完毕
2)通过Jquery的选择器:获取到标签对象
3)给Jquery标签对象设置点击事件 jq标签对象.click(function(){...业务....})
4)在点击事件中:需要将jq对象转成原生js对象
5)改变value属性值
-->
<script>
//页面载入事件:程序入口
$(function(){
//获取Jq标签对象 :id选择器
//同时,给这个jq标签对象,设置点击事件
$("#jqBtn").click(function(){
//完成什么事情
//alert("点击事件触发了") ;
//通过$("标签名称").get(index:表示第几个元素,从0开始)--原生Js标签对象
//要么$("#id属性值").get(index)
//var inputObject = $("input").get(1) ;
var inputObject = $("#jqBtn").get(0) ;
//通过原生Js对象.value="赋值";
inputObject.value ="切换成原生Js方式了" ;
}) ;
}) ;
</script>
</head>
<body>
<!--点击按钮 将按钮的value的值更改了-->
<input type="button" id="btn" onclick="changeValue()" value="点击按钮-原生Js方式"><br/>
<input type="button" value="点击按钮-Jquery方式" id="jqBtn"><br/>
</body>
</html>
3.Jquery的选择器
3.1 基本选择器
格式如下:
例: <script>
$(function () {
$("#b1").click(function () {
$("#one").css("background-color","red")
})
})
</script>
基本选择器:使用最多
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()方法
Jquery提供的
html():相当于原生Js标签对象的innerHTML属性:设置能够被html渲染的文本
text():相当于原生Js标签对象的innerText属性:设置普通文本
val():获取文本输入框/按钮,默认的属性值---原生js标签对象value属性
val("xx"):给文本输入框/按钮设置内容
-->
5.Jquery的文档处理_dom操作
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的使用
<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(异步)
xhttpRequest.open("get","http://localhost:8080/Maven_01_war/myAjax?username=tom",true) ;
//3)发送send()
xhttpRequest.send() ;
//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>
7.Jquery的ajax使用方式:封装原生Ajax的写法
方式1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery_ajax的使用方式1</title>
<script src="js/jquery-3.4.1.min.js"></script>
<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("获取数据失败") ;
}
},
dataType: "text"
//服务器响应过来的数据格式 :支持html/json/text:普通文本...
}) ;
}) ;
}) ;
</script>
</head>
<body>
<input type="button" value="点我试试" id="btn"/>
</body>
</html>
方式2:$.get(url, [data], [callback], [type])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery_ajax的使用方式2</title>
<script src="js/jquery-3.4.1.min.js"></script>
<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>
</head>
<body>
<input type="button" value="点我试试" id="btn"/>
</body>
</html>
方式3:$.post(url, [data], [callback], [type])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery_ajax的使用方式3</title>
<script src="js/jquery-3.4.1.min.js"></script>
<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>
</head>
<body>
<input type="button" value="点我试试" id="btn"/>
</body>
</html>
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
