Javaweb基础-jQuery元素操作

插入元素

$("").append(str)或$(str).appendTo("")：把str追加到现有的元素后面。

<script type="text/javascript">
	$(document).ready(function(){
		var str='<div class="div1">新插入的div</div>';
		$("#id1").append(str);
        //$(str).appendTo("#id1");
        //把str形式的div标签插入到id为id1的元素里面，形成新的div标签
	})
</script>

$("").prepend(str)或$(str).prependTo("")：把str插入到现有的元素最前面。

<script type="text/javascript">
	$(document).ready(function(){
		var str='<div class="div1">新插入的div</div>';
		$("#id1").prepend(str);
		//$(str).prependTo("#id1");
        //把str形式的div标签插入到id为id1的元素里面，插到第一行
	})
</script>

 $("").before(str)或$(str).insertBefore("")：把str插入到选择的元素前面。

<script type="text/javascript">
	$(document).ready(function(){
		var str='<div class="div1">新插入的div</div>';
		$("#id1").before(str);
        //$(str).insertBefore("#id1");
        //把str插入到id为"#id1的元素前面
	})
</script>

 $("").after(str)或$(str).insertAfter("")：把str插入到选择的元素后面。

<script type="text/javascript">
	$(document).ready(function(){
		var str='<div class="div1">新插入的div</div>';
		$("#id1").after(str);
		//$(str).insertAfter("#id1");
        //把str插入到id为id1的元素后面。
	})
</script>

 删除元素

 $("").remove()。删除所选的元素，元素内容及绑定事件。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1").remove();
        //删除id为id1的元素及元素内部内容
	})
</script>

$("").detach()。删除所选的元素及元素内容，不删除绑定事件。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1").detach();
        //删除id为id1的元素
	})
</script>

$("").empty()。删除所选的元素内容；内容置空。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1").empty();
        //删除id为id1的元素的内容，不删除元素本身
	})
</script>

复制元素 

$("").clone(bool)。bool是true时复制元素及绑定的事件；false时只复制元素；默认false。

<script type="text/javascript">
	$(document).ready(function(){
		var div1=$("#id1").clone(true);
		$("#id2").append(div1);
        //把id为id1的元素复制出来，插入到id2元素里面
	})
</script>

替换元素

$("").replaceWith(str)或$(str).replaceAll("")。把选择的元素替换成str中的元素。

<script type="text/javascript">
	$(document).ready(function(){
		var str="<span>A-span</span>";
		$("#id2").replaceWith(str);
		//$(str).replaceAll("#id2");
        //把id为id2的元素换成一个span标签
	})
</script>

遍历元素 

$("").each(function(index,element){});

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1 span").each(function(index,element){
			$(element).append("hello");
            //选择id为id1的元素里面的所有span标签，遍历的同时追加hello在后面
		});
	})
</script>

$("").each(function(index){});

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1 span").each(function(index){
			$(this).append("hello");
             //选择id为id1的元素里面的所有span标签，遍历的同时追加hello在后面
		});
	})
</script>

属性操作 

1.获取属性

$("").attr("属性名")。标签中自带属性，自定义属性等。

<script type="text/javascript">
	$(document).ready(function(){
		var c=$("#id1").attr("class");
		$("#id2").append(c);
        //获取id为id1的元素的class属性的值，并把之追加到id2里面
	})
</script>

2.设置属性

$("").attr("属性名","值")。标签中自带属性，自定义属性等。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1").attr("class","el1");
        //把id为id1的元素的class属性的值改成el1
	})
</script>

$("").attr({"属性名1":"值1","属性名2":"值2",...})。标签中自带属性，自定义属性等。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1").attr({"class":"el1","index":"1"});
        //设置id为id1的元素的class，index属性的值
	})
</script>

3.删除属性

$("").removeAttr("属性名")。标签中自带属性，自定义属性等。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1").removeAttr("class");
        //删除id为id1的元素的class属性
	})
</script>

4.prop方法

$("").prop("属性名")或$("").prop("属性名","值")：使用方法与attr相似，属性的值是bool类型时使用prop来操作。

样式操作 

1.css属性操作

$("").css("属性名")：获取属性。

<script type="text/javascript">
	$(document).ready(function(){
		var str=$("#id1").css("color");
		console.log(str);
        //获取id为id1的元素的color属性的值，并打印
	})
</script>

$("").css("属性名","值")：设置单个属性。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1").css("color","red");
        //设置id为id1的元素的color属性的值为red
	})
</script>

$("").css({"属性名1":"值1","属性名2":"值2",...})：设置多个属性。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1").css({"color":"red","font-size":"20px"});
        //设置id为id1的元素的color，font-size属性的值
	})
</script>

2.css类名操作

$("").addClass("class名")：添加class。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1").addClass("elm1");
        //设置id为id1的元素的class属性
	})
</script>

$("").removeClass("class名")：删除class。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1").removeClass();
        //删除id为id1的元素的class属性
	})
</script>

$("").toggleClass("class名")：切换class。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1").toggleClass("ELM1");
        //切换id为id1的元素的class属性
	})
</script>

内容操作 

$("").html()或$("").html(str)：获取，设置html内容。获取的内容包含文字和各种标签。

<script type="text/javascript">
	$(document).ready(function(){
		var h=$("#id1").html();
		$("#id2").html(h);
        //获取id1的html内容，获取内容加到id2里面
	})
</script>

$("").text()或$("").text(str)：获取，设置文本内容。获取的内容是文本，不含标签。

<script type="text/javascript">
	$(document).ready(function(){
		var h=$("#id1").text();
		console.log(h);
		$("#id2").text(h);
        //获取id1的内容，获取的内容加到id2里面
	})
</script>

$("").val()或$("").val(str)：获取，设置元素的value值。

<script type="text/javascript">
	$(document).ready(function(){
		var h=$("#input1").val();
		console.log(h);
		$("#input2").val(h);
        //获取input1的value的值，获取的值赋给input2的value
	})
</script>