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()--获得滚动条距离页面顶端的距离
