文章目录
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可绑定动态元素事件");
})