jquery常用的几种DOM操作

一. DOM获取内容以及设置内容

.val()    获取或设置input中的值
.html()   获取或设置页面上的内容可以带标签符
.text()   获取或设置文本内容

例：

// html代码块
	<body>
		<input type="text" id="myinput" value="张三"><br/>
	    <div id="mydiv"><a href="#"><p>标题标签</p></a></div>
	</body>
// jq代码块
	<script>
	    $(function () {
	        // 获取myinput的value值
	        alert($("#myinput").val()); //获取内容
	        //$("#myinput").val("aaa"); // 设置内容
	
	        // 获取mydiv的标签内容
	        alert($("#mydiv").html());//获取内容
	        //$("#mydiv").html("bbb"); // 设置内容
	
	        // 获取mydiv文本内容
	        alert($("#mydiv").text());//获取内容
	        //$("#mydiv").text("ccc"); // 设置内容
	    });
	    </script>

二. DOM对于元素和属性的操作

attr()         获取/设置元素属性
removeAttr()   删除属性
prop()         获取/设置元素属性
removeProp     删除属性

attr 和 prop的区别
如果操作的是元素的固有属性就用prop (标签自带的叫固有属性)
如果操作的是自定义的属性就用attr (标签没有 自己定义的叫自定义属性)

例：

// html代码块
	<body>
		 <ul>
	        <li id="bj" name="beijing">北京</li>
	        <li id="tj" name="tianjin">天津</li>
   		 </ul>
    	<input type="checkbox" id="hobby" >
	</body>
// jq代码块
	<script>
        $(function () {
            // 获取北京节点的name值
            alert($("#bj").attr("name"));

            // 设置北京节点的name属性为aaa
            //$("#bj").attr("name","aaa");

            // 新增北京节点的discription属性，属性值是didu
            //$("#bj").attr("discription","didu");

            // 删除北京节点的name属性并且检查name是否存在
            //$("#bj").removeAttr("name");

            // 获得hobby的选中状态
            //alert($("#hobby").prop("checked"));
        });
    </script>

三. DOM对于属性样式的操作

addClass()         添加元素样式
removeClass()      删除元素样式
toggleClass()      切换元素样式

例：

// html代码块
	<body>
	    <input type="button" id="b1" value="采用属性增加样式(改变id=one的样式)">
	    <input type="button" id="b2" value="addClass">
	    <input type="button" id="b3" value="removeClass">
	    <input type="button" id="b4" value="切换样式">
	    <input type="button" id="b5" value="通过css()获取id为one的背景颜色">
	    <input type="button" id="b6" value="通过css()设置id为one的背景颜色为红色">
	    <div id="one"></div>
	</body>
// css
	<style>
	        div{width:100px; height: 100px; background-color: darkgray}
	        .aaa{width: 300px; height: 300px; background-color: pink}
	</style>
// jq代码块
	<script>
	        $(function () {
	            //<"采用属性增加样式(改变id=one的样式)">
	            $("#b1").click(function () {
	               $("#one").prop("class","aaa");
	            });
	
	            //<"addClass">
	            $("#b2").click(function () {
	               $("#one").addClass("aaa");
	            });
	
	            //<"removeClass">
	            $("#b3").click(function () {
	               $("#one").removeClass("aaa");
	            });
	
	            //<"切换样式">
	            $("#b4").click(function () {
	               $("#one").toggleClass("aaa");
	            });
	
	            //<"通过css()获取id为one的背景颜色">
	            $("#b5").click(function () {
	               alert($("#one").css("backgroundColor"));
	            });
	
	            //<"通过css()设置id为one的背景颜色为红色">
	            $("#b6").click(function () {
	              $("#one").css("backgroundColor","red");
	            });
	        });
	    </script>

四. DOM对于元素位置操作

after()	       将元素插入到某个元素的后面
before()          将元素插入到某个元素的前面
append ()         将元素添加到某个元素的后面
prepend()         将元素添加到某个元素的前面
remove()          删除元素
empty()		   删除一个元素下所有的子节点元素

例：

// html代码块
	<body>
	    <input type="button" id="b1" value="将瓜皮放到ul的后面">
	    <input type="button" id="b2" value="将瓜皮放到ul的前面">
	    <input type="button" id="b3" value="将瓜皮插入到河南的后面">
	    <input type="button" id="b4" value="将瓜皮插入到河南的前面">
	    <input type="button" id="b5" value="删除<li id='bj'>北京</li>">
	    <input type="button" id="b6" value="删除ul下的所有li节点，不包含属性节点">
	
	    <ul id="aaa">
	        <li id="bj">北京</li>
	        <li id="tj">天津</li>
	        <li id="hn">河南</li>
	        <li id="ny">南阳</li>
	    </ul>
	
	    <ul>
	        <li id="dl">大佬</li>
	        <li id="gp">瓜皮</li>
	    </ul>
	</body>
// jq代码块
	    <script>
        /*
        * create 和 append 和 remove
        *
        * */
        $(function () {
            //<"将瓜皮放到aaa的后面">
            $("#b1").click(function () {
               $("#aaa").append($("#gp"));  // 这些都可以相互反着来用 会有不一样的收获
            });
            //<"将瓜皮放到ul的前面">
            $("#b2").click(function () {
                $("#aaa").prepend($("#gp"));
            });
            //<"将瓜皮插入到河南的后面">
            $("#b3").click(function () {
                $("#hn").after($("#gp"));
            });
            //<"将瓜皮插入到河南的前面">
            $("#b4").click(function () {
                $("#hn").before($("#gp"));
            });
            //<"删除<li id='bj'>北京</li>">
            $("#b5").click(function () {
                $("#dl").remove();
            });
            //<"删除ul下的所有li节点，不包含属性节点">
            $("#b6").click(function () {
                $("#aaa").empty();
            });
        });

    </script>