JQuery_高级

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 定义循环定时器
    1.2 切换小相框的src属性
  • 定义数组,存放图片资源路径
  • 生成随机数。数组索引
  1. 给结束按钮绑定单击事件
    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代表谁?
谁调用我,我代表谁。。。
JQuery_高级_第1张图片

你可能感兴趣的:(Jquery学习)