jQuery学习笔记——基本操作

一、样式操作

1.设置和获取样式值

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

语法：

css(name,value) ;设置单个属性值
css({name:value, name:value,name:value…}) ;设置多个属性值
css(name);获取属性值

2.追加样式

addClass(“属性值1 属性值2”)：追加样式（这样追加样式的前提是在css样式表里设置属性值），相当于给元素添加了class属性

3.移除样式

removeClass(“属性值”):根据class属性值移除样式

4.判断是否含指定的样式

hasClass():判断当前元素是否包含某个class属性值，如果包含返回true,否则返回false

二、内容操作

1.HTML代码操作

html()：可以对HTML代码进行操作，同等于js中的innerHtml属性，可以设置HTML元素，也可以获取HTML元素

eg：$(“div.left”).html();获取元素中的html代码
$(“div.left”).html(“具体内容”);设置元素中的html代码

2.标签内容操作

text()：同等于js中的innerText属性，只能添加纯文本，不支持HTML标签，可以获取某个元素的文本值

eg：$(“div.left”).text();获取元素中的文本内容
$(“div.left”).text(“具体内容”);设置元素中的文本内容

3.属性值操作

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

eg：$(this).val();获取元素的value属性值
$(this).val(value);设置元素的value属性值

三、节点操作

1.创建节点元素

①创建元素节点

创建元素节点使用jQuery的工厂函数 $()来完成，该方法会根据传入的html字符串返回一个DOM对象，并将DOM对象包装成一个jQuery对象后返回

eg：$li1=$("<li></li>")

②创建文本节点

eg：$li2=$("<li>菠萝</li>");

③创建属性节点

eg：$li3=$("<li title='榴莲'>榴莲</li>");　

注意：var s;创建的是js对象，var $a;创建的是jQ对象

2.插入节点

①append()和appendTo()

实现的功能是一样的，区别是主语和宾语的位置不同，功能都是追加，作为目标的子元素

$("ul").append("<li title='西瓜'>西瓜</li>");
$("<li title='猕猴桃'>猕猴桃</li>").appendTo("ul");

②prepend()和prependTo()

实现的功能是一样的，区别是主语和宾语的位置不同，功能是匹配的元素内容，前置元素，添加的也是子元素

$("ul").prepend("<li title='芒果'>芒果</li>");
$("<li title='草莓'>草莓</li>").prependTo("ul");

③after()和insertAfter()

实现的功能是一样的，区别是主语和宾语的位置不同，功能是在匹配的元素后面添加一个元素，作为兄弟元素

$("#p1").after("<p id='p2'>java</p>");
$("<p id='p3'>html</p>").insertAfter("#p1");

④before()和insertBefore()

实现的功能是一样的，区别是主语和宾语的位置不同，功能是在匹配的元素前面添加一个元素，添加的是兄弟元素

$("#p1").before("<p id='p4'>Js</p>");
$("<p id='p5'>C</p>").insertBefore("#p1");

3.删除节点

①remove()

当某个节点用remove（）方法删除后，该节点所包含的所有后代节点将同时被删除

删除ul中第二个Li
$("ul li:nth-child(2)").remove();

②empty()

并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

// 清空ul中最后一个li
$("ul li:last").empty();

4.替换节点

replaceWith（）和replaceAll（）实现的功能是一样的，区别是主语和宾语的位置不同

var $new = $("<li>喜欢</li>");
//$("ul li:eq(2)").replaceWith($new);
$($new).replaceAll("ul li:nth-child(3)");

5.赋值节点：clone()

clone(true):在复制节点的同时，复制该节点的行为（事件）

clone(false)：复制节点

注意：如果复制的节点有Id属性，则复制后该页面会出现一个同名的id属性值，但id属性是唯一的我们需要通过attr()方法改变id属性值

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

四、属性操作

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

// 设置属性值
$("img").attr("width":"200");// 单个设置
attr({"width":"200","height":"80"});// 多个一起设置

// 获取属性值： attr("属性名")
alert($(this).attr("alt"));

2 删除元素属性

removeAttr(“属性名”)：根据属性名删除属性

$("img").removeAttr("title");

五、节点遍历

1 遍历子元素

children()方法可以用来获取元素的所有子元素，但不包含子元素的子元素

2 遍历同辈元素

① next()：用于获取紧邻匹配元素之后的元素

② prev()：用于获取紧邻匹配元素之前的元素

③ siblings()：用于获取位于匹配元素前面和后面的所有同辈元素

3 遍历前辈元素

① parent()：获取元素的父级元素

② parents()：获取元素的祖先元素

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

4 each( )

  // 获取所有的li
  $("li").each(function(){
		//alert($(this).text());
		var $li1 = $(this).text()+"<br/>";
		$(".p1").append($li1);
	})

六、CSS-DOM操作

1 设置高度：height()

$(".p1").height(500);

2 设置宽度：width()

$(".p1").width(500);