'''
2019.4.1
(1)jquery容错机制
(2)jq中的$('#id')和js中document.getElementById()的区别
(3)jquery事件(键盘事件)
(4)隐藏和显示
(5)滑动效果
(6)jquery动画animate()方法
2019.4.2
(1)动画停止
(2)jquery链式调用
(3)获取内容和属性(text,val,html,attr)
'''
正文:
(1)jquery即使没有找到元素也不会报错,可以用length属性来判断是否找到了元素,length等于0就是没有找到
(2)$('id')和getElementby 的区别:
$(“#it1”)是jquary等框架的对象,他实际是一个数组对象
document.getElementById( “it1” ) ,它是一个DOM对象 ,可进行DOM操作。
var id = $('#it')[0];
(3)事件
基本语法$('#id').action(function(){})
1.键盘事件:事件顺序
keydown --键按下的过程
keypress --键被按下
keyup ---键被松开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
i=0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i+=1);
});
});
</script>
</head>
<body>
输入你的名字: <input type="text">
<p>按键的次数: <span>0</span></p>
</body>
</html>
2,鼠标事件
hover()方法用于模拟光标悬停事件,当光标移动到元素上时,会触发指定的第一个函数,当鼠标移除这个元素,会触发第二个函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
});
</script>
</head>
<body>
<p>鼠标移动到该段落。</p>
</body>
</html>
3,表单事件
focus()获取焦点事件,blur()失去焦点事件
change()当元素值发生改变时,发生change事件
(4)隐藏和显示可以添加参数
语法:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
都是可选的speed参数规定速度,可以取:slow,fast,或毫秒。callback参数是完成后所执行的函数名称
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
});
</script>
</head>
<body>
<div>隐藏及设置回调函数</div>
<button class="hidebtn">隐藏</button>
</body>
</html>
其中第二个参数是一个字符串,表示过度使用哪种缓动函数(自身提供linear和swing)
(5)滑动效果
语法
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback) #该方法可以在slideDown和slideUp之间切换
(6)animate动画
语法
$(selector).animate({params},speed,callback)
必须params参数定义形成动画的css属性。
可选speed规定效果时长,可以取slow,fast,毫秒
可选callback是动画完成后执行的函数
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<script src='js/jquery.1.12.4.min.js'></script>
<script >
$(function(){
//animate动画
$('#btn1').click(function(){
$('#div3').animate({left:"100px"});
});
});
</script>
</head>
<body>
<h1>animate</h1>
<button id="btn1">动画按钮</button>
<div id="div3" style="background: #98bf21;height: 100px;width: 100px;position:fixed;" ></div>
<p>这是最后一行</p>
</body>
</html>
注:关于position中fixed,absolute和relative不同值得区别(见图)
注解:几乎所有的css属性,animate都能操作,但是必须使用camel标记法书写(例如padding-left应写成paddingLeft)。同时色彩动画不包含在核心jquery库中,需要从http://plugins.jquery.com/color/下载
2,使用相对值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
注:每点击一次按钮,长和宽都增加150px
3,使用队列功能,会根据顺序逐一运行这些animate
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
2019/4/2
(1)动画停止:语法 $(selector).stop(stopAll,goToEnd)
参数都是可选,stopAll参数规定应该清除的动画队列,默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行(也就是仅停止当前动画,之后的动画还会继续)。goToEnd参数规定是否立即完成当前动画,默认是false
(2)链式调用,允许我们在相同的元素上运行多条jquery命令,一条接一条
$('#div3').slideDown(1000).animate({height:"200px"})
注:会先调用slidedown然后调用animate
(3)获取内容和属性,设置内容和属性
text()--设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容(包括HTML标记)
val()设置或返回表单字段的值
attr()方法用于获取属性值
$('#a1').attr('href');
设置内容和属性,使用同样的方法。
设置内容:text(),html(),val(),他们拥有回调函数。回调函数有两个参数:
被选元素列表中当前元素的下标,以及原始值,然后以函数新值返回希望使用的字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
});
</script>
</head>
<body>
<p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
<p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>
</body>
</html>
设置属性
设置多个属性
$('#a').attr({
'href':'http://',
'height':'100px'
});
设置带返回函数
$('#a').attr('href',function(i,origText){
return origText+'/jquery' //返回的链接是原始链接加上jquery
})