<!--
作者：[email protected]
时间：2017-08-12
描述：jQuery中的DOM操作方法2
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery中的DOM操作</title>
<style type="text/css">
.anthor{
font-style: italic;
}
</style>
</head>
<body>
<p title="选择你喜欢的水果">选择你喜欢的水果</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
</body>
<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
* 属性操作
* attr()方法来获取和设置属性
* removeAttr()方法来删除属性
*/
//获取属性
//var txt = $('p').attr('title');
//设置单个属性值
//$('p').attr('title','my title');
//设置多个属性值
//$('p').attr({"title":"my title","name":"test"})//将名/值形式的对象设置为匹配元素的属性
//类似方法还有html() text() height() width() val() css()等方法
//删除属性
//$('p').removeAttr("title");
/*
* 追加样式 addClass()方法
* 移除样式 removeClass()方法
*/
$("p").addClass("anthor");
$("p").removeClass('anthor');
/*切换样式*/
//toggle()控制行为上的重复切换
/*
$("p").toggle(function(){
//代码3
},function(){
//代码4
})
*/
//上述代码会重复切换代码3和代码4
//toggleClass()控制样式上的重复切换
//$("p").toggleClass("anthor");//重复切换类名“anthor”
/*判断是否含有某个样式*/
//hasClass(); 如果有返回true，否则返回false
/*
* 其他方法
* 1、html()方法：读取或设置某个元素的HTML内容
* 2、text()方法：读取或设置某个元素中的文本内容
* 3、val()方法：用来设置和获取元素的值
* 4、focus()方法：相当于JavaScript中的onfocus()方法，作用是处理获得焦点的事件
* 5、blur()方法：相当于JavaScript中的onblur()方法，作用是处理失去焦点的事件
* defaultValue属性：包含该表单元素的初始值
*/
/*
* 遍历节点
* 1、children()方法：取得匹配元素的子元素的集合
* 2、next()方法：取得匹配元素后面紧邻的同辈元素的集合
* 3、prev()方法：取得匹配元素前面紧邻的同辈元素的集合
* 4、siblings():取得匹配元素前后所有同辈元素的集合
* 5、closest():方法用于取得最近的匹配元素：从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
* 6、parent()方法：获得集合中每个匹配元素的父级元素
* 7、parents()方法:获得集合中每个匹配元素的祖先元素
*/
/*
* CSS-DOM操作
* 1、css()方法获取和设置元素的属性值
* 2、height()方法：获取和设置元素在页面中的实际高度
* 3、width()方法：获取和设置元素在页面中的实际宽度
* 4、offset()方法：获取元素在当前视窗的相对偏移，返回的对象包含top和left属性
* 5、position()方法：获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回的对象包含top和left属性
* 6、scrollTop()方法和scrollLeft()方法分别获取元素的滚动条距顶端和距左侧的距离
*/
/*var offset = $("p").offset();
var left = offset.left;
var top = offset.top;*/
</script>
</html>
![用jQuery实现一个简易的聊天框[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)