JQuary学习之路---JQuary的基本操作

JQuary基本操作：

操作文本与属性值内容

css()：

使用css()为指定的元素设置样式值或获取样式值

追加样式addClass():

代码语法：

$(selector).addClass(class);
或   $(selector).addClass(class1 class2 … classN)

示例：

css代码：

.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }

JQuary代码：

$("h2").mouseover(function() {
     $("p").addClass("content border");
});

移除样式removeClass(）：

语法：

$(selector).removeClass("class") ;
或   $(selector).removeClass("class1 class2 … classN ") ;

示例：

$("h2").mouseout(function() {
        $("p").removeClass("text content");
});

判断是否含有指定样式hasClass( )：

语法：

$(selector). hasClass(class);

示例：

判断是否存在content  class如果有就添加
$("h2").mouseover(function() {
    if(!$("p").hasClass("content ")){
	$("p").addClass("content ");
	}
});

切换样式toggleClass()：

模拟了addClass()与removeClass()实现样式切换的过程，使得两者之间切换不需要判断
语法：

$(selector).toggleClass(class) ;

示例：

$("h2").click(function() {
    $("p").toggleClass("content  border");
});

操作节点内容：

HTML代码操作

html()：

html()可以对HTML代码进行操作，类似于JS中的innerHTML
示例：
html()中如果有内容为添加，如果没有的话为获取。

$("div.left").html();
或
 $("div.left").html("<div class='content'>…</div>");

标签内容操作

text()：

text()可以获取或设置元素的文本内容
示例：
text()中如果有内容为添加，如果没有的话为获取。

$("div.left").text();
或
 $("div.left").text("<div class='content'>…</div>");

两者的区别：

属性值操作

val()可以获取或设置元素的value属性值
示例：
val()中如果有内容为添加，如果没有的话为获取。

$(this).val();
或     $(this).val(value);

操作DOM节点

创建节点元素：

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

• $(selector)：通过选择器获取节点
• $(element)：把DOM节点转化成jQuery节点
• $(html)：使用HTML字符串创建jQuery节点

示例：

var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

插入节点

元素内部插入子节点

元素外部插入同辈节点

删除节点

• remove()：删除整个节点
• empty()：清空节点内容
• detach()：删除整个节点，保留元素的绑定事件、附加的数据

一般使用empty

替换节点：

replaceWith()和replaceAll()用于替换某个节点
示例：

复制节点clone()：

clone()用于复制某个节点
语法：

参数ture或flase, true复制事件处理，flase时反之

$(selector).clone([includeEvents]) ;

示例：

$(".gameList li:eq(1)").click(function(){
     $(this).clone(true).appendTo(".gameList");
    })
$(".gameList li:eq(2)").click(function(){
     $(this).clone(false).appendTo(".gameList");
    })

操作属性

获取与设置元素属性attr()

attr()用来获取与设置元素属性

示例：

$(".contain img").attr({width:"200",height:"80"});

删除元素属性removeAttr()：

语法：

$(selector).removeAttr(name) 

示例：

删除元素的alt属性
$(".contain img").removeAttr("alt");

遍历DOM节点

获取子元素

children()方法可以用来获取元素的所有子元素
示例：

var $section =$("section").children();
alert($section.length);

获取同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

获取前辈元素

jQuery中可以遍历前辈元素

• parent()：获取元素的父级元素
• parents()：元素元素的祖先元素

示例：

$("li:eq(1)").parent().addClass("orange");
 $("li:eq(1)").parents().addClass("orange");

遍历方法each( )：

each( ) ：规定为每个匹配元素规定运行的函数
语法：

$(selector).each(function(index,element)) ;

示例：

$("img").click(function(){
       $("li").each(function(){
           var str=$(this).text()+"<br>";
           $("section").append(str);
       })
   });

CSS-DOM操作：

除css()外，还有获取和设置元素高度、宽度等的样式操作方法