JQuery之DOM操作学习笔记

/*
动态插入节点
append()方法 向每个匹配的元素内部追加内容 $("p").append("<b>你好</b>"); => <p>sddssd<b>你好</b></p>
appendTo()方法 将所有匹配元素追加到指定元素中 $("<b>您好</b>").appendTo("p") => <p>sddssd<b>你好</b></p>
prepend()向每个匹配的元素内部前置内容 => <p><b>你好</b>sddssd</p>
prependTo()将所有匹配的元素前置到指定的元素中 $("<b>您好</b>").prependTo("p") => <p><b>你好</b>sddssd</p>
after()在每个匹配的元素之后插入内容 $("p").after("<b>您好</b>") => <p>sdsdsdsd<p><b>您好</b>
insertAfter()将所有匹配的元素插入到指定的元素后面$("<b>您好</b>").insertAfter("p") =><p>sdsdsdsd<p><b>您好</b>
before()在每个元素之前插入内容
insertBefore()将所有匹配元素插入到指定元素的前面
*/

/*
//删除节点
remove()方法
$("ul li:eq(1)").remove();//获取第二个<li>元素节点后，将它从网页中删除
detach()方法 detach()从DOM中去掉所有匹配的元素，但是把匹配的元素从Jquery对象中删除，所绑定的事件，附加的数据都会保留下来
empty()方法，清空节点，清空元素中所有后代节点
*/

/*
//复制节点
clone()方法
$(this).clone().appendTo("ul") //复制当前节点，并将它追加到<ul>中
$(this).clone(true).appendTo("body") //clone()方法中传递参数true，含义是复制元素的同时，复制元素中所绑定的事件
*/

/*
//替换节点
replaceWith()将所有的匹配元素都替换成指定的HTML或者DOM元素 例：$("p").replaceWith("内容")；
replaceAll() $("内容").replaceAll("p");
*/
/*
//包裹节点
wrap() 将某个节点用其他标记包裹起来 $("strong").wrap("<b></b>") 将所有的元素进行单独包裹
wrapAll() 将所有的元素用一个元素包裹
wrapInner()将每一个匹配的元素的子内容用其他结构化的标记包裹起来
<strong>内容1</strong>
<strong>内容2</strong>
$("strong").wrap("<b></b>")
<b><strong>内容1</strong></b>
<b><strong>内容2</strong></b>

$("strong").wrapAll("<b></b>")
<b><strong>内容1</strong>
<strong>内容2</strong></b>

$("strong").wrapInner("<b></b>")
<strong><b>内容1</b></strong>
<strong><b>内容2</b></strong>

*/

/*
//属性操作
attr()方法获取和设置元素属性
$("p").attr("title","your title");//设置单个属性
$("p").attr({"title":"your title","name":"test"})；//将一个“名/指”形式的对象设置为匹配元素的属性
removeAttr()方法来删除元素属性 $("p").removeAttr("title");
prop()方法和removeProp()方法，用来获取在匹配的元素集中的第一个元素的属性和为匹配元素删除设置的属性
addClass()追加样式
removeClass()删除样式

toggle()切换方法
$toggleBtn.toggle(function(){
//显示元素
}.function(){
//隐藏元素
})

toggleClass()切换样式
$("p").toggleClass("another") //切换之前<p class="myClass"></p>,点击切换之后，<p class="myClass another"></p>,再次点击，切换为原来样式

hasClass()判断是否含有某个样式 $("p").hasClass("another") <=> $("p").is(".another")

html()方法 类似有javascript中的innerHTML()
var p_html=$("p").html()//获取<p>元素的HTML代码
$("p").html("<b>sd</b>")//设置<p>元素的HTML代码

text()方法 类似javascript中的innerText
var p_text=$("p").text();//获取<p>元素的文本内容
$("p").text("hehe");//设置<p>元素的文本内容

val()方法 无论元素是文本框，下拉框，还是单选框，都可以返回元素的值，如果是多选框，返回一个包含所有选择的值的数组
*/
/*
遍历节点
children()方法用来获取匹配的子元素的集合（该方法只考虑子元素不考虑其他后代元素）
var $body=$("body").children()

next()方法 获取匹配元素后面紧邻的同辈元素
prev()方法 获取匹配元素前面紧邻的同辈元素

siblings()方法 获取匹配元素前后所有的同辈元素
$(".level1>a").click(function(){
$(this).addClass("current") //当前与元素添加"current"样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除样式"current"
.next().hide(); //它们的下一个元素隐藏
return false;
})

var $("p").siblings()//获取<p>元素的同辈元素

closest()方法 获取最近的匹配元素，首先检查当前元素是否匹配，如果匹配直接返回当前元素，如果不匹配则向上查找父元素，逐级向上直到找到配偶选择的器的元素。如果没有找到返回空对象
$(document).bind("click",function(e){
$(e.target).closest("li").css("color","red"); //给点击的目标元素的最近的li元素添加颜色
})
*/

/*
css-dom查操作
css()方法
heifht()方法
width()方法
offset()方法 获取元素在当前视窗的相对偏移，返回的对象包括top和left属性，只对可见元素有效
var offset=$("p").offset()
var left=offset.left;
var top=offset.top;

position()方法 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移

scrollTop()和scrollLeft()获取元素的滚动条距顶端的距离和距左侧的距离
var $p=$("p");
var scrollTop=$p.scrollTop() //获取元素的滚动条距顶端的距离
var scrollLeft=$p.scrollLeft()
$("p").scrollTop(300) //元素的垂直滚动条滚动到指定的位置
$("p").scrollLeft(300)//元素的横向滚动条到指定的位置
*/

JQuery之DOM操作学习笔记,古老的榕树,5-wow.com