jQuery使用笔记

1、如何jQuery对象中返回dom元素对象：

.get([index])方法：

index

类型: Number

从0开始计数，用来确定获取哪个元素。

2、 jQuery中html方法，对于某些元素的html，使用html返回内容和 原始html内容不一致，示例如下

原始html内容：

<tr data-item={"Iden":0,"GF_ID":408847,"Bill_NO":0,"Original_GF_ID":0,"FCR_NO":null,"PPO_NO":null,"Warp_Weft":"W","Yarn_Type":"CF",

"Yarn_Count":"70","Color_Code":"NY89150","Remark":null,"Operate_Time":"\/Date(-62135596800000)\/","Operator":null,

"Print_date":"\/Date(-62135596800000)\/","Standard_Reason":"","Color_Comment":"","historybatchno":"T4700753 纬纱标准","cadbatchno":"TA800713;"}>
<td class="cellBorder"  data-field="Warp_Weft">W</td>
<td class="cellBorder"  data-field="Yarn_Type">CF</td>
<td class="cellBorder"  data-field="Color_Code">70NY89150</td>
<td class="cellBorder"  data-field="Remark"><input type="text" value="" name="standard" /></td>
<td class="cellBorder"  data-field="Standard_Reason"><input type="text" value="" name="qa_reason" /></td>
<td class="cellBorder"  data-field="historybatchno"><a id="reppo_finish_j_history_standard" href='javascript:void(0)' class='custom_kendo_ui_grid_cell_style'>T4700753 纬纱标准</a></td>
<td class="cellBorder"  data-field="cadbatchno"><a id="reppo_finish_j_cur_batch_no" href='javascript:void(0)' class='custom_kendo_ui_grid_cell_style'>TA800713;</a></td>

</tr>

 使用 html方法执行的内容：

<tr data-item="{"Iden":0,"GF_ID":408847,"Bill_NO":0,"Original_GF_ID":0,"FCR_NO":null,"PPO_NO":null,

"Warp_Weft":"W","Yarn_Type":"CF","Yarn_Count":"70",

"Color_Code":"NY89150","Remark":null,"Operate_Time":"\/Date(-62135596800000)\/",

"Operator":null,"Print_date":"\/Date(-62135596800000)\/","Standard_Reason":"",

"Color_Comment":"","historybatchno":"T4700753" 纬纱标准","cadbatchno":"ta800713;"}="">

<td class="cellBorder" data-field="Warp_Weft">W</td>
<td class="cellBorder" data-field="Yarn_Type">CF</td>
<td class="cellBorder" data-field="Color_Code">70NY89150</td>
<td class="cellBorder" data-field="Remark"><input type="text" value="" name="standard"></td>
<td class="cellBorder" data-field="Standard_Reason"><input type="text" value="" name="qa_reason"></td>
<td class="cellBorder" data-field="historybatchno"><a id="reppo_finish_j_history_standard" href="javascript:void(0)" class="custom_kendo_ui_grid_cell_style">T4700753 纬纱标准</a></td>
<td class="cellBorder" data-field="cadbatchno"><a id="reppo_finish_j_cur_batch_no" href="javascript:void(0)" class="custom_kendo_ui_grid_cell_style">TA800713;</a></td>
</tr>

"T4700753 纬纱标准" 怎么会变成 "T4700753" 纬纱标准"

正常应该变成"T4700753 纬纱标准"才对嘛。。。。。。。。

这里的文本唯一的特别就是含有空格，难道html中无法处理这种情况吗？

但是我测试过如果在 html标记中写带有空格的内容，html出来的内容是ok的，为什么data后面实体里面的空格就处理不了呢？

Is
it bad to add JSON on HTML data attribute?

Since HTML 

data

 attribute
allows adding any custom data, I wonder if it is a good idea to include a set of 

JSON

 list
as a 

data

 attribute?
Then, the corresponding 

JSON

 can
be easily accessed by 

JavaScript

 events
with 

getAttribute("data-x")

.

In fact, my question is that: Is it standard, efficient, and reasonable to add a large set of data to a 

HTML

 attribute?

For example

<div data-x="A LARGE SET OF JSON DATA" id="x">

Or large set of JSON data must be stored within 

<script>

 tag,
and a 

HTML

 attribute
is not a right place for large set of data, even for 

data

 attribute.

======

Instead of storing everything in the data attribute you could use an identifier to access the data.

So for example you could do this :

var myBigJsonObj = {
data1 : { //lots of data},
data2 : { //lots of data}

};

and then you had some html like so :

<div data-dataId="data1" id="x">

You can use jquery to get the data now like so :

var dataId = $('#x').attr('data-dataId');

var myData = myBigJsonObj[dataId];

This is the best approach imho.

3、关于label元素使用jQuery取值问题：

当使用 val()方法时，无法取到label元素包含的内容，而使用text()方法则可以，如：

<label id="someLbl">dddddd</label>

("#someLbl").val()返回为空串，而("#someLbl").text()则可以返回"dddddd".

另：

在应用<textarea>元素时，使用val()和text()均可以取到值。

4、使用jquery 操作select元素

（1）清空select下面option子元素

$("#select_id").empty();

（2）向select下添加一个option子元素

$("#select_id").append("<option value=''></option>")

（3）选中select下面第一个option子元素

$("select_id").children("[index=0]").attr("selected",true);