jQuery总结 二

只是jQuery中的一些基本dom操作

案例1：

找到ul 第2个li，并打印出文本类

var $li=$("ul li:eq(0)");
alert($li.text())---注意申明的方式

案例2：

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

var $test=$("span")
alert($test.attr("title"))

注意：通过上边的方法我们可以同步的修改属性例如

$test.attr("title","hehe")
$test.removeAttr("title")--删除属性的方法

关于dom创建节点

在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)

删除节点

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

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

清空元素

$('ul').empty()

复制节点

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

替换节点

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

追加CSS样式

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

判断是否含有class

$('p').hasClass('high')

切换class样式

$('p').click(function(){
   $('p').toggleClass("test")
})

children()

用于取得匹配元素的子元素的集合

var $ul=$('ul').children();
alert($ul.length)

next()

用于获得匹配元素后边紧紧跟随的元素

alert($('ul li:eq(0)').next().text())

prev()

用于获得匹配元素前边的元素

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

siblings()

获得相邻左右同辈元素的结合

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

css-dom操作

alert($("p").css("color"))很简单的操作，和属性操作一模一样

修改

$("p").css("color","blue")---和attr操作一模一样

也可以一次性修改多个属性，中间用逗号隔开就可以了

注意：

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

alert($("p").height())

这里有两个非常重要的东西 offset()--获得元素在当前视窗的相对偏移

position()--获得元素的position属性

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

更多操作查看API