本文介绍了JavaScript和JQuery中的关键交互操作，包括如何使用$(document).ready()和$(function())初始化函数，利用window.open()和window.opener进行子窗口与父窗口的通信，以及如何将父层页面的数据传递到子窗口。此外，还探讨了自定义JQuery方法$.fn.method()的创建和使用，以及JQuery中的事件处理，如click事件的多种绑定方式，包括addEventListener()、bind()和on()方法，同时涉及了window.event对象的keycode属性。
文章目录
1 方法函数
1.1 初始化函数
1.1.1 JS
常用的是
$(document).ready(function(){
//code...
});
1.1.2 JQUERY
$(function(){
//code...
});
1.2 子窗口和父窗口
1.2.1 window.open
用法：打开一个新的浏览器窗口或查找一个已命名的窗口。
语法： window.open(URL,name,specs,replace)
后两个参数是自页面的尺寸。
1.2.2 window.opener
概念：opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。当使用window.open()打开一个窗口，您可以使用此属性返回来自目标窗口源（父）窗口的详细信息。
1.2.3 区别
(1) window.open()是一个方法，它打开一个新的浏览器窗口。
(2) window.close()是一个方法，它关闭浏览器窗口。
(3) window.opener是一个对象，它是指打开当前窗口的窗口。
例如,在窗口a中用window.open()打开了一个窗口b,那么在b中，window.opener就是指a窗口。
1.2.4 将父层页面的数值传到子窗口 - 数据回显
如有父层页面如下所示：
// 父页面 主干代码
<script>
function openWin(){
window.open("../childPage.phtml",'','width=500,height=500');
}
</script>
<body>
<input type="text" id="fatherPageId" value="fatherValue"><br><br>
<input type="submit" id="JumpPage" value="跳转页面" onclick="openWin();"><br><br>
</body>
/*=============================分割线==================================*/
// 子页面 主干代码
<script>
$(function(){
// 从父页面的id拿到值赋值给子页面id的值
var fatheValue = window.opener.$('#fatherPageId').val();
$('#childPageId').val(fatheValue);
});
</script>
</head>
<body>
<input type="text" id="childPageId" value="1"><br><br>
</body>
1.3 自定义方法
1.3.1 $.fn.method()
(1) 理解： $.fn.method()中的method()是你的自定义函数。
在 jQuery 中，fn 其实就是 JavaScript中 propotype 的一个别名，$ 是 jQuery 的别名。
$.fnmethod() 表示创建一个 jQuery 的属性，通俗的说是写一个 jQuery 函数。
(2) 提示：在写$.fn.method()时，里面要用$(this)进行Dom的绑定。
(3) 使用的具体方法如下所示。
<script>
$.fn.testDisplay = function() {
if($(this).val() == "test1"){
console.log("方法进来了!");
return true;
}else{
return false;
}
}
</script>
<body>
<input type="text" id="test1" value="test1"><br><br>
<input type="text" id="test2" value="test2"><br><br>
</body>
2. JQuery 事件
2.1 事件对象和方法
(1) 事件对象：当我们进行一个事件的时候，系统会帮助我们记录这个事件的很多信息（比如：鼠标位置，按键信息)
(2) 事件方法：事件方法触发器或添加一个函数到被选元素的事件处理程序。
具体详见链接。
$("#eventId").click(function(event) {
console.log( event.pageX + ", " + event.pageY );
});
2.1.1 常用事件对象的属性
| 属性 | 含义 |
|---|---|
| event.type | 触发元素的事件类型 |
| event.pageX | 鼠标相当于页面的横轴 |
| event.pageY | 鼠标相当于页面的纵轴 |
2.2 JS - 事件监听 - addEventListener()
addEventListener():可以在同一个元素中添加不同类型的事件,添加的事件不会覆盖已存在的事件。
注意 : 不能用 $('#') 因为 addEventListener 是 js方法。
<script>
document.getElementById("myBtn").addEventListener("click", myClickOne);
document.getElementById("myBtn").addEventListener("click",myClickTwo);
document.getElementById("myBtn").addEventListener("mouseover",myMouseover);
function myClickOne(){
console.log("点击触发第一个事件");
}
function myClickTwo(){
console.log("点击触发第二个事件");
}
function myMouseover(){
console.log("你刚刚鼠标经过了按钮");
}
</script>
<body>
<button id="myBtn">测试按钮</button>
</body>
2.3 window.event 对象
2.3.1 Keycode
window.event.keycode 是控制键盘录入的方法。
$(function(){
$(window).keydown( function(e) {
if(event.keyCode==13){ // 代表键盘Enter
console.log('回车被摁下!');
}
});
});
3 其他
3.1 click绑定事件
3.1.1 在html标签里添加事件
设置一个onclick的方法test()，缺点是html和js相耦合。
<input id="btn" type="button" value="点我" onclick="test();" />
3.1.2 使用jq的click方法绑定
$("#btn").click(function(){
alert("jquery使用click绑定事件");
})
3.1.3 使用jq的bind方法绑定
(1) 定义：bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
(2) 语法:
$(selector).bind(event,data,function,map)
例子 1：
<body>
<script>
$(document).ready(function(){
$("#btn").bind("click",function(){
alert("bind绑定事件生效");
});
});
</script>
<input id="btn" type="button" value="测试按钮"/>
</body>
例子2：
$(document).ready(function(){
$("#btn").bind("click", searchData);
});
function searchData() {
alert("绑定点击事件");
};
(3) 关于jQuery用bind动态绑定事件无效的处理：
bind的特点就是会把监听器绑定到目标元素上，但只有在静态的情况下比较好用,但当页面内容属于动态加载的时候，bind事件就存在一个bug, 只能bind一次，当你第二次触发事件的时候就没用了。
3.1.3.1 对应的移除方法unbind()
(1) 定义和用法
unbind() 方法移除被选元素的事件处理程序。
该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。
该方法也可以通过 event 对象取消绑定的事件处理程序。该方法也用于对自身内部的事件取消绑定（比如当事件已被触发一定次数之后，删除事件处理程序）。
注意：如果未规定参数，则 unbind() 方法会删除指定元素的所有事件处理程序,unbind() 方法适用于任意由 jQuery 添加的事件处理程序。
自 jQuery 版本 1.7 起，on() 和 off() 方法是在元素上添加和移除事件处理程序的首选方法。
(2) 注意：绑定click事件时，最好先用unbind
$("#test").unbind("click").click(function(){
alert("先用unbind，在绑定");
});
3.1.4 使用jq的on方法绑定
$("#btn").on("click",function(){
alert("jquery使用on绑定事件");
}
3.1.5 使用jq的可绑定动态元素的on方法绑定
$("body").on("click","#btn", function () {
alert("jquery使用on可绑定动态元素事件");
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
