'''
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 ---键被松开
(runoob.com)
输入你的名字:
按键的次数: 0
2,鼠标事件
hover()方法用于模拟光标悬停事件,当光标移动到元素上时,会触发指定的第一个函数,当鼠标移除这个元素,会触发第二个函数
鼠标移动到该段落。
3,表单事件
focus()获取焦点事件,blur()失去焦点事件
change()当元素值发生改变时,发生change事件
(4)隐藏和显示可以添加参数
语法:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
都是可选的speed参数规定速度,可以取:slow,fast,或毫秒。callback参数是完成后所执行的函数名称
隐藏及设置回调函数
其中第二个参数是一个字符串,表示过度使用哪种缓动函数(自身提供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是动画完成后执行的函数
jquery
animate
这是最后一行
注:关于position中fixed,absolute和relative不同值得区别(见图)
注解:几乎所有的css属性,animate都能操作,但是必须使用camel标记法书写(例如padding-left应写成paddingLeft)。同时色彩动画不包含在核心jquery库中,需要从http://plugins.jquery.com/color/下载
2,使用相对值
默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
注:每点击一次按钮,长和宽都增加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");
});
(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(),他们拥有回调函数。回调函数有两个参数:
被选元素列表中当前元素的下标,以及原始值,然后以函数新值返回希望使用的字符串
这是一个有 粗体 字的段落。
这是另外一个有 粗体 字的段落。
设置属性
设置多个属性
$('#a').attr({
'href':'http://',
'height':'100px'
});
设置带返回函数
$('#a').attr('href',function(i,origText){
return origText+'/jquery' //返回的链接是原始链接加上jquery
})