简简单单JQuery入门（two）

最新推荐文章于 2022-11-12 16:12:59 发布

你huai哦

最新推荐文章于 2022-11-12 16:12:59 发布

阅读量102

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_36736182/article/details/105413568

版权

注：这篇文章是接着上一篇写的。

动画

默认显示和隐藏的方法：
show(speed,easing,fn):显示
hide(speed,easing,fn):隐藏
toggle(speed,easing,fn):切换。即隐藏变显示、显示变隐藏

参数说明：
speed：执行的时长。默认是normal
			三个预定义的值（slow、noraml、fast）或一个表示毫秒值的整数
easing：动画执行的效果，默认是swing。
			两个可选参数swing、linear。
			swing：速度是开始慢、中间快、结束慢
			linear：匀速执行
fn：动画完成后执行的函数，每个元素执行一次

滑动显示和隐藏的方法：
slideDown(speed,easing,fn):滑动隐藏
slideUp(speed,easing.fn):滑动显示
slideToggle(speed,easing,fn):滑动切换

参数说明和上面的一样

淡入淡出显示和隐藏的方法：
fadeIn(speed,easing.fn):淡入淡出显示
fadeOut(speed,easing.fn):淡入淡出隐藏
fadeToggle(speed,easing.fn):淡入淡出切换

参数说明和上面一样

注：上面的三个参数是可选的

遍历

四种进行遍历的方式：
1:循环for
2:对象.each([callback]) 	//对象必须是jquery对象。相当于对象中的每个元素调用一次其中的函数
3:$.each(对象,callback)    //对象可是jquery对象，也可以是js的数组对象
4:for  ...  of                        //3.0版本之后才支持


以下代码进行演示：
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript" src="js/jquery.js"></script>
<script>
    $(function () {
        var text = $("div");

        //第一种遍历方式
        for(i=0;i<text.length;i++){
            alert(i+":"+text[i].innerHTML);
        }

        //第二种遍历方式
        text.each(function (index,element) {
            //第一种方式：用this作为当前的元素，这时不需要参数，this是js对象
            alert(this.innerHTML);

            //index：索引；elemet：元素对象,是js对象
            if(element.innerHTML == "aaa"){
                return true   //相当于continue；
            }
            if(element.innerHTML == "ccc"){
                return false   //相当于break；
            }
            alert(index+":"+element.innerHTML);
        })
        
        
        //第三种遍历方式
        $.each(text,function () {
            alert(this.innerHTML);
        })
        
        
        //第四种方式：
        for(aa of text){
            alert(($(aa).html()));
        }

    })
</script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>

</body>
</html>

事件绑定的方式

三种事件绑定的方式：
1：jquery.事件方法(回调函数)       
	注：以上不传入函数，会调用浏览器默认的函数  
2：on绑定事件/off解绑事件
	jquery对象.on("事件名称","回调函数")
	jquery对象.off("事件名称","回调函数")
3：事件切换：toggle在多个回调函数之间轮流切换
	jquery对象.toggle(fn1,f2,...)
	注：这种方式在1.9之后被删除了

事件：比如鼠标移动到之上等操作
回调函数是自己定义的函数。

插件：增强JQuery功能

$.fn.extend({函数名:函数,函数名2:函数,....})
	这种形式是给通过Jquery获取的对象添加功能；
$.extend({函数名:函数,函数名2:函数,...})
	这种形式是给Jquery对象添加功能。

简单理解：就是通过添加函数的方式增加对象的功能，相当于自定义函数

简简单单JQuery入门（two）

动画

遍历

事件绑定的方式

插件：增强JQuery功能

更多学习：