• jQuery(基础dom及css操作)


    设置元素内容

    元素属性操作

    ----------

    元素样式操作

    ----------------

    对象数组的遍历

    测试代码:

     1 $(function () {
     2     var v=$('div').css(['color','width','height']);//获得的是一个对象数组
     3     /*
     4     for(var i in v){
     5         alert("属性名称:"+i+",它的默认值或者设置的值为:"+v[i]);
     6     }
     7     */
     8     //使用jquery进行遍历
     9     $.each(v, function (attr,value) {//第一个参数是 获取的对象数组  第二个参数是一个function
    10         alert("获取的属性名称为:"+attr+",它的值为:"+value);
    11     })
    12 
    13 
    14 })

    -------------

        //为选中的元素 添加多个样式
        $('div').css('color','#ccc').css('background-color',"#FFF");//这种方式可以用下面的方式代替
        $('div').css({
            'color':'blue',
            'background-color':'red',
            'width':'50px',
            'height':'30px'
        });

    ------------------------

    addClass,removeClass

    js中的代码:

     1     //首先在html页面中引入css 样式表 才能在这里实现动态的添加  通过这个方法增加一个样式时 不仅样式加上了 而且会动态的设置class的属性值(在调试窗口可以看到)
     2     //但是真正的class属性值 通过这种方法是不会动态改变的 最初设置了 就是最初设置的那个值  在通过class获取的时候也是通过最初设置的那个值获取
     3     $('div').addClass('red bg size');//将来这里边的值 将会作为选中的元素的class属性值  而且 这里边因为有三个样式  所以目标div中也将存在这些样式
     4     alert($('div').length);//这里获取的div为2个 所以打印2
     5     alert($('div').attr('class'));//打印出的div值  却只有第一个div的class值  a red bg size
     6     alert($('.a').length);//打印1 但是通过class获取div的时候  却只能通过 .a来获取  而不能通过 .a red bg size 来获取 它找不到
     7     // 虽然样式是加上了 而且在调试窗口中 class 的值确实动态设置为 a red bg size 但是不能通过 动态设置之后的class值进行获取 而只能通过最初设置的class值来获取
     8     alert($('.a red bg size').length);//打印0 因为没有获取到任何的div
     9     //所以总结:在调试窗口中虽然看到class的内容值 为 a red bg size 但是最初设置的是什么内容 就要以什么内容为主 如果没有设置 那么它就没有class这个属性值
    10     //当然不能通过class属性值来获取 即使他在调试窗口中动态的设置class 为 red bg size 这都是不管用的  全部以最初的设置为主 要么存在class 要么不存在

     

    也可以在class属性中直接定义外部引入的样式  但是真正的class值为 第一个空格前面的部分

     

    --------------------------

    toggleClass

     

    运行效果:

    第一次单击

    再次单击恢复

    而调试窗口中的class中的属性值也随着用户的单击在动态的变化着 样式改变时 class属性值中增加了对应的数值  再次单击 div中的class属性就没有了

    页面刚运行:

    第一次单击:

    第二次单击:

  • 相关阅读:
    信步漫谈之Struts2—输入校验(编码方式)
    信步拾遗之Java反射机制浅析
    信步漫谈之Log4j—基础介绍
    Log4J基础详解及示例大全(转)
    设计模式之Bridge(桥接)(转)
    设计模式之Adapter(适配器)(转)
    设计模式之Facade(外观)(转)
    设计模式之Factory(工厂)(转)
    设计模式之Flyweight(享元)(转)
    基于CentOS7系统部署cobbler批量安装系统
  • 原文地址:https://www.cnblogs.com/Joke-Jay/p/6827912.html
Copyright © 2020-2023  润新知