jquery

jQuery实现弹幕效果案例

本文实例为大家分享了jQuery实现弹幕效果的具体代码,供大家参考,具体内容如下

效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吐槽弹幕</title>
    
    <script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
    <style>
            html, body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "微软雅黑";
      font-size: 62.5%;
    }
    
    
    

JQuery 计算文本的总宽度(Width)

  • JQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pre>标签,从而可取到文本的大概长度了。

    为什么要用标签而不用其他标签呢,那来看看<pre>标签的特性吧:pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体。 <pre>标签的一个常见应用就是用来表示计算机的源代码。需要注意的地方是,计算文本长度时文本里面最好不要有其他标签。

    以下是实现代码:

        function GetCurrentStrWidth(text, font) {
            var currentObj = $('<pre>').hide().appendTo(document.body);
            $(currentObj).html(text).css('font', font);
            var width = currentObj.width();
            currentObj.remove();
            return width;
        }

    在此提供另外一种实战中验证过的方法: 完全可以用span 标签去替代 pre 标签。 只不过我们要十分注意:要传递正确的font信息(包括:font-family, font-size, font-weight)

    计算文本长度的代码方法:

        function GetCurrentStrWidth(text, font) {
            var currentObj 

jQuery判断当前元素显示状态并控制元素的显示与隐藏

1.jQuery判断一个元素当前状态是显示还是隐藏

$("#id").is(':visible');   //true为显示,false为隐藏

$("#id").is(':hidden');   //true为隐藏,false为显示

if($("#id").is(':hidden')){

//逻辑代码

}

2.jQuery控制css的display

$("#id").show();    //表示display:block

$("#id").hide();   //表示display:none

$("#id").toggle();   //切换元素的可见状态

$("#id").css('display','none');

$("#id").css('display','block');

jquery如何获取标签内容

jquery获取标签内容的方法:1、使用“$('#id').val()”方法获取标签的value值;2、通过“$('#id').text()”方法获取标签中间的文本;3、通过“$('#id').html()”方法获取标签中的html内容。

 

推荐:《javascript基础教程》

使用jquery获得标签的值或元素的内容

$('#标签id').val() 可以用来获取标签的value值,比如 input 标签的value值可以用它获取;
$('#标签id').text()可以用来获取标签中间的文本,比如 <span>值1</span>就可以用它获取到值1;
$('#标签id').html() 可以用来获取标签中间的html内容,比如<div id="div1"><span>123</span></div>可以用$('#div1').html()获取到<span>123</span>;
$('#标签id').attr('属性名')可以用它来获取标签的指定属性的值,比如<a href="xxx.aspx">xxx</a>就可以用.attr('href')获取到xxx.aspx。
jquery提供了三个获得内容的方法: text()、html() 以及 val(),其中前两个可用于解决本问题:
$("label#userid").text(); // 首选,获取label的文本
$("label#userid").html(); // 也可以实现,获取label标签内的所有html标记,一般情况改下label标签内就是文本,所以等效上面的方法

下面给出实例演示:分别使用以上两种方法获取label标签的内容,注意最终结果的区别

创建Html元素

<div class="box">
<span>点击按钮获取label中内容:</span><br>
<div class="content">
<label id="userid">输入用户名</label><input type="text">
</div>
<input type="button" value="获取label中的内容">
</div>

介绍jQuery实现AJAX定时局部页面刷新

不时,我需要某种机制,不断刷新网页,以提供一个实时的仪表板某种。如果我只能刷新一个特定的页面的一部分,这将是很大的,例如:仪表盘上的交通灯显示系统状态。

这是很容易通过使用jQuery JavaScript库,只刷新页面的一部分。一旦我们纳入我们的页面的jQuery库,我们只需要1行的JavaScript得到它的工作:

1
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

所以我们只要我们的页面放入这个小的JS代码片段刷新里面的内容ID标签的一切,让我们说,每5秒:

1
2
3
setInterval(function() {
  $("#content").load(location.href+" #content>*","");
}, 5000);

这就是它!!因此,这是很容易完成一些实时监控的行为,只是那行代码。没有更奇怪的元刷新标记或iframe一种解决方法,在Web应用程序。

每5秒,我们将刷新内容相同的URL和所有元素,驻留在元素ID为content元素的内容:内容。

    

jQuery性能优化指南

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了,  比如我.  jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下:

  1. 总是从ID选择器开始继承
  2. 在class前使用tag
  3. 将jquery对象缓存起来
  4. 掌握强大的链式操作
  5. 使用子查询
  6. 对直接的DOM操作进行限制
  7. 冒泡
  8. 消除无效查询
  9. 推迟到 $(window).load
  10. 压缩js
  11. 全面掌握jquery库