jquery修改元素属性

2018-04-28 本文已影响0人 nihaozhuangyan

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%"});