基础格式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="js/jquery-1.12.4.js"></script><script>//原生js入口函数window.onload() = function(ev){console.log("hello word");}//jQuery入口函数，拿到界面中的DOM元素$(document).ready(function() {alert("hello word!");});</script></head><body></body></html>
1、原生js和jQuery入口函数加载的模式不同。
原生js会等到dom元素加载完毕，并且图片页加载完毕才会执行
jQuery会等到dom元素加载完毕，但不会等到图片加载完毕就会执行
2、原生js如果写了多个入口函数，则后面的会覆盖前面的
jQuery中编写多个入口函数，后面的不会覆盖前面的，先执行前面的再执行后面的
测试如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
//原生js入口函数
/*
window.onload = function(ev){
//获取dom元素
var img = document.getElementsByTagName("img")[0];
console.log(img);
//输出宽
var width = window.getComputedStyle(img).width;
console.log("onload", width);
}
*/
//jQuery入口函数，拿到界面中的DOM元素
/*
$(document).ready(function() {
//获取dom元素
var $img = $("img");
console.log("$img");
//输出宽
var $width = $img.width();
console.log("ready", $width);
});
*/
//1、结论：原生js和jQuery入口函数加载的模式不同。
//原生js会等到dom元素加载完毕，并且图片页加载完毕才会执行
//jQuery会等到dom元素加载完毕，但不会等到图片加载完毕就会执行
/*
window.onload = function(ev){
alert("hello1");
}
window.onload = function(ev){
alert("hello2");
}
//结果只弹出了hello2
*/
/*
$(document).ready(function() {
alert("hello1");
});
$(document).ready(function() {
alert("hello2");
});
//先弹1后弹2
*/
// 结论2
// 原生js如果写了多个入口函数，则后面的会覆盖前面的
// jQuery中编写多个入口函数，后面的不会覆盖前面的，先执行前面的再执行后面的
</script>
</head>
<body>
<img src="https://img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png" alt="">
</body>
</html>
jQuery入口函数的四种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function() {
alert("hello1");
});
jQuery(document).ready(function($) {
alert("hello2");
});
$(function(){//推荐第三种
alert("hello3");
})
jQuery(function(){
alert("hello4");
})
</script>
</head>
<body>
</body>
</html>
解决$冲突问题—
1、释放$的使用—jQuery.noConflict();
注意：释放操作必须在编写其它jQuery代码之前
释放后就不能在使用$，改为使用jQuery
2、自定义访问符号dd = jQuery.noConflict();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/test.js"></script>
<script>
//1、释放$的使用--jQuery.noConflict();
//注意：释放操作必须在编写其它jQuery代码之前
// 释放后就不能在使用$，改为使用jQuery
//2、自定义访问符号dd = jQuery.noConflict();
//
//jQuery.noConflict();
dd = jQuery.noConflict();
dd(function(){
alert("hello3");
})
</script>
</head>
<body>
</body>
</html>
jQuery核心函数$();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
//$();
//1、接收一个函数
$(function(){
alert("hello word!");
//2、接收一个字符串
//2.1接收一个字符串选择器
//返回一个jQuery对象，对象中保存了找到的DOM元素
var $box1 = $(".box1");
var $box2 = $("#box2");
console.log($box1);
console.log($box2);
//2.2接收一个字符串代码片段
//返回一个jQuery对象，对象中保存了创建的DOM元素
var $p = $("<p>我是段落</p>");
console.log($p);
$box1.append($p);
//3、接收一个DOM元素
//会被包装成一个jQuery对象返回
var span = document.getElementsByTagName("span")[0];
console.log(span);
var $span = (span);
console.log($span);
});
</script>
</head>
<body>
<div class="box1"></div>
<div id="box2"></div>
<span>我是span</span>
</body>
</html>
jQuery对象—伪数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
什么是jQuery对象
jQuery对象是一个伪数组
什么是伪数组？
有0到length-1的属性，并且有length属性
*/
$(function(){
var $div = $("div");
console.log($div);
var arr = [1,2,3,4,5];
console.log(arr);
});
</script>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
回顾：js中的实例方法与静态方法
实例方法：需要通过实例化一个类来调用
静态方法：直接添加给这个类的就是静态方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
实例方法：需要通过实例化一个类来调用
静态方法：直接添加给这个类的就是静态方法
*/
//定义一个类
function AClass(){
}
//2.给这个类添加一个静态方法
//直接添加给类的就是静态方法
AClass.staticMethod = function(){
alert("staticMethod");
}
//静态方法通过类名调用
AClass.staticMethod();
//3.给这个类添加一个实例方法
AClass.prototype.intstanceMethod = function(){
alert("intstanceMethod");
}
//创建一个实例通过类实例调用
var a = new AClass();
a.intstanceMethod();
</script>
</head>
<body>
</body>
</html>
jQuery中的each
each
第一个参数：当前的索引
第二个参数：当前的元素
可以便利伪数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
var arr = [1,3,5,7,9];
//伪数组obj
var obj = {0:1,1:3,2:5,3:7,4:9,length:5};
/*
原生js：
第一个参数：当前的元素
第二个参数：当前的索引
注意：原生forEach方法只能遍历数组，不能便利伪数组
jQuery：
第一个参数：当前的索引
第二个参数：当前的元素
可以便利伪数组
*/
arr.forEach(function(value,index){
console.log(index, value);
})
$.each(arr, function(index, value){
console.log(index, value);
})
$.each(obj, function(index,value){
console.log(index,value);
})
</script>
</head>
<body>
</body>
</html>
jQuery中的map
map
第一个参数：要遍历的数组或对象
第二个参数：每遍历一个数组要执行的回调函数
回调函数：
第一个参数：遍历的元素
第二个参数：遍历到的索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
var arr = [1,3,5,7,9];
//伪数组obj
var obj = {0:1,1:3,2:5,3:7,4:9,length:5};
/*
1、利用原生js的map方法
第一个参数：当前遍历的元素
第二个参数：当前遍历的索引值
第三个参数：要被遍历的数组
注意：和forEarch相同，不能遍历伪数组
*/
// arr.map(function(value, index, array){
// console.log(index, value, array);
// });
/*
2、利用jQuery中的map
第一个参数：要遍历的数组或对象
第二个参数：每遍历一个数组要执行的回调函数
回调函数：
第一个参数：遍历的元素
第二个参数：遍历到的索引
*/
$.map(arr, function(value, index){
console.log(value);
console.log(index);
});
$.map(obj, function(value, index){
console.log(value);
console.log(index);
})
</script>
</head>
<body>
</body>
</html>
jQuery中的earch静态方法和map静态方法的区别：
each静态方法默认的返回值就是，遍历谁就返回谁
map静态方法默认的返回值是个空数组
若：给其两个回调方法设置return
each不支持在回调函数中设置返回值
map静态方法可以在回调方法中通过return设置返回值，其返回值为一个数组形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
var arr = [1,3,5,7,9];
//伪数组obj
var obj = {0:1,1:3,2:5,3:7,4:9,length:5};
/*
jQuery中的earch静态方法和map静态方法的区别：
each静态方法默认的返回值就是，遍历谁就返回谁
map静态方法默认的返回值是个空数组
若：给其两个回调方法设置return
each不支持在回调函数中设置返回值
map静态方法可以在回调方法中通过return设置返回值，其返回值为一个数组形式
*/
var res1 = $.map(obj, function(value, index){
console.log(value, index);
})
var res2 = $.each(obj, function(index,value){
console.log(index,value);
})
console.log("res1",res1);
console.log("res2",res2);
</script>
</head>
<body>
</body>
</html>
$.trim();
参数：需要去除两边空的字符串
作用：去除字符串两边的空格
返回值:返回去除后的字符串
$.isWindow();
作用：判断是否是window对象
返回：true/false
$.isArray();
作用：判断是否是真数组
返回：true/false
$.isFunction();
作用：判断是否是一个函数
返回：true/false
注意：jQuery本质是一个函数可以通过此函数验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
$.trim();
参数：需要去除两边空的字符串
作用：去除字符串两边的空格
返回值:返回去除后的字符串
*/
var str = " jjj ";
str = $.trim(str);
console.log("--->"+str+"<---");
//数组
var arr = [1,3,5,7,9];
//伪数组
var arrlike = {0:1,1:3,2:5,3:7,4:9};
//对象
var obj = {"name":"ddd","age":"33",}
//函数
var fn = function(){};
//window对象
var w = window;
var res = $.isWindow(w);
console.log(res);
/*
$.isWindow();
作用：判断是否是window对象
返回：true/false
*/
var res = $.isArray(arr);
console.log(res);
/*
$.isArray();
作用：判断是否是真数组
返回：true/false
*/
var res = $.isFunction(fn);
console.log(res);
/*
$.isFunction();
作用：判断是否是一个函数
返回：true/false
jQuery本质是一个函数
*/
</script>
</head>
<body>
</body>
</html>
$.(holdReady)
暂停ready的执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
//$.(holdReady);作用暂停ready执行
$.holdReady(true);
$(document).ready(function(){
alert("ready");
})
</script>
</head>
<body>
<button>恢复redy事件</button>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
$.holdReady(false);
}
</script>
</body>
</html>
jQuery中的attr和removeAttr—-操作属性节点
1.attr(name|pro|key,val|fn)
作用：获取或设置属性节点的值
可以传递一个参数，也可以传递两个参数
如果传递一个参数，代表获取属性节点的值
如果传递两个参数，代表设置属性节点的值
注意点:
如果是获取：无论找到多少元素，都只会返回第一个元素指定的属性节点的值
如是是设置：找到多少元素就会设置多少元素，若设置的属性节点不存在则系统会新增
2.removeAttr(name)
删除属性节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
jQuery(document).ready(function($) {
/*
1.attr(name|pro|key,val|fn)
作用：获取或设置属性节点的值
可以传递一个参数，也可以传递两个参数
如果传递一个参数，代表获取属性节点的值
如果传递两个参数，代表设置属性节点的值
注意点:
如果是获取：无论找到多少元素，都只会返回第一个元素指定的属性节点的值
如是是设置：找到多少元素就会设置多少元素，若设置的属性节点不存在则系统会新增
2.removeAttr(name)
删除属性节点
*/
//var a = $("span");
//console.log(a.attr('name'));
//$("span").attr("class","123");
//$("span").attr("ABC","123");
//
$("span").removeAttr('class');
});
</script>
</head>
<body>
<span class="123" name="it666">123</span>
<span class="123456" name="lnj">123456</span>
</body>
</html>
1.prop方法
特点和attr一致
2.removeProp方法
特点和removeAttr一致
注意：prop不仅能够操作属性还能操作属性节点
prop与attr使用区别:
官方推荐在操作属性节点时，具有true和false两个属性节点，如：checked，selected或者disableed使用prop()，其他时候使用attr()方法。
attr小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
var input=document.getElementsByTagName("input")[0];
var text = input.value;
console.log(text);
$("img").attr("src",text);
}
});
</script>
</head>
<body>
<input type="text">
<button>切换图片</button>
<img src="https://static.firefoxchina.cn/201910/N20EMvsfSY7uVErFgAk1zs3VPql7lDVNcRA4Cvmx.png" >
</body>
</html>
css类操作，添加删除切换
addClass(class|fn)
添加一个类，如果要添加多个要用空格隔开
removeClass([class|fn])
删除一个类，如果想删除多个，多个类名之间用空格隔开
toggleClass(class|fn[,sw])
切换类，有就添加，没有就删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style >
*{
margin: 0;
padding: 0;
}
.class1{
width: 100px;
height: 100px;
background: red;
}
.class2{
border: 10px solid #000;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
addClass(class|fn)
添加一个类，如果要添加多个要用空格隔开
removeClass([class|fn])
删除一个类，如果想删除多个，多个类名之间用空格隔开
toggleClass(class|fn[,sw])
切换类，有就添加，没有就删除
*/
var btns = document.getElementsByTagName("button");
btns[0].onclick = function(){
$("div").addClass('class1 class2');
}
btns[1].onclick = function(){
$("div").removeClass('class2');
}
btns[2].onclick = function(){
$("div").toggleClass('class2');
}
});
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>
html属性操作
1.html([val|fn])
和原生js中的innerHTML一样
2.text([val|fn])
和原生js中的inner一样
3.val([val|fn|arr])
和原生js中的value一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style >
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
1.html([val|fn])
和原生js中的innerHTML一样
2.text([val|fn])
和原生js中的inner一样
3.val([val|fn|arr])
和原生js中的value一样
*/
var btns = document.getElementsByTagName("button");
//设置HTML
btns[0].onclick = function(){
$("div").html('<p>我是段落</p>');
}
//获取HTML
btns[1].onclick = function(){
console.log($("div").html());
}
//设置text
btns[2].onclick = function(){
$("div").text('<p>我是段落</p>');
}
//获取text
btns[3].onclick = function(){
console.log($("div").text());
}
//设置value
btns[4].onclick = function(){
$("input").val('请输入内容！');
}
//获取value
btns[5].onclick = function(){
console.log($("input").val());
}
});
</script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>
</html>
css操作样式方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
//1、逐个设置
$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","red");
//2、链式设置
$("div").css("width","100px").css("height","100px").css("background","blue");
//3、批量设置
$("div").css({
width: "100px",
height: "100px",
background: "red"
});
//4、输出css属性
console.log($("div").css("background"));
});
</script>
</head>
<body>
<div></div>
</body>
</html>
jQuery中尺寸和位置操作—
height、width
innerHeight—>包括padding，但是不包括border、
innerWidth
outerHeight—>高度为：元素自身高度 + padding + border；如果参数为true时，高度为：元素自身高度 + padding + border +margin
outerWidth
//.height()、.innerHeight()和.outerHeight()区别：https://blog.csdn.net/weixin_41888013/article/details/81075532
下面程序拿width举例
offset([coordinates])
作用：获取或设置元素距离窗口的偏移位（距离浏览器边框）
position()
作用：获取元素距离定位元素的偏移位，不能设置，可以通过之前的css设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style >
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
border: 50px solid #000;
margin-left: 50px;
position: relative;
}
.son{
width: 100px;
height:100px;
background:blue;
position: absolute;
left:50px;
top:50px;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
height
width
innerHeight-->包括padding，但是不包括border
innerWidth
outerHeight-->高度为：元素自身高度 + padding + border；如果参数为true时，高度为：元素自身高度 + padding + border +margin
outerWidth
//.height()、.innerHeight()和.outerHeight()区别：https://blog.csdn.net/weixin_41888013/article/details/81075532
下面程序拿width举例
offset([coordinates])
作用：获取或设置元素距离窗口的偏移位（距离浏览器边框）
position()
作用：获取元素距离定位元素的偏移位，不能设置
*/
$(function() {
var btns = document.getElementsByTagName("button");
btns[0].onclick = function(){
//获取宽度
//console.log($(".father").width());
//获取元素距离窗口的偏移位
//console.log($(".son").offset().left);
//获取元素距离定位元素的偏移位
console.log($(".son").position().left);
}
btns[1].onclick = function(){
//设置宽度
//$(".father").width("500px");
//设置窗口偏移位
// $(".son").offset({
// left: 10
// });
}
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>
滚动条值的设置和获取
scrollTop([val])
上下滚动条的值的设置与获取
scrollLeft([val])
左右滚动条的值的设置与获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style >
*{
margin: 0;
padding: 0;
}
.scroll{
width: 100px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
scrollTop([val])
//获取滚动偏移位
scrollLeft([val])
*/
$(function() {
var btns = document.getElementsByTagName("button");
btns[0].onclick = function(){
//获取滚动偏移位
//console.log($(".scroll").scrollTop());
//获取网页滚动偏移位
//注意点：为了保证浏览器兼容，需要按照如下写法
console.log($("body").scrollTop()+$("html").scrollTop());
}
btns[1].onclick = function(){
//设置滚动偏移位，注意不是接受的字符串
//$(".scroll").scrollTop(122);
//设置网页滚动偏移位
//注意点：为了保证浏览器兼容，需要按照如下写法
$("html,body").scrollTop(130);
}
});
</script>
</head>
<body>
<div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</div>
<button>获取</button>
<button>设置</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
jQuery有两种绑定事件
1.eventName(fn);//fn指回调函数
编码效率高/部分事件jQuery没有实现，所以不能添加
2.on(eventName,fn);
编码效率略低/所有js事件都可以添加
注意：可以添加多个相同或不同的事件，不会覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
jQuery有两种绑定事件方式
1.eventName(fn);//fn指回调函数
编码效率高/部分事件jQuery没有实现，所以不能添加
2.on(eventName,fn);
编码效率略低/所有js事件都可以添加
注意：可以添加多个相同或不同的事件，不会覆盖
*/
$(function() {
$("button").click(function(){
alert("hello dd");
})
// $("button").click(function(){
// alert("hello123");
// })
$("button").on("click",function(){
alert("hello word!");
})
});
</script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>
jQuery移除绑定事件
off()
如果不传参则移除所有事件
传递一个参数则可以移除指定事件
off(“eventname”);
传递两个参数则移除指定事件的指定方法
off(“eventname”,fn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
off
如果不传参则移除所有事件
传递一个参数则可以移除指定事件
off("eventname");
传递两个参数则移除指定事件的指定方法
off("eventname",fn)
*/
$(function() {
function test1(){
alert("hello dd");
}
function test2(){
alert("hello123");
}
$("button").click(test1);
$("button").click(test2);
$("button").mouseleave(function(event) {
alert("hello mouseenter");
});
//加上下面off()之后上面的事件就被解绑了
//$("button").off();
//加上下面off(click)之后上面的所有click事件就被解绑了
//$("button").off("click");
//传递两个参数，则移除指定的绑定事件，如下移除click的test1事件
$("button").off("click",test1);
})
</script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>
1、什么是事件冒泡
当两个元素为父子关系时，点击子元素也会触发父元素的点事件
2、如何阻止事件冒泡
a.在回调函数中写入return false
b.在触发事件时会向回调函数中传入event，利用event中的stopPropagation()方法可以阻止事件冒泡
3、什么是默认行为
元素中的默认事件，如a标签中的点击跳转，提交按钮的点击提交
4、如何阻止默认行为
a.在回调函数中写入return false
b.在触发事件时会向回调函数中传入event，利用event中的preventDefault()方法可以阻止默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.father{
width:200px;
height:200px;
background:red;
}
.son{
width:100px;
height:100px;
background:blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
1、什么是事件冒泡
当两个元素为父子关系时，点击子元素也会触发父元素的点事件
2、如何阻止事件冒泡
a.在回调函数中写入return false
b.在触发事件时会向回调函数中传入event，利用event中的stopPropagation()方法可以阻止事件冒泡
3、什么是默认行为
元素中的默认事件，如a标签中的点击跳转，提交按钮的点击提交
4、如何阻止默认行为
a.在回调函数中写入return false
b.在触发事件时会向回调函数中传入event，利用event中的preventDefault()方法可以阻止默认事件
*/
$(function() {
//冒泡事件
$(".son").click(function(event) {
/* Act on the event */
alert("son");
//阻止冒泡事件
//return false;
event.stopPropagation();
});
$(".father").click(function(){
alert("father");
});
$("a").click(function(event) {
/* Act on the event */
alert("弹出注册框");
//return false;
event.preventDefault();
});
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com">注册</a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
自动触发事件
trigger(“eventname”)、triggerHandler(“eventname”)
将事件名传入即可触发事件;
两者区别：
1、trigger方法有冒泡事件时会触发冒泡事件，triggerHandler方法则会自动屏蔽冒泡事件
2、trigger方法有默认事件时会触发默认事件，triggerHandler方法则会自动屏蔽默认事件
注意：
用trigger触发a标签时不会触发其默认事件，若想触发它的默认事件需要在a标签中添加子元素并用trigger来触发子元素以此来触发a标签的默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.father{
width:200px;
height:200px;
background:red;
}
.son{
width:100px;
height:100px;
background:blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
自动触发事件
trigger("eventname")、triggerHandler("eventname")
将事件名传入即可触发事件;
两者区别：
1、trigger方法有冒泡事件时会触发冒泡事件，triggerHandler方法则会自动屏蔽冒泡事件
2、trigger方法有默认事件时会触发默认事件，triggerHandler方法则会自动屏蔽默认事件
注意：
用trigger触发a标签时不会触发其默认事件，若想触发它的默认事件需要在a标签中添加子元素并用trigger来触发子元素以此来触发a标签的默认事件
*/
$(function() {
//冒泡事件
$(".son").click(function(event) {
/* Act on the event */
alert("son");
});
$(".father").click(function(){
alert("father");
});
//自动触发事件
//$(".father").trigger("click");
//$(".father").triggerHandler("click");
//两者之间的区别-1
//trigger方法有冒泡事件时会触发冒泡事件
//triggerHandler方法则会自动屏蔽冒泡事件
//$(".son").trigger('click');
//$(".son").triggerHandler('click');
//两者之间的区别-2
$("input[type=submit").click(function(){
alert("submit");
});
//$("input[type=submit").trigger('click');
$("input[type=submit").triggerHandler('click');
/*
注意用trigger触发a标签时不会触发其默认事件
$("a").click(function(){
alert("a");
});
$("a").trigger('click');
*/
/*
若想触发它的默认事件需要在a标签中添加子元素并用trigger来触发子元素以此来触发a标签的默认事件
$("span").click(function(){
alert("a");
});
$("span").trigger('click');
*/
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
自定义事件必须满足的两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger来触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.father{
width:200px;
height:200px;
background:red;
}
.son{
width:100px;
height:100px;
background:blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
自定义事件必须满足的两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger来触发
*/
$(function() {
//
$(".son").on("myClick",function(){
alert("son");
})
$(".son").trigger('myClick');
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
添加事件命名空间必须满足的两个条件
通过 . 来添加
1.事件必须是通过on绑定的
2.事件必须通过trigger或triggerHandle来触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.father{
width:200px;
height:200px;
background:red;
}
.son{
width:100px;
height:100px;
background:blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
添加事件命名空间必须满足的两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger或triggerHandle来触发
*/
$(function() {
//通过.来添加变量的命名空间zs，和ls
$(".son").on("click.zs",function(){
alert("son1");
});
$(".son").on("click.ls",function(){
alert("son2");
});
//通过传入命名空间来触发指定事件
$(".son").trigger('click.zs');
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
命名空间注意点：
利用tigger触发子元素带命名空间的事件，那么带相同命名空间的父元素的事件则会触发，而父元素没有命名空间的事件不会被触发—（结合冒泡事件来理解）
利用tigger触发子元素带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会别触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.father{
width:200px;
height:200px;
background:red;
}
.son{
width:100px;
height:100px;
background:blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
利用tigger触发子元素带命名空间的事件，那么带相同命名空间的父元素的事件则会触发，而父元素没有命名空间的事件不会被触发--（结合冒泡事件来理解）
利用tigger触发子元素带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会别触发
*/
$(function() {
//
$(".father").on("click.ls",function(){
alert("father click1");
});
$(".father").on("click",function(){
alert("father 2");
});
$(".son").on("click.ls",function(){
alert("son click1");
})
//$(".son").trigger('click.ls');
$(".son").trigger('click');
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
事件委托
什么是事件委托
请别人做事情，然后将做完的结果反馈给我们
可以找一个在入口函数执行之前就有的元素，来监听动态添加元素的某些事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
什么是事件委托
请别人做事情，然后将做完的结果反馈给我们
可以找一个在入口函数执行之前就有的元素，来监听动态添加元素的某些事件
*/
$(function() {
//
$("button").click(function(event) {
/* Act on the event */
$("ul").append('<li>我是新增的li</li>');
});
//在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有知道的元素，给所有找到的元素添加事件
//注意：入口函数执行的时候还没新增的li所以在遍历的时候不会遍历到新增的li，更不会有点击事件，所以要使用事件委托
// $("ul>li").click(function(event) {
// console.log($(this).html());
// });
//
// 事件委托
$("ul").delegate('li', 'click', function(event) {
//把li的clcik事件委托给ul去监听
//为什么此处的this拿到的是li？
//我们点击的是li，但li没有点击事件，不过因为事件冒泡，触发ul的点击事件，因此li的this，传递到了ul上
console.log($(this).html());
});
})
</script>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<button>新增一个li</button>
</body>
</html>
事件委托练习—登录窗口的弹出与关闭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html.body{
width:100%;
height:100%;
}
.mask{
width: 100%;
height:100%;
background: rgba(0,0,0,0);
position: fixed;
top:0;
left:0;
}
.login{
width:750px;
height:375px;
margin:100px auto;
position: relative;
}
.login>span{
width: 50px;
height:50px;
/*background:red;*/
position:absolute;
top:0;
right:0;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
什么是事件委托
请别人做事情，然后将做完的结果反馈给我们
可以找一个在入口函数执行之前就有的元素，来监听动态添加元素的某些事件
*/
$(function() {
//
$("a").click(function(){
var $mask = $("<div class=\"mask\">\n"+
"<div class=\"login\">\n"+
"<img src=\"img/登录框.png\" alt=\"\">\n"+
"<span></span>\n"+
"</div>\n"+
"</div>\n");
$("body").append($mask);
//事件委托
$("body").delegate(".login>span","click",function(){
$mask.remove();
});
event.preventDefault();
});
});
</script>
</head>
<!-- <div class="mask">
<div class="login">
<img src="img/登录框.png" alt="">
<span></span>
</div>
</div> -->
<body>
<a href="http://www.baidu.com">点击登录</a>
<div>这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面，这是个好看的界面。</div>
</body>
</html>
mouseouve(fn)
移入时触发，子元素也会触发
mouseout(fn)
移出时触发，子元素也会触发
mouseenter(fn)
移入时触发
mouseleave(fn)
移出时触发
mousehover(fn,fn)
传入一个参数时，移入移出都会触发
传入两参数时，移入触发第一个，移出触发第二个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.father{
width:200px;
height:200px;
background:red;
}
.son{
width:100px;
height:100px;
background:blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
mouseouve(fn)
移入时触发，子元素也会触发
mouseout(fn)
移出时触发，子元素也会触发
mouseenter(fn)
移入时触发
mouseleave(fn)
移出时触发
mousehover(fn,fn)
传入一个参数时，移入移出都会触发
传入两参数时，移入触发第一个，移出触发第二个
*/
$(function() {
/*
移入移出子元素也会触发事件
*/
// $(".father").mouseover(function(event) {
// console.log("father被移入了");
// });
// $(".father").mouseout(function(event) {
// console.log("father被移除了");
// });
/*
移入移出子元素不会触发事件,所以推荐使用mouseenter和mouseleave方法
*/
// $(".father").mouseenter(function(event) {
// console.log("father被移入了");
// });
// $(".father").mouseleave(function(event) {
// console.log("father被移除了");
// });
/*
可设置两个回调参数，分别在移入元素和移出元素时触发，移入移出子元素不会会触发事件
*/
$(".father").hover(function(){
console.log("father被移入了");
},function(){
console.log("father被移除了");
});
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
若有收获，就点个赞吧
0 人点赞
