`

判断 页面技巧

    博客分类:
  • html
阅读更多

js:
if (document.getElementById("test1-header")){ 
  $("#test1-header").click();
}



jquery:
if($('#container').length){
  $('#log').append('#container存在页面中'); //使用$('#container').length来判断id="container"的元素是否存在,存在则>
}


判断页面元素是否可见  
相关代码:

if($('#container').is(':visible')){ //如果需要判断是否隐藏,请使用is(':hidden')
  $('#log').append('#container元素可见');
}else{
  $('#log').append('#container元素不可见');
}
友情提示:这里方法只能判断display:none情况下的元素是否可见,如果使用opacity:0或者visibility:hidden,不能使用上面方法来判断元素是否可见


替换页面中的特定元素  
相关代码:



$('#container').replaceWith('<b>新元素</b>'); //替换为<b>..</b>元素




找到页面中无子元素并且为空的DOM元素  相关演示
相关代码:

$(':empty').each(function(i, item){
  $('#log').append('<p>' + item + '</p>');
});




type来判断数据类型:
/*Javascript代码片段*/

var $log = $('#log');

$log.append('<p>jQuery .type :' + $.type(new Number(8)) + '</p>');

$log.append('<p>javascript typeof :' + typeof(new Number(8)) + '</p>');


/*
 *  以上代码看到jQuery的.type方法可以返回数据具体类型,而javascript的typeof则返回object,使用jQuery的.type更智能一些
 */

将包含破折号的字符串转化为驼峰拼写方式字符串  相关演示
var dashstring = 'background-color';
$('#log').append($.camelCase(dashstring)); //这里可以看到background-color被转化成了backgroundColor



使用jQuery的clone方法来复制元素及其事件  相关演示
相关代码:

$('#original').clone(true).text('克隆按钮').appendTo('body'); //注意这里clone方法中的参数true/false代码是否克隆元素相关的全部事件
 



/*Javascript代码片段*/


//定义一个方法:这个方法控制浏览器页面背景色的切换变化

function myfunction(){
  $('body').toggleClass('bgcolor');
}


//添加监控页面窗口变化的方法

$(window).resize(myfunction);

//并且在页面加载时即调用
myfunction();


//查看效果


 
分享到:
评论

相关推荐

    JS判断页面是否出现滚动条的方法

    对于JavaScript来说,判断页面是否出现了水平或垂直滚动条是一个常见需求,这涉及到DOM元素的读取和判断技巧。本文将详细介绍如何用JavaScript来判断页面是否出现滚动条,并给出相应的实现方法。 首先,我们需要...

    JavaScript中判断页面关闭、页面刷新的实现代码

    今天由于项目需要判断用户离开页面时要判断用户的行为是关闭还是刷新 虽然没有直接的方法,但通过一定的技巧也能做到 不得不感叹JavaScript的强大!! 请看一下代码: 代码如下: [removed] = function(){   var a...

    JS实现微信里判断页面是否被分享成功的方法

    在网页开发中,判断页面是否被成功分享是一个常见的需求,尤其是在涉及到用户传播分享的场景中。本知识点将详细解析如何利用JavaScript(JS)在微信环境下实现页面分享后的判断逻辑,以及如何处理分享的回调结果。 ...

    jquery页面特效通过判断屏幕分辨率页面宽屏显示

    在这个项目中,我们将探讨如何使用 `jQuery` 来判断屏幕分辨率,并根据不同的分辨率实现宽屏显示的页面特效。 首先,我们需要引入 `jQuery` 库到我们的HTML文件中。这通常可以通过在`&lt;head&gt;` 标签内添加以下代码来...

    html判断当前页面是否在iframe中的实例

    **二、判断页面是否在iframe中的方法** 要判断当前页面是否在`iframe`中,我们可以利用JavaScript的窗口对象(Window Object)的一些属性。具体来说,这里用到的是`self`和`top`两个对象。 1. `self`:代表当前窗口...

    js判断滚动条是否已到页面最底部或顶部实例

    为了更准确地判断页面是否有垂直滚动条,我们需要从offsetHeight中减去4个像素(考虑到浏览器边框通常为2像素,双侧共4像素): ```javascript if (document.documentElement.clientHeight ) { // 存在垂直滚动条...

    常用JS脚本页面判断

    在JavaScript中,页面判断是网页开发中不可或缺的一部分,主要用于数据验证、用户交互和浏览器兼容性处理。以下是对标题和描述中涉及的知识点的详细说明: 一、验证类 1. 数字验证: - 整数:使用正则表达式`/^(-|...

    操作系统页面置换算法课程设计

    实现LRU通常需要维护一个页面访问历史记录,以判断页面的使用频率。 2. 先进先出(FIFO,First In First Out):简单地按照页面进入内存的顺序进行替换,即最早进入内存的页面最先被替换出去。然而,FIFO容易引发...

    JavaScript判断页面加载完之后再执行预定函数的技巧

    本文将探讨如何在JavaScript中判断页面加载完成后执行预定的函数,以及使用监听器和`window.onload`事件来实现这一目标。 首先,传统的做法是在HTML元素中直接内联JavaScript,如通过`onclick`属性触发函数。例如:...

    十大高明的Google搜索技巧

    4. **评估搜索结果**:查看返回的页面列表,判断是否符合你的需求。如果不满意,可以调整搜索请求再次尝试,或者尝试其他搜索引擎。 5. **浏览相关页面**:从搜索结果中选择最相关的页面进行浏览。 6. **保存...

    判断iframe里的页面是否加载完成

    然而,为了实现更复杂的交互功能,如在父页面与`iframe`页面之间进行通信或者在`iframe`加载完成后执行某些操作,我们需要能够判断`iframe`内的页面是否已经完全加载。本文将详细介绍如何使用JavaScript来检测`...

    详解JS判断页面是在手机端还是在PC端打开的方法

    本文将详细介绍使用JavaScript(JS)来判断页面是在手机端还是PC端打开的方法。 ### 利用Navigator对象 Navigator对象是一个可以通过JavaScript访问的接口,它提供了有关浏览器和设备的信息。在这个对象中,我们...

    两个数判断:小于、大于、等于程序(VB6.0代码编写)

    在实际编程中,理解并熟练运用这些基础的逻辑判断和函数封装技巧,能够帮助你解决许多实际问题,无论是简单的数值比较还是复杂的业务逻辑,都能游刃有余。而VB6.0作为经典的编程工具,虽然已经有些年代,但其基本...

    word使用技巧大全

    3分节后的页面设置 11 4分节与页码编号 11 5分节后文档的页眉与页脚的设置方法 11 十五、Word模版的使用 11 十六、Word技巧----Office大赛作品 12 ★输入其他语种特殊符号的方法 12 1.插入符号法 12 2.利用软键盘...

    JSP实用技巧集合,jsp编程的一些小技巧总结

    jsp编程的一些小技巧总结,绝对实用。包括JSP编程中常用的js技术。 1.JSP编程中常用的js技术 2. 在下拉列表框里选择一个值后跳出新窗口? 3. 在JSP中启动execl? 4. 两级下拉列表框联动菜单? 5. java中如何把一个目录...

    用JS判断浏览器刷新还是关闭

    ### 如何用JavaScript判断浏览器是刷新...总结而言,虽然直接通过 JavaScript 判断页面是被刷新还是被关闭存在一定的局限性,但通过巧妙地利用现有的事件和属性,结合适当的逻辑判断,我们可以较为准确地实现这一功能。

    ThinkPHP5 自定义配置页面(静态文件)

    - 如果想要更动态的404页面,可以在`render()`方法中判断错误类型,如果是404错误,则加载并渲染这个自定义视图。 4. **配置文件设置**: - ThinkPHP5允许我们在配置文件中定义错误页面。在`config.php`中,可以...

    jsp 页面上图片分行输出小技巧.docx

    JSP 页面图片分行输出小技巧 JSP(Java Server Pages)是一种广泛应用于 Web 开发的技术,它允许开发者在 HTML 文档中嵌入 Java 代码,以生成动态的 Web 内容。今天,我们来讨论如何在 JSP 页面上实现图片的分行...

    csrf绕过Referer技巧-01

    CSRF绕过Referer技巧详解 CSRF(Cross-Site Request Forgery,跨站请求伪造)是一种常见的Web攻击方式,攻击者可以通过构造恶意页面诱骗用户执行非法操作。为了防御CSRF攻击,Web开发者通常会使用Referer头来判断...

Global site tag (gtag.js) - Google Analytics