jquery 第二章
上次讲了jquery如何选取元素，这次说一下如何修改元素属性
添加元素
append()
在选择元素最后位置添加
prepend()
在选择元素最开始位置添加
after()
before()
原先的代码是
<div id=div1>
<div>1</div>
</div>
<div id=div2>
<div>2</div>
</div>
比如同样是添加<div>nihao</div>
$(#div1).append('<div>nihao</div>')
结果是
<div id=div1>
<div>1</div>
<div>nihao</div>
</div>
<div id=div2>
<div>2</div>
</div>
$(#div1).prepend('<div>nihao</div>')
结果是
<div id=div1>
<div>nihao</div>
<div>1</div>
</div>
<div id=div2>
<div>2</div>
</div>
$(#div1).after('<div>nihao</div>')
结果是
<div id=div1>
<div>nihao</div>
</div>
<div>1</div>
<div id=div2>
<div>2</div>
</div>
$(#div1).before('<div>nihao</div>')
结果是
<div>1</div>
<div id=div1>
<div>nihao</div>
</div>
<div id=div2>
<div>2</div>
</div>
append/prepend 是在选择元素内部嵌入
after/before 是在元素外面追加
获取修改内容和属性
1.text()
设置或返回所选元素的文本内容
2.html()
设置或返回所选元素的内容（包括 HTML 标记)
3.val()
设置或返回表单字段的值
以上3个函数说明很清楚了 设置（括号内不为空未设置）或者返回（括号内为空时返回）html跟text区别是html取到的子元素包含元素的html标签
4.attr()
方法用于获取或修改属性值，但是跟上面三个函数有所不同
取值$("#nihao").attr("href")
设值$("#nihao").attr("href","https://www.baidu.com")
5.removeAttr()
div.removeAttr('name');
删除name属性
6.prop()
prop()跟attr()很类似，两点不同
prop只能添加非自定义属性，而attr都可以
$(p).prop('nihao')是不可以的，因为你好是我们自定义的属性
prop()跟attr()返回值不同
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true
删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
注意区别remove() 删除该元素 empty()删除该元素内的子元素 但是保留该元素
CSS操作
addClass() 向被选元素添加一个或多个类
removeClass() 从被选元素删除一个或多个类
toggleClass() 对被选元素进行添加/删除类的切换操作
css() 设置或返回样式属性
顾名思义 add是添加一个css类 remove是删除一个css类 toggle呢 是开关的意思 下面做演示
toggleClass()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>
</html>
就像一个开关，点击button css类blue有效 再点击一下无效 有效->无效->有效->...
如果用addClass跟removeClass的话需要做if判断当前的判断
css()
获取$("p")的css属性
$("p")的css属性.css("background-color");
设置$("p")的css属性
$("p").css("background-color","yellow");
设置多个 CSS 属性
$("p").css({"background-color":"yellow","font-size":"200%"});
网友评论