木叶三忍的博客

web开发

Menu Close

Category: 前端开发

Iframe内如何使用父级页面引入的Jquery

现有页面demo1, 代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <button class="btn">点我加载</button><br>
    <iframe id="iframe" src="" frameborder="1"></iframe>
</body>
</html>
<script>
    $(function () {
        $('.btn').on('click', function () {
            $('#iframe').attr('src', '/demo2.html');
        });
    });
</script>

点击demo1下的“点我加载”按钮,将demo2页面嵌入iframe中,demo2页面代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
</head>
<body>
    <button class="redirect">百度一下</button>
</body>
</html>
<script>
$(function () {
    $('.redirect').on('click', function () {
        window.location.href = 'http://www.baidu.com';
    });
});
</script>

demo2页面中,假如要写自己的jquery逻辑,如果不再次在demo2中引入jquery包,报错如下:


demo2.html:17 Uncaught ReferenceError: $ is not defined

解决方案:

在使用jquery之前,加上如下代码:


if (typeof(jQuery) == "undefined") {
    var iframeBody = document.getElementsByTagName("body")[0];
    var jQuery = function (selector) { return parent.jQuery(selector, iframeBody); };
    var $ = jQuery;
}

最终,demo2完整代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
</head>
<body>
    <button class="redirect">百度一下</button>
</body>
</html>
<script>
if (typeof(jQuery) == "undefined") {
    var iframeBody = document.getElementsByTagName("body")[0];
    var jQuery = function (selector) { return parent.jQuery(selector, iframeBody); };
    var $ = jQuery;
}
$(function () {
    $('.redirect').on('click', function () {
        window.location.href = 'http://www.baidu.com';
    });
});
</script>

 

怎样用css制作网页上下左右方向小箭头


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arrows</title>
    <style>
        .right-arrows {
            /*转换为块元素*/
            display: inline-block;
            /*定义4条边均为实线, 且颜色为黑色, 此时看起来是一个黑色小点, 因为没有宽高导致*/
            border: solid black;
            /*width: 5px;*/
            /*height: 5px;*/
            /*border有默认宽度, 在这里重置想要的值, 依次为上、右、下、左*/
            border-width: 0 3px 3px 0;
            /*撑开一些空白区域, 如果不明白可以展开上方的宽高调试, 或者在控制台调试初始化为0, 然后鼠标滚轮增加该值即可看到效果*/
            padding: 3px;
            /*让直角边旋转90度, 即可得到一个方向箭头, 只要修改这个度数为合适的值即可得到4个方向的箭头*/
            transform: rotate(-45deg);*/
        }
    </style>
</head>
<body>
    <div id="container"><i class="right-arrows"></i></div>
</body>
</html>

JQuery判断在select下拉框中是否存在某个指定值的option元素

<select id="test">
	<option value="zhangsan">1</option>
</select>

<script src="jquery.js"></script>
<script>
    $(function () {
    	var res = $('#test').find("option[value='anonymous']");
    	if (res.length > 0) {
    		console.log('yes');
    	} else {
    		console.log('no');
    	}
    });
</script>

Javascript得到当前时间函数, 类似年-月-日 时:分:秒

function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    var hours = date.getHours();
    var minutes = date.getMinutes()
    var seconds = date.getSeconds();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    
    if (hours >= 0 && hours <= 9) {
        hours = "0" + hours;
    }
    
    if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
    }
    
    if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
    }
    
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + hours + seperator2 + minutes
            + seperator2 + seconds;
    return currentdate;
}

nodejs引入外部包含自定义函数的js文件

场景如下:

我有一自定义的js文件, 里面都是自己的一些自定义函数, 便于快速开发的目的, 现在我想在node端引入这个文件。

假如这个文件名为functions.js, 处于和node脚本文件同级目录下的js目录下, 里面有一个得到当前时间的函数, 我想把它引入node, 则需要用下面的形式, 例如:

exports.getNowFormatDate = function () {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    var seconds = date.getSeconds();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    
    if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
    }
    
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + seconds;
    return currentdate;
};

以上写法参照于nodejs的官方文档, 也就是需要将方法添加到指定的exports对象, 参考自: https://nodejs.org/dist/latest-v6.x/docs/api/modules.html

接下来, 在node端去引入和使用:

var helper = require('./js/functions.js');
console.log(helper.getNowFormatDate());

在jquery中触发点击click事件之后禁用mouseover事件

很多时候,当点击一个盒子之后,会展开一个盒子,此时想在点击之后暂时取消被点击盒子的hover事件,下面直接上demo:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Disable mouseout after click</title>
	<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
	<style>
		.sub-box{
			display:none;
			position:absolute;
			top:24px;
			left:-2px;
			width:100px;
			height:50px;
			border:2px solid #DADADA;
		}
		.native{
			position:fixed;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
			width:100px;
			height:24px;
			border:2px solid #DADADA;

		}
		.hover{
			border:2px solid #999;
		}
	</style>
</head>
<body>
	<div class="container native">
		<div class="sub-box"></div>
	</div>
</body>
</html>
<script>
	$(function(){
		$('.container').on({
			'click':function(){
				if($(this).hasClass('hover')){
					$(this).removeClass('hover');
					$('.sub-box').show();
					$(this).unbind('mouseover').unbind('mouseout');
				}else{
					$(this).addClass('hover');
					$('.sub-box').hide();
					$(this).bind('mouseover',function(){
						$(this).addClass('hover');
					});
					$(this).bind('mouseout',function(){
						$(this).removeClass('hover');
					});
				}
			},
			'mouseover':function(){
				$(this).addClass('hover');
			},
			'mouseout':function(){
				$(this).removeClass('hover');
			}
		});
	});
</script>

解决JQuery动态添加的DOM元素无法触发事件

 

<html>
<head>
<style>
.container{
    width:200px;
    height:200px;
    border:1px solid blue;
}

span{
    display:block;
    width:100px;
    height:100px;
    border:1px solid red;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class="container">
</div>
<div class="test"></div>
</body>
</html>
<script>
$(function(){
    $('.container').on('click',function(){
        var str = '<span class="edit-icon"></span>';
        $(this).next().append(str);
    });

    $(document).on('click','.edit-icon',function(){
        alert('hello world!');
    });
})
</script>

解决方案如上图代码,改为$(document)对象,并修改相应参数。

© 2019 木叶三忍的博客. All rights reserved.

Theme by Anders Norén.