jQuery操作(二)

一: 操作元素

　　1. 属性操作

　　　　1.1

　　　　　　$("p").text()    

　　　　　　$("p").html()  

　　　　　　$(":checkbox").val()

　　　　1.2

　　　　　　$(".test").attr("tom")                  //获取属性

　　　　　　$(".test").attr("tom","boy")         //修改属性值

　　　　1.3

　　　　　　$(".test").attr("checked","checked")      //修改属性值  

　　　　　　$(":checkbox").removeAttr("checked")   //移除属性

　　　　1.4

　　　　　　 $(".test").prop("checked",true)     //修改属性值  

　　　　1.5

　　　　　　$(".test").addClass("hide")  //为$(".test")对象添加 "hide" class标签

　　　2: 属性:

　　　　　　attr()     //针对自定义属性,查找标签等情况 使用

　　　　　　prop()   //针对于类似input 标签的 checked属性 true false 等情况

 

二: 遍历

<script>
    function func(self) {

                li = [10,20,30,40]
                $.each(li,function(i,x){
                    console.log(i,x) //分别打印索引,值
                })


                dic = {name:"yuan",sex:"male"}
                $.each(dic,function(i,x){
                    console.log(i,x) //打印 key,value
                })

    }

</script>

 

　三: 文档处理　　　　　　

      　　3.1 内部插入  

　　　　　　$("#c1").append("<b>hello</b>")    //该对象插入标签到最后

　　　　　　$("p").appendTo("div")                  //该标签插入到对象后面

                  prepend()    　　　　　　　　　　 //插入到前面

　　　　　　prependTo()

      　  3.2 外部插入  

　　　　　　before()  

　　　　　　insertBefore()  

　　　　　　after

　　　　　　insertAfter()
　　　　3.3 移除

　　　　　　　remove()    //移除标签

　　　　　　　empty()     //清空标签内容

　　　　3.4 复制

　　　　　　  clone()      //复制对象

　　　　3.5 替换

　　              replaceWith()   

　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="outer">
    <div class="item">
         <input type="button" value="+" onclick="fun1(this)">
        <input type="text">
    </div>
    <div class="item">
         <input type="button" value="-" onclick="fun1(this)">
        <input type="text">
    </div>


</div>



<script src="jquery-3.1.1.js"></script>
<script>
     function fun1(self) {
         var Clone=$(self).parent().clone();
         //Clone.children(":button").val("-").attr("onclick","func2(this)");

         $("#outer").append(Clone)
     }
     
     function func2(self) {
         alert(123)
         $(self).parent().remove()
     }
    
    
</script>
</body>
</html>
View Code

 

 

　

　　

　　

 

posted on 2018-03-18 15:45  JieFangZhe  阅读(97)  评论(0)  编辑  收藏  举报

导航