jquery操作二-优快云博客

本文介绍了jQuery的基本使用技巧，包括如何使用attr方法为元素添加属性、使用each方法进行循环遍历、利用end方法返回到上一级选择器，以及如何通过jQuery实现广告栏的固定位置移动效果。

学习内容：
1.     attr          给元素增加属性
2.    each          循环遍历，相当于for
3. end          返回上一级
4. 通过jquery固定移动广告

一, attr

通过.attr可以给元素增加属性和属性值

参考代码：

$("input").click(function () {
    $("img").attr({"src":"../images/smt.jpg","alt":"杀马特"});      /*给元素增加属性*/
})

二.each

相当于for循环，遍历一次一次

参考代码：

var str="";
$("li").click(function () {                         /*each 相当于循环遍历*/
    $("li").each(function () {
        str+=$(this).text();
    })
    alert(str);
})

var strlist =[[1,2,3],[4,5,6],[7,8,9]];
$.each(strlist,function () {
    $.each(this,function () {
        alert(this);
    });
});

三.end

返回上一级

参考代码：

$("p").find("ul").end().css({"color":"red"});

四. 固定移动广告

scrollTop 滚动条的偏移值
offset 设置所有匹配元素的偏移坐标

参考代码：

$(document).ready(function () {
       var adverTop = parseInt($("#adver").css("top"));       /*获得上边距*/
       var adverLeft = parseInt($("#adver").css("left"));  /*获得左边距*/

       $(window).scroll(function () {
      /*通过window窗口获得距离*/
           var newTop = parseInt($(this).scrollTop());
           var newLeft = parseInt($(this).scrollLeft());

      /*重新赋值*/
           $("#adver").offset({top:adverTop+newTop})
           $("#adver").offset({left:adverLeft+newLeft})
       })
   })


代码分析：

$('div , li')才是找所有的div和li，之间不存在父子关系

$('div li') 是找div里面所有li，包括子级，孙子级，总之就是div里面所有li，不管有几层关系