jQuery
jQuery
黄大仙No.1
黄大仙
展开
-
jQuery 元素尺寸
width() / height()取得四配元素宽度和高度值只算width / heightinnerWidth()/ innerHieght取得四配元素宽度和高度值包含paddingouterWidth()/ outerHeight()取得四配元素究度和高度值包含padding. borderouterWidth(true)! outerHeight(true)取得匹配元素宽度和高度值包含padding. borde.margin<!DOCTYPE...原创 2020-08-31 18:18:40 · 147 阅读 · 0 评论 -
jquery 待办事项
index.html<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /.原创 2020-08-29 20:53:27 · 432 阅读 · 0 评论 -
jquery本地存储的数据格式只能是字符串,如需存储对象,需要转换后存储
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <script> var todoList = [原创 2020-08-29 14:14:12 · 298 阅读 · 0 评论 -
jquery 全屏滚动插件fullPage初体验
全屏滚动fullpage插件下载地址及说明https://github.com/alvarotrigo/fullPage.js效果:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>别只顾着左右滑动, 上下也可以</title> <link rel="stylesheet" href="css/fullpage.min.原创 2020-08-28 22:45:54 · 202 阅读 · 0 评论 -
jquery 瀑布流
pinterest_grid.js<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/d.原创 2020-08-28 21:46:53 · 166 阅读 · 0 评论 -
jQuery 多库共存
如果jquery的$已经被其他库占用,可以使用jQuery代替:如:jQuery('div') 等价于$('div')如果还不放心,可以自定义其他的名称,如:var suiBian=$.noConflict();suiBian('div')<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &原创 2020-08-28 16:12:31 · 124 阅读 · 0 评论 -
jquery 拷贝对象
如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend ()方法语法∶$.extend ( [deep], target, object1,[object])1.deep:如果设为true为深拷贝,默认为false浅拷贝2.target:要拷贝的目标对象3.object1:待拷贝到第一个对象的对象。案例:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-原创 2020-08-28 14:15:48 · 542 阅读 · 0 评论 -
jquery 事件对象
与原生js里面的事件对象用法基本相同<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> <style> div { width: 200px; heig原创 2020-08-28 13:58:17 · 80 阅读 · 0 评论 -
jquery自动触发事件
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> <script> $(function () { var flag原创 2020-08-28 13:45:11 · 177 阅读 · 0 评论 -
jQuery 事件解绑
事件.off([事件名][, [子元素名]])一次性事件:事件.one(), //用法同on<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> <script>原创 2020-08-28 13:13:52 · 222 阅读 · 0 评论 -
jquery 发布微博案例(动态添加绑定,删除事件)
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> <style> ul li { display: none; } </style> .原创 2020-08-28 13:00:52 · 287 阅读 · 0 评论 -
jquery 事件处理
事件处理on()绑定事件on(方法在匹配元素上绑定一个或多个事件的事件处理函数语法:element.on (events,[selector],fn)1.events:一个或多个用空格分隔的事件类型,如"click"或"keydown”.2.selector:元素的子元素选择器。3.fn:回调函数案例:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <原创 2020-08-28 12:41:09 · 121 阅读 · 0 评论 -
jquery 创建,追加,删除节点
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <ul> <li>先来的li</li>原创 2020-08-27 21:51:59 · 175 阅读 · 0 评论 -
jquery 遍历数据
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <div>1</div> <div>2原创 2020-08-27 20:53:02 · 404 阅读 · 0 评论 -
jQuery 返回指定祖先.parents()
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <div class="one"> <div clas原创 2020-08-27 16:57:59 · 143 阅读 · 0 评论 -
jquery 修改购物车小计,添加加减功能
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的购物车-品优购</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/common.css"> <link rel=".原创 2020-08-27 16:46:00 · 421 阅读 · 0 评论 -
jquery 获取元素内容
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <div> hi <span>ha ha&原创 2020-08-27 16:14:03 · 216 阅读 · 0 评论 -
jquery 全选,反选复选框
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的购物车-品优购</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/common.css"> <link rel="s原创 2020-08-27 16:01:39 · 178 阅读 · 0 评论 -
jquery 元素的属性操作
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <a href="http://aynuhuangdaxian.xyz"原创 2020-08-27 15:22:24 · 131 阅读 · 0 评论 -
jquery 美丽的手风琴效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> <style> * { margin: 0; padding: 0; } img {.原创 2020-08-26 22:18:28 · 137 阅读 · 0 评论 -
jquery 封装的动画效果函数
jQuery给我们封装了很多动画效果,最为常见的如下:显示隐藏show(), hide(), toggle()滑动slideDown(),slideUp(), slideToggle()淡入淡出fadeIn(), fadeOut(), fadeToggle(), fadeTo()自定义动画animate()showshow ( [speed,[easing] , [fn]])(1)参数都可以省略,无动画直接显示。( 2 ) sp原创 2020-08-26 18:04:40 · 286 阅读 · 0 评论 -
jquery类操作与className的区别
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <div class="one"></div> &原创 2020-08-26 16:12:22 · 160 阅读 · 0 评论 -
jquery 实现淘宝tab栏,相关jquery代码仅三行!!!
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>tab栏切换</title> <script src="js/jquery-3.5.1.min.js"></script> <style> * { margin: 0; padding: 0; } .tab {.原创 2020-08-26 13:59:59 · 236 阅读 · 1 评论 -
jquery 操作类
作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点。1.添加类$(“div" ).addClass("current");2.移除类$(“div" ).removeClass("current");3.切换类$(“div" ).toggleClass("current");<!DOCTYPE html><html lang="en"> <head> <meta charset="U原创 2020-08-26 13:08:59 · 166 阅读 · 0 评论 -
jquery css方法的三种使用,调用时可以传入对象
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> <style> div { width: 200px; height: 200px; } &原创 2020-08-26 12:50:55 · 599 阅读 · 0 评论 -
jquery tab栏
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> <!--导入jquery--> <style> * { margin: 0; paddi.原创 2020-08-26 12:40:13 · 170 阅读 · 0 评论 -
jquery隐式迭代
jquery对象的css方法会将获取的所有元素遍历修改属性<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <div&原创 2020-08-25 17:52:17 · 159 阅读 · 0 评论 -
jQuery选择器和筛选方法
1.1 基础选择器原生S获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery给我们做了封装,使获取元素统一标准(选择器”)∥里面选择器直接写CSS选择器即可,但是要加引号名称用法描述ID选择器s("#id")获取指定D的元素全选选择器s(*)匹配所有元素类选择器s(".class")获取同一类class的元素标签选择器(“div”)获取同一类标签的所有元素并集选择器$(“div,p,li”)选取多个元素交集选择器$(原创 2020-08-25 17:44:46 · 302 阅读 · 0 评论 -
jQuery对象和Dom对象
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <div></div> <script>原创 2020-08-25 16:50:34 · 100 阅读 · 0 评论 -
jquery获取元素的方式
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> <style> div { width: 200px; height: 150px; back原创 2020-08-25 16:49:22 · 210 阅读 · 0 评论