jQuery基础学习笔记(中)

5.CSS操作及jQuery的盒子模型

1.jQuery CSS方法

<div></div>

.style1{
width: 100px;
height: 100px;
background-color: blue;
}

.style2{
width: 100px;
height: 100px;
background-color: gray;
}

$(document).ready(function () {
/*  $("div").css("width","100px");//设置单个属性
$("div").css("height","100px");
$("div").css("background","red");*/

/* $("div").css({
width:"100px",//设置多个属性
height:"100px",
backgroundColor:"yellow"
});*/

$("div").addClass("style1");//addClass
$("div").click(function () {
//        $(this).addClass("style2");//更改样式
//        $(this).removeClass("style1");//移除指定样式
$(this).toggleClass("style2");//来回切换(点击切换)
});

});

2.jQuery盒子模型

<style>
#div{
width: 100px;
height: 100px;
margin: 50px;
padding: 50px;
border: 2px solid blue;
background-color: #ffff00;
}
</style>

<div id="div"></div>

$(document).ready(function () {
var h =  $("#div").height();//只是内容的高度,不包括边距什么的
//    alert(h);//100
var hi = $("#div").innerHeight();//内容+内边距
//    alert(hi);//200

var ho = $("#div").outerHeight();//内容+内边距+边框
//    alert(ho);//204
var ho2= $("#div").outerHeight(true);//内容+内边距+边框+外边框
alert(ho2);//304

});

6.元素的遍历与元素的过滤

1.向下遍历,向上遍历

<div id="div1">div1
<div id="div2">div2
<p>
<a>
HELLO
</a>
</p>
</div>
</div>

#div1{
width: 500px;
height: 200px;
border: 3px solid chocolate;
}

#div2{
width: 400px;
height: 150px;
margin-top: 10px;
margin-left: 10px;
border: 3px solid chocolate;
}

p{
margin-left: 10px;
margin-top: 10px;
width: 150px;
height: 80px;
border: 3px solid #ffff00;
}

/*
向下遍历
children  只向下遍历1级 括号可不写
find      可向下遍历所有 find(*),括号必写
*/

/*向上遍历
parent()      只能遍历一层--直接父类
parents()     ()不写遍历所有,写了遍历那个
parentsUntil()  区间   ()不写遍历所有上级
*/

$(document).ready(function () {
/* 向下遍历*/
// $("#div1").children().css({border:"3px solid blue"});//div2变色
// $("#div1").children("#div2").css({border:"3px solid blue"});//children 的括号内为可选项
// $("#div1").children("p").css({border:"3px solid blue"});//无效
// $("#div1").find("#div2").css({border:"3px solid blue"});//div2变
// $("#div1").find("p").css({border: "3px solid blue"});//p变

/*向上遍历*/
//  $("a").parent().css({border:"3px solid blue"});//p元素变色
//  $("p").parent().css({border:"3px solid blue"});//div2变色

//   $("p").parents().css({border:"3px solid blue"});//div2开始一切都改了,包括document
$("p").parents("#div1").css({border:"3px solid blue"});//只有div1变

//    $("p").parentsUntil().css({border: "3px solid blue"});//同上
//   $("a").parentsUntil("#div1").css({border: "3px solid blue"});//a~div1之间的变色,不包括a和div1

});

2.同级遍历

<style>
.bd *{
display: block;
border: 2px solid gray;
color: gray;
padding: 5px;
margin: 15px;
}
</style>
<div class="bd">
<p>p</p>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</div>

/*
siblings() 同级元素全部修改(其它元素)

向下
next()  下一个元素修改
nextAll()  下面所有的元素修改
nextUntil()  下面元素的区间修改

向上
prev()
prevAll()
preUntil()
*/

$(document).ready(function () {
$("h4").siblings().css({border:"3px solid blue"});//除了h4的同级元素修改
//    $("h4").next().css({border:"3px solid blue"});//修改下一个,h5
//    $("h4").nextAll().css({border:"3px solid blue"});//修改下面所以,h5,h6
//    $("h4").nextUntil("h6").css({border:"3px solid blue"});//向下 修改h4到h6之间的元素,即h5
});

3.过滤

<div>
<p>div1</p>
</div>
<div>
<p class="pclass">div2</p>
</div>
<div>
<p class="pclass">div3</p>
</div>
<div>
<a>div4</a>
</div>

/*
first()//寻找同样元素的第一个
last()//寻找同样元素的最后一个
eq() //0开始计数,第几个
filter()
not()
*/

$(document).ready(function () {
//    $("div p").first().css({background:"blue"});
//    $("div p").first().css("background-color","red");
//    $("div p").last().css("background-color","red");
//    $("div p").eq(1).css("background-color","red");//div1
//    $("div p").filter(".pclass").css("background-color","red");//指定标准满足则变化
$("div p").not(".pclass").css("background-color", "red");//指定标准不满足变化
});

7.AJAX之异步访问和加载片段

1.AJAX-异步访问

name:<input type="text" id="namevalue"><br>
<button id="btn">发送</button>
结果:<span id="result"></span>

$(document).ready(function () {
$("#btn").click(function () {
/*  $.get("*.*",{name:$("#namevalue").val()}, function (data) {//"*.*"是服务器
$("#result").text(data);
});*/
$("#result").text("正在连接服务器...");
$.post("*.*",{name:$("#namevalue").val()}, function (data) {//服务器
$("#result").text(data);
}).error(function () {//连接服务器出问题
$("#result").text("连接服务器失败!");
});
});
});

2.AJAX-加载片段

$(document).ready(function () {
$("body").load("box.htm", function (a,status,c) {//url,状态  片段的格式不限,一般用.htm
if(status == "error"){//box.htm不存在
$("body").text("加载失败");
}
});

$.getScript("hello.js").complete(function () {//加载完毕后
sayHello();
});
});

<div style="width: 100px;height: 100px;background-color: red"></div>

function sayHello(){
alert("hello AJAX!");
}