jQuery事件，对象以及插件
回顾
1 基本使用
2 jquery 选择器
3 筛选器
过滤
查找
串联
4 DOM 操作
内部插入
append()
appendTo()
prepend()
prependTo()
外部插入
after()
insertAfter()
before()
insertBefore()
包裹
wrap()
wrapAll()
wrappInner()
unwrap()
替换
replaceWith()
replaceAll()
删除
empty()
remove()
克隆
clone()
5 属性
# 属性
attr()
prop()
removeAttr()
removeProp()
# CLASS类
addClass()
removeClass()
toggleClass()
hasClass()
# 值/文本
html()
text()
val()
6 样式
# css
css()
# 位置
offset()
position()
scrollLeft()
scrollTop()
# 尺寸
width() / height()
innerWidth() / innserHeight()
outerWidth() / outerHeight()
笔记
1 jQuery 事件
1.1 事件的绑定和解除绑定
on(事件名, fn)
off() 解除事件绑定
one(事件名, fn) 仅仅绑定一次
1.2 代码触发事件动作
trigger(事件名) jQuery事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery事件</title>
</head>
<body>
<h1>jquery事件</h1>
<hr> <button id="btn">按钮</button>
<button id="btn2">解除绑定</button>
<hr> <button id="btn3">下载</button> <br> <a href="1.html" id="a1">超链接</a> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dolores eos quasi laborum earum libero est doloremque, tempora error at tempore nostrum! Fugit saepe ipsam deserunt commodi asperiores, unde.</p> <script src="../jquery-3.3.1.js"></script>
<script>
$(function(){ $('#btn').on('click',function(){
alert('啊，你点我了')
}); //btn2对应的元素绑定单击事件，当btn2元素对应的按钮按下
//会触发btn对应元素对象解除事件绑定。
$('#btn2').on('click', function(){
$('#btn').off();
}); //一次单击事件
$('#btn3').one('click', function(){
alert('哈哈哈');
}); $('#a1').on('click', function(){
alert('啊，我是超链接'); //阻止事件冒泡 和 默认动作
//不加return false会默认跳到一个新的页面
return false;
}); //手动 代码触发 事件 $('#btn').trigger('click')
//$('#btn').click()
/*$('#btn').trigger('click')
$('#btn').trigger('click')
$('#btn').trigger('click')*/ //鼠标移动和离开都会触发
$('p').hover(function(){
console.log('OK');
})
})
</script>
</body>
</html>
jQuery事件
1.3 委派
$('.list li').on('click', fn)
$('.list').on('click', 'li', fn)
1.4 特殊事件
ready() 事件 类似于onload
hover() 事件 mouseenter 和 mouseleave 相结合的事件
1.5 事件列表
同之前的 jS 事件
1.6 事件对象
属性
offsetX, offsetY 鼠标在本元素上的位置
pageX, pageY 鼠标在页面上的位置坐标
clientX, clientY 鼠标在视口上的位置
which 按键的值(ASCII)或鼠标按键的值 （1，2,3）
target
#方法
stopPropagation()
preventDefault()
jQuery事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery事件对象</title>
<style>
#box {
width:300px;
height:200px;
border:2px solid #ccc;
margin:100px auto;
}
</style>
</head>
<body>
<h1>事件对象</h1>
<hr> <div id="box"></div> <script src="../jquery-3.3.1.js"></script>
<script>
$(function(){
//en只是个形参，可以随意设置，用来接收参数
//鼠标单击显示鼠标左键的值和鼠标的位置
$('#box').on('click', function(en) {
//鼠标的位置
console.log(en.clientX, en.clientY);
console.log(en.pageX, en.pageY);
//鼠标在本元素上的位置
console.log(en.offsetX, en.offsetY);
});
//按键的值
$(document).on('keyup', function(en) {
console.log(en.which)
});
//鼠标键的值
$('#box').on('mousedown', function(en) {
console.log(en.which)
}) })
</script>
</body>
</html>
jQuery事件对象
2 jQuery 动画
2.1 基本效果
hide([speed] [,fn]) 隐藏
show([speed] [,fn]) 显示
toggle([speed] [,fn]) 切换
宽高(width/height padding) 透明度 变化
2.2 滑动效果
slideUp([speed] [,fn]) 隐藏
slideDown([speed] [,fn]) 显示
slideToggle([speed] [,fn]) 切换
高度(height padding) 变化
2.3 淡入淡出
fadeOut([speed] [,fn]) 隐藏
fadeIn([speed] [,fn]) 显示
fadeToggle([speed] [,fn]) 切换
fadeTo([speed,] opacity [,fn])
只有 opacity 的变化
2.4 自定义动画
animate(对象，speed, [fn])
自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
overflow: hidden;
width:400px;
height:200px;
border:2px solid #ccc;
padding:20px;
}
</style>
</head>
<body>
<h1>自定义动画</h1>
<hr>
<button id="btn">隐藏</button>
<button id="btn1">显示</button>
<button id="btn2">切换</button> <hr>
<div id="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas et necessitatibus cumque accusamus iure eius expedita, dolore, nobis ut maiores dignissimos consectetur saepe repudiandae, libero molestias deserunt veritatis facere vitae.</div> <script src="../jquery-3.3.1.js"></script>
<script>
$(function(){
$('#btn').click(function(){
$('#box').animate({
'width':'0px',
'padding-left':'0px',
'padding-right':'0px'
}, 2000, function(){
$(this).hide();
})
}); $('#btn1').click(function(){
$('#box').show().animate({
'width':'400px',
'padding-left':'20px',
'padding-right':'20px'
}, 2000)
}); $('#btn2').click(function(){
$('#box').animate({
'width':'toggle',
'padding-left':'toggle',
'padding-right':'toggle'
}, 2000)
})
})
</script>
</body>
</html>
自定义动画
2.5 动画控制
delay() 延迟
finish() 瞬间完成动画
stop() 停止动画 滚动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动</title>
<style>
#box {
width:800px;
height:200px;
border:2px solid orange;
overflow: hidden;
transition: .5s;
}
.wrapper {
width:2200px;
}
#box p {
margin:0;
width:198px;
height:198px;
float:left;
border:1px solid #ccc;
background: #369;
color:#fff;
} </style>
</head>
<body>
<div id="box">
<div class="wrapper">
<p>lorem1</p>
<p>lorem2</p>
<p>lorem3</p>
<p>lorem4</p>
<p>lorem5</p>
<p>lorem6</p>
<p>lorem7</p>
<p>lorem8</p>
<p>lorem9</p>
<p>lorem10</p>
<p>lorem11</p>
</div>
</div> <br> <button id="left_btn"> < </button>
<button id="right_btn"> > </button> <script src="../jquery-3.3.1.js"></script>
<script>
$(function(){ $('#left_btn').on('click', function(){
//console.log($('#box').scrollLeft())
//$('#box').scrollLeft(800);//是把 scrollLeft 设置为800 //$('#box').scrollLeft($('#box').scrollLeft() - 800);
$('#box').animate({
'scrollLeft':$('#box').scrollLeft() - 800
}, 500) }); $('#right_btn').on('click', function(){
//$('#box').scrollLeft($('#box').scrollLeft() + 800 ) $('#box').animate({
'scrollLeft':$('#box').scrollLeft() + 800
}, 500)
})
})
</script>
</body>
</html>
滚动动画
动画控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
overflow: hidden;
width:400px;
height:200px;
border:2px solid #ccc;
padding:20px;
}
</style>
</head>
<body>
<h1>动画控制</h1>
<hr>
<button id="btn">隐藏</button>
<button id="btn1">显示</button>
<button id="btn2">切换</button> <br>
<button id="btn3">动画</button>
<button id="btn4">finish</button>
<button id="btn5">stop</button> <hr>
<div id="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas et necessitatibus cumque accusamus iure eius expedita, dolore, nobis ut maiores dignissimos consectetur saepe repudiandae, libero molestias deserunt veritatis facere vitae.</div> <script src="../jquery-3.3.1.js"></script>
<script> $(function(){ $('#btn4').on('click', function() {
$('#box').finish();
}) $('#btn5').on('click', function() {
$('#box').stop();
}) $('#btn3').on('click', function(){
//如果 box元素 正在执行 return false
if ($('#box').is(':animated')) {
return false;
} //动画队列 delay
$('#box').slideUp(3000).delay(2000).show(2000).fadeOut(2000).slideDown(3000)
}) $('#btn').click(function(){
$('#box').animate({
'width':'0px',
'padding-left':'0px',
'padding-right':'0px'
}, 2000, function(){
$(this).hide();
})
}); $('#btn1').click(function(){
$('#box').show().animate({
'width':'400px',
'padding-left':'20px',
'padding-right':'20px'
}, 2000)
}); $('#btn2').click(function(){
$('#box').animate({
'width':'toggle',
'padding-left':'toggle',
'padding-right':'toggle'
}, 5000)
})
})
</script>
</body>
</html>
动画控制
is(':animated') 判断是否在执行动画 返回boolean
jQuery动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
width: 400px;
height: 300px;
padding: 20px;
border: 2px solid #999;
}
</style>
</head>
<body>
<h1>动画效果</h1>
<hr> <button id="hide_btn">隐藏</button>
<button id="show_btn">显示</button>
<button id="toggle_btn">切换</button>
<br> <button id="slideDownBtn">slideDown显示</button>
<button id="slideUpBtn">slideUp隐藏</button>
<button id="slideToggleBtn">slideToggle切换</button> <br>
<button id="fadeOutBtn">淡出</button>
<button id="fadeInBtn">淡入</button>
<button id="fadeToggleBtn">切换</button>
<button id="fadeToBtn">fadeTo</button> <br>
<br>
<br> <div id="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore laudantium eum eos cumque voluptatem dicta ad beatae ratione voluptate, repudiandae quis provident nam debitis laborum, eveniet. Odit quam ducimus, labore.
</div> <script src="../jquery-3.3.1.js"></script>
<script>
$(function(){ //淡入淡出效果
$('#fadeOutBtn').on('click', function(){ //$('#box').fadeOut()
$('#box').fadeOut(2000)
})
$('#fadeInBtn').on('click', function(){ //$('#box').fadeOut()
$('#box').fadeIn(5000)
})
$('#fadeToggleBtn').on('click', function(){ //$('#box').fadeOut()
$('#box').fadeToggle(2000)
});
$('#fadeToBtn').on('click', function(){
/*$('#box').fadeTo(3000, .5, function(){
console.log('fadeTo')
})*/
//alert('ok')
$('#box').fadeTo(1000, .5)
}) //滑动效果
$('#slideUpBtn').on('click', function(){
//$("#box").slideUp();
//$("#box").slideUp('slow');
//$("#box").slideUp(3000);
$("#box").slideUp(3000, function(){ });
}); $('#slideDownBtn').on('click', function(){
$('#box').slideDown(5000)
}) //基本效果
$('#hide_btn').click(function(){
//$('#box').hide();
//$('#box').hide('fast');
//$('#box').hide('normal');
//$('#box').hide('slow');
//$('#box').hide(5000);
$('#box').hide(2000, function(){
console.log('啊，我隐藏了');
});
}); $('#show_btn').click(function(){
$('#box').show(3000)
});
$('#toggle_btn').click(function(){
$('#box').toggle(3000, function(){
console.log('toggle');
})
})
})
</script>
</body>
</html>
jQuery动画
实例：新闻滚动播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动播放</title>
<style>
body {
background:#ccc;
}
#box {
margin:100px auto;
width: 1000px;
height: 460px;
background:#ccc;
overflow: hidden;
} ul {
list-style:none;
padding:0;
margin:0;
}
p {
margin:0;
}
#box li {
height:100px;
margin-bottom:20px;
background: #fff
}
#box li img{
float:left;
width:100px;
height: 100px;
}
#box li p {
float:right;
width:850px;
line-height: 100px;
height:100px;
}
</style>
</head>
<body>
<div id="box">
<ul id="newsList">
<li>
<img src="../../dist/images_one/meinv02.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/1.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/2.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/3.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/4.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/11.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/10.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/9.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/8.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li>
</ul>
</div> <script src="../jquery-3.3.1.js"></script>
<script>
$(function(){
setInterval(function(){
$('#box li').last().hide().prependTo('#newsList').slideDown();
}, 2000)
})
</script>
</body>
</html>
新闻滚动播放（动画效果不明显）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动播放</title>
<style>
body {
background:#ccc;
}
#box {
margin:100px auto;
width: 1000px;
height: 460px;
background:#ccc;
overflow: hidden;
} ul {
list-style:none;
padding:0;
margin:0;
}
p {
margin:0;
}
#box li {
height:100px;
margin-bottom:20px;
background: #fff
}
#box li img{
float:left;
width:100px;
height: 100px;
}
#box li p {
float:right;
width:850px;
line-height: 100px;
height:100px;
}
</style>
</head>
<body>
<div id="box">
<ul id="newsList">
<li>
<img src="../../dist/images_one/meinv02.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/1.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/2.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/3.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/4.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/11.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/10.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/9.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li> <li>
<img src="../../dist/images_one/8.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
</li>
</ul>
</div> <script src="../jquery-3.3.1.js"></script>
<script>
$(function(){
setInterval(function(){
$('#box li').eq(3).fadeTo(500, 0, function(){
$('#box li').last().fadeTo(0,1).hide().prependTo('#newsList').slideDown();
})
}, 2000)
})
</script>
</body>
</html>
新闻滚动播放
2.6 jQuery 插件
jQuery datetimepicker插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery插件</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../jquery.datetimepicker.css">
<style>
select {
width:200px;
}
</style>
</head>
<body>
<h1>jquery插件</h1>
<hr> <label for="#">请选择您的籍贯</label>
<select name="" id="jiguan">
<option value="1">上海</option>
<option value="1">北京</option>
<option value="1">新疆</option>
<option value="1">台湾</option>
<option value="1">香港</option>
<option value="1">澳门</option>
<option value="1">西藏</option>
<option value="1">火星</option>
<option value="1">云南</option>
<option value="1">福建</option>
<option value="1">辽宁</option>
<option value="1">吉林</option>
<option value="1">黑龙江</option>
<option value="1">黑龙江</option>
</select> <hr> <label for="birthDay">请输入您的生日：</label>
<input type="text" id="birthDay"> <script src="../jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="../jquery.datetimepicker.full.js"></script>
<script>
$(function(){
$('#jiguan').select2(); //时间日期插件
$.datetimepicker.setLocale('zh');
$('#birthDay').datetimepicker({
format:"Y-m-d H:i"
});
})
</script>
</body>
</html>
jQuery datetimepicker插件
jQuery全屏滚动插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏滚动</title>
<link href="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.css" rel="stylesheet">
<style>
.slide {
color: #fff;
font-size:100px;
text-align: center;
}
</style>
</head>
<body>
<!--HTML部分-->
<div id="fullpage">
<div class="section">
<h2>Page1</h2>
</div>
<div class="section">
<div class="slide">A</div>
<div class="slide">B</div>
<div class="slide">C</div>
</div>
<div class="section">
<h2>Page3</h2>
</div>
<div class="section">
<h2>Page4</h2>
</div>
</div> <script src="../jquery-3.3.1.js"></script>
<script src="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.js"></script>
<script>
$('#fullpage').fullpage({
navigation: true,
sectionsColor: ['red', 'green','purple', 'orange']
});
</script>
</body>
</html>
jQuery全屏滚动插件
表单验证实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
input {
width: 300px;
border:1px solid #ccc;
padding:10px;
font-size:16px;
}
button {
width: 322px;
border:1px solid #ccc;
background:#f5f5f5;
line-height: 40px;
cursor: pointer;
font-size:16px;
}
td.success {
color:green;
}
td.error {
color:red;
}
</style>
</head>
<body>
<h1>注册</h1>
<hr> <form action="user.php" id="myForm">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="username" id="usernameInput"></td>
<td></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email" id="emailInput"></td>
<td></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd" id="pwdInput"></td>
<td></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="repwd" id="repwdInput"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<button>注 册</button>
</td>
<td></td>
</tr>
</table>
</form> <script src="../jquery-3.3.1.js"></script>
<script>
//表单验证
$(function(){
//用户名验证事件
$('#usernameInput').on('blur', checkUsername);
//邮箱验证事件
$('#emailInput').on('blur', checkEmail);
//密码验证事件
$('#pwdInput').on('blur', checkPwd);
//确认密码 验证
$('#repwdInput').on('blur', checkRepwd); //表单提交事件
$('#myForm').on('submit', function(){
return checkUsername() && checkEmail() && checkPwd() && checkRepwd();
}); //验证 用户名
function checkUsername(){
//获取 用户输入的内容
var value = $('#usernameInput').val();
//验证 用户输入是否合法 4~12位 数字/字母/下划线
if (value.search(/^\w{4,12}$/) === -1) {
$('#usernameInput').parent().next().text('用户名不合法 必须是4~12位数字、字母、下划线').attr('class', 'error')
return false;
} else {
$('#usernameInput').parent().next().text('用户名可用').attr('class', 'success')
return true;
}
} //验证邮箱
// abcc@12.com sdf-sdf@1243.com sdfasdf@123.com.cn
// www.niho.中国
function checkEmail() {
//获取用户的输入
var value = $('#emailInput').val();
//验证
if (value.search(/^[\w-]+@[\w-]+(\..+){1,3}$/) === -1) {
$('#emailInput').parent().next().text('邮箱不合法').attr('class', 'error');
return false;
} else {
$('#emailInput').parent().next().text('邮箱可用').attr('class', 'success');
return true;
}
} //验证密码 6-18位
function checkPwd(){
//获取用户输入
var value = $('#pwdInput').val();
//验证
if (value.length < 6 || value.length > 18) {
$('#pwdInput').parent().next().text('密码必须是6到18位').attr('class', 'error');
return false;
} else {
$('#pwdInput').parent().next().text('密码可用').attr('class', 'success');
return true;
}
} //确认密码
function checkRepwd() {
//获取用户输入和上一次密码
var pwd = $('#pwdInput').val();
var repwd = $('#repwdInput').val(); //验证
if (pwd !== repwd) {
$('#repwdInput').parent().next().text('两次密码不一致').attr('class', 'error');
return false;
} else {
$('#repwdInput').parent().next().text('两次密码一致').attr('class', 'success');
return true;
}
} })
</script>
</body>
</html>
表单验证
jQuery事件，对象以及插件的更多相关文章
- 深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
- 知识笔记：jQuery 事件对象属性小结
使用事件自然少不了事件对象.因为不同浏览器之间事件对象的获取,以及事件对象的属性都有差异,导致我们很难跨浏览器使用事件对象.jQuery中统一了事件对象,当绑定事件处理函数时,会将jQuery格式化后 ...
- jquery 事件对象属性小结
使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQue ...
- 基于jQuery的对象切换插件：soChange 1.5 (点击下载)
http://www.jsfoot.com/jquery/demo/2011-09-20/192.html 所有参数: $(obj).soChange({ thumbObj:null, //导 ...
- jQuery事件对象event的属性和方法
事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...
- jQuery事件对象的属性
注:摘自<锋利的jQuery(第二版)> JQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. 1. ...
- jQuery 事件对象的属性
jQuery 在遵循 W3C 规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. (1) event.type 该方法的作用是可以获取到 ...
- jquery 事件对象笔记
jQuery元素操作 设置或获取元素固有属性 获取 prop(属性名) 修改 prop(属性名,值) 获取自定义属性 ...
- jQuery事件对象
1.event.currentTarget 事件的监听者2.event.target 事件的目标3.event.delegateTarget 绑定了当前正在调用jQuery事件处理器的(当前事件的委托 ...
随机推荐
- Asterisk 通话过程中执行动作（即applicationmap ）的使用方法和电话转会议的实现
asterisk在正常通话过程中执行拨号计划中动作是通过feature.conf中的[applicationmap ]下定义的,举例如下: nway-start => *0,callee,M ...
- BZOJ_3123_[Sdoi2013]森林_主席树+启发式合并
BZOJ_3123_[Sdoi2013]森林_主席树+启发式合并 Description Input 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20 ...
- 使用Oracle数据库实现树形结构表的子-父级迭代（递归）查询和删除，通过级联菜单简单举例
前言: 我们在开发中,常常遇到单表的子-父id级联的表结构,在树形的深度不确定的情况下,一次查询出某个树形结构下的所有具有子-父级关系的数据变得十分困难. 这时,我们使用oracle提供的CONNEC ...
- C++之萃取技术（traits)
为什么需要类型萃取(特化) 前面我们提到了迭代器,它是一个行为类似于smart pointer之类的东西,主要用于对STL容器中的对象进行访问,而且不暴露容器中的内部结构,而迭代器所指对象的型别称为该 ...
- HDU2203(KMP入门题)
亲和串 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- ubuntu 禁止错误信息 report 问题弹出
发现ubuntu只要出现点问题就会提示要不要report error, 光点cancel就点烦了. 而且今天重新安装了一台ubuntu结果开机就蹦出error, 好烦啊. 下面说个特别有效的解决办法, ...
- glance image-create --name "linux-core-mini-01" --file /cirros-0.3.4-x86_64-disk.img --disk-format qcow2 --container-format bare --progress --visibility public
glance image-create --name "linux-core-mini-01" --file /cirros-0.3.4-x86_64-disk.img --dis ...
- 再谈使用X.PagedList.Mvc 分页（ASP.NET Core 2.1）
在以前的博文中写过使用X.PagedList.Mvc组件来对ASP.NET MVC应用程序进行分页,可以参考此篇随笔:Asp.net MVC 使用PagedList(新的已更名 为X.PagedLis ...
- Flutter实战视频-移动电商-38.路由_Fluro中Handler编写方法
38.路由_Fluro中Handler编写方法 在main.dart中初始化Fluro 编写handler 在lib下新建routers文件夹,表示里面要很多路由相关的文件 我们声明一个Handler ...
- VR视频原理
VR视频,这里指的是沉浸式全景视频,基本场景是观影者戴上显示头盔(如cardboard),在其中通过头部的转动可以看到全景视频的每个方向的图像.同时也能听到来自各个方向的声音,声音也会随着头部的转动而 ...