zoukankan      html  css  js  c++  java
  • 使用jQuery操作元素的属性与样式

    DOM如果要设置元素的CSS样式类,要使用的是className而不是class:比如img1.className="className";

    操作DOM属性:

    在jQuery中没有包装操作"DOM属性"的函数,因为使用javascript获取和设置DOM属性都很简单,

    在jQuery中提供了each()函数用于遍历jQuery包装集,其中的this指针是一个DOM对象,所以我们

    可以应用这一点配合原生javascript来操作元素的Dom属性,$("img").each(function(index){});

    操作元素属性:

    我们可以使用javascript中的getAttribute和setAttribute来操作元素的属性,

    jQuery中提供了attr()包装集和数,能够同时操作包装集中所有元素的属性:

    attr(name)取得第一个匹配元素的属性值,$("img").attr("src");

    attr(properties)将一个"名/值"形式的对象设置为所有匹配的元素属性:

    $("img").attr({src:"test.jpg",alt:"test"});注意,如果你要设置对象的class属性,你必须使用

    className,或者你可以直接使用addClass;

    removeAttr(name);从每一个匹配的元素中删除一个属性,$("img").removeAttr("src");

    修改元素样式:

    addClass(classname);添加样式,

    removeClass([classname]);删除样式,

    toggleClass(class)如果存在(不存在)就删除(添加)一个类,$("p").toggleClass("selected");

    toggleClass(class,switch)当switch是true时添加类,当switch是false时删除类,示例:

    每三次点击切换高亮样式:

    var count = 0;

    $("p").click(function(){

          $(this).toggleClass("highlight",count++%3==0);

    });

    如果我们要获取某个样式的具体属性的值,jQuery也为其提供了相应的方法:

    css(name)访问第一个匹配元素的样式属性,示例:$("p").css("color");

  • 相关阅读:
    认知实习(杭钢、杭州中萃)
    Head of a Gang (map+邻接表+DFS)
    Sharing
    Hello World for U (20)
    计算器(delphi)
    CentOS 下 Codeblocks 的 安装 + 汉化 以及 基本使用介绍
    关于阿里如何吸引大学生用户理财的一些个人看法
    分页 存储过程
    点击退出,并未直接跳转到登陆界面,登录界面还停留在框架集界面
    梦幻之旅--地图编辑器开发
  • 原文地址:https://www.cnblogs.com/songling/p/2039221.html
Copyright © 2011-2022 走看看