jQuery
jQuery
肝JOJO
这个作者很懒,什么都没留下…
展开
-
13.购物车案例
1.效果如下 2.代码 CSS省略 <script src="js/jquery.min.js"></script> $(function() { // 1. 全选 全不选功能模块 // 就是把全选按钮(checkall)的状态赋值给 三个小的按钮(j-checkbox)以及下面的checkall按钮就可以了 // 事件可以使用ch...原创 2020-01-09 23:12:57 · 278 阅读 · 2 评论 -
12.jQuery属性以及内容操作
1.设置或获取元素固有属性值prop() 固有属性:元素本身自带的属性,比如<a>元素里面的href,<input>里面的type $(function(){ console.log($("a").prop("href")); //获取a的href属性 $("a").prop("title...原创 2020-01-03 20:18:00 · 87 阅读 · 0 评论 -
11.王者荣耀手风琴案例
效果如下 鼠标经过相应图片会展开大图 代码 <style type="text/css"> * { margin: 0; padding: 0; } img { display: block; } ...原创 2020-01-02 20:27:03 · 1761 阅读 · 0 评论 -
10.突出显示案例
1.效果如下 鼠标移动到相应的图片上会突出显示 代码 <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } ...原创 2020-01-01 19:40:27 · 489 阅读 · 0 评论 -
9.jQuery动画切换效果
1.显示隐藏切换 show() hide() toggle() 2.滑动 slideDown() slideUp() slideToggle() 3.淡入淡出 fadeln() fadeOut() fadeToggle()切换 fadeTo("speed","opacity","easing",fn)透明度,其中速度和透明度必须写 ...原创 2020-01-01 19:38:16 · 385 阅读 · 0 评论 -
8.tab栏切换案列
效果如下 点击上方栏目可以换相应内容 代码 <style> * { margin: 0; padding: 0; } li { list-style-type: none; } .tab {...原创 2019-12-23 20:23:20 · 168 阅读 · 0 评论 -
7.jQuery样式操作
1.操作css方法 jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式 代码示例: <style> div { width: 200px; height: 200px; background-color: pink; } ...原创 2019-12-22 21:38:09 · 101 阅读 · 0 评论 -
6.淘宝服饰精品案例
效果如下 鼠标经过某个li会显示对应的图片,而隐藏其他图片 代码 <script src="jQuery.js"></script> <script> /* 核心原理: 1.鼠标经过左侧盒子某个小li,就让内容区盒子显示,其余图片隐藏 2.需要得到当前li的索引号,就可以显示对应索引号的图片 ...原创 2019-12-18 23:33:47 · 956 阅读 · 0 评论 -
5.jQuery排他思想
效果如下 点击当前按钮,会改变当前的背景色,去掉其他按钮的背景色 代码如下 <script src="jQuery.js"></script> <script> $(function(){ //1.隐式迭代,会给所有按钮绑定点击事件 $("button").click(functi...原创 2019-12-17 23:50:00 · 674 阅读 · 0 评论 -
4.jQuery下拉菜单
效果展示 鼠标经过显示,离开隐藏 代码如下 <style> * { margin: 0; padding: 0; } li { list-style-type: none; ...原创 2019-12-16 23:50:04 · 118 阅读 · 0 评论 -
3.jQuery选择器
1.jQuery基础选择器 ID选择器 $("#id") 全选选择器 $("*") 类选择器 $(".class") 标签选择器 $("div") 并集选择器 $("div,p,li") 交集选择器 $("li.current") 子代选择器 $("ul>li") 后代选择器 $("ul...原创 2019-12-15 21:44:14 · 131 阅读 · 0 评论 -
2.jQuery对象和DOM对象
1.jQuery对象和DOM对象 jQuery对象:用jQuery方式获取过来的对象,只能使用jQuery方法 本质:通过$把DOM元素进行了包装后产生的对象(伪数组存储) $('div'); 是一个jQuery对象 DOM对象:用原生JS获取的对象,只能使用原生JS方法 var div = document.querySelector('div...原创 2019-12-13 21:47:55 · 98 阅读 · 0 评论 -
1.jQuery概述
1.jQuery概述 jQuery是一个快速,简洁的JS库,其设计宗旨是"Write less, Do more",用更少的代码做更多的事 2.优点 *轻量级,核心文件只有几十KB,不会影响页面的加载速度 *跨浏览器兼容,基本兼容了现在主流的浏览器 *链式编程,隐式迭代 *对事件,样式,动画支持,大大简化了DOM操作 *支持插件扩展开发,有着丰富的第三方插件,例如:树形菜单,日期控制,轮播图等 *...原创 2019-12-12 21:26:04 · 214 阅读 · 0 评论