1.JQuery_动画1
元素显示的方法?
show(动画的执行时间,动画的执行效果,动画执行完毕后调用的函数)
元素隐藏的方法?
hide(动画的执行时间,动画的执行效果,动画执行完毕后调用的函数)
元素显示与隐藏切换的方法?
toggle(动画的执行时间,动画的执行效果,动画执行完毕后调用的函数)
2.JQuery_动画2
slideUp();
slideDown();
slideToggle();
fadeIn();
fadeOut();
fadeToggle();
3.1JQuery_遍历1_for循环
jQuery对象遍历有几种方式?
for (var i = 0; i < city.length; i++) {
// alert(city[i].innerHTML);
if(“上海” == citys[i].innerHTML){
//break; 结束循环
//continue; //结束本次循环,继续下次循环
}
3.2JQuery_遍历2_each方法
在each方法的回调函数内部,如何获取本次循环对应的元素对象?
jQuery对象.each(function(){
this代表每次循环拿到的元素;js对象
});
city.each(function () {
alert(this.innerHTML);
})
jQuery对象.each(function(index,element){
index:当前循环的索引
element:代表每次循环拿到的元素;js对象
});
city.each(function (index, ele) {
alert(index + “:” + $(ele).html());
//alert(index + “:” + ele.innerHTML);
})
***************************
只有$("xxx")得到的对象才是jQuery对象;
其他的都是js对象
如何结束each遍历?
return false
如何跳过each中某次循环?
return true
3.3JQuery_遍历3_全局each&forof
$.each()和 jQuery对象.each() 这两种方式有什么区别?
$.each():遍历的时候,需要指定遍历的是哪个对象;
$.each(city,function () {
alert($(this).html());
})
************************
for...of... 语法是ECMAScript6标准中提供的语法!!!!!!!
for (li of city){
alert($(li).html());
}
4.1JQuery_事件绑定1_标准方式
jQuery对象.focus(function{ // focus 聚焦事件
//
})做了什么?
绑定事件!!!!
jQuery对象.focus()做了什么?
触发聚焦事件的发生
4.2JQuery_事件绑定2_on&off
jQuery对象.on(第一个参数,第二个参数);参数分别是什么意思?
参数1:
事件名称
参数2:
回调函数
jQuery对象.off(参数);参数是什么意思?
参数:
事件名称;
解除指定的事件
jQuery对象.off();有什么效果?
解除所有的事件。
4.3JQuery_事件绑定3_事件切换(了解!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!)
5.JQuery_案例1_广告显示和隐藏
控制一个元素是否显示的css属性是什么?
/*
需求:
1. 当页面加载完,3秒后。自动显示广告
2. 广告显示5秒后,自动消失。
分析:
1. 使用定时器来完成。setTimeout (执行一次定时器)
2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
3. 使用 show/hide方法来完成广告的显示
*/
//入口函数,在页面加载完成之后,定义定时器,调用这两个方法
$(function () {
//定义定时器,调用adShow方法 3秒后执行一次
setTimeout(adShow,3000);
//定义定时器,调用adHide方法,8秒后执行一次
setTimeout(adHide,8000);
});
//显示广告
function adShow() {
//获取广告div,调用显示方法
$("#ad").show("slow");
}
//隐藏广告
function adHide() {
//获取广告div,调用隐藏方法
$("#ad").hide("slow");
}
6.JQuery_案例2_抽奖_实现
如何让一个按钮不可用?
$("#startID").prop(“disabled”,false); 添加disabled属性后,如果为false 可以用,true,不能用
$("#stopID").prop(“disabled”,true);
/* 分析:
给结束按钮绑定单击事件
1.1 停止定时器
1.2 给大相框设置src属性*/
//准备一个一维数组,装用户的像片路径
var imgs = [
“…/img/man00.jpg”,
“…/img/man01.jpg”,
“…/img/man02.jpg”,
“…/img/man03.jpg”,
“…/img/man04.jpg”,
“…/img/man05.jpg”,
“…/img/man06.jpg”
];
var index;
var startId;
//处理按钮是否可以使用的效果
$("#startID").prop(“disabled”,false);
$("#stopID").prop(“disabled”,true);
$(function () {
$("#startID").click(function () {
//处理按钮是否可以使用的效果
$("#startID").prop(“disabled”,true);
$("#stopID").prop(“disabled”,false);
startId = setInterval(function () {
index = Math.floor( Math.random() * 6);
$("#img1ID").prop(“src”,imgs[index])
},20);
});
$("#stopID").click(function () {
//处理按钮是否可以使用的效果
$("#startID").prop(“disabled”,false);
$("#stopID").prop(“disabled”,true);
clearInterval(startId);
$("#img2ID").prop(“src”,imgs[index]);
});
})
7.JQuery_插件机制(了解!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!)
实现插件的两种方式的区别?
$.fn.extend({键:值});
给jQuery获取的dom对象增强方法
$(“xxx”).方法名()
$.extend({键:值});
给jQuery的全局对象增强
$.方法名()
check方法内部的this代表谁?
谁调用我,我代表谁。。。