jQuery基础DOM篇

jQuery创建节点的方式，让我们保留HTML的结构书写方式，非常的简单、方便和灵活.

一、创建节点

1.创建元素节点

$("<div></div>");

2.创建文本节点

$("<div>我是文本节点</div>");

3.创建属性节点

var $div=$("<div id='test' class='yxt'>嘻嘻</div>");

二、添加DOM节点

内部插入

//有"内部追加"append()、appendTo()；“内部前置”prepend()、prependTo()这几种方法
        var $b=$("<b>Hot</b>")
        $("p").append($b);==$($b).appendTo($("p"));
        $("p").prepend("<b>Hello</b>");==$("<b>Hello</b>").prependTo($('p'));

外部插入

//after()节点外部后; before()节点外部前
$("p").after("<em>after</em><br/>");
$("p").before("<br/><em>before</em>")

包裹节点

1.wrap()方法

<p>p元素</p>
//给p元素增加一个div包裹
$('p').wrap('<div></div>')
//最后的结构，p元素增加了一个父div的结构
<div>
      <p>p元素</p>
</div>
//补充：jQuery还提供了一个unwarp()方法 ，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

2.wrapAll()方法

//wrapAll
//简单的看一段代码：
<p>p元素</p>
<p>p元素</p>
//给所有p元素增加一个div包裹
$('p').wrapAll('<div></div>')
最后的结构，2个P元素都增加了一个父div的结构
<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

3.wrapInner()方法

//wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构
/*听起来有点绕，可以用个简单的例子描述下，简单的看一段代码：
<p>p元素</p>
<p>p元素</p>
给所有p元素增加一个div包裹
$('p').wrapInner('<div></div>')
最后的结构，匹配的p元素的内部元素被div给包裹了
<p>
    <div>p元素</div>
</p>
<p>
    <div>p元素</div>
</p>

值得记忆的节点操作

删除节点 .remove()
复制节点 .clone(true)

true参数决定复制元素时也复制元素行为，没有参数时不复制行为。

清空节点 .empty()

//删除匹配的元素集合中所有的子节点。
/*<p>Hello, <span>Person</span> <a href="#">and person</a></p>
$("p").empty();
结果<p></p>*/

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

Dom元素的零碎操作:

1.设置和获取HTML,文本和值

.html()
.text()
.val()
//无参时是获取
//有参设置
.text("要设置的文本")
.html("要设置的文本，解析html标签")
.val("要设置的表单元素的value值")

2.属性操作

attr()获取和设置属性

//attr()有4个表达式
$("img").attr("src");//获取img 元素的src属性
$("img").attr("src","test.jpg");//设置img 元素的src属性
$("img").attr({ src: "test.jpg", alt: "Test Image" });//设置src和alt属性
$("img").attr("title", function() { return this.src });//把src属性的值设置为title属性的值。

removeAttr()移除属性

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

3.样式操作

addClass()//增加一个样式名
removeClass()//从所有匹配的元素中删除全部或者指定的类。
toggleClass(class|fn[,sw])//如果存在（不存在）就删除（添加）一个类。
hasClass()//判断是否有某个类名

4.Css-Dom操作

//css操作
$("p").css("color");//取得第一个段落的color样式属性的值
$("p").css("color","red");//将所有段落字体设为红色
$("p").css({ "color": "#ff0011", "background": "blue" });//将所有段落的字体颜色设为红色并且背景为蓝色。

height()

$("p").height();//获取第一段的高
$("p").height(20);//把所有段落的高设为 20:

width()

$("p").width();//获取第一段的宽
$("p").width(20);//把所有段落的宽设为 20:

offset()

//无参 获取  匹配元素在当前视口的相对偏移。
//传参 设置
$("p:last").offset({ top: 10, left: 30 });

position()

获取匹配元素相对于父元素的偏移，不能设置！

scrollTop([val])
//无参 获取匹配元素相对滚动条顶部的偏移。
//val 有参 设定垂直滚动条值
scrollLeft([val]) 方法说明同上 获取左侧

5.遍历节点操作

children();==子选择器
find(); ==后代选择器
next();==相邻兄弟选择器
nextAll();==一般兄弟选择器
prev();//取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
prevAll();//查找当前元素之前所有的同辈元素
siblings();//所有兄弟节点元素