首页 前端知识 jQuery-Day3(1)

jQuery-Day3(1)

2024-06-13 21:06:50 前端知识 前端哥 329 497 我要收藏

<body>

    <div></div>

    <input type="text">

      

    <script>

    $(function() {

      // 绑定事件

      $("div").on("click", function() {

        alert(11);

      });



      // 自动触发事件

      // 1. 元素.事件()

      // $("div").click();会触发元素的默认行为

      

      // 2. 元素.trigger("事件")

      // $("div").trigger("click");会触发元素的默认行为

      $("input").trigger("focus");

      

      // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为

      $("input").on("focus", function() {

        $(this).val("你好吗");

      });

      // 一个会获取焦点,一个不会

      $("div").triggerHandler("click");

      // $("input").triggerHandler("focus");

    });

    </script>

</body>



📣注意:trigger() 和 triggerHandler() 方法的区别是:triggerHandler()方法不会触发元素的默认行为❗❗❗

🥇 三、jQuery 事件对象

===============================================================================

jQuery 对DOM中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大。事件被触发,就会有事件对象的产生。

语法

在这里插入图片描述

代码示例如下:


<body>

    <div></div>



	<script>

        $(function() {

            $(document).on("click", function() {

                console.log("点击了document");

            })

            $("div").on("click", function(event) {

                // console.log(event);

                console.log("点击了div");

                event.stopPropagation();

            })

        })

    </script>

</body>



📣注意:jQuery中的 event 对象使用,可以借鉴 API 和 DOM 中的 event 。❗❗❗

🥇 四、jQuery 拷贝对象

===============================================================================

jQuery中为我们提供了一个拷贝对象的方法,方便易用,内容如下。

语法

在这里插入图片描述

代码示例如下:


<script>

        $(function() {

   			// 1.合并数据

            var targetObj = {};

            var obj = {

                id: 1,

                name: "andy"

            };

            // $.extend(target, obj);

            $.extend(targetObj, obj);

            console.log(targetObj);

   

   			// 2. 会覆盖 targetObj 里面原来的数据

            var targetObj = {

                id: 0

            };

            var obj = {

                id: 1,

                name: "andy"

            };

            // $.extend(target, obj);

            $.extend(targetObj, obj);

            console.log(targetObj); 

        })

    </script>



📣注意:1、浅拷贝拷贝的是目标对象的地址,修改目标对象会影响拷贝的新的对象;2、深拷贝是克隆一个新的对象,修改目标对象不会影响拷贝出来的新的对象;❗❗❗

🥇 五、jQuery 多库共存

===============================================================================

实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现,这种情况被称为,jQuery 多库共存。

语法

在这里插入图片描述

代码示例如下:


<script>

	$(function() {

  		// 让jquery 释放对$ 控制权 让用自己决定

  		var suibian = jQuery.noConflict();

  		console.log(suibian("span"));

	})

</script>



🥇 六、jQuery 插件

=============================================================================

jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的,所以必须要先引入

jQuery文件,因此也称为 jQuery 插件。

​ jQuery 插件常用的网站:

  1. jQuery 插件库

  2. jQuery 之家

  3. 引入相关文件。(jQuery 文件 和 插件文件)

  4. 复制相关html、css、js (调用插件)。

📣注意:jQuery插件是依赖于jQuery,所以必须先引入jQuery; ❗❗❗

🥈 6.1 瀑布流插件(重点讲解)


我们学习的第一个插件是jQuery之家的开源插件,瀑布流。我们将重点详细讲解,从找到插件所在网页,然后点击下载代码,到插件的使用等,后面的插件使用可参考瀑布流插件的使用。

瀑布流插件链接

下载位置如图:

在这里插入图片描述

在这里插入图片描述

🏅 6.1.1 瀑布流插件使用步骤演示

插件的使用三点: 1. 引入css. 2.引入JS 3.引入html。 (有的简单插件只需引入html和js,甚至有的只需引入js);

  1. 引入css

<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" type="text/css" href="css/default.css">

  

<!-- 下面的样式代码为页面布局,可以引入,也可以自己写,自己设计页面样式,一般为直接引入,方便 -->

<style type="text/css">

  #gallery-wrapper {

    position: relative;

    max-width: 75%;

    width: 75%;

    margin: 50px auto;

  }



  img.thumb {

    width: 100%;

    max-width: 100%;

    height: auto;

  }



  .white-panel {

    position: absolute;

    background: white;

    border-radius: 5px;

    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);

    padding: 10px;

  }



  .white-panel h1 {

    font-size: 1em;

  }



  .white-panel h1 a {

    color: #A92733;

  }



  .white-panel:hover {

    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);

    margin-top: -5px;

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

  }

</style>



  1. 引入js

<!-- 前两个必须引入 -->

<script src="js/jquery-1.11.0.min.js"></script>

<script src="js/pinterest_grid.js"></script>

<!-- 下面的为启动瀑布流代码,参数可调节属性,具体功能可参考readme.html -->

<script type="text/javascript">

	$(function() {

      $("#gallery-wrapper").pinterest_grid({

          no_columns: 5,

          padding_x: 15,

          padding_y: 10,

          margin_bottom: 50,

          single_column_breakpoint: 700

      });

	});

</script>



3.引入html.


	<!-- html结构一般为事先写好,很难修改结构,但可以修改内容及图片的多少(article标签) -->

	<section id="gallery-wrapper">

        <article class="white-panel">

            <img src="images/P_000.jpg" class="thumb">

            <h1><a href="#">我是轮播图片1</a></h1>

            <p>里面很精彩哦</p>

        </article>

        <article class="white-panel">

            <img src="images/P_005.jpg" class="thumb">

            <h1><a href="#">我是轮播图片1</a></h1>

            <p>里面很精彩哦</p>

        </article>

        <article class="white-panel">

            <img src="images/P_006.jpg" class="thumb">

            <h1><a href="#">我是轮播图片1</a></h1>

            <p>里面很精彩哦</p>

        </article>

        <article class="white-panel">

            <img src="images/P_007.jpg" class="thumb">

            <h1><a href="#">我是轮播图片1</a></h1>

            <p>里面很精彩哦</p>

        </article>

    </section>



📣总结:jQuery插件就是引入别人写好的:html 、css、js (有时也可以只引入一部分,读懂后也可以修改部分内容)❗❗❗

🥈 6.2 图片懒加载插件


图片的懒加载就是:当页面滑动到有图片的位置,图片才进行加载,用以提升页面打开的速度及用户体验。(下载略)

图片懒加载插件链接

🏅 6.2.1 图片懒加载插件使用步骤演示

懒加载只需引入html 和 js操作 即可,此插件不涉及css。

  1. 引入js

<script src="js/EasyLazyload.min.js"></script>

<script>

   	lazyLoadInit({

   		showTime: 1100,

   		onLoadBackEnd: function(i, e) {

     		console.log("onLoadBackEnd:" + i);

   		},

   		onLoadBackStart: function(i, e) {

     		console.log("onLoadBackStart:" + i);

   		}

 	});

</script>



  1. 引入html

<img data-lazy-src="upload/floor-1-3.png" alt="">



🥈 6.3 全屏滚动插件


全屏滚动插件比较大,所以,一般大型插件都会有帮助文档,或者网站。全屏滚动插件介绍比较详细的网站为:

全屏滚动插件链接

🏅 6.3.1 全屏滚动插件使用步骤演示

全屏滚动因为有多重形式,所以不一样的风格html和css也不一样,但是 js 变化不大。所以下面只演示js的引入,html和css引入根据自己实际项目需要使用哪种风格引入对应的HTML和CSS。

代码示例如下:


<script src="js/jquery.min.js"></script>

<script src="js/fullpage.min.js"></script>

<script>

  	$(function() {

  		$('#dowebok').fullpage({

    		sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],

    		navigation: true

  		});

	});

</script>



📣注意:实际开发,一般复制文件,然后在文件中进行修改和添加功能。❗❗❗

🥈 6.4 bootstrap组件


Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架,他依靠jQuery实现,且支持响应式布局,使得 Web 开发更加方便快捷。

凡是在软件开发中用到了软件的复用,被复用的部分都可以称为组件,凡是在应用程序中已经预留接口的组件就是插件。Bootstrap组件使用非常方便: 1.引入bootstrap相关css和js ;2.去官网复制html;

🏅 6.4.1 bootstrap组件使用的步骤

  1. 引入bootstrap相关css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

<script src="bootstrap/js/jquery.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>



  1. 去网复制html的功能模块

<div class="container">

        <!-- Single button -->

        <div class="btn-group">

            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

      		Action <span class="caret"></span>

    		</button>

            <ul class="dropdown-menu">

                <li><a href="#">Action</a></li>

                <li><a href="#">Another action</a></li>

                <li><a href="#">Something else here</a></li>

                <li role="separator" class="divider"></li>

                <li><a href="#">Separated link</a></li>

            </ul>

     	</div>

	</div>



🥈 6.5 bootstrap插件


最后

javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。

css源码pdf

JavaScript知识点
“#”>Another action

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

        </ul>

 	</div>

</div>



[]( )🥈 6.5 bootstrap插件

---------------------------------------------------------------------------------





### 最后

javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。



[外链图片转存中...(img-tMJP7MwB-1718013907981)]

[外链图片转存中...(img-VkaIgkmF-1718013907983)]
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12022.html
标签
评论
发布的文章

JQuery函数 | 选择器 | 事件

2024-06-20 00:06:11

双X轴的Echarts图

2024-06-20 00:06:08

在Vue3中使用echarts图表

2024-06-20 00:06:07

将echarts封装为js文件

2024-06-20 00:06:04

利用Echarts画地图和飞线

2024-06-20 00:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!