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

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

2024-08-16 20:57:08   219人阅读

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.想起来的一点基础知识


联系
我们