首页 > 代码库 > 2.想起来的一点基础知识

2.想起来的一点基础知识

1.上传文件

    用一个不透明度为0的 <input type="file" />盖在要用户可见的标签(或图片等)上,让用户点击。
用 width height line-height font-size 来控制<input type="file" />右侧浏览按钮的大小。
用 left top (right 、 bottum)来控制<input type="file" />右侧浏览按钮的位置,可以设置为负值。
用z-index来设置它们的层覆盖关系。
form 必须有enctype="multipart/form-data"标记才能上传文件 。

2.jquery对象和dom对象的转换

    $("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码:
document.getElementById("id").innerHTML; 

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; 

3.setInterval和setTimeout

因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 
而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式
所以,完全是不一样的

很多人习惯于将setTimeout包含于被执行函数中,然后在函数外再次使用setTimeout来达到定时执行的目的
这样,函数外的setTimeout在执行函数时再次触发setTimeout从而形成周而复始的定时效果
4.slidedown和slideup
jquery中向下滑动和向上滑动的效果
5.Math.random()
返回一个0-1的随机数。
6.tostring(16)
(1)Array.toString():将数组转换成一个字符串,并且返回这个字符串。
(2)Boolean.toString():将布尔值转换为字符串。
(3)Date.toString():将Date对象转换成一个字符串,采用本地时间。
(4)Error.toString():将Error对象转换成字符串
(5)Function.toString():把函数转换成字符串
(6)Number.toString():将数字转换为字符串。用它的参数指定的基数或底数(底数范围为2-36)。如果省略参数,则使用基数10。当参数值为2时,返回二进制数。

<script type="text/javascript">
var a = 34;
document.write(a.toString() + "<br />");
document.write(a.toString(2) + "<br />");
document.write(a.toString(8) + "<br />");
document.write(a.toString(16) + "<br />");
</script>7.ajax问题

Ajax 应用程序所用到的基本技术:
·HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
·JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。
·DHTML 或 Dynamic HTML,用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
·文档对象模型 DOM 用于(通过 JavaScript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML。
1、从 Web 表单中获取需要的数据。
2、建立要连接的 URL。
3、打开到服务器的连接。
4、设置服务器在完成后要运行的函数。
5、发送请求。

清单 5 中的示例 Ajax 方法就是按照这个顺序组织的:

清单 5. 发出 Ajax 请求
function callServer() {
  // Get the city and state from the web form
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // Only go on if there are values for both fields
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;

  // Build the URL to connect to
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

  // Open a connection to the server
  xmlHttp.open("GET", url, true);

  // Setup a function for the server to run when it‘s done
  xmlHttp.onreadystatechange = updatePage;

  // Send the request
  xmlHttp.send(null);
}
清单 6. 处理服务器响应
function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = http://www.mamicode.com/response;
  }
}
清单 7. 启动一个 Ajax 过程

<form>
<p>City: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25"
       onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>
7.jquery的ajax
$(function(){
    $(‘#send‘).click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $(‘#resText‘).empty();   //清空resText里面的所有内容
                         var html = ‘‘; 
                         $.each(data, function(commentIndex, comment){
                               html += ‘<div class="comment"><h6>‘ + comment[‘username‘]
                                         + ‘:</h6><p class="para"‘ + comment[‘content‘]
                                         + ‘</p></div>‘;
                         });
                         $(‘#resText‘).html(html);
                      }
         });
    });
});




 

2.想起来的一点基础知识