1 Javascript回顾
问题:Javascript能做什么?
1. 获取操作dom
<style>
.aa{ background:red}
.bb{ background:blue}
</style>
<body>
<div id="dv" title="提示信息" class="aa">AAAAAAAAA</div>
<button οnclick="fn()">按钮</button>
</body>1.1 获取和设置节点的属性 innerHTML className tagName
var dm=document.getElementById("dv");
//获取dom节点的title的属性值
//alert(dm.title);
//设置dom节点的title的属性值
//dm.title="我是后来加上去的提示信息";
//获取节点的文本属性
//alert(dm.innerHTML);
//设置节点的文本属性
//dm.innerHTML="新设置的文本";
//获取节点的标签名
//alert(dm.tagName);2.2对节点的样式操作有两种方式
2.2.1.提前将样式写好,作为节点的className属性进行样式的整体操作
2.2 2.细粒度控制节点的每一个样式 HTMLDOM-->dom
//获取节点的class属性值
//alert(dm.className); //class为javaScript的保留关键字
//设置节点的class属性值
//dm.className="bb";
//dm.style.background="yellow";2. DOM节点CRUD,遍历节点
如何查询API
>1.html-->w3cscholl 比如没有见过某个标签
>2.css--->专业CSS文档
>3.js操作节点
* 控制节点的样式 htmlDOM->domstyle
* 控制节点的CRUD xmlDOM
<body>
<ul id="myId">
<li title="AAA">AAA</li>
<li title="BBB">BBB</li>
<li title="CCC">CCC</li>
<li title="DDD">DDD</li>
</ul>
<button οnclick="fn()">AAAAAA</button>
</body>CRUD操作
var dm=document.getElementById("myId");
//获取指定节点
var li_dom=document.getElementsByTagName("li")[1];
//alert(li_dom.innerHTML);
li_dom.innerHTML="ZZZZZZZZ";
//创建节点
var new_Dom=document.createElement("LI");
//为节点绑定文本内容
new_Dom.innerHTML="EEEE";
//插入节点
//将新创建的节点插入到DDD之后
//dm.appendChild(new_Dom);
//将新节点插入到指定节点之前
//dm.insertBefore(new_Dom,li_dom);
//删除节点
//dm.removeChild(li_dom);
//遍历节点
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
//lis[i].
alert(lis[i].innerHTML);3.为DOM节点绑定各种事件
>文档未加载到绑定事件失败
<script>
function fn(){
alert("TTTTT");
}
</script>
</head>
<body>
<button οnclick="fn()">AAAAA</button>
</body><body>
<button id="btn">AAAAA</button>
</body>
<script>
var dom=document.getElementById("btn");
dom.οnclick=function(){alert("TTT");}
</script><script>
window.οnlοad=function(){
var dom=document.getElementById("btn");
dom.οnclick=function(){alert("TTT");}
}
</script>
<style>
h3{}
</style>
</head>
<body>
<button id="btn">AAAAA</button>
<h3>DDDD</h3>4.ajax
1.创建Ajax流程
* 创建核心对象xmlHTTPRequst
* 绑定函数
* 打开链接
* 发送数据
* 处理回调函数
CBDFC 成本的付出
2.核心对象的状态
> 0状态：刚创建，还没有调用open()方法;
> 1状态：请求开始：调用了open()方法，但还没有调用send()方法
> 2状态：调用完了send()方法了；
> 3状态：服务器已经开始响应，但不表示响应结束了！
> 4状态：服务器响应结束
<script>
//声明核心对象
var xmlHttp=GetXmlHttpObject();
window.οnlοad=function(){
var dom=document.getElementById("btn");
dom.οnclick=function(){
//1.创建核心对象
xmlHttp=GetXmlHttpObject();
//2.绑定函数
xmlHttp.onreadystatechange=fn;
//3.打开链接
xmlHttp.open("get","test.jsp",true);
//4.发送
xmlHttp.send();
}
}
//5.处理回调
function fn(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
document.getElementById("dv").innerHTML=xmlHttp.responseText;
}
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
</head>
<body>
<button id="btn">AAAAA</button>
<div id="dv"></div>2 jQuery介绍
2.1 谁在使用
微软
百度
淘宝
2.2 JavaScript类库
JavaScript库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。
常见的js类库
jQuery，开源免费，提供众多插件。
ExtJs，2.0开始收费
DOJO，开源
prototype， 优秀的类库，读js扩展。类库开发
YUI！，雅虎提供
2.3 jQuery简介
jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使js代码和html内容分离
jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
由美国人John Resig在2006年1月发布
jQuery分类：
WEB版本：主要学习研究 jQuery...js
UI版本：集成了UI组件 jQuery.ui...js
mobile版本：针对移动端开发(手机、ipad等)
qunit版本：用于js测试的
jQuery口号：The WriteLess, Do More
2.4 jQuery版本
jquery2.1与1.11核心功能相同
*1.11兼容所有浏览器
*2.1之后不再兼容IE8之前的浏览器
jquery-1.8.3.js 所有的源码，比较大。开发过程使用。
jquery-1.8.3.min.js压缩的版本（不易于阅读）生产环境使用。
2.5 jQuery优点
核心理念是write less,do more(写得更少,做得更多)
轻量级：源码1.11.js大小是286kb，压缩班1.11.min.js大小是94.1k。如果使用GZIP压缩更小。
兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari2.0+, Opera 9.0+）
jQuery的语法设计可以使开发者更加便捷
• 例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
jQuery能够使js代码和html内容分离
• 不用再在html里面插入一堆js来调用命令了，只需要定义id即可
jQuery提供API让开发者编写插件，有许多成熟的插件可供选择
文档说明很全
3 jQuery使用
3.1 搭建环境
3.2 aptana插件
3.2.1 安装
myeclipse的js插件，方便编写js。提供多js类库支持。
注意：
1.如果myeclipse不是安装版，此插件可能安装不成功。
2.如果安装成功，myeclipse原始html编辑器不可使用。
myeclipse插件安装
MyEclipse 10\dropins\aptana\eclipse 位置拷贝 features和 plugins
3.2.2 myeclipseaptana 配置
步骤一：配置插件
Preferences→Aptana
步骤二：勾选jQuery，方便在html页面中进行提示
Editors →javascript→code assist
步骤三：不显示火狐浏览器主页提示 never 去掉使用火狐浏览器
My apatana/message
3.3 导入js库
<!--
/jQuery_day01/js/jquery-1.8.3.js 相对路径（相对web站点的根）
./ 表示当前页面所在目录
../ 表示当前页面上一级目录
<script>导入js库
type 指定类型
src js位置
注意：如果使用src，标签体中不能编写内容
注意：编写js代码时，有加载顺序问题
1.jquery类库必须放在使用之前
2.如果直接编写js代码，必须放在目标对象（html）的指之后
-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>3.4 jQuery对象获取【掌握】
* jQuery对象就是通过jQuery包装DOM对象后产生的对象
* 注意：jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法
//语法： jQuery 或 $
//方式1
//varusername = jQuery("#username");
//方式2
varusername = $("#username");
3.5 dom对象和jQuery对象转换
•DOM转换成jQuery
varusername = document.getElementById(“username”);
var$username = jQuery(username);
•jQuery转换成DOM
var$username = jQuery(“#username”);
varusername = $username[0];
•jQuery对象是一个数组对象还可以
$username.get(0);
4 选择器(掌握)
jQuery基本语法，通过选择器，在html页面中获得jQuery对象（筛选出需要内容）
选择器分类（9类）：基本、层次、基本过滤、内容过滤、可见性过滤、属性、子元素过滤、表单过滤、表单属性过滤
4.1 基本【掌握】
基本选择器，采用html页面支持css样式种类。
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).
1、#id 用法: $(”#myDiv”); 返回值 单个元素的组成的集合
说明: 这个就是直接选择html中的id=”myDiv”
2、Element 用法: $(”div”) 返回值 集合元素
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a等等.
3、class 用法: $(”.myClass”) 返回值 集合元素
说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).
4、* 用法: $(”*”) 返回值 集合元素
说明: 匹配所有元素,多用于结合上下文来搜索
5、selector1, selector2,selectorN 用法: $(”div,span,p.myClass”) 返回值 集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素
p class=”myClass”
4.2 层次【掌握】
如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
1、ancestordescendant
用法: $(”form input”) ; 返回值 集合元素
说明: 在给定的祖先元素下匹配所有后代元素(多层关系,儿孙曾孙..).与下面的”parent > child”区分开.
2、parent > child
用法: $(”form > input”) ; 返回值 集合元素
说明: 在给定的父元素下匹配所有子元素(内外层关系,父子).注意:要区分好后代元素与子元素
3、prev + next
用法: $(”label + input”) ; 返回值 集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素(上下层关系 ,下面第一个兄弟)
4、prev ~ siblings
用法: $(”form ~ input”) ; 返回值 集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素(上下层关系 ,下面所有兄弟),不包含该元素在内,
并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
4.3 基本过滤【了解】
在选择器中，只要“:xxx”都是过滤选择器。
1、:first
用法: $(”tr:first”) ; 返回值 单个元素的组成的集合
说明: 匹配找到的第一个元素
2、:last
用法: $(”tr:last”) 返回值 集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应.
3、:not(selector)
用法: $(”input:not(:checked)”)返回值 集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
4、:even
用法: $(”tr:even”) 返回值 集合元素
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
5、: odd
用法: $(”tr:odd”) 返回值 集合元素
说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.
6、:eq(index)
用法: $(”tr:eq(0)”) 返回值 集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
7、:gt(index)
用法: $(”tr:gt(0)”) 返回值 集合元素
说明: 匹配所有大于给定索引值的元素.
8、:lt(index)
用法: $(”tr:lt(2)”) 返回值 集合元素
说明: 匹配所有小于给定索引值的元素.
9、:header(固定写法)
用法: $(”:header”).css(”background”, “#EEE”) 返回值 集合元素
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
10、:animated(固定写法) 返回值 集合元素
<input type="text" value="请输入账号" defaultValue="请输入账号" />
<input type="text" value="请输入密码" defaultValue="请输入密码"/>
<script type="text/javascript">
$(document).ready(function(){
// 给两个 input 绑定事件
$("input[type='text']").on("focus blur",function(){
// this表示当前对象（dom对象） , 获得焦点和失去焦点都将触发当前函数
// is() 进程筛选，判断是否是
if($(this).is(":focus")){
//获得焦点，如果是默认值的话，将文本框清空。
if($(this).val()==$(this).attr("defaultValue")){
$(this).val("");
}
}else{
//失去焦点--如果没有数据话，将默认值还原
// attr() 对属性进行操作，如果提供属性名将获取。
if($(this).val().length == 0){
$(this).val($(this).attr("defaultValue"));
}
}
});
</script>
4.4 内容过滤【了解】
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
1、:contains(text)
用法: $(”div:contains(’John’)”) 返回值 集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.
2、:empty
用法: $(”td:empty”) 返回值 集合元素
说明: 匹配所有不包含子元素或者文本的空元素
3、:has(selector)
用法: $(”div:has(p)”).addClass(”test”) 返回值 集合元素
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.
4、:parent
用法: $(”td:parent”) 返回值 集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”!而是感觉与上面讲的”:empty”形成反义词.
4.5 可见性过滤【掌握】
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
1、:hidden
用法: $(”tr:hidden”) 返回值 集合元素
说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.
对比
• $("div:hidden") 所有隐藏的div
• $("div.hidden") 所有class="hidden"的div
• $("div,hidden") 所有div标签和hidden标签
• $("div hidden") 所有div子标签hidden
2、:visible
用法: $(”tr:visible”) 返回值 集合元素
说明: 匹配所有的可见元素.
案例 ($对象的遍历)
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
<script type="text/javascript">
$(document).ready(function(){
// <input type="button" value=" 选取所有可见的div元素" id="b1"/>
$("#b1").click(function(){
$("div:visible").css("backgroundColor","#FFFF00");
});
// <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>
//1 <xxx style="display:none">
//2 <input type="hidden">
//3 <br/>
$("#b2").click(function(){
//alert( $(":hidden").size() );
$("div:hidden").show(2000).css("backgroundColor","#FFFF00");
});
// <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
$("#b3").click(function(){
var $inputs = $("input:hidden");
/* 方式1：javascript
for(var i = 0 ; i < $inputs.length ; i ++){
var input = $inputs[i];
alert(input.value);
}
*/
// 方式2：jQuery对象函数，each(function( index, domEle ){})方法进行遍历
// * index 遍历索引号
// * domEle 遍历对象，相当于this
$inputs.each(function(index ,domEle){
//获得数据方式1： 通过this获取
//alert($(this).val());
//获得数据方式2：通过函数的参数获去
alert($(domEle).val());
});
});
// <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/>
$("#b4").click(function(){
var $inputs = $("input:hidden");
// $.each 全局函数
// * 参数1：表示遍历的对象
// * 参数2：回调，参数 each函数
$.each($inputs,function(){
alert($(this).val());
});
});
});
</script>
动态列表效果
<script type="text/javascript">
$(document).ready(function(){
//前五个显示，最后一个显示
var $li = $("li:gt(4):not(:last)")
$li.hide();
$("a:has('span')").click(function(){
if($li.is(":visible")){
//显示
$li.hide(1000);
//$("a>span").html("显示全部品牌");
$(this).find("span").html("显示全部品牌");
} else {
//隐藏
$li.show(1000);
//$("a>span").html("隐藏部分品牌");
$(this).find("span").html("隐藏部分品牌");
}
});
});
4.6 属性【掌握】
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
1、[attribute]
用法: $(”div[id]“) ; 返回值 集合元素
说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.
2、[attribute=value]
用法: $(”input[name='newsletter']“).attr(”checked”, true); 返回值 集合元素
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.
3、[attribute!=value]
用法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值 集合元素
说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.
4、[attribute^=value]
用法: $(”input[name^=‘news’]“) 返回值 集合元素
说明: 匹配给定的属性是以某些值开始的元素.,
5、[attribute$=value]
用法: $(”input[name$=‘letter’]“) 返回值 集合元素
说明: 匹配给定的属性是以某些值结尾的元素.
6、[attribute*=value]
用法: $(”input[name*=‘man’]“) 返回值 集合元素
说明: 匹配给定的属性是以包含某些值的元素.
7、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(”input[id][name$=‘man’]“) 返回值 集合元素
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况
我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且
；它的 name 属性是以 man 结尾的元素.
4.7 子元素过滤【了解】
1、:nth-child(index/even/odd/equation)
用法: $(”ul li:nth-child(2)”) 返回值 集合元素(第几个子元素)
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.
2、:first-child
用法: $(”ul li:first-child”) 返回值 集合元素(第1个子元素)
说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.
3、:last-child
用法: $(”ul li:last-child”) 返回值 集合元素(最后1个子元素)
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
4、: only-child
用法: $(”ul li:only-child”) 返回值 集合元素(唯一1个子元素)
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
4.8 表单过滤【了解】
1、:input 匹配所有 input, textarea, select 和 button 元素
• 例如：$(":input")
2、:text 匹配所有的单行文本框
• 例如：$(":text")
3、:password 匹配所有密码框
• 例如：$(":password")
4、:radio 匹配所有单选按钮
• 例如：$(":radio")
5、:checkbox 匹配所有复选框
• 例如：$(":checkbox")
6、:submit 匹配所有提交按钮
• 例如：$(":submit")
7、:image 匹配所有图像域
• 例如：$(":image")
8、:reset 匹配所有重置按钮
• 例如：$(":reset")
9、:button 匹配所有按钮（<inputtype="button">、<button />）
• 例如：$(":button")
10、:file 匹配所有文件域(文件上传)
• 例如：$(":file")
11、:hidden 匹配所有不可见元素，或者type为hidden的元素
• 例如：$("tr:hidden")
4.9 表单属性过滤【掌握】
此选择器主要对所选择的表单元素进行过滤
1、:enabled
用法: $(”input:enabled”) 返回值 集合元素
说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,就为enabled啦.
2、:disabled
用法: $(”input:disabled”) 返回值 集合元素
说明: 匹配所有不可用元素.与上面的那个是相对应的.
3、:checked
用法: $(”input:checked”) 返回值 集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).
4、:selected
用法: $(”select option:selected”) 返回值 集合元素
说明: 匹配所有选中的option元素.
5 属性和CSS【掌握】
5.1 属性attr
1、attr(name|properties|key,value|fn) 设置或返回被选元素的属性值。
• 例如：$("img").attr("src");表示获得src的属性值
• 例如：$("img").attr("src","test.jpg");表示给src设置属性值/attr(json数据) 表示设置一组值
2、removeAttr(name) 从每一个匹配的元素中删除一个属性
• 例如：$("img").removeAttr("src");
5.2 CSS类
1、addClass(class|fn) 为每个匹配的元素追加(不会覆盖原有)指定的CSS类名。
• 例如：$("p").addClass("selected");
2、removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的CSS类。
• 例如：$("p").removeClass("selected");
3、toggleClass(class|fn[,sw]) 切换，如果存在（不存在）就删除（添加）一个类。
• 例如：$("p").toggleClass("selected");
5.3 html代码/文本/值
1、html([val|fn]) 取得第一个匹配元素的html内容
• 例如：$('p').html(); 获得内容
• 例如：$("p").html("Hello<b>world</b>!"); 设置内容
2、text([val|fn]) 取得所有匹配元素的内容
• 例如：$('p').text(); 获得所有内容
• 例如：$("p").text("Helloworld!"); 设置内容
3、返回值:val([val|fn|arr]) 获得匹配元素的当前值。
• 例如：$("input").val(); 获得内容
• 例如：$("input").val("helloworld!"); 设置内容
text 和 html 都是对标签体进行操作的
text操作文本，如果添加标签，直接显示
html操作html代码，如果添加标签，浏览器需要解析
5.4 css样式
操作和获取DOM样式:
2种操作方式: 1.将样式整体作为节点的属性来操作
2.对应于HTMLDOM domstyle,细粒度的操作节点的每一种样式
样式:
节点的定位方式:绝对定位 $dom.attr("position","absolute");
宽,高：大小
左边距离,顶部距离: 位置
字体:大小,字体颜色,字体
盒子模型: 内外边距
背景: 颜色,图片,图片的平铺方式
边缘知识: 列表,表格....
1、css(name|pro|[,val|fn]) 访问匹配元素的样式属性。
•例如：$("p").css("color");;表示获得css color的值
•例如：$("p").css("color","red");设置一个值
•例如：$("p").css({ color:"#ff0011", background: "blue" }); 设置一组值/css(json) 设置一组
//获取样式
alert($("p").attr("class") );
//设置样式
$("p").attr("class","high");
//追加样式
$("p").addClass("another");
//删除全部样式
$("p").removeClass();
//删除指定样式
$("p").removeClass("high");
//重复切换样式
$("p").toggleClass("another");
//判断元素是否含有某样式
alert($("p").hasClass("another") )
alert($("p").is(".another") )
5.5 位置【了解】
1、offset([coordinates]) 获取匹配元素在当前视口的相对偏移。(绝对位置)
返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效
•例如：$("p:last").offset().left
•例如：$("p:last").offset().top
2、position() 获取匹配元素相对父元素的偏移。（相对位置）
返回的对象包含两个整型属性：top 和 left
•例如：$("p:first").position();
3、scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。//滚动条滚动位置（垂直）
此方法对可见和隐藏元素均有效。
•例如：$("p:first").p.scrollTop()获得相对滚动条顶部值
•例如：$("p:first").p.scrollTop(300)设置相对滚动条顶部值
4、scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移。滚动条滚动位置（水平）
此方法对可见和隐藏元素均有效。
•例如：$("p:first").scrollLeft()获得相对滚动条左侧值
•例如：$("p:first").scrollLeft(300)设置相对滚动条左侧值
5.6 尺寸【了解】
1、height([val|fn]) 取得匹配元素当前计算的高度值（px）。
•例如：$("p").height();
2、width([val|fn]) 取得第一个匹配元素当前计算的宽度值（px）。
•例如：$("p").width();
3、innerHeight() 获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
4、innerWidth() 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。
5、outerHeight([options]) 获取第一个匹配元素外部高度（默认包括补白和边框）。
6、outerWidth([options]) 获取第一个匹配元素外部宽度（默认包括补白和边框）。
6 Dom文档处理
6.1 Dom分类
般来说,DOM操作分为3个方面，即DOM Core(核心),HTML DOM和CSS-DOM。
6.2 创建节点
var$li_1=$("<li></li>") //创建第一个<li>元素节点
var $li_1=$("<li>香蕉</li>"); //创建一个<li>元素,包括元素节点和文本节点"香蕉"就是创建的文本节点
var $li_1=$("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素,包括元素节点,文本节点和属性节点,其中title='香蕉'就是创建的属性节点
6.3 内部插入【掌握】(父子)
append(content|fn) 向每个匹配的元素内部追加内容。
•$(A).append(B) ，将B追加到A中（A中内容后面）
•<a>xxx<b/><a>
appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。
•$(A).appendTo(B) ，将A追加到B中（B中内容后面）
•<b>xxx<a/></b>
prepend(content) 向每个匹配的元素内部前置内容。
•$(A).prepend(B) ，将B追加到A中（A中内容前面）
•<a><b/>xxx<a>
prependTo(content)，把所有匹配的元素前置到另一个、指定的元素元素集合中。
•$(A).prependTo(B) ，将A追加到B中 （B中内容前面）
•<b><a/>xxx</b>
6.4 外部插入【掌握】 （兄弟）
after(content|fn)，在每个匹配的元素之后插入内容。
•$(A).after(B) 将B追加到A之后。
•<a/><b/>
before(content|fn)，在每个匹配的元素之前插入内容。
•$(A).before(B) 将B追加到A之前
•<b/><a/>
insertAfter(content)，把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
•$(A).insertAfter(B) 将A追加到B之后
insertBefore(content)，把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
•$(A).insertBefore(B) 将A追加到B之前
6.5 删除
empty()，删除匹配的元素集合中所有的子节点。（所有子元素，及标签体）
remove([expr])，从DOM中删除所有匹配的元素。
•这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
detach([expr])，从DOM中删除所有匹配的元素。
•这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑
6.6 复制
clone([Even[,deepEven]])，克隆匹配的DOM元素并且选中这些克隆的副本。
•Even:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。(true克隆事件，false只克隆对象。V1.5以上版本默认值是：false)
•deepEven:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。(所有的子元素是否已经克隆事件。)
6.7 替换
replaceWith(content|fn)，将所有匹配的元素替换成指定的HTML或DOM元素。
•$(A).replaceWith(C) 使用C替换所有A（移动到目标位置来替换，而不是复制一份来替换）
•前：<div><a><b><c>后：<div><b><a></div>
replaceAll(selector)，用匹配的元素替换掉所有 selector匹配到的元素。
•$(A).replaceAll(C) 使用A替换所有C
6.8 包裹
wrap(html|ele|fn)，把所有匹配的元素用其他元素的结构化标记包裹起来。
•$(A).wrap("<B></B>")使用B将A包裹。
•<b><a/></b>
•如果使用fn，函数内部$(this).text() 可以获得A当前所有内容
unwrap()，这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果
wrapAll(html|ele)，将所有匹配的元素用单个元素包裹起来
•函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。
wrapInner(htm|ele|fnl)，将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
扫一扫
2672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
