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%"});
来源: http://www.jianshu.com/p/473a230dd2bf