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

1.jQuery CSS方法

<div></div>

css.css

.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);//100var hi = $("#div").innerHeight();//内容+内边距
//    alert(hi);//200var ho = $("#div").outerHeight();//内容+内边距+边框
//    alert(ho);//204var 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,状态  片段的格式不限,一般用.htmif(status == "error"){//box.htm不存在$("body").text("加载失败");}});$.getScript("hello.js").complete(function () {//加载完毕后sayHello();});
});

box.htm

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

hello.js

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

jQuery基础学习笔记(中)相关推荐

jQuery基础学习笔记(上)
1.简介及语法认识jQuery 1.jQuery: jQuery库可以通过一行简单的标记被添加到网页中. 2.什么事jQuery: jQuery是一个JavaScript函数库. 3 ...
jQuery 基础学习笔记
1. jQuery 的执行时间: $(document).ready(function(){--- jQuery functions go here ----// 保证当文档对象加载完成后,进行元素事 ...
jQuery基础学习笔记(下)
8.jQuery的扩展与noConflict 1.jQuery扩展 <script src="../../jquery-2.1.3.min.js"></scrip ...
ASP.Net MVC开发基础学习笔记（5）：区域、模板页与WebAPI初步
http://blog.jobbole.com/85008/ ASP.Net MVC开发基础学习笔记(5):区域.模板页与WebAPI初步 2015/03/17 · IT技术 · .Net, Asp. ...
guido正式发布python年份_Python 基础学习笔记.docx
Python 基础学习笔记基于<Python语言程序设计基础(第2版)> 第一部分初识Python语言第1章程序设计基本方法 1.1 计算机的概念计算机是根据指令操作数据的设备, ...
Python3 基础学习笔记 C09【文件和异常】
CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...
Python3 基础学习笔记 C08 【类】
CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...
Python3 基础学习笔记 C07【函数】
CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...
Python3 基础学习笔记 C06【用户输入和 while 循环】
CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...

jQuery基础学习笔记(中)

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

1.jQuery CSS方法

2.jQuery盒子模型

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

1.向下遍历,向上遍历

2.同级遍历

3.过滤

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

1.AJAX-异步访问

2.AJAX-加载片段

jQuery基础学习笔记(中)相关推荐

最新文章

热门文章