`
comasp
  • 浏览: 28594 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

关于jQuery的html()方法研究.

阅读更多
    
大家都知道使用下面的代码
jQuery("#cssrain").html("Hello jQuery!");
能设置id为cssrain元素的html代码。

但你想过为什么jQuery支持这种写法呢?如果要你实现能完成吗?
这篇文章我就来讲解下吧自己的思路吧。
    



上图所示代码,我把代码分为两部分(A和B),如下图所示:




上图最终可以简化为 : A.B;

接下来我们就可以开始用JavaScript来实现 A.B;
先看一个例子:
function Test(val){
?? this.B = val;
}
var A = new Test("CssRain");
alert(A.B);

运行结果会输出 CssRain .
很显然实现A.B是非常简单的,通过定义一个函数,然后给函数设置一个B的属性,最后通过new构造即可。

A.B实现后,接下来我们把刚才的图再次分解,如下所示:



我们把刚才的代码分为了四个部分(A,B,C,D)。

首先我们看A和B部分:
前面我们实现了A.B,代码如下:
function Test(val){
?? this.B = val;
}
var A = new Test("CssRain");
alert(A.B);

如果要实现 A(参数).B ;

我们需要为
var A = new Test("CssRain"); 这段话传递一个参数。
如何传参数呢?
var A = function(val){
?? new Test(val);
}
这样吗?显然不行,因为我们需要调用Test函数里的方法,如果不把new Test(val)的值返回给A,那么A(参数).B肯定会报 函数A没有B属性。
正确代码如下所示:
var A = function(val){
?? var new_A = new Test(val);
?? return new_A;
}
也可以直接这样:
var A = function(val){
?? return new Test(val);
}
此时,A就可以调用属性B了。
完整代码如下:
function Test(val){
?? this.B = val;
}
var A = function(val){
?? return new Test(val);
}
alert(?? A("CssRain").B?? );

此时我们已经完成了 A("CssRain").B;
跟jQuery("#cssrain").html("Hello jQuery!");对比下,好像已经有点像了。
代码前面的A("CssRain")跟jQuery("#cssrain")非常相似了。不过后面的B和html("Hello jQuery!")则差远了,所以接下来需要把这个也完成。

前面我们已经实现了A("CssRain").B,代码如下:
function Test(val){
?? this.B = val;
}
var A = function(val){
?? return new Test(val);
}
alert(?? A("CssRain").B?? );

如果要实现A("CssRain").B(参数);那么必须改造
function Test(val){
?? this.B = val;
}
既然要传参数,那么肯定需要用到函数之类的,所以我把B改成一个匿名的函数:
function Test(id){
?? this.B = function(val){
        document.getElementById(id).innerHTML = val;
?? };
}
最终代码为:
function Test(id){
?? this.B = function(val){
        document.getElementById(id).innerHTML = val;
?? };
}
var A = function(val){
?? return new Test(val);
}
A("CssRain").B("hello world!");

本段代码中的A("CssRain").B("hello world!");跟jQuery("#cssrain").html("Hello jQuery!");是不是非常相似了呢。是的,已经非常相似了,不过我们还需要把 id 中的“#”号处理下。
function Test(id){
?? this.B = function(val){
        document.getElementById(??id.replace(/#/, "")??).innerHTML = val;
?? };
}
最后只要将 A和 B替换成 jQuery和html即可。
最终代码如下:
function Test(id){
?? this.html = function(val){
        document.getElementById( id.replace(/#/, "") ).innerHTML = val;
?? };
}
var jQuery = function(val){
?? return new Test(val);
}
jQuery("#CssRain").html("hello world!");

至此,关于jQuery的html()方法就介绍完了,不知道大家学会了吗?
jQuery其他的方法都大同小异,大家有兴趣可以去看看。新手么,就不要去看了,先把基础学好。


源码下载:
下载文件 点击下载此文件


http://www.CssRain.cn

分享到:
评论

相关推荐

    jquery-1.7.1.min.js

    《jQuery 1.7.1:JavaScript 动态交互的核心》 在JavaScript的世界里,jQuery是一个不可或缺的库,它极大地简化了DOM操作、事件...无论你是前端开发新手还是经验丰富的专家,jQuery 1.7.1都是值得深入研究的经典之作。

    拾色器jquery-color.picker.js

    然后,通过jQuery的选择器找到需要添加颜色选取功能的元素,并调用插件的方法。例如,我们可以这样使用: ```html <!DOCTYPE html> <html> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>...

    [jQuery移动开发].(jQuery.Mobile).Jon.Reid.文字版

    ### 关于《jQuery Mobile》一书的知识点梳理 #### 标题解读:[jQuery移动开发].(jQuery.Mobile).Jon.Reid.文字版 - **jQuery Mobile**:这是一本介绍如何利用jQuery Mobile框架进行移动应用开发的专业书籍。 - **...

    jquery-1.12.4.zip

    《jQuery 1.12.4:高效前端开发的关键库》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了HTML文档...通过下载并研究这个压缩包中的文件,你可以深入了解jQuery的工作原理,从而更好地应用到实际项目中去。

    jquery-timepicker.js

    `jquery-timepicker.js` 提供了一些事件和方法,可以用来监听用户操作或进行动态控制。例如,监听选中事件: ```javascript $('#timePicker').on('selectTime', function(event, time) { console.log('Selected ...

    前端项目-jquery.quicksearch.zip

    然后,通过jQuery选择器找到要添加搜索功能的元素,调用`.quicksearch()`方法,并传入适当的配置选项。例如: ```html <script src="path/to/jquery.js"> <script src="path/to/jquery.quicksearch.js"> <!-- ...

    不使用flash播放器,使用jquery播放flv视频.zip

    标题中的“不使用flash播放器,使用jquery播放flv视频.zip”表明了这个压缩包包含的资源是关于在网页中使用jQuery技术而非Flash播放FLV视频的方法。Flash曾是流媒体视频的标准,但随着HTML5的普及,Flash逐渐被淘汰,...

    jquery1.7_20111204.rar

    jQuery提供了一系列方法用于DOM操作,如`.append()`、`.prepend()`用于插入元素,`.remove()`用于删除元素,`.html()`、`.text()`用于获取或设置元素内容。这些方法使得DOM操作变得简单直观。 四、事件处理 jQuery...

    jquery-3.5.1.rar

    《jQuery 3.5.1:前端开发的强大工具》 jQuery,这个小巧而强大的JavaScript库,自2006年发布以来,一直是前端开发者的重要工具。...因此,无论你是初学者还是经验丰富的开发者,都值得深入研究和掌握jQuery。

    jquery3D饼状图.zip

    开发者可以通过学习和研究这个示例,掌握如何使用jQuery和FusionCharts来创建具有交互性的3D饼状图,进一步提升自己的数据可视化技能。 总之,"jquery3D饼状图.zip"项目展示了如何通过jQuery和FusionCharts库来实现...

    jQuery.jPlayer播放器全面.2.0.0.demos.zip

    在深入学习jQuery.jPlayer时,可以通过解压并查看压缩包中的"jQuery.jPlayer.2.0.0.demos"目录,逐个研究每个示例的HTML、CSS和JavaScript代码,理解其工作原理,并根据自身项目需求进行定制。通过这种方式,开发者...

    jquery1.8.3_api.chm

    在jQuery 1.8.3和1.4之间,有一个显著的变化是`.data()`方法。在1.8.3中,`.data()`更加强大,不仅可以存储和检索元素的数据,还可以自动处理数据的序列化和反序列化。而在1.4中,`.data()`的功能相对较弱,主要用于...

    jquery动态背景效果.rar

    在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务...通过研究这个项目,你可以深入理解jQuery的动画机制,以及如何将静态的网页元素转化为生动的视觉体验。

    jquery-1.12.4.zip下载

    《jQuery 1.12.4:高效前端开发的得力助手》 jQuery,作为一款广泛使用的JavaScript...因此,如果你还没有尝试过jQuery,或者正在寻找一个可靠的版本来支持你的项目,那么这个压缩包无疑是一个值得下载和研究的选择。

    jQuery进度条插件circleChart.js.zip

    接着,通过调用jQuery的选择器和circleChart方法,指定参数来配置进度条的样式和行为,例如颜色、半径、起始角度、结束角度等。 例如,以下代码展示了如何创建一个基本的圆形进度条: ```html <!DOCTYPE html> ...

    jQueryAPI-100214.zip_jQueryAPI-100214_javascript

    通过深入研究 `jQueryAPI-100214.chm`,开发者可以全面掌握jQuery的基本用法,提升JavaScript开发效率,编写出更加优雅、高效的代码。无论你是初学者还是经验丰富的开发者,这份文档都是一个不可或缺的参考资料。

    jQuery+mousescroll.js自定义美化div滚动条插件.zip

    本篇将详细解析“jQuery+mousescroll.js”这个插件,帮助开发者理解其工作原理并掌握其实现方法。 一、jQuery基础 jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。...

    第七讲.(下)Jquery.Mobile插件.scroll.js.下拉更新插件

    通过使用JqueryMobile,开发者可以快速构建具有移动优化功能的网页,而无需深入研究每个设备的特定API。 `scroll.js`插件是Jquery.Mobile的一个扩展,专门处理页面滚动事件。它引入了一个下拉刷新(Pull-to-Refresh...

    jquery-1.8.3.js.zip

    5. **动画效果**:jQuery的`.animate()`方法可以创建平滑的CSS属性过渡动画。`$("div").slideUp(500);`会使div元素向上滑动消失,持续500毫秒。 6. **Ajax交互**:`$.ajax()`和`$.get()`、`$.post()`等函数简化了...

    wap站基于Html5和jquery-mobile的demo,去除jquery-mobile.css

    在这个项目中,我们探讨了一个基于HTML5和jQuery Mobile构建的WAP站Demo,重点是去除官方的`jquery-mobile.css`,以实现自定义的视觉效果。 HTML5是现代Web开发的标准,它引入了许多新的元素和特性,如语义化标签...

Global site tag (gtag.js) - Google Analytics