ICY___的Jquery入门
关注
分享
扫一扫
JQuery的入门，我和大家一起入门！
ICY___
Hi~ o(*￣▽￣*)ブ，我是ICY，一枚前端小白
关注我的公众号 不露脸的如花 更多的干货和毒鸡汤等着你
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Jquery事件
<body> <button id="btn">按钮</button> <div class="block"> <button class="btn">按钮1</button> </div> <ul> <原创 2019-02-25 22:44:34 · 150 阅读 · 0 评论 -
jQuery手风琴图片轮播（源码+注释）
之前在写js轮播图的时候，没有说手风琴式的轮播图，今天借着jQuery代码少的优势，介绍jQuery下的手风琴轮播图 首先看看实现效果：（图片来自百度） 基本原理：利用float：left来布局，通过改变图片的宽来实现手风琴效果 代码及简单注释如下（因为过多的注释会影响记忆和独立思考，所以今后将注释关键点） jquery代码（3.3.1版）： $(function (...原创 2019-02-26 20:52:21 · 1790 阅读 · 0 评论 -
Jquery图片轮播（连续滚动+突出显示）
之前已经写过很多的图片轮播了，但以下这种还真的没想到过 实现效果（图片来源于百度，侵权请与本人联系） 主要原理：利用浮动特性和超出部分隐藏，动态改变第一张图的右偏移量，动态改变图片排列，实现轮播 利用克隆，实现给大图的动态穿参，最终实现效果。 代码如下： <!DOCTYPE html> <html> <head lang="en"> ...原创 2019-02-27 07:39:43 · 1279 阅读 · 2 评论 -
jQuery图片瀑布流
很早之前就听说过瀑布流布局，瀑布流布局能够降低页面的复杂度，对用户也比较友好，但它也有局限，对于一些页面差异比较大的页面或内如不是一种很好的选择。 推荐大家看一下瀑布流鼻祖Pinterest的网站，不过好像需要注册......或者就是手机淘宝和京东可以一直下滑显示新的内容之类等等 或者看看我的（图片来源于百度）： 实现方式： 1、传统多列浮动。代表网站蘑菇街和哇哦。 2、用...原创 2019-02-27 10:22:10 · 738 阅读 · 0 评论 -
Jquery内置动画
在Jquery的世界里，动画是怎样执行的呢？和css3相比，又有那些不同和优势呢？相信看完这篇博客后，你就会明白。 我在想我究竟用什么方式才能更好的表达出我的想法，所以，今天做新的尝试，将代码和知识点重写样式，貌似更加直接明了吧。 固定动画 show() 显示 hide() 隐藏 参数1 动画的时间 参数2 回调函数（动画完成 可选项，下同） ...原创 2019-02-25 20:26:57 · 287 阅读 · 0 评论 -
Jquery 操作DOM元素（3）
相比于原生js，Jquery真的给了我们一些新的想法和途径去实现一些功能。关于Jquery dom的第三篇。 代码如下，注释已写：（我博客上的代码基本上除了有其它关联文件都可以直接运行，我用的Jquery库为最新3.1版） 欢迎留言交流 <!DOCTYPE html> <html lang="en"> <head> <meta char...原创 2019-02-22 22:22:44 · 642 阅读 · 0 评论 -
Jquery 操作DOM元素（1）
用原生js来操作dom元素其实是一件比较繁琐的事，当JQuery遇到dom操作时会怎样呢？ 直接上代码，已注释好： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten原创 2019-02-22 07:56:53 · 534 阅读 · 0 评论 -
Jquery 操作DOM元素（2）
接着上篇博客，继续说一说Jquery的dom操作 代码如下，注释已写： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device原创 2019-02-22 11:36:02 · 199 阅读 · 0 评论 -
JQuery选择器
听说Jquery很火，我也来凑个热闹，下面为大家介绍JQuery里面的强大的选择器。 有四大部分：基本选择器 层级选择器 过滤选择器 表单选择器 讲真，如果js掌握的扎实的话，这一部分只需要多加练习即可掌握。写法和用法见代码：（建议自己亲自打一遍，加深记忆） <!DOCTYPE html> <html lang="en"> <head&...原创 2019-02-22 07:50:19 · 153 阅读 · 0 评论