jQueryDOM操作

jQueryDOM操作

1、查找元素属性

在jQuery中查找元素属性非常简单attr(“属性名称”)

var $test=$("span")
alert($test.attr("title"))---注意这里，我们是通过元素选择器查找的，那么我们想查找第二个span呢？这么写

注意：通过上边的方法我们可以同步的修改属性例如$test.attr("title","hehe") $test.removeAttr("title")--删除属性的方法 关于dom创建节点

2、在jQuery中创建节点

在jQuery中非常简单的可以创建节点出来

var $li_1=$("<li></li>");---这样就创建了一个节点出来

$(html)--这其实是jQuery提供的一个工厂函数，这个函数就是将传入的html标记符号转换成为一个DOM对象，并将DOM对象包装成一个jQuery对象并且返回

var $li_1=$("<li></li>");---只是创建一个节点
var $li_1=$("<li>测试</li>");--有文字的节点
var $li_1=$("<li title="测试">这是我的测试</li>");---这里我们新添加了属性进去

下一步实验我们将创建出来的节点对象添加到我们ul中，完成添加子元素的操作

$("ul").append($li_1)---追加节点

案例2：

var $li_1=$("<li>这是我的测试2</li>");
$li_1.appendTo($('ul'))

注意和之前的区别，将某个节点追加到另外一个节点当中去

案例3：前置追加类容

var $li_1=$("<li>这是我的测试2</li>");
$('ul li:eq(0)').prepend($li_1)

prependTo

删除节点 remove()

$('ul li:eq(2)').remove();

$('ul li').remove("li[title!=菠萝]");---删除title不等于菠萝的元素(所有)

清空元素 empty()

复制节点 clone()

$li.clone().appendTo("ul");

替换节点 replaceWith(); replaceAll();

 $li.replaceWith("<li>哈哈</li>");---替换某个节点
("<li>哈哈</li>"). replaceAll($li);

修改属性

$p.attr("style","font-size:22px")

删除元素属性 removeAttr();

3、追加CSS样式

addClass()---注意点attr("class名称") 和addClass()的区别
删除CSS样式
removeClass()

判断是否含有class
$('p').hasClass('high')

toggleClass---切换class样式
$('p').click(function(){
   // alert("a")
    $('p').toggleClass("test")
})

遍历节点 children()

该元素用于取得匹配元素的子元素的集合 alert($('ul').children().length) 想一想，这么打印出ul下边所有元素的类容

next()

用于获得匹配元素后边紧紧跟随的元素 alert($('ul li:eq(0)').next().text())

prev()

用于获得匹配元素前边的元素 alert($('ul li:eq(1)').prev().text())

siblings()--获得相邻左右同辈元素的结合

alert($('ul li:eq(1)').siblings().text())

4、css-dom操作

alert($("p").css("color"))很简单的操作，是不是和属性操作一模一样 那怎么修改呢 $("p").css("color","blue")---是不是和attr操作一模一样呢 也可以一次性修改多个属性，中间用逗号隔开就可以了---具体看文档

注意：

$("p").height(100)---设置元素的高度默认是px 不过现在用的最多的是em这个单位$("p").height("10em") alert($("p").height())

这里有两个非常重要的东西

offset()--获得元素在当前视窗的相对偏移

position()-获得元素的position属性--想一想我们怎么设置position的值呢？可以通过css自己实验一下

scollTop()--获得滚动条距离页面顶端的距离