Jquery中的data()方法、att()、prop()方法的区分

  Jquery中向我们提供了三种方法

    data()

    att()

    prop()

    来设置和获取对象的属性。但是设计这三种方法并不会重复无用的设计,那么他们三个的区分在哪里呢。

  demo:

    

  <div >我是一个DIV</div>

  

  attr()方法:是JS中getAttribute()和setAttribute()方法的集成体

    用法最为常规。

    $(‘div‘).attr({age:30,address:"tianjin"});

    var age = $(‘div‘).attr("age");

    $(‘div‘).removeAttr("age address");  如果要删除多个属性,中间用空格隔开。

    通过attr()方法获得的属性,在HTML页面检查元素中都可以看到该属性。

  prop()方法:比较安全和隐秘的方法

    设置属性和获得属性与attr()方法一致的用法。

    不同:

    part1:通过prop()方法获得属性,在HTML页面检查元素中看不到该属性。该属性存在了内存当中。

    part2:prop()在对radio,select,checkbox进行选中属性操作的时候,值为true/false

        e.g.

          $(‘radio‘).prop(‘checked‘,true);

          $(‘radio‘).attr(‘checked‘,"checked");

  data()方法:更为安全、隐秘的方法

    在HTML界面,检查元素中,可以观察并且修改标签的属性值。

    通过attr()方法设置的属性,可以修改HTML界面的标签属性值。但是在涉及到金融等要与数据库进行交互的地方,我们不能允许用户修改它的值。因此衍生出了data()方法。

    方式:

     

    <div data-name = "li">我是一个DIV</div>    通过在标签中设置  data-(...)  的方式来设置 data 属性。    注意: data- 后面的内容  只能为全大写或者全小写。推荐全小写。

    $(‘radio‘).data(“name”);  来访问标签的data-name 属性。

    

  

时间: 2024-10-02 04:41:31

Jquery中的data()方法、att()、prop()方法的区分的相关文章

Jquery中each的三种遍历方法

Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(data) { $.each(data, function(n,value) { });}); 1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function (index,dom

HTML5中的data-*属性和jQuery中的.data()方法使用

HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据,我们自定义的属性名字也千奇百怪,五花八门.我们可以通过原生的getAttribute()或jQuery中的.attr()来获取我们自定义的属性.但是前端技术在向着规范化前进.HTML5标准规定,自定义的属性都已data-*开头,这样就区分开了固有属性和自定义属性.HTML代码如下: <div id="testDiv" data-cname="张三" data-e

jQuery中的Ajax几种请求方法

在网上查的几种Ajax的请求的方法: jQuery 确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯.废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到 jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程HTML 文件代码并插入 DOM 

jQuery 中让我误解的那些方法

至今我都不能说把 jQuery 中的方法在实践中都用了一遍, 一部分是用不到,一部分则是我未能体会它的魅力, 所以今天就来收录一下,那些从我们之间溜走的美丽. $.fn.add() 一开始对它的理解就是 $("p").add("span") 等同于 $("p, span") 而已, 而其实不然,$.fn.add() 更多的用在链式结构上,看两个例子就懂了. // 不但克隆 p,还在加上一个 span $("p").clone(

jQuery中绑定事件的几种方法

以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其

jquery中隐藏div的几种方法

//jQuery中的显示.隐藏方法 $("#id").show()://表示display:block,    $("#id").hide()://表示display:none;    $("#id").toggle();//切换元素的可见状态.如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. //添加样式的方法    $("#id").css('display','none');    $("#id

jQuery中noConflict()机制的冲突解决方法

许多的JS框架类库都选择使用$符号作为函数或变量名,而且在实际的项目开发中,使用模板语言的话有可能"$"符号即为该模板语言的关键字.例如Veclocity模板语言,$是关键字.与jQuery一起使用可能会存在冲突(页面中直接写jq代码,引入的js文件不存在该问题). jQuery是使用$符号作为函数或变量名最为典型的一个.在jQuery中,$符号只是window.jQuery对象的一个引用,因此即使$被删除,jQuery依然能保证整个类库的完整性. jQuery的设计充分考虑了多框架之

jQuery中动态创建、添加元素的方法总结

<input type="button" value="创建元素" id="btn"> <div id="box"></div> <p id="main">这是文中一段话</p> //点击按钮,动态创建元素 //方法一:$()创建元素,后用append()方法添加.append() 还可以把其他地方元素添加进这个对象中. $('#btn').cli

jquery里的attr()方法和prop()方法的区别

在jq的高版本里出现了prop()方法,那么attr()和prop()的区别在哪呢?这两者分别在什么情况用呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. eg:<a href="http://www.baidu.com" target="_blank">哈哈</a> 像href.target这样的属性是html元素本身就带有的固有属性,在处理时