jQuery(基础dom及css操作)

设置元素内容

元素属性操作

----------

元素样式操作

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

对象数组的遍历

测试代码：

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


})

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

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

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

addClass,removeClass

js中的代码：

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

 

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

 

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

toggleClass

 

运行效果：

第一次单击

再次单击恢复

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

页面刚运行：

第一次单击：

第二次单击：