首页技术jquery data方法(jquery table)

jquery data方法(jquery table)

编程之家2026-06-22762次浏览

大家好,今天来为大家分享jquery data方法的一些知识点,和jquery table的问题解析,大家要是都明白,那么可以忽略,如果不太清楚的话可以看看本篇文章,相信很大概率可以解决您的问题,接下来我们就一起来看看吧!

jquery data方法(jquery table)

jquery data 怎么使用

jquery中data()方法向被选元素附加数据,或者从被选元素获取数据。

jquery中data()方法向被选元素附加数据,或者从被选元素获取数据。这使我们通过HTML自定义属性,操作数据,显得非常方便。通常我们也会通过给html自定义属性这样的做法,来存储和操作数据。在jquery中也给我们

提供了data(name,value)这样的方法,来非常方便的实现。有了data()这个方法,你就可以很方便的在一个html标签中添加data-*这样的自定义属性。接下来,就data()方法简单的做下了解。

以下是摘自w3school中对data用法的说明:

data方法从元素中读取数据的语法:

$(selector).data(name) name:可选。规定要取回的数据的名称。

jquery data方法(jquery table)

如果没有规定名称,则该方法将以对象的形式从元素中返回所有存储的数据。

data方法从元素中存储数据的语法:

$(selector).data(name,value)

name:必需。规定要设置的数据的名称。

value:必需。规定要设置的数据的值。

当然,我们在这里,也可以把一个包含键/值对的对象,向被选元素添加数据。语法如下:

jquery data方法(jquery table)

$(selector).data(object)

object:必需。规定包含名称/值对的对象。

Html代码如下:

data方法之读取数据:

<div id="divName" data-name="lichaoqiang">单个数据:data-name="lichaoqiang"</div>

<div id="divJson" data-user='{"user_id":20141111,"user_name":"lichaoqiang"}'>存储json数据:{"user_id":20141111,"user_name":"lichaoqiang"}</div>

<script type="text/javascript">

console.log($("#divName").data("name"));//通过name输出单个数据

console.log($("#divJson").data("user").user_name);//通过name输出json数据

</script>

注意:在元素data-*属性中设置json数据时,需要注意单双引号,否则可能出现undefined的,获取不到数据。正确的做法是用双引号。

data方法之存储数据:

<div id="container">这是一个div标签</div>

<script type="text/javascript">

$("#container").data("name","lichaoqiang");//存储数据

console.log($("#container").data("name"));//通过name读取数据

</script>

jquery调用后台方法

1.新建demo.aspx页面。

2.首先在该页面的后台文件demos.aspx.cs中添加引用。

using System.Web.Services;

3.无参数的方法调用.

大家注意了,这个版本不能低于.net framework 2.0。2.0已下不支持的。

后台代码:[WebMethod]

public static string SayHello()

{

return"Hello Ajax!";

} JS代码:

$(function(){

$("#btnOK").click(function(){

$.ajax({

//要用post方式

type:"Post",

//方法所在页面和方法名

url:"Demo.aspx/SayHello",

contentType:"application/json; charset=utf-8",

dataType:"json",

success: function(data){

//返回的数据用data.d获取内容

alert(data.d);

},

error: function(err){

alert(err);

}

});

//禁用按钮的提交

return false;

});

});

页面代码:

<form id="form1" runat="server">

<div>

<asp:Button ID="btnOK" runat="server" Text="验证用户"/>

</div>

</form>

3.有参数方法调用

后台代码:[WebMethod]

public static string GetStr(string str, string str2)

{

return str+ str2;

} JS代码:

$(function(){

$("#btnOK").click(function(){

$.ajax({

type:"Post",

url:"demo.aspx/GetStr",

//方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字

data:"{'str':'我是','str2':'XXX'}",

contentType:"application/json; charset=utf-8",

dataType:"json",

success: function(data){

//返回的数据用data.d获取内容

alert(data.d);

},

error: function(err){

alert(err);

}

});

//禁用按钮的提交

return false;

});

});

jquery中有哪些基础事件方法

jquery基础事件,包括绑定事件、简写事件、复合事件;

一.绑定事件

jQuery通过.bind()方法来为元素绑定这些事件。

形式:

bind(type, [data], fn)

参数:

type表示一个或多个类型的事件名字符串;

[data]是可选的,作为 event.data属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;

fn表示绑定到指定元素的处理函数。

二、简写事件

为了使开发者更加方便的绑定事件,jQuery封装了常用的事件以便节约更多的代码。称之为简写事件。简写事件,绑定方法如下图,

三、复合事件

jQuery提供了许多最常用的事件效果,组合一些功能实现了一些复合事件,比如切换功能、智能加载等。

扩展资料

1、绑定事件fn函数

1)使用点击事件

$('input').bind('click', function(){//点击按钮后执行匿名函数

alert('点击!');

});

2)普通处理函数

$('input').bind('click', fn);//执行普通函数式无须圆括号

function fn(){

alert('点击!');

}

2、简写事件函数

1).mouseover()和.mouseout()表示鼠标移入和移出的时候触发。而.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。

2).keydown()、.keyup()返回的是键码,而.keypress()返回的是字符编码。

3).focus()和.blur()分别表示光标激活和丢失,事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失,但事件触发时机可以是子元素。

3、复合事件示例,背景移入移出切换效果

$('div').hover(function(){

$(this).css('background','black');//mouseenter效果

}, function(){

$(this).css('background','red');//mouseleave效果,可省略

});

参考资料

jQuery官方网站-事件

关于jquery data方法,jquery table的介绍到此结束,希望对大家有所帮助。

解释器模式?极简解释器js数组排序方法sort,js array sort