jQueryDOM、jQueryAjax
来源：互联网 发布：淘宝怎么找内部优惠券 编辑：程序博客网 时间：2024/05/18 00:58
jQueryDOM
1.1内容操作
（1）文本内容的捕获text()
作用：获取或设置文本内容（等价于DOM操作中的innerText属性）
<head>
<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<p id="p1">我是要捕获的内容</p>
</body>
<script>
$("#p1").text("更改成我");
alert($("#p1").text());
</script>
（2）html():获取元素中的所有内容（HTML的标签）
<head>
<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<p id="p1">我是要<span style="color:red">捕获</span>的内容</p>
</body>
<script>
$("#p1").html("<divstyle='background-color:red'>我是新设置的div</div>");
alert($("#p1").html());
</script>
（3）val():获取或设置表单中的值
<head>
<script type="text/javascript"src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text"id="txt1" name="第一章"value="请输入文本内容"/>
</body>
<script>
$("#txt1").val("我是新的内容");
alert($("#txt1").val());
</script>
（4）attr():获取或设置元素的属性值
<head>
<scripttype="text/javascript"src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text"id="txt1" name="第一章"value="请输入文本内容"/>
</body>
<script>
$("#txt1").attr("name","第一段");
alert($("#txt1").attr("name"));
</script>
1.2元素的添加
（1）append():在元素最后添加内容
可以添加多个内容，这些内容可以使通过HTML、jQuery、DOM创建的
（2）prepend():在元素最前面添加内容
同理，可以在前面添加多个内容，也可以使通过HTML、jQuery、DOM创建的
<head>
<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<divid="div1"><hr></div>
<button id="btnApp">点击在后边添加</button>
<button id="btnPre">点击在前边添加</button>
</body>
<script>
$("#btnApp").click(function(){
vartxt1 = "<p>姓名：</p>";
vartxt2 = $("<p></p>").text("电话：");
vartxt3 = document.createElement("p");
txt3.innerHTML = "住址";
$("#div1").append(txt1,txt2,txt3);
});
$("#btnPre").click(function(){
vartxt1 = "<p>信息：</p>";
vartxt2 = $("<p></p>").text("手机号：");
vartxt3 = document.createElement("p");
txt3.innerHTML = "个人地址";
$("#div1").prepend(txt1,txt2,txt3);
});
</script>
（3）after()和before()
两组添加的区别：append()和prepend()添加后成为了其子元素
after()和before()添加后成为了其兄弟元素
<head>
<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<divid="div1"><hr></div>
<button id="btnApp">点击后边添加</button>
<button id="btnPre">点击前边添加</button>
</body>
<script>
$("#btnApp").click(function(){
vartxtAfter = "<p>这是通过after添加的</p>"
$("#div1").after(txtAfter);
});
$("#btnPre").click(function(){
vartxtBefore = "<p>这是通过before添加的</p>";
$("#div1").before(txtBefore);
});
</script>
1.3元素的删除
remove():删除的是被选元素及其子元素。
empty():删除的是子元素（自身内容也会清空，但元素还在）
remove()还有过滤删除的作用，可以删除指定元素，里边的参数就是指定元素的类名
这个代码的作用就是：删除所有p标签中class属性名为“p2”的元素
<head>
<script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="div1"style="background-color: blue;width:200px;height:200px">
div1
<p>我是div1中的段落1</p>
<pclass="p2">我是div1中的段落2</p>
<p>我是div1中的段落3</p>
<pclass="p2">我是div1中的段落4</p>
</div>
<div id="div2" style="background-color:gold;width:200px;height:200px">
div2
<p>我是div2中的段落</p>
</div>
<button id="delDiv1">删除div1</button>
<button id="delDiv2">删除div2</button>
</body>
<script>
$("#delDiv1").click(function(){
$("p").remove(".p2");
});
$("#delDiv2").click(function(){
$("#div2").empty();
});
</script>
1.4操作css类
里面的参数都是设定的class名
（1）添加class类：addClass()
<head>
<style>
.style1{
color: red;
font-size: 20px;
text-decoration: underline;
}
.style2{
color: blue;
font-size: 32px;
text-decoration: line-through;
}
</style>
<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<p id="p1">修改样式测试</p>
<input type="button" value="样式一" id="btnAdd1">
<input type="button" value="样式二" id="btnAdd2">
</body>
<script>
$("#btnAdd1").click(function(){
$("#p1").addClass("style1");
});
$("#btnAdd2").click(function(){
$("#p1").addClass("style2");
});
</script>
（2）删除class类：removeClass()
<head>
<script src="../jquery-3.2.1.min.js"></script>
<style>
.style1{
color: red;
font-size: 20px;
text-decoration: underline;
}
</style>
</head>
<body>
<p id="p1" class="style1">修改样式测试</p>
<input type="button" value="移除样式" id="btnAdd1">
</body>
<script>
$("#btnAdd1").click(function(){
$("#p1").removeClass("style1");
});
</script>
（3）切换class类：toggleClass()
$(“#p1”).toggleClass(“style1”);
1.5操作CSS()方法
$("#p1").css("color","blue");
css():里面要传两个参数，第一个参数是要设置的属性名，第二个参数是设置的属性值。
$("#p1").css({"color":"yellow","fontSize":"30px"});
css():也可以设置多个属性，不同属性用“,”隔开，属性名与属性值用“:”隔开,最外面用“{}”括起来。
导航
2.1祖先
parent()找到的是当前元素的父元素
parents()找到的是当前元素的所有祖先元素
注意如果在小括号内传入参数，就可以找到你所指定的那一个父元素
<head>
<script src="../jquery-3.2.1.min.js"></script>
<style>
.body *{
border: 1px solid green;
min-height: 20px;
max-width: 300px;
margin: 4px;
background-color: white;
}
</style>
</head>
<body class="body">
<div class="ancestor">祖先
<div>老祖宗
<div name="zhang" >曾祖父
<div>父亲
<div class="oldBrother">大哥</div>
<div class="myself">
我
<div class="firstSon">大儿
<pname="zhang">大孙子</p>
<p>二孙子</p>
<div>小孙子</div>
</div>
<div >二儿</div>
<p>三儿</p>
<div>四儿</div>
</div>
<div class="div3">三弟</div>
<h3>四弟</h3>
<p>五弟</p>
<p class="p6">六弟</p>
</div>
</div>
</div>
</div>
</body>
<script>
$(".myself").parents("[name='zhang']").css("backgroundColor","red");
</script>
parentsUtil()选中两个指定元素之间的祖先元素
<script>$(".myself").parentsUntil("[name='zhang']").css("backgroundColor","red");</script>
2.2后代
children():找到的是当前元素的直接后代
在小括号中传入参数，找到的是指定的子元素（一个或多个）
<head>
<style type="text/css">
div{
border: 1px solid green;
min-height: 30px;
max-width: 300px;
margin: 10px;
background-color: white;
}
</style>
<script src="../jquery-3.2.1.min.js"></script>
</head>
<body onkeydown="move(event)">
<div>父亲
<div>大哥</div>
<divid="myself">
我
<div>大儿
<div>大孙子</div>
<div>二孙子</div>
</div>
<div>二儿</div>
<div>三儿</div>
<div>四儿</div>
</div>
<div>三弟</div>
<div>四弟</div>
</div>
</body>
<script>
$("#myself").children().css("backgroundColor","yellow");
</script>
find():找到的是指定的所有后代
<head>
<title></title>
<script src="../jquery-3.2.1.min.js"></script>
<style>
.body *{
border: 1px solid green;
min-height: 20px;
max-width: 300px;
margin: 4px;
background-color: white;
}
</style>
</head>
<body class="body">
<div class="ancestor">祖先
<div>老祖宗
<div name="zhang" >曾祖父
<div>父亲
<div class="oldBrother">大哥</div>
<div class="myself">
我
<div class="firstSon">大儿
<pname="zhang">大孙子</p>
<p>二孙子</p>
<div>小孙子</div>
</div>
<div >二儿</div>
<p>三儿</p>
<div>四儿</div>
</div>
<div class="div3">三弟</div>
<h3>四弟</h3>
<p>五弟</p>
<p class="p6">六弟</p>
</div>
</div>
</div>
</div>
</body>
<script>
$(".myself").find("*").css("backgroundColor","blue");//找到我的所有孩子，包括孙子
</script>
2.3同胞
sibling():找到当前元素的所有同胞元素（同级元素）
next():找到的是当前元素的下一个弟弟元素
nextAll():找到的是当前元素的所有弟弟元素
nextUntil():找到的是指定两个元素之间的弟弟元素（可能多个）
prev():找到的是当前元素的上一个哥哥元素
prevAll():找到的是所有的哥哥元素
prevUntil():找到的是指定两个元素之间的哥哥元素（可能多个）
$(".p6").siblings().css("backgroundColor","green");//找到六弟的所有兄弟元素
$(".p6").prevAll("div").css("backgroundColor","blue");//找到class为p6的所有div哥哥元素
$(".p6").prevUntil(".div3").css("backgroundColor","blue");//找到class为p6与div3之间的元素
$(".myself").nextAll(".div3").css("backgroundColor","blue");//找到class为myself哥哥元素中class为div3的元素
$(".myself").nextUntil(".p6").css("backgroundColor","blue");//找到class为myself与p6中的元素
jQuery Ajax
3.1ajax
$.ajax({
url:url,
//要提交的数据
data:data,
//提交方式
type:"GET",
//设置请求时间
timeout:3000,
//执行的函数
success:success
});
语法
$.ajax(JSON);
JSON包含常用的参数
url:服务器的地址，获取数据或者推送数据的地方
data:需要给服务器的数据，根据业务需要添加，比如登录的接口需要传递“用户名和密码”，或者书籍信息，不需要传递参数
数据类型:JSON对象。键值对的“键”和服务器保持完全一致，包括键名的大小写。
type:数据提交的方式。GET/POST/PUT/DELETE(大写)
timeout:请求等待的时间。（时间单位是毫秒，一般是10s）
success:请求成功，返回处理。
error:请求失败
dataType:预期的服务器响应的数据类型
3.2$.get()
$.get(url,handle);
function handle(data,status){
console.log(data);//{}
console.log(status);
}
语法：$.get(URL,callback)
url:服务器的地址，传递给服务器的参数，手动拼接到URL后面
handle:请求之后的处理函数。函数包含2个参数
data:服务器返回的数据
status:请求的状态
3.3$.post()
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
语法：$.post(URL,data,callback);
url:服务器地址
data:向服务器传递的数据
data:服务器返回的数据
status:请求的状态
- jQueryDOM、jQueryAjax
- JQueryAJAX
- JQueryAjax
- jqueryAJAX
- jqueryDom处理
- jQueryDOM操作
- jqueryDOM属性
- jqueryDOM操作
- jQueryAjax开发
- jQueryAjax学习心得
- JQueryAjax操作
- JqueryDOM操作-切换样式
- JqueryDOM操作-Alert弹框
- JqueryDOM操作-包裹节点
- JqueryDOM操作-查找节点
- JqueryDOM操作-创建节点
- JqueryDOM操作-复制节点
- JqueryDOM操作-删除节点
- scrapy-redis 介绍
- Qt Quick学习笔记(二)
- SpringMVC起步--MVC基本概念
- Java 接口
- redis --持久化rio
- jQueryDOM、jQueryAjax
- SQL Server 学习笔记之标识符
- 【iOS】音频播放之AVAudioPlayer，AVPlayer，AVQueuePlayer
- BZOJ 3211 花神游历各国 线段树 / 树状数组+并查集
- hdoj 4734 F(x)
- Orcal DMP数据库的导入
- extern "C"的作用详解
- ShapeDrawable的简单实用
- 多线程 通过管道进行线程间通信
