jQuery使用笔记

最新推荐文章于 2024-07-06 22:48:04 发布

jiatongtong

最新推荐文章于 2024-07-06 22:48:04 发布

阅读量459

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/xiaojia_boke/article/details/50553756

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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;"}="">

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