Jquary入门（添加修改表单元素）+ JSON+弹框

最新推荐文章于 2022-05-08 17:14:00 发布

weixin_30548917

最新推荐文章于 2022-05-08 17:14:00 发布

阅读量153

点赞数

文章标签： json xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/ordinaryk/p/6248178.html

版权

字符串拼接

计算机语言都是对数据的处理（获取/修改数据）添加元素除了固定的方法添加以外都是 字符串拼接（拼接成固定格式即可执行）。

ＪＱ对象与ＤＯＭ　对象之间转化；

刚开始学习jquery，可能一时会分不清楚哪些是jQuery对象，哪些是DOM对象。至于DOM对象不多解释，我们接触的太多了，下面重点介绍一下jQuery，以及两者相互间的转换。 什么是jQuery对象？ 
---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。 
比如： 
$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 
这段代码等同于用DOM实现代码： 
document.getElementById("id").innerHTML; 
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如：$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。 
还有一个要注意的是：用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象，这两者并不等价。请参看如下说的两者间的转换。 
既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定：如果一个获取的是jQuery对象，那么我们在变量前面加上$，如：var $variab = jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab = DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。 

jQuery对象转成DOM对象： 
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); 
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。 
如：var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中 
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象 
如：var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中 

DOM对象转成jQuery对象: 
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 
如：var v=document.getElementById("v"); //DOM对象 
var $v=$(v); //jQuery对象 
转换后，就可以任意使用jQuery的方法了。 
通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。 

下面是其它的相关使用方法：
1、DOM对象转jQuery对象 
普通的Dom对象一般可以通过$()转换成jQuery对象。 

如：$(document.getElementById("msg")) 
返回的就是jQuery对象，可以使用jQuery的方法。 

2、jQuery对象转DOM对象 
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。 
如： $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5] 

这些都是Dom对象，可以使用Dom中的方法，但不能再使用jQuery的方法。 

以下几种写法都是正确的： 
$("#msg").html(); 
$("#msg")[0].innerHTML; 
$("#msg").eq(0)[0].innerHTML; 
$("#msg").get(0).innerHTML;

ＪＱ对象与DOM对象转化

1.表单添加元素 append（）方法

<select id="sel">	
</select>

<input type="text" id="shuru" />
<input type="button" value="添加" id="btn" />

　　JQ 部分：

$("#a").click(function(){}); 表示添加点击事件，页面加载完毕就已经添加而不是只有点击时才添加

js中字符串赋值給一个值 该值不能加双引号（必须加引号来拼接成固定格式时需要用字符串拼接++） （如果加双引号则表示该值为字符串例如 var a=“eret”； alert（“a”）则输出 a；）该值拼接到字符串里面需要用 ++拼接；在 PHP 中同样使用 {}来解析

$("#btn").click(function(){
    var v = $("#shuru").val();
    //造元素
    var op = document.createElement("option");
    op.setAttribute("value",v);
    op.innerHTML = v;
    
    $("#sel").append(op); //追加
    
})

创建元素的方法

1 $("#btn").click(function(){
2     var v = $("#shuru").val();
3     var str = "<option value='"+v+"'>"+v+"</option>";
4     $("#sel").append(str); //追加
5     
6 })

拼接字符串方法+append（）

2.remove() 方法；这种移除能移除相同页面内所有的相同元素；如果只是移除某一位置的需要 for循环【结合JS里面的父级和子集做】

1 $("#yichu").click(function(){
2         var v = $("#shuru").val(); 
3         
4         $("[value='"+v+"']").remove(); //移除
5 })

移除

3.JSON数组和关联数组联系起来看

 1 <script type="text/javascript">
 2     
 3     var js = {
 4         "one":"hello",
 5         "two":"world",
 6         "three":"汉族"
 7         };
 8     
 9     alert(js.three);
10     
11     //使用foreach的形式来遍历JSON数据
12     for(var k in js)
13     {
14         alert(js[k]);
15     }
16 
17 </script>

JSON

 1 <script type="text/javascript">
 2     
 3     var js = {
 4         "one":"hello",
 5         "two":"world",
 6         "three":{
 7                     "e":"你好",
 8                     "e1":"我好",
 9                     "e2":"大家好"
10                     }
11         };
12     
13     alert(js.three.e2);
14     
15 </script>

json(2)

4. 向按钮上面添加/移除事件（bind/unbind）

<body>


<input type="button" value="挂事件" id="gua" />
<input type="button" value="测试事件" id="ceshi" />
<input type="button" value="移除事件" id="yichu" />

</body>
<script type="text/javascript">


$(document).ready(function(e) {
   
    //点击给测试事件按钮挂一个事件
    $("#gua").click(function(){
            //bind方法用于挂事件
            $("#ceshi").bind("click",function(){
                    alert("挂上了事件");
                });
            
        })
        
    //点击给测试事件按钮移除点击事件
    $("#yichu").click(function(){
            $("#ceshi").unbind("click");
        })
    
});

</script>
</html>

绑定移除事件

5.弹框例题：（需要在安装JQ包的情况下使用） 重点看一下 JS 面向对象的方法【自己研究步骤】

　　　　　　（外部）样式表

.zhuti
{
    position:absolute;
    z-index:3;
    font-size:14px;
    border-radius:5px;
    box-shadow:0 0 5px white;
    overflow:hidden;
    color:#333;
}
.title
{
    background-color:#3498db;
    vertical-align:middle;
    height:35px;
    width:100%;
    line-height:35px;
    text-indent:1em;
}
.close{
    float:right;
    width:35px;
    height:35px;
    font-weight:bold;
    line-height:35px;
    vertical-align:middle;
    color:white;
    font-size:18px;
    }
.close:hover
{
    cursor:pointer;
}
.content
{
    text-indent:1em;
    padding-top:10px;
}
.btnx
{
    height:30px;
    width:100%;
    text-indent:1em;
}
.btn
{
    height:28px;
    width:80px;
    float:left;
    margin-left:20px;
    color:#333;
}
#zz
{
    width:100%;
    height:100%;
    opacity:0.15;
    display:none;
    background-color:#ccc;
    z-index:2;
    position:absolute;
    top:0px;
    left:0px;
}

tanchuang.css

　　　　　　（外部）JS部分

  1 // 每个弹窗的标识
  2 var x =0;
  3 
  4 var idzt = new Array();
  5 
  6 var Window = function(config){
  7     
  8     //ID不重复
  9     idzt[x] = "zhuti"+x;  //弹窗ID
 10     
 11     //初始化，接收参数
 12     this.config = {
 13         width : config.width || 300, //宽度
 14         height : config.height || 200, //高度
 15         buttons : config.buttons || '', //默认无按钮
 16         title : config.title || '标题', //标题
 17         content : config.content || '内容', //内容
 18         isMask : config.isMask == false?false:config.isMask || true, //是否遮罩
 19         isDrag : config.isDrag == false?false:config.isDrag || true, //是否移动
 20         };
 21     
 22     //加载弹出窗口
 23     var w = ($(window).width()-this.config.width)/2;
 24     var h = ($(window).height()-this.config.height)/2;
 25     
 26     var nr = "<div class='zhuti' id='"+idzt[x]+"' bs='"+x+"' style='width:"+this.config.width+"px; height:"+this.config.height+"px; background-color:white; left:"+w+"px; top:"+h+"px;'></div>";
 27     $("body").append(nr);
 28     
 29     //加载弹窗标题
 30     var content ="<div id='title"+x+"' class='title' bs='"+x+"'>"+this.config.title+"<div id='close"+x+"' class='close' bs='"+x+"'>×</div></div>";
 31     //加载弹窗内容
 32     var nrh = this.config.height - 75;
 33     content = content+"<div id='content"+x+"' bs='"+x+"' class='content' style='width:100%; height:"+nrh+"px;'>"+this.config.content+"</div>";
 34     //加载按钮
 35     content = content+"<div id='btnx"+x+"' bs='"+x+"' class='btnx'>"+this.config.buttons+"</div>";
 36     
 37     //将标题、内容及按钮添加进窗口
 38     $('#'+idzt[x]).html(content);
 39     
 40     
 41     //创建遮罩层
 42     if(this.config.isMask)
 43     {
 44         var zz = "<div id='zz'></div>";
 45         $("body").append(zz);
 46         $("#zz").css('display','block');
 47     }
 48     
 49     //最大最小限制，以免移动到页面外
 50     var maxX = $(window).width()-this.config.width;
 51     var maxY = $(window).height()-this.config.height;
 52     var minX = 0,
 53         minY = 0;
 54     
 55     //窗口移动
 56     if(this.config.isDrag)
 57     {
 58         //鼠标移动弹出窗
 59         $(".title").bind("mousedown",function(e){
 60                 
 61                 var n = $(this).attr("bs"); //取标识
 62                 
 63                 //使选中的到最上层
 64                 $(".zhuti").css("z-index",3);
 65                 $('#'+idzt[n]).css("z-index",4);
 66                 
 67                 //取初始坐标
 68                 var endX = 0, //移动后X坐标
 69                     endY = 0, //移动后Y坐标
 70                     startX = parseInt($('#'+idzt[n]).css("left")), //弹出层的初始X坐标
 71                     startY = parseInt($('#'+idzt[n]).css("top")), //弹出层的初始Y坐标
 72                     downX = e.clientX, //鼠标按下时，鼠标的X坐标
 73                     downY = e.clientY; //鼠标按下时，鼠标的Y坐标
 74                     
 75                 //绑定鼠标移动事件
 76                 $("body").bind("mousemove",function(es){
 77                     
 78                     endX = es.clientX - downX + startX; //X坐标移动
 79                     endY = es.clientY - downY + startY; //Y坐标移动
 80                     
 81                     //最大最小限制
 82                     if(endX > maxX)
 83                     {
 84                         endX = maxX;
 85                     } else if(endX < 0)
 86                     {
 87                         endX = 0;
 88                     }
 89                     if(endY > maxY)
 90                     {
 91                         endY = maxY;
 92                     } else if(endY < 0)
 93                     {
 94                         endY = 0;
 95                     }
 96                     
 97                     $('#'+idzt[n]).css("top",endY+"px");
 98                     $('#'+idzt[n]).css("left",endX+"px");
 99                     
100                     window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty(); //取消选中文本
101                     
102                     });
103             });
104         //鼠标按键抬起，释放移动事件
105         $("body").bind("mouseup",function(){
106             
107                 $("body").unbind("mousemove");
108             
109             });
110     }
111     
112     //关闭窗口
113     $(".close").click(function(){
114         
115             var m = this.getAttribute("bs"); //找标识
116             $('#'+idzt[m]).remove(); //移除弹窗
117             $('#zz').remove(); //移除遮罩 
118         
119         })
120         
121         x++;  //标识增加
122         
123 }

tanchuang.js

　　　　　　　主页

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script type="text/javascript" src="jquery-1.11.2.min.js">
 7 </script>
 8 <script type="text/javascript" src="tanchuang.js">
 9 </script>
10 <link href="tanchuang.css" rel="stylesheet" type="text/css" />
11 <style type="text/css">
12 *{
13     margin: 0px auto;
14 }
15 </style>
16 </head>
17 
18 <body style="background-color:#999">
19 <div style="width:200px; margin-top:10px">
20 <input type="button" value="弹出窗口" id="btntc" style="width:100px; height:30px; font-size:18px;" />
21 </div>
22 
23 
24 </body>
25 <script type="text/javascript">
26 $(document).ready(function(e) {
27     
28     $('#btntc').click(function(){
29         
30             var html = "<div style='color:red'>这是测试的弹窗</div>";
31             var button ="<input type='button' value='确定' /><input type='button' value='取消' />";
32 
33             var win = new Window({
34                 
35                 width : 400, //宽度
36                 height : 300, //高度
37                 title : '测试弹窗', //标题
38                 content : html, //内容
39                 isMask : false, //是否遮罩
40                 buttons : button, //按钮
41                 isDrag:true, //是否移动
42                 
43                 });
44         
45         })
46 });
47 </script>
48 </html>