首页 前端知识 最新JQuery 入门 - 附案例代码_jquery前端开发实战教程案例源码,2024年最新阿里三面

最新JQuery 入门 - 附案例代码_jquery前端开发实战教程案例源码,2024年最新阿里三面

2024-05-10 22:05:23 前端知识 前端哥 420 599 我要收藏

img
img

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

click(handler)			//单击事件
mouseenter(handler)		//鼠标进入事件
mouseleave(handler)		//鼠标离开事件

缺点:不能同时注册多个事件



> 
> bind方式注册事件
> 
> 
> 



//第一个参数:事件类型
//第二个参数:事件处理程序
$("p").bind("click mouseenter", function(){
    //事件响应方法
});

缺点:不支持动态事件绑定



> 
> delegate注册委托事件
> 
> 
> 



// 第一个参数:selector,要绑定事件的元素
// 第二个参数:事件类型
// 第三个参数:事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

缺点:只能注册委托事件,因此注册时间需要记得方法太多了



> 
> on注册事件
> 
> 
> 


#### on注册事件(重点)



> 
> jQuery1.7之后,jQuery用on统一了所有事件的处理方法。
> 
> 
> 最现代的方式,兼容zepto(移动端类似jQuery的一个库),强烈建议使用。
> 
> 
> 


on注册简单事件



// 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。
$(selector).on( "click", function() {});

on注册委托事件



// 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
$(selector).on( "click",'span', function() {});

on注册事件的语法:



// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
// 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
// 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
// 第四个参数:handler,事件处理函数
$(selector).on(events,[selector],[data],handler);

#### 事件解绑



> 
> unbind方式(不用)
> 
> 
> 



$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件


> 
> undelegate方式(不用)
> 
> 
> 



$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( 'click' ); //解绑所有的click事件


> 
> off方式(推荐)
> 
> 
> 



// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

#### 触发事件



$(selector).click(); //触发 click事件
$(selector).trigger("click");

#### jQuery事件对象


jQuery事件对象其实就是js事件对象的一个封装,处理了兼容性。



//screenX和screenY 对应屏幕最左上角的值
//clientX和clientY 距离页面左上角的位置(忽视滚动条)
//pageX和pageY 距离页面最顶部的左上角的位置(会计算滚动条的距离)

//event.keyCode 按下的键盘代码
//event.data 存储绑定事件时传递的附加数据

//event.stopPropagation() 阻止事件冒泡行为
//event.preventDefault() 阻止浏览器默认行为
//return false:既能阻止事件冒泡,又能阻止浏览器默认行为。

### jQuery补充知识点


#### 链式编程



> 
> 通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 jQuery对象。
> 
> 
> 



end(); // 筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态。

【案例:五角星评分案例.html】


#### each方法



> 
> jQuery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了。
> 
> 
> 


作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数



// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素(DOM对象)
$(selector).each(function(index,element){});

【案例:不同的透明度.html】


#### 多库共存



> 
> jQuery使用 
>  
>  
>  
>  
>  作 
>  
>  
>  为 
>  
>  
>  标 
>  
>  
>  示 
>  
>  
>  符 
>  
>  
>  , 
>  
>  
>  但 
>  
>  
>  是 
>  
>  
>  如 
>  
>  
>  果 
>  
>  
>  与 
>  
>  
>  其 
>  
>  
>  他 
>  
>  
>  框 
>  
>  
>  架 
>  
>  
>  中 
>  
>  
>  的 
>  
>  
>  
>  作为标示符,但是如果与其他框架中的 
>  
>  
>  作为标示符,但是如果与其他框架中的冲突时,jQuery可以释放$符的控制权.
> 
> 
> 



var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

### 插件


#### 常用插件



> 
> 插件:jquery不可能包含所有的功能,我们可以通过插件扩展jquery的功能。
> 
> 
> jQuery有着丰富的插件,使用这些插件能给jQuery提供一些额外的功能。
> 
> 
> 


1. jquery.color.js



> 
> animate不支持颜色的渐变,但是使用了jquery.color.js后,就可以支持颜色的渐变了。
> 
> 
> 


使用插件的步骤



//1. 引入jQuery文件
//2. 引入插件(如果有用到css的话,需要引入css)
//3. 使用插件

2. jquery.lazyload.js


懒加载插件


#### jquery.ui.js插件


jQueryUI专指由jQuery官方维护的UI方向的插件。


官方API:<http://api.jqueryui.com/category/all/>


其他教程:[jQueryUI教程](https://bbs.csdn.net/topics/618545628)


基本使用:



//1. 引入jQueryUI的样式文件
//2. 引入jQuery
//3. 引入jQueryUI的js文件
//4. 使用jQueryUI功能

使用jquery.ui.js手风琴菜单


### 制作jquery插件



> 
> 原理:jquery插件其实说白了就是给jquery对象增加一个新的方法,让jquery对象拥有某一个功能。
> 
> 
> 



//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};


### 案例代码


##### 【案例:下拉菜单】



  • 一级菜单1
    • 二级菜单1
    • 二级菜单2
    • 二级菜单3
  • 一级菜单1
    • 二级菜单1
    • 二级菜单2
    • 二级菜单3
  • 一级菜单1
    • 二级菜单1
    • 二级菜单2
    • 二级菜单3

});


##### 【案例:突出展示】



});


##### 【案例:手风琴】



  •     <li class="menuGroup">
            <span class="groupTitle">标题2</span>
            <div>我是弹出来的div2</div>
        </li>
    
        <li class="menuGroup">
            <span class="groupTitle">标题3</span>
            <div>我是弹出来的div3</div>
        </li>
    
        <li class="menuGroup">
            <span class="groupTitle">标题4</span>
            <div>我是弹出来的div4</div>
        </li>
    </ul>
    

##### 【案例:淘宝精品】



<ul id="left">
    <li><a href="#">女靴</a></li>
    <li><a href="#">雪地靴</a></li>
    <li><a href="#">冬裙</a></li>
    <li><a href="#">呢大衣</a></li>
    <li><a href="#">毛衣</a></li>
    <li><a href="#">棉服</a></li>
    <li><a href="#">女裤</a></li>
    <li><a href="#">羽绒服</a></li>
    <li><a href="#">牛仔裤</a></li>
</ul>
<ul id="center">
    <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男靴.jpg" width="200" height="250" /></a></li>
</ul>
<ul id="right">
    <li><a href="#">女包</a></li>
    <li><a href="#">男包</a></li>
    <li><a href="#">登山鞋</a></li>
    <li><a href="#">皮带</a></li>
    <li><a href="#">围巾</a></li>
    <li><a href="#">皮衣</a></li>
    <li><a href="#">男毛衣</a></li>
    <li><a href="#">男棉服</a></li>
    <li><a href="#">男靴</a></li>
</ul>

##### 案例-《tab切换》



  • 国际大牌◆
  • 国妆名牌◆
  • 清洁用品◆
  • 男士精品

##### 案例-《下拉菜单2》



  • 一级菜单1
    • 二级菜单1
    • 二级菜单2
    • 二级菜单3
  • 一级菜单1
    • 二级菜单1
    • 二级菜单2
    • 二级菜单3
  • 一级菜单1
    • 二级菜单1
    • 二级菜单2
    • 二级菜单3

});


##### 案例-《360开关机动画》



});


##### 案例-《淡入淡出》



标题

});


##### 案例-《表格删除》



课程名称所属学院操作
JavaScript传智播客-前端与移动开发学院DELETE
css传智播客-前端与移动开发学院DELETE
html传智播客-前端与移动开发学院DELETE
jQuery传智播客-前端与移动开发学院DELETE

##### 案例-《美女相册》



美女画廊

  • 美女1
  • 美女2
  • 美女3
  • 美女4

img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

    color: #c60;
        background-color: transparent;
        font-weight: bold;
        text-decoration: none;
    }
    ul {
        padding: 0;
    }
    li {
        float: left;
        padding: 1em;
        list-style: none;
    }
    #imagegallery {

        list-style: none;
    }

    #imagegallery li {
        margin: 0px 20px 20px 0px;
        padding: 0px;
        display: inline;
    }

    #imagegallery li a img {
        border: 0;
    }
</style>

美女画廊

  • 美女1
  • 美女2
  • 美女3
  • 美女4

[外链图片转存中…(img-2uomt2kv-1715107142567)]
[外链图片转存中…(img-Ym5EsgfH-1715107142568)]
[外链图片转存中…(img-TeoZ34x7-1715107142568)]

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8005.html
标签
评论
发布的文章

HTML5(H5)中的Web Workers

2024-05-19 09:05:52

HTML5

2024-02-27 11:02:15

HTML5 <option> 标签

2024-05-19 09:05:51

@JsonProperty 注解详解

2024-05-19 09:05:27

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