jQuery介绍 DOM对象和jQuery对象的转换与区别

jQuery介绍 DOM对象和jQuery对象的转换与区别

jQuery介绍

     jQuery: http://jquery.com/      write less, do more.  

jQuery Hello World程序

     

$(document).ready和window.onload的比较

     首先看window.onload: 
window.onload = sayHello;
window.onload = sayWorld;

function sayHello() {
    alert("Hello");
}
function sayWorld() {
    alert("World");
}
     后面的方法会覆盖掉前面的方法,也即弹泡最后只显示一个,即World的那个.        如果采用$(document).ready,则方法会串联起来,即先显示Hello的alert,再显示World的. 
$(document).ready(sayHello);
$(document).ready(sayWorld);

function sayHello() {
    alert("Hello");
}
function sayWorld() {
    alert("World");
}
     这样就可以关联多个方法.      另一个很小的差别,就是ready方法的执行会稍微靠前一点.widow.onload会等待DOM准备好,并且所有绑定结束,而ready只能DOM准备好,其他工作可能还没有做好.    

实例:给每一个超链接对象附加onclick事件

     首先,body中添加多个超链接对象: 
<body>
    <a href="#">test1a><br>
    <a href="#">test2a><br>
    <a href="#">test3a><br>
    <a href="#">test4a>
body>
　　要给每个对象添加onclick事件,可以有多种方法: 　　首先,可以在每个a标签里面写onclick属性; 　　其次,可以利用window.onload添加一个方法,获取所有的标签,统一添加事件,如下: 
window.onload = function () {
    var myLinks = document.getElementsByTagName("a");
    for(var i = 0; i < myLinks.length; ++i){
        myLinks[i].onclick = function(){
            alert("Hello link: " + i);
        }
    }
}

    

     注意,这里我犯了一个错误,我本来以为alert的数目会递增,结果实际运行的结果是每一个alert都是4.      这是因为js没有块级作用域,变量i引用的是for里的那个,循环后变成了4.也即,onclick事件发生的时候才去取i的值,当然都是4了.        下面用jQuery实现这一功能: 
$(document).ready(function () {
    $("a").click(function () {
        alert("Hello link from jQuery!");
    });
});
　　jQuery中的$()符号会获得页面当中的所有合适的元素. 　　所以上面的代码隐含了遍历的过程,给每一个元素都加上了事件处理函数. 　　click方法是jQuery对象提供的方法. 　　onclick是DOM对象的属性. 　　DOM里面的很多属性到jQuery里面就变成了方法.    

DOM对象和jQuery对象之间的相互转换与区别

     看一个例子,首先加一个p标签: 
<p id="clickMe">Click Me!p>
     先获得一个DOM对象,然后将其转换为一个jQuery对象: 
//Part 1: DOM --> jQuery
//DOM object:
var pElement = document.getElementsByTagName("p")[0];
alert("DOM pElement: " + pElement.innerHTML);
//Convert DOM object to jQuery object:
var pElementjQuery = $(pElement);
alert("jQuery pElementjQuery: " + pElementjQuery.html());
     也可以先获得一个jQuery对象,再将其转换为DOM对象: 
//Part 2: jQuery --> DOM
//jQuery object array:
var clickMejQuery = $("#clickMe");
//Convert jQuery object to DOM object (2 ways):
//way 1:
var domClickMe1 = clickMejQuery[0];
alert("dom1: " + domClickMe1.innerHTML);

//way 2:
var domClickMe2 = clickMejQuery.get(0);
alert("dom2: " + domClickMe2.innerHTML);
     再次注意:jQuery中$()获取的是一个满足条件的所有元素的数组.        小总结: 　　$(“字符串”)会返回满足条件的所有元素的一个数组,其中: 　　字符串以#开头,表示id; 　　字符串以.开头,表示CSS的class名; 　　若非以上两种情况,则改字符串表示标签名.   　　$(DOM对象)可以得到一个jQuery对象.              

参考资料:

     jQuery官网:http://jquery.com/      jQuery API:http://api.jquery.com/      jQuery UI demos: http://jqueryui.com/demos/      w3school jQuery教程:http://www.w3school.com.cn/jquery/index.asp      圣思园张龙老师JavaWeb视频教程65.
jQueryJavaScriptweb

相关

【OF框架】定义框架标准WebApi，按照规范返回状态信息及数据信息

JavaWeb的三大作用域

nginx下配置多个web服务

一、Asp.Net Core WebAPI——修改默认监听端口

WEBAPI AuthenticateAttribute 基于Basic 验证

腾讯云服务器简单配置web项目

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

javascript基础知识(29) 实现继承的方式

HBuilder webApp热更新（在线升级）的实现

nginx反向代理websocket wss或ws端口

webrtc编译

jQuery 留言表单验证

标签