操作Jquery节点属性样式的方法

设置属性：

/*设置属性*/
$("img").attr({"src":"images/1.jpg","alt":"这是一张风景图","title":"请点击"})
/*获得属性*/
alert($("img").attr("src"))

after和insertAfter

$("p").click(function(){
    /*在被选元素后面添插入新的同辈元素*/
    $("p").after("<p>nihao</p>")
})
$("p").click(function(){
    /*将被选元素插入到某元素之后*/
    $("<p>第二个</p>").insertAfter("p")
})

each()

$(document).ready(function(){
    $("ul").first().css({"color":"red"}).end().last().css({"background-color":"blue"})
    $("input").click(function(){
        var str = "";
        /*相当于一个for循环，将前面匹配的元素都按照后面的函数来执行*/
        $("li").each(function(){
            str +=$(this).text()
        })
        alert(str)
    })
})

<script type="text/javascript"charset="UTF-8">
    var num = [[1,2,3],[4,5,6,],[7,8,9,]]
    $.each(num,function(){
//        alert(this) /*这个打印的是数组中的一维数组*/
        $.each(this,function(){
            alert(this)/*这个打印的是一维数组里面单个的值*/
        })
 })
</script>

jQuery对DOM 操作

样式操作

内容和value操作

节点操作

节点和属性遍历

节点遍历

CSS-DOM操作

1，使用css（）为指定的元素添加样式值或获取样式值

css（name，value） css（name）

2，使用addClass（)为元素追加样式

addClass（"class1 class2 class3......classN"）;

3，使用removeClass（）移除样式

removeClass（"class1 class2 class3......classN"）;

4，toggleClass（）切换样式：模拟addClass和removeClass实现样式的添加和移除过程

.toogleClass(class)；

5，hasClass（）用来判断是否是否包含指定的样式

.hasClass（class）；、

html代码操作：html()可以对HTML代码进行操作，类似于js中innerHTML（识别标签）

获取：.htnl()

设置：.html( "<li></li>"); //设置元素中间的HTML代码

text()可以获取或时设置元素的文本内容（但是并不识别标签）、

获取：.text()

设置：.text( 文本内容 )

val(）可以设置或获取元素的value属性值

获取：.val()

设置：.val（value）

节点操作：

工厂函数$()用于获取或创建节点

1 通过选择器获取节点 $(“div”)

2 将DOM节点转化成jQuery节点 $( objDOM)

3 使用 HTML 字符串创建节点 $(“<div></div>”)

插入节点：

append（content） A.append(B) 将把B追加到A中

appendTo（content） A.appendTo(B) 将把A追加到B中

parepend（content） A.parepend(B) 将把B前置插入到A中

parependTo（content） A.parependTo(B) 将把A前置插入到B中

移除节点：

remove（）删除整个节点

empty（）清空整个节点

detach（）删除整个节点，保留元素的绑定事件、附加的数据

替换节点：

replaceWith() 和 replaceAll() 两者的关系类似于append和appendTo的关系

复制某个节点：、

clone（）用于复制某个节点可已添加元素true和false

当追加的元素为true时，复制时间处理，false反之

clone（true）

获取与设置属性：

attr( “name”) 与 attr( { [name1:value1] [name1:value1] [name1:value1]})

removeAttr(_)用来删除元素的属性

removeAttr（name）

节点的遍历

遍历子节点：

children（）可以获取元素的所有子元素

next（）获取紧邻其后的元素

prev（）获取紧邻匹配元素之间的元素

silbings() 用于获取同辈的其它所有元素

遍历父辈元素

parent（）获取父级元素

parents（）获取元素的祖先元素

each（)类似于for 循环遍历每个匹配元素规定的运行函数

end（）将元素还原成之前的状态

除css（）外还有获取元素高度，宽度等的样式操作方法

用jQuery制作悬浮广告的代码示例：

<script type="text/javascript" charset="UTF-8">
   $(document).ready(function(){
   //返回图片top值
      var adverTop= parseInt($("#adver").css("top"));
      //返回图片的left值
      var adverLeft = parseInt($("#adver").css("left"))

      $(window).scroll(function(){
         //滚动条反倒上面的距离
         var scrollTop  =parseInt($(this).scrollTop());
         //滚动条向右的距离
         var scrollLeft = parseInt($(this).scrollLeft());
         //设置图片相对于文档的top值
         $("#adver").offset({top:adverTop+scrollTop})
         //设置图片相对于文档的left值
         $("#adver").offset({left:adverLeft+scrollLeft})
      })
   })
</script>

操作Jquery节点 属性 样式的方法

猜你喜欢

操作Jquery节点属性样式的方法