JavaScript獲取json中key所對應的value值的簡單方法

不多說直接上代碼

getJson('age');

function getJson(key){

var jsonObj={"name":"傅紅雪","age":"24","profession":"刺客"};

//1、使用eval方法

var eValue=eval('jsonObj.'+key);

alert(eValue);

//2、遍歷Json串獲取其屬性

for(var item in jsonObj){

if(item==key){ //item 表示Json串中的屬性，如'name'

var jValue=jsonObj[item];//key所對應的value

alert(jValue);

}

//3、直接獲取

alert(jsonObj[''+key+'']);

}

</script>

以上就是我的分享，覺得有收獲的朋友們可以點個關注轉發收藏一下哦，感謝各位大佬們的支持！

記的屬性

each()遍歷元素：each(callback)方法主要用于對選擇器進行遍歷，它接受一個函數為參數，該函數接受一個參數，指代元素的序號。

對于標記的屬性而言，可以利用each()方法配合this關鍵字來獲取或者設置選擇器中每個元素相對應的屬性值；

jQuery代碼:

$(function(){
    $("img").each(function(index){
        this.title = "這是第" + index + "幅圖，id是：" + this.id; //此時this指DOM對象
    });
});

HTML代碼:

<img src="01.jpg" id="Tsinghua01">
<img src="02.jpg" id="Tsinghua02">
<img src="03.jpg" id="Tsinghua03">
<img src="04.jpg" id="Tsinghua04">
<img src="05.jpg" id="Tsinghua05">

理解:首先利用$("image")獲取頁面中所有圖片的集合,然后通過each()方法遍歷所有圖片,通過this關鍵字對圖片進行訪問,獲取圖片的id,

并設置圖片的title屬性。其中each()方法的函數參數index為元素所處的序號(從0開始計數)。

jQuery代碼:

$(function(){
    $("img").each(function(index, item){
        item.title = "這是第" + index + "幅圖，id是：" + this.id; //此時item指當前的DOM對象
    });
});

HTML代碼:

<img src="01.jpg" id="Tsinghua01">
<img src="02.jpg" id="Tsinghua02">
<img src="03.jpg" id="Tsinghua03">
<img src="04.jpg" id="Tsinghua04">
<img src="05.jpg" id="Tsinghua05">

//使用jQuery中插件機制

$.fn.extend({
    quanxuan:function(){
        //專用于實現全選
        this.attr("checked",true);
    },
    quxiao:function(){
        //取消功能
        this.attr("checked",false);
    },
    fanxuan:function(){
        //反選
        var leng = this.length;
        this.each(function(index,domElement){ //this指jQuery對象
        domElement.checked = !domElement.checked; //domElement= this this指DOM對象
    })
    }
});

獲取屬性的值

attr(name)

$(function(){
    //var sTitle = $("em").attr("title"); //獲取第一個<em>元素的title屬性值
    var sTitle = $("em:eq(1)").attr("title"); //獲取第二個<em>元素的title屬性值
    $("span").text(sTitle);
});

注意: 因為沒有遍歷,$("em").attr("title") 實際上獲取的是第一個<em>元素的title屬性值

$("em").attr("title") 等同于$("em:eq(1)").attr("title")

$("em").get(0).title 也是獲取第一個<em>元素的title屬性值, 而$("em").get(0)已經轉換成DOM對象, 因此就不能使用jquery對象的attr方法

設置屬性值

attr(name,value)

$("a[href^=http://]").attr("target","_blank")

jQuery代碼：

function DisableBack(){
    $("button:gt(0)").attr("disabled","disabled");
}

HTML代碼:

<button onclick="DisableBack()">第一個Button</button> 
<button>第二個Button</button> 
<button>第三個Button</button>

通過位置選擇器:gt(0),當單擊第1個按鈕時后面的兩個按鈕將同時禁用;

attr()方法還接受函數作為參數attr(name,fn),它的第2個參數為一個函數,該函數接受一個參數,為元素的序號,返回值為字符串;

jQuery代碼

$(function(){
    $("div").attr("id", function(index){
        //將id設置為序號相關的參數
        return "div-id" + index;
    }).each(function(){
        //找到每一項的span標記
        $(this).find("span").html("(id='" + this.id + "')");
    });
});

HTML代碼:

<div>第0項 <span></span></div>
<div>第1項 <span></span></div>
<div>第2項 <span></span></div>

用attr()方法接受屬性列表

$(function(){
    $("img").attr({
        src: "06.jpg",
        title: "紫荊公寓",
        width:300, //參考HTML語法, 無需加單位, 也可以寫成 widht:"300px" 加單位必須加引號
        alt: "紫荊公寓"
    });
});

刪除屬性

$("button").removeAttr("disabled");

removeAttr(name)刪除屬性相當于HTML的標記中不設置該屬性, 并不是取消了該標記的這個特點。

小結：

$().attr(屬性名稱); //獲得屬性信息值

$().attr(屬性名稱,值); //設置屬性的信息

$().removeAttr(屬性名稱); //刪除屬性

$().attr(json對象); //同時為多個屬性設置信息值, json對象的鍵值對就是名稱和值

$().attr(屬性名稱,fn); //通過fn函數執行的return返回值對屬性進行賦值

獲取屬性的第二種方式:

$("input[type='checkbox']").prop("checked");

設置元素的樣式

添加、刪除CSS類別

用addClass()方法添加CSS類別

$(function(){
    //同時添加多個CSS類別
    $("div").addClass("myClass1 myClass2"); //增加多個CSS類別,用空格隔開
});

用removeClass()方法刪除CSS類別

希望某些元素的樣式風格在某個類別之間切換,時而addClass()類別,時而removeClass()類別;

用toggleClass()方法在類別間動態切換 toggle 切換

$(function(){
    $("p").click(function(){
        //點擊的時候不斷切換
        $(this).toggleClass("highlight");
    });
});

實例:jQuery制作交替變幻的表格

<html>
<head>
<title>交替變幻的表格</title>
<style>
<!--
.datalist{
border:1px solid #007108; /* 表格邊框 */
font-family:Arial;
border-collapse:collapse; /* 邊框重疊 */
background-color:#d9ffdc; /* 表格背景色 */
font-size:14px;
}
.datalist th{
border:1px solid #007108; /* 行名稱邊框 */
background-color:#00a40c; /* 行名稱背景色 */
color:#FFFFFF; /* 行名稱顏色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #007108; /* 單元格邊框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
background-color:#a5e5aa; /* 隔行變色 */
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
$("table").mouseover(function(){
$("tr:gt(0)").toggleClass("altrow");
});
$("table").mouseout(function(){
$("tr:gt(0)").toggleClass("altrow");
});
});
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
</table>
</body>
</html>

直接獲取、設置樣式

jQuery提供css()方法來直接獲取、設置元素的樣式風格。使用方法與attr()幾乎一模一樣。

通過css(name)來獲取某種樣式風格的值；$("p").css("color");

通過css(properties)列表來同時設置元素的多種樣式；$("p").css({ color: "#ff0011", background: "blue" });

通過css(name,value)來設置元素的某種樣式；$("p").css("color","red");

通過css(name,function(index, value))設置一個樣式屬性的值

css()樣式操作特點：

此函數返回要設置的屬性值。接受兩個參數，index為元素在對象集合中的索引位置, value是原先的屬性值。

1 樣式獲取，jquery可以獲取行內、內部、外部的樣式。dom方式只能獲得行內樣式

2 復合屬性樣式需要拆分為"具體樣式"才可以操作

例如： background 需要拆分為 background-color background-image 等進行操作

border： border-left-style border-left-width border-left-color 等

margin： margin-left margin-top 等

也可以將樣式屬性寫成駝峰式: backgroundColor, 可以不加引號。

在json對象中, 帶橫線的css屬性(如font-size)必須加引號;

如：

$('div').css({"font-size":"40px","font-weight":"bold",color:"red"});

標準格式：

$('div').css({"font-size":"40px","font-weight":"bold","color":"red"});

css還支持獲取屬性值的方法, 保持原來的屬性值(width()和css()兩種方法)

oInput.val(tdText).css({'width':oTd.width(), 'font-size':'14px','font-weight':'bold', 'border':0,
'background-color':oTd.css('background-color')});

與下面的語句等同：

oInput.val(tdText).css('width',tdObj.width()).css('font-size','14px').css('font-weight','bold').
css('border-width',0).css('background-color',oTd.css('background-color'));

$("div").click(function() {
    $(this).css({
        width: function(index, value) {
            return parseFloat(value) * 1.2;
        },
        height: function(index, value) {
            return parseFloat(value) * 1.2;
        }
    });
});

以下代碼為<p>標記添加了mouseover和mouseout事件，當這兩個事件觸發時通過css(name,value)來修改標記的顏色。

$(function(){
    $("p").mouseover(function(){
        $(this).css("color","red");
    });
    $("p").mouseout(function(){
        $(this).css("color","black");
    });
});

另外還可以通過hasClass(name)方法來判斷某個元素是否設置了某個CSS類別，如何設置了則返回true，否則為false。

$("li:last").hasClass("myClass")

等同于$("li:last").is(".myClass")

在jQuery中其實hasClass方法內部調用的就是is()方法,只不過代碼可讀性更高一些;

小結：

class屬性值操作

$().attr('class',值);

$().attr('class');

$().removeAttr('class屬性'); //刪除class的屬性

class具體快捷操作方法：

$().addClass(class屬性值); //給class屬性追加信息值

$().removeClass(class屬性值); //刪除class屬性中的某個信息值

$().toggleClass(class屬性值); //開關效果，有就刪除，沒有就添加

css樣式操作

$().css(name,value); //設置

$().css(name); //獲取

$().css(json對象); //同時修改多個css樣式

CSS樣式操作-寬高

width() 取得第一個匹配元素當前計算的寬度值(px)。

width(val) 為每個匹配的元素設置CSS寬度(width)屬性的值; 如果沒有明確指定單位(如：em或%), 默認使用px

height(100) height("100px") 后面含有單位的必須加引號

HP獲取數據庫中數據生成json, 中文亂碼問題的解決方案

1.在代碼前段寫上

header("Content-Type: text/html;charset=utf8");

2.在connection建立以后寫上

mysqli_query($connection, "SET NAMES utf8");

————至此就可以在PHP頁面中顯示中文了————-

最后, 如果需要用到json_encode, 那么需要注意最后一點

$json_string = json_encode($result_row, JSON_UNESCAPED_UNICODE); //php5.4以上

即在普通的json_encode中多加入一個參數, 至此就全部完成啦~

讓json更懂中文(JSON_UNESCAPED_UNICODE)

<?php
echo json_encode("中文", JSON_UNESCAPED_UNICODE); //需要5.4以上版本才能支持 unescaped_unicode: unicode轉義
$data = array(
0=>array('status'=>'1', 'method'=>'登陸', 'message'=>'成功',"url"=>"http://q.qlogo.cn/qqapp/1105737075/788B369AB26335DDDFB5E45199B95FDD/40"),
1=>array('status'=>'2', 'method'=>'注銷', 'message'=>'成功',"url"=>"http://q.qlogo.cn/qqapp/1105737075/788B369AB26335DDDFB5E45199B95FDD/41"),
);
echo json_encode($data, JSON_UNESCAPED_UNICODE);

輸出結果:

[{"status":"1","method":"登陸","message":"成功","url":"http:\/\/q.qlogo.cn\/qqapp\/1105737075\/788B369AB26335DDDFB5E45199B95FDD\/40"},{"status":"2","method":"注銷","message":"成功","url":"http:\/\/q.qlogo.cn\/qqapp\/1105737075\/788B369AB26335DDDFB5E45199B95FDD\/41"}]

注意：這個參數只解決中文轉碼問題, url地址自動加上轉義字符, 并未解決。

PHP5.4以上才支持JSON_UNESCAPED_UNICODE這個參數, 此參數是讓中文字符在json_encode的時候不用轉義, 減少數據傳輸量。但在PHP5.3中, 就得自己寫個函數來實現, 以下就是解決方法：

/**
* 對變量進行 JSON 編碼
* @param mixed value 待編碼的 value ，除了resource 類型之外，可以為任何數據類型，該函數只能接受 UTF-8 編碼的數據
* @return string 返回 value 值的 JSON 形式
*/
function json_encode_ex($value)
{
if (version_compare(PHP_VERSION,'5.4.0','<')){
$str = json_encode($value);
$str = preg_replace_callback("#\\\u([0-9a-f]{4})#i",
function($matchs){
return iconv('UCS-2BE', 'UTF-8', pack('H4', $matchs[1]));
},
$str
);
return $str;
}else{
return json_encode($value, JSON_UNESCAPED_UNICODE);
}
}
//使用方法
$data = array(
0=>array('status'=>'1', 'method'=>'登陸', 'message'=>'成功',"url"=>"http://q.qlogo.cn/qqapp/1105737075/788B369AB26335DDDFB5E45199B95FDD/40"),
1=>array('status'=>'2', 'method'=>'注銷', 'message'=>'成功',"url"=>"http://q.qlogo.cn/qqapp/1105737075/788B369AB26335DDDFB5E45199B95FDD/41"),
);
echo json_encode_ex($data); //這個函數只解決中文轉碼問題, url地址自動加上轉義字符, 并未解決
?>

輸出結果：

在線咨詢

上一篇：史上最全的HTML、CSS知識點總結，淺顯易懂適合入門新手
下一篇：Nginx+keepalived 實現高可用，防盜鏈及動靜分離配置詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript獲取json中key所對應的value值的簡單方法

您的項目需求