jQuery基础三
一、阻止后续事情发生
//生成提交按钮
<input type="submit" id="s1">
submit默认有提交、刷新的现象
阻止后续事件执行的方式：
1.return false
2.e.preventDefault();
<body>
<form action="">
<input type="text" id="t1">
<input type="submit" id="s1">
</form>
<script>
$('#s1').on('click',function () {
//输入框为空，阻止表单提交并刷新
if (!$('#t1').val()) {
//阻止后续事件的执行
return false
}
})
</script>
<form action="">
<input type="text" id="t1">
<input type="submit" id="s1">
</form>
<script>
$('#s1').on('click',function (e) {
//输入框为空，阻止表单提交并刷新
if (!$('#t1').val()) {
//阻止后续事件的执行
e.preventDefault()
}
})
</script>
二、阻止事件冒泡
一个标签由多个标签包裹，包裹的标签无实际内容，函数执行会从内部往外传，一层一层传
1.return false
2.e.stopPropagation()
<body>
<div>
<p>
<button>提交</button>
</p>
</div>
<script>
// 绑定标签div事件，点击弹出框
$('div').click(function () {
alert('div的告警框')
});
// 绑定标签p事件，点击弹出框
$('p').click(function (e) {
alert('p的告警框');
//阻止事件冒泡，到这标签就终止，不再往上传
e.stopPropagation()
});
// 绑定标签button事件，点击弹出框
$('button').on('click',function () {
alert('button的告警框')
});
</script>
三、事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
基于一个已经存在的标签给未来的标签绑定事件
<body>
<div>
<p>
<button>点击弹出框</button>
</p>
</div>
<script>
//事件委托，给未来的标签绑定事件
$('p').on('click','button',function () {
alert('button弹出框');
console.log(this) //触发事件的标签
});
$('p').append('<button>点击弹出框2</button>');
</script>
</body>
四、键盘事件
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小东</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">隐身</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小南</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">隐身</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小西</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">隐身</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小北</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">隐身</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小百</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">隐身</option>
</select>
</td>
</tr>
</tbody>
</table>
<script>
var flag = false;
$(window).keydown(function (e) {
if (e.keyCode===16){
flag = true
}
});
$(window).keyup(function (e) {
if(e.keyCode===16){
flag = false
}
})
$('select').change(function () {
//找到被选中的checkbox标签，判断checked属性，返回true
var isChecked = $(this).parent().parent().children().first().find(':checked').prop('checked');
if (flag && isChecked){
//获取选择的值（value）
var checkedValue = $(this).val();
//找到选择的tr标签，找到select标签更改值
$('tr:has(input:checked)').find('select').val(checkedValue);
}
})
</script>
</body>
五、hover事件
hover事件不能用on来绑定
接收两个匿名函数，鼠标移上去执行，鼠标移走后执行
hover事件：不是DOM事件，是jQuery封装的
$('li').hover(function () {
$(this).addClass('hover')
},
function () {
$(this).removeClass('hover')
})
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hover示例</title>
<script src="jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 40px;
width: 100%;
background-color: #3d3d3d;
position: fixed;
top: 0;
}
.nav ul {
list-style-type: none;
line-height: 40px;
}
.nav li {
float: left;
padding: 0 10px;
color: #999999;
position: relative;
}
.nav li:hover {
background-color: #0f0f0f;
color: white;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.son {
position: absolute;
top: 40px;
right: 0;
height: 50px;
width: 100px;
background-color: #00a9ff;
display: none;
}
.hover .son {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li>登录</li>
<li>注册</li>
<li>购物车
<p class="son hide">
空空如也...
</p>
</li>
</ul>
</div>
<script>
$('li').hover(function () {
$(this).addClass('hover')
},
function () {
$(this).removeClass('hover')
})
</script>
六、input事件
用于监听事件，只要input框的值发生变化就会触发此事件
<body>
<input type="text">
<script>
$('input').on('input',function () {
console.log($(this).val())
})
</script>
</body>
七、其他事件
blur(function(){...}) 失去焦点事件
focus(function(){...}) 获取焦点事件
八、页面加载JS
window.reload(function () {
//js代码，事件
})
window.reload的特点：
页面最后加载执行
window.reload的缺点：
1.会等到页面上的文档、图片、视频等所有资源都加载完才会触发
2.存在覆盖声明的问题
为了解决window.reload的问题
jQuery使用两种语法
$(document).ready(function(){
// JS代码...
})
简写：
$(function(){
// JS代码...
})
九、动画
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义
animate(p,[s],[e],[fn])
十、each
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
语法：
$.each(遍历的对象,function(){})
$('div').each(function(){})
遍历过程中使用 return 跳过本次循环，进入下一次循环，相当于continue
遍历过程中使用 return false 终止循环，相当于break
十一、data
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
十二、extend
自定义函数
jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
示例：
<script>
jQuery.extend({
min:function(a, b){return a < b ? a : b;},
max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>
jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。
<script>
jQuery.fn.extend({
check:function(){
return this.each(function(){this.checked =true;});
},
uncheck:function(){
return this.each(function(){this.checked =false;});
}
});
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>
单独写在文件中的扩展：
(function(jq){
jq.extend({
funcName:function(){
...
},
});
})(jQuery);
浙公网安备 33010602011771号