目录
2019.4.2
(1)删除元素
(2)尺寸方法(width,height)
(3)祖先,后代和同胞的遍历
(4)过滤(last first filter not)
(5)Ajax初略介绍
(6)json和jsonp
正文
(1)删除元素
remove()删除被选元素(及其子元素)
empty()从被选元素删除子元素
(2)
width(),height()方法设置和返回元素的宽度,长度(不包括内边距,边框和外边框)
innerWidth(),innerHeight() 返回元素的宽度和长度(包括内边距,也就是包含padding,要乘以2)
outerWidth(),outerHeight()返回元素的长宽,(包括内边距和边框,也就是再加上border)
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<script src='js/jquery.1.12.4.min.js'></script>
<script >
$(function(){
$('#btn').click(function(){
var width=$('#div1').width();
var inner=$('#div1').innerWidth();
var outer=$('#div1').outerWidth();
$('#div1').text('无'+width+'内'+inner+'外'+outer);
});
});
</script>
</head>
<body>
<div id="div1" style="height: 100px;width: 100px;padding: 10px;margin: 10px;border: 1px solid blue;background-color: lightblue;"></div>
<button id="btn">显示信息</button>
</body>
</html>
显示:
(3)祖先遍历:
parent()方法返回被选元素的直接父元素
parents()方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素<html>
parentsUntil()返回两个给点元素之间所有祖先元素
注:他们返回的都是对象和$(selector)的类型一致
后代遍历:
children()方法返回被选元素的所有直接子元素
find(元素)方法返回被选元素的后代元素 (注:find(‘*’)返回所有的后代)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (当前元素)
<p>p (儿子元素)
<span>span (孙子元素)</span>
</p>
<p>p (儿子元素)
<span>span (孙子元素)</span>
</p>
</div>
</body>
</html>
结果:
同胞遍历详见(http://www.runoob.com/jquery/jquery-traversing-siblings.html)
(4)过滤
first()返回被选元素的首个元素$('p').first()
last()返回被选元素的最后一个元素
eq()返回被选元素带有指定索引号的元素,索引号从0开始 $('p').eq(1);
filter()不匹配的元素会从集合中删除,匹配的元素会被返回
例如
//选取p标签中class=‘h’的元素
$('p').filter('.h');
not()与filter正好相反
(5)Ajax初略介绍
Ajax在不重载全部页面的情况下,实现对部分网页的更新
1.load()方法从服务器加载数据,并将返回的数据放入被选元素中
语法:
$(selector).load(URL,data,callback);
参数说明:URL必选。规定需要加载的url
data可选,规定与请求一同发送的查询字符串键值对集合
callback可选,完成后所执行的函数
2.
$.get()方法 从指定的资源请求数据
$.post()方法 向指定的志愿提交要处理的数据
语法:$.get(url,callback) 参数url必须:请求的url地址。 calllback 请求成功后执行的函数名
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
语法:$.post(url,date,callback) :参数同上。data是要提交的数据
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"baidu",
url:"http://www.baidu.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
(6)json和jsonp
注:json数据格式的属性名称和字符串值需要用双引号引起来,不用引号会导致读取错误
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>json数据</title>
</head>
<body>
<p>你可以使用点号(.)来访问 JSON 对象的值:</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null }; //json对象
x = myObj.name;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JSONP:现代浏览器采用同源策略,即不允许访问非同源的页面。在ajax中不允许请求非同源的url就可以,比如www.a.com下的一个页面,其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的
原理:script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不在返回json格式的数据,而是返回一段嗲用某个函数的js代码,在src中进行调用,这样就实现了跨域
参考:https://blog.csdn.net/u011897301/article/details/52679486