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

  • 相关阅读:
    我与计算机简述
    第十五周计应151班第四组排球计分程序
    第十五周排球积分查询程序
    本周总结
    计应1班第4小组第一次产品计划会议
    本周总结
    计应1班第4小组“排球比赛计分程序”的典型用户、创立场景、用户故事
    排球计分规则功能说明书
    我与计算机
    5th 各组作品alpha发布体会
  • 原文地址:https://www.cnblogs.com/songling/p/2039221.html
Copyright © 2011-2022 走看看