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属性就没有了

页面刚运行:

第一次单击:

第二次单击:

 

posted @ 2017-05-09 14:55  乔克叔叔  阅读(282)  评论(0编辑  收藏  举报