Jquery - 属性操作

来源：互联网发布：部落冲突地震法术数据编辑：程序博客网时间：2024/06/06 03:32

问题导读：

1. 基本属性操作

2.属性操作小练习

解决方案：

基本属性操作

选择属性
设置属性
移除属性

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><table id="books"><tr><th>书名</th><th>作者</th></tr><tr id="fir"><td>天龙八部</td><td>金庸</td></tr><tr class="sed" ><td>小李飞刀</td><td>古龙</td></tr><tr><td>四大名捕</td><td>温瑞安</td></tr><tr><td>白发魔女传</td><td>梁羽生</td></tr></table><script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script><script type="text/javascript">$(function() {$("tbody tr").each(function(n) {// attr 只加入一个参数 获取属性值console.log($(this).attr("id"));// attr 设置属性$(this).attr("title",$(this).children("td:eq(1)").html());//  attr 使用 json 格式数据设置多属性$(this).attr({"id":n,"class":$(this).children("td:eq(0)").html(),"title":$(this).children("td:eq(1)").html()});// removeAttr 移除属性$("tr#2").removeAttr("title");})});        </script></body></html>

data 在标签中存储数据

<script type="text/javascript">$(function() {// data 将值存储在标签中，这个值不会显示给用户$("tbody tr.sed").data("prop","古龙全集");console.log($("tbody tr:eq(2)").data("prop"));});        </script>

小练习

创建对象数组，每个对象对应table的每一行，ttr的每一列对应这个对象的一个属性

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><table><thead><tr><th title="book_name">书名</th><th title="book_authoer">作者</th></tr></thead><tbody><tr><td>天龙八部</td><td>金庸</td></tr><tr><td>小李飞刀</td><td>古龙</td></tr><tr><td>四大名捕</td><td>温瑞安</td></tr><tr><td>白发魔女传</td><td>梁羽生</td></tr></tbody></table><script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script><script type="text/javascript">$(function() {var book_inf = initHeader();var books = getBooks(book_inf);// 将每一个book的每一个属性打印出来$(books).each(function(n) {var book = "";for(var i = 0; i < book_inf.length; i++) {book += this[book_inf[i]] + " "}console.log(book);})// 得到一个book 的数组function getBooks(book_inf) {var books = new Array();$("tbody tr").each(function(i) {var book = new Object();$(this).find("td").each(function(j) {book[book_inf[j]] = $(this).html();});books.push(book);});return books;}// 用map 遍历 th的包装集 返回含有每一个title的数组function initHeader() {var book_inf = $("thead th").map(function(n) {return $(this).attr("title");}).get();return book_inf;}});        </script></body></html>

0 0

Jquery - 属性操作

基本属性操作

选择属性设置属性移除属性

data 在标签中存储数据

小练习

选择属性
设置属性
移除属性