jquer 基础篇 dom操作
DOM操作：
1.新增元素：
创建元素：$("HTML")返回的创建成功的新元素
新增子元素：
元素.append(obj)
在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个子元素
例
$("input").click(function () {
var en = $("<p>我是第二个p标签</p>");
$("div").append(en);
})
2.元素
元素.prepend(obj) 在最前面为匹配新增子元素
3.新增父元素
元素.wrap(obj):为匹配元素添加父元素进行包裹 //在当前标签包裹一个父元素
4.新增兄弟元素：
元素.after(obj) 在匹配元素的后面添加兄弟元素
元素.before(obj)在匹配元素的前面添加兄弟元素
5.删除元素
元素.remove() 删除指定的匹配元素
元素.empty() 清空指定的匹配元素的内容 标签本身还在dom树上
6.修改元素
修改元素的html或文本 html()--->innerhtml text()---->innerTEXT
修改元素的属性：
元素.attr("属性名字") 读取匹配的元素的属性值
元素.attr("属性名","属性值")设置匹配元素的属性值
可以操作元素任何直接属性 //可以设置style css样式的边框 之后通过元素.attr("属性名","属性值")甚至来改变css样式可以操作html中没有定义的属性
.css()设置的内部样式
.addclass()设置内联样式---> classname="样式名"
removeclass
//外部样式：<link> 内部样式<head> 内联样式 在html内部
hasclass("classname") 判断匹配元素是否存在指定的类样式
toggleclass("classname") 切换样式
width() 获取匹配元素的高度 height（)获取匹配元素的高度
jquer中的常用事件“
和js一样也是用事件驱动执行机制
规律：
1.jQuery中的事件名事件js的事件名取出前缀“on”
2.jquer中事件被封装成方法
a.click(fuuction)（）{
//事件处理过程
}
b.dbclick(fuction(){ //双击事件
//处理过程
})
c.mouseover() 鼠标悬停
d.mouseout() 鼠标离开
事件冒泡：子元素冒泡到父元素标签的上面去了
阻止默认行为：return false;
keyuo(function(){})当按键时弹起时触发
例：
<img src="1138fbdeb48f8c5412bcb86a3a292df5e1fe7ff5.jpg" />
</div>
<input type="button" value="测试" />
<script type="text/javascript">
$("input").click(function () {
$("img").attr("src", "c7580255b319ebc4581f0bdc8226cffc1f1716fd.jpg");
})
</script>
</body>
</html>
例2：
#h {
height:900px;
width:670px;
border:1px solid;
}
$("img").attr("id","h");
例3：
$("img").toggle("hh");
例4：下拉菜单
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<style type="text/css">
* {
margin:0px;padding:0px;
}
body {
margin:40px;
}
div {
width:100px;
height:30px;
margin-bottom:3px;
background-color:red;
border:1px solid;
text-align:center;
cursor:pointer;
line-height:30px;
}
ul {
width:100px;
border:1px solid;
}
ul li {
list-style:none;
margin-bottom:5px;
text-align:center;
}
</style>
<div id="bd">选择城市</div>
<ul style="display:none">
<li>广东</li>
<li>深圳</li>
<li>上海</li>
<li>四川</li>
</ul>
<script src="Scripts/jquery-2.2.1.js"></script>
<script type="text/javascript">
$("#bd").click(function () {
$("ul").slideDown(500);
$("ul li").mouseover(function () {
$(this).css("background", "blue").siblings().css("background", "red");
return false;
})
$(document).click(function () {
$("ul").slideUp(500);
})
})
</script>
</body>
</html>
例5 文本域提交还能写多少字
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<script src="Scripts/jquery-2.2.1.js"></script>
<textarea cols="55" rows="23"></textarea>
<span>你还能输入<strong style="font-size:34px;color:red;">140</strong>字</span>
<script type="text/javascript">
$("textarea").keyup(function () {
var a = $(this).val().length
if (a < 140) {
$("strong").text(140 - a);
} else {
$("strong").text(0);
}
})
</script>
</body>
</html>
