zoukankan      html  css  js  c++  java
  • jQuery属性

    1、attr(name|properties|key,value|fn)

    参数name 描述:
    返回文档中所有图像的src属性值。
    $("img").attr("src");
    
    参数properties 描述:
    为所有图像设置src和alt属性。
    $("img").attr({ src: "test.jpg", alt: "Test Image" });
    
    参数key,value 描述:
    为所有图像设置src属性。
    $("img").attr("src","test.jpg");
    
    参数key,回调函数 描述:
    把src属性的值设置为title属性的值。
    $("img").attr("title", function() { return this.src });

    2、removeAttr(name) 

      注意:1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
    1.7版本在IE6下已支持删除disabled。

    将文档中图像的src属性删除
    
    HTML 代码:
    <img src="test.jpg"/>
    
    jQuery 代码:
    $("img").removeAttr("src");
    
    结果:
    [ <img /> ]

    3、prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值。

    参数name 描述:
    选中复选框为true,没选中为false
    $("input[type='checkbox']").prop("checked");
    
    参数properties 描述:
    禁用页面上的所有复选框。
    $("input[type='checkbox']").prop({
      disabled: true
    });
    
    参数key,value 描述:
    禁用和选中所有页面上的复选框。
    $("input[type='checkbox']").prop("disabled", false);
    $("input[type='checkbox']").prop("checked", true);
    
    参数key,回调函数 描述:
    通过函数来设置所有页面上的复选框被选中。
    $("input[type='checkbox']").prop("checked", function( i, val ) {
      return !val;
    });

    4、removeProp(name) 用来删除由.prop()方法设置的属性集

    设置一个段落数字属性,然后将其删除。
    
    HTML 代码:
    <p> </p>
    
    jQuery 代码:
    var $para = $("p");
    $para.prop("luggageCode", 1234);
    $para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
    $para.removeProp("luggageCode");
    $para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
    
    结果:
    The secret luggage code is: 1234. Now the secret luggage code is: undefined. 

    5、addClass(class|fn)  为每个匹配的元素添加指定的类名。

    //回调函数
    给li加上不同的class HTML 代码:
    <ul> <li>Hello</li> <li>Hello</li> <li>Hello</li> </ul> jQuery 代码: $('ul li:last').addClass(function() { return 'item-' + $(this).index(); });

    6、removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。

    回调函数描述:
    删除最后一个元素上与前面重复的class
    HTML 代码:
    <ul>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
    </ul>
    jQuery 代码:
    $(
    'li:last').removeClass(function() {
    return $(this).prev().attr('class');
    });

    7、toggleClass(class|fn[,sw]) 如果存在(不存在)就删除(添加)一个类。

    参数class 描述:
    为匹配的元素切换 'selected' 类
    $("p").toggleClass("selected");
    
    参数class,switch 描述:
    每点击三下加上一次 'highlight' 类
    HTML 代码:
    <strong>jQuery 代码:</strong>
    jQuery 代码:
      var count = 0;
      $("p").click(function(){
          $(this).toggleClass("highlight", count++ % 3 == 0);
      });
    回调函数 描述:
    根据父元素来设置class属性
    $('div.foo').toggleClass(function() {
      if ($(this).parent().is('.bar') {
        return 'happy';
      } else {
        return 'sad';
      }
    });

    8、html([val|fn]) 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

    无参数 描述:
    返回p元素的内容。
    $('p').html();
    
    参数val 描述:
    设置所有 p 元素的内容
    $("p").html("Hello <b>world</b>!");
    
    回调函数描述:
    使用函数来设置所有匹配元素的内容。
    $("p").html(function(n){
        return "这个 p 元素的 index 是:" + n;
    });

    9、text([val|fn]) 取得所有匹配元素的内容。

    返回p元素的文本内容。
    $('p').text();
    
    参数val 描述:
    设置所有 p 元素的文本内容
    $("p").text("Hello world!");
    
    回调函数 描述:
    使用函数来设置所有匹配元素的文本内容。
    $("p").text(function(n){
        return "这个 p 元素的 index 是:" + n;
        });

    10、val([val|fn|arr]) 获得匹配元素的当前值。

    无参数 描述:
    获取文本框中的值
    $("input").val();
    
    参数val 描述:
    设定文本框的值
    $("input").val("hello world!");
    
    回调函数 描述:
    设定文本框的值
    $('input:text.items').val(function() {
      return this.value + ' ' + this.className;
    });
    
    参数array 描述:
    设定一个select和一个多选的select的值
    HTML 代码:
    <select id="single">
      <option>Single</option>
      <option>Single2</option>
    </select>
    <select id="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>
      <option selected="selected">Multiple3</option>
    </select><br/>
    <input type="checkbox" value="check1"/> check1
    <input type="checkbox" value="check2"/> check2
    <input type="radio" value="radio1"/> radio1
    <input type="radio" value="radio2"/> radio2
    jQuery 代码:
    $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]);
    $("input").val(["check2", "radio1"]);
  • 相关阅读:
    mmap函数实现
    linux交换空间
    日志式文件系统
    Linux内核书籍
    进程状态
    form表单中enctype="multipart/form-data"的作用
    php导入excel表格
    什么是隐藏域
    把生成的excel文件直接提供为下载页效果
    到底什么是实例化
  • 原文地址:https://www.cnblogs.com/caojiayan/p/6231120.html
Copyright © 2011-2022 走看看