`

判断 页面技巧

    博客分类:
  • 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();


//查看效果


 
分享到:
评论

相关推荐

    如何提高页面响应速度技巧总结

    如何提高页面响应速度技巧总结。哪些因素造成网站响应缓慢?

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

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

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

    主要介绍了JS实现微信里判断页面是否被分享成功的方法,结合实例形式分析了js调用微信接口判断网页分享功能的相关操作技巧,需要的朋友可以参考下

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

    主要介绍了JS判断页面是否出现滚动条的方法,涉及javascript针对页面元素的读取与判定实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    js判断登录与否并确定跳转页面的方法

    主要介绍了js判断登录与否并确定跳转页面的方法,涉及Ajax及session使用的技巧,非常具有实用价值,需要的朋友可以参考下

    word使用技巧大全

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

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

    主要介绍了js判断滚动条是否已到页面最底部或顶部的原理与方法,以实例的形式详细分析了js实现返回顶部功能所涉及的各种技巧,并对相关知识点进行了总结归纳,需要的朋友可以参考下

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

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

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

    主要介绍了JavaScript判断页面加载完之后再执行预定函数的技巧,原理还是利用监听器监听元素事件、被触发则执行函数,需要的朋友可以参考下

    jsp编程技巧集锦

    JSP编程技巧集锦 &lt;br&gt;需要者请联系:e_mail:fzlotuscn@yahoo.com.cn QQ:595563946&lt;br&gt;&lt;br&gt;目 录 &lt;br&gt;1. JSP编程中常用的js技术 2. 在下拉列表框里选择一个值后跳出新窗口? 3. 在JSP中启动execl? 4...

    C#判断页面中的多个文本框输入值是否有重复的实现方法

    主要介绍了C#判断页面中的多个文本框输入值是否有重复的实现方法,是一个非常简单实用的技巧,需要的朋友可以参考下

    C#开发经验技巧宝典

    1034 如何判断线程的状态 606 1035 如何实现线程的同步 607 1036 如何避免死锁 607 22.2 .NET 2.0的新特性 607 1037 如何使用泛型 607 1038 如何使用匿名方法 608 1039 如何使用迭代器 609 1040 如何...

    C#编程经验技巧宝典

    112 &lt;br&gt;0188 如何在ASP.NET中显示当前IE浏览器头信息 113 &lt;br&gt;5.6 其他应用技巧 114 &lt;br&gt;0189 如何判断年份是否为闰年 114 &lt;br&gt;0190 如何根据年份判断十二生肖 114 &lt;br&gt;0191 如何根据IP...

    JS判断当前页面是否在微信浏览器打开的方法

    主要介绍了JS判断当前页面是否在微信浏览器打开的方法,涉及JavaScript针对客户端的相关判定技巧,非常简单实用,需要的朋友可以参考下

    javascript父、子页面交互技巧总结

    if(self==top){//}判断窗口是否处于顶级 if(self==parent){}//也可以 2.1、父页面访问子页面元素。思路是子页面的元素都在其window.document对象里面,先获取它然后就好说了。 帧最好设置name属性,这样操作最方便...

    Visual C++编程技巧精选500例.pdf

    029 如何使用页面设置对话框? 030 如何使用查找与替换对话框? 031 如何设置文件保存对话框? 032 如何设置文件对话框标题? 033 如何设置文件对话框过滤器? 034 如何设置文件对话框多重选择功能? 035 如何设置文件...

    Android开发实现判断通知栏是否打开及前往设置页面的方法

    主要介绍了Android开发实现判断通知栏是否打开及前往设置页面的方法,涉及Android通知栏的打开、判断、设置等相关操作技巧,需要的朋友可以参考下

    WordPres对前端页面调试时的两个PHP函数使用小技巧

    主要介绍了WordPres对前端页面调试时的两个PHP函数使用小技巧,分别是过滤Html内嵌JavaScript与禁止浏览器缓存的方法,需要的朋友可以参考下

Global site tag (gtag.js) - Google Analytics