jQuery操作DOM

1.节点操作

1.1.查找节点

 //查找所有div标签
alert($("div"))
//查找节点
//html（）方法代替innerhtml   
alert($("#id").html())

1.2.创建节点

$(function(){
    //创建节点
    var li1=$("<li>大头儿子</li>");
    var li2=$("<li>小头爸爸</li>");
})

1.3插入节点

$(function(){
    //创建节点 js跟jquery的方法不能混用  当有多个相同标签时去点内容不会报错只会取第一个值
    var li1=$("<li>大头儿子</li>");
    var li2=$("<li>小头爸爸</li>");
    //插入节点
    $("ul").append(li1);
    $("ul").prepend(li1);
})

jquery的节点插入方式

插入方式	语法	描述
内部插入	appen（content）	在匹配元素结尾插入指定内容
内部插入	appendTo（content）	把选择的元素追加到另一个指定的元素集合内部
内部插入	prepend（contend）	在匹配元素前置到指定的元素集合内部
外部插入	after（contend）	在匹配元素之后插入内容
外部插入	insertAfter（contend）	将匹配的元素插入另一个指定的元素集合的后面
外部插入	before（contend）	在匹配元素之前插入内容
外部插入	insertBefore（contend）	将匹配的元素插入另一个指定的元素集合前面

1.4删除节点

①remove()方法

remove([selector])

②detach()方法

detach([selector])
//detach方法在删除元素时会保留与删除元素关联的数据，事件

③empty()方法

$(function(){
    $("ul li:last").empty
})
//emptys是清空元素及其后代元素

1.5复制节点

//clone(true) 是否复制元素的事件和数据，默认为 false
$("ul li:eq(0)").clone(true).appendTo(".animtionList")

1.6替换节点

//replaceWith()方法用于将所有匹配的元素替换成指定的html内容或元素
//两者作用相同，区别在于语法上内容和选择器的位置
$(selecotor).replaceWith(content)
$(selecotor).replaceAll(content)

2.节点属性操作

2.1获取与设置元素属性

$(selector).att(attribute)	//获取属性值

$("h2").attr("color","red")		//设置单个属性值
$("a").attr("href":"http://www.baidu.com","id":"aid")	//设置多个属性值

2.2删除属性

 //removeAttr删除属性
        $("a").removeAttr("href")

3.遍历节点

3.1遍历子元素

children([expr])
//expr为可选参数，表示传入的jquery的选择器表达式，通过它缩小搜索范围

3.2遍历同辈元素

 	//prev()上一个兄弟
    $("#qiu").prev()
    //next()下一个兄弟
    $("#qiu").next()
    //siblings()获取前后所有同辈元素
    $("#qiu").siblings()

3.3遍历前辈元素

	//parent()获取父级
    $("#qiu").parent()
	//获取当前匹配元素集合中每个匹配元素的祖先元素
	$("#qiu").parents()

3.4其他遍历方法

//其他遍历方法：each() end() find(返回所有被选择的后代元素) filter() eq() first() last()
$(function(){
    //index表示选择器的位置，element表示当前元素
    $("ui li").each(function(index,element){
        console.log(element);
    })
})

示例代码：

举例：1
$("span").click(function(){
$("li").each(function(){
$(this).toggleClass("example");
});
});
举例：2
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});

4.jquery中的元素内容操作

4.1html代码与文本内容操作

①html()相当于js中的innerHTML属性

var li=$("li").html()	//获取元素内容
$("li").html("啦啦啦")	  //设置元素内容

②text()

var li=$("li").text()	//获取元素内容
$("li").text("<strong>啦啦啦啦</strong>")	//设置元素内容

html()和text()的区别

1.无参数：text()与html()方法在无参数时，text()方法获取到的是所有匹配元素及其后代元素的文本内容，而html()方法获取到的是第一个匹配元素的html内容或文本内容

2.有参数：text()方法在接受参数后，会以文本形式设置所有匹配元素的内容，而html()方法会设置所有匹配元素的HTML内容或文本内容

4.2属性值操作

//相当于js中的value属性
$("#name").val()

5.jquery元素样式操作

5.1设置，获取样式值

//css()获取设置样式
$("li:even").css("background-color","red")
$("a[href='w']").css("background-color","red")

5.2追加，移除样式

    //添加样式,可添加多样式用空格隔开
    function addstyle() {
    $("div").addClass("a")
    }
    
    //移除样式
    function removesstyle() {
        $("div").removeClass("a")
    }

5.3样式的切换与判断

$(seleector).toggleClass(classname);	//切换class类样式
$(seleector).hasClass(classname);		//判断class类样式是否存在

6.jquery中的css-dom操作

方法	描述	示例
css(name,[value])	设置或获取指定元素的样式值	$("id").css("color","red");
height([value])	设置或获取指定元素的高度	$("div").height(200);
width([value])	设置或获取指定元素的宽度	$("div").width(300);
0ffset([value])	设置获取指定元素相对于文档的偏移	$("div").offset();
position()	获取第一个匹配元素相对于父元素的位置	$("div").position()
scrollLeft([position])	设置或获取指定元素相对于滚动条左侧的偏移	$("div").srcollLeft(40)；
scrollTop([position])	设置或获取指定元素相对于滚动条顶部的偏移	$("div").scrollTop(50);