js控制json生成菜单——自制菜单（一） 此文档解决以下问题： 1.JSON文件的书写方式 2.jQuery.getJSON()的运用 3.jQuery.each()的运用 4.jQuery的DOM...：.on()的运用 8.jQuery的滑动特效:.slideToggle()、.slideUp()、.slideDown()的运用 附：阿里巴巴矢量图标库http://www.iconfont.cn/...id为0 //为0 则为一级菜单，生成li标签，显示菜单项名称data[i]["navTitle"] //同时添加li的class...//其他子菜单项隐藏 $("li.1").children("ul").slideDown();...//一级菜单项可以滑动显示或隐藏子菜单项 //同时，当前菜单显示，则其他都隐藏 $("." + data[i]["navId
7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。...普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。...//删除所有p元素上的所有事件 $("p").unbind("click") //删除所有p元素上的单击事件 10、几个实用特效功能 其中toggle()和slidetoggle...slideToggle()方法包括了slideDown()和slideUp方法。 11、几个有用的jQuery方法 $.browser.浏览器类型：检测浏览器类型。..." 12、解决自定义方法或其他类库与jQuery的冲突 很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突
如果该方法未设置参数，则返回被选元素的当前值： 如果被选元素隐藏，则显示这些元素，同样的可以设置过程时间和回调函数： slideUp() 方法用于向上滑动元素。 slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。 示例： <!...']").click(function() { $("div").slideUp(3000,slideUp_img); }); $("button...[name='slideToggle']").click(function() { $("div").slideToggle(3000,done_img); })
表8-1-2 滑动动画函数 函数 说明 slideDown( ) 元素向下滑动特效（高度增加） slideUp( ) 元素向上滑动特效（高度减少） slideToggle( ) 元素向上/向下滑动切换特效...("slow"); } ) } ) 除了slideUp和slideDown函数外，jQuery还提供了一个滑动切换函数slideToggle。...(); } ) } ) slideToggle函数是这样工作的：如果元素高度存在，则向上滑动，即高度为0；如果元素高度为0，则向下滑动，不断这样切换。...但在实际应用中，这是远远不能满足需要的，比如说：如果想通过控制元素的位置来做一个动画，或者想做一系列的动画。...3：滑动的横向菜单 训练技能点 Ø jQuery内置动画函数 需求说明 模拟实现一个如图8.2.3所示的横向菜单，当鼠标悬浮到横向菜单上时，其子菜单 淡入显示；当鼠标离开横向菜单时，其子菜单淡出隐藏
表8-1-2 滑动动画函数 函数 说明 slideDown( ) 元素向下滑动特效（高度增加） slideUp( ) 元素向上滑动特效（高度减少） slideToggle( ) 元素向上/向下滑动切换特效...("slow");})}) 除了slideUp和slideDown函数外，jQuery还提供了一个滑动切换函数slideToggle。...(); } ) }) slideToggle函数是这样工作的：如果元素高度存在，则向上滑动，即高度为0；如果元素高度为0，则向下滑动，不断这样切换。...但在实际应用中，这是远远不能满足需要的，比如说：如果想通过控制元素的位置来做一个动画，或者想做一系列的动画。...3：滑动的横向菜单 训练技能点 Ø jQuery内置动画函数 需求说明 模拟实现一个如图8.2.3所示的横向菜单，当鼠标悬浮到横向菜单上时，其子菜单 淡入显示；当鼠标离开横向菜单时，其子菜单淡出隐藏。
普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。...由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。...p元素上的所有事件 $("p").unbind("click") //删除所有p元素上的单击事件 10、几个实用特效功能 其中toggle()和slidetoggle()方法提供了状态切换功能。...slideToggle()方法包括了slideDown()和slideUp方法。 11、几个有用的jQuery方法 $.browser.浏览器类型：检测浏览器类型。..." 12、解决自定义方法或其他类库与jQuery的冲突 很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引
运用jQuery时，需要在页面中引入jQuery文件 jQuery的hello world 单击事件处理函数 $("#btn").click(function() { // toggle()/slideToggle...() jQuery内置动画效果 $("#box").slideToggle(); }) jquery...").click(function() { $("#box").slideUp(1000); }) $("#btn_slideToggle..."background":"#efefef" }) 注意：样式尽量写在css中，通过标签的class属性来控制使用不同的样式 如果是动态递增变化的样式
1、jQuery鼠标事件之click与dbclick事件 click方法用于监听用户单击操作，dbclick方法用于监听用户双击操作，这两个方法用法及其类似，所以这只介绍click事件，只有单击释放后才生效...(eventObject)) click的参数是函数（回调函数），单击会执行函数里的操作，如果里面含有this，this指向触发事件元素的对象 方法三：$ele.click([eventData], handler...true则是显示，如果为false则是隐藏 3、jQuery中下拉/上卷动画之slideDown和slideUp方法（改变元素的高度) 元素下拉显示方法slideDown()和上述的show()很相似；...因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面 4、jQuery中上卷下拉切换slideToggle方法（改变元素的高度) slideToggle 方法是上述两个方法的切换 $ele.slideToggle...快捷参数：fast默认200ms，slow默认600ms，必需参数（duration时间、opacity透明度值），complete:function(){}等 8、jQuery中toggle与slideToggle
--toogle([speed, [easing], [fn]]) 2）滑动显示和隐藏方式： --slideDown([speed, [easing], [fn]]) --slideUp...([speed, [easing], [fn]]) --slideToggle([speed, [easing], [fn]]) 3）淡入淡出显示和隐藏方式： --fadeIn...）； 2）$.each(object,[callback])： 3）for..of：JQuery3.0 版本之后提供的方式 【注意】：如果遍历中加判断条件，当前function返回为false，则结束循环...事件绑定 JQuery事件绑定方式包括： 1）JQuery标准的绑定方式：JQuery对象.事件方法（回调函数）；注意：如果调用事件方法，不传递回调参数，会触发浏览器默认行为； 2）on绑定事件、off...使用off解除btn按钮的单击事件 $("#btn2").click(function () { //解除btn按钮的单击事件
[start,end) map(fn):将一组元素转换成其他数组 过滤: eq(index):索引等于 获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始....匹配元素的祖先元素的元素(不包含根元素) prev():上一个兄弟 prevAll():前面的所有兄弟 prevUntil():从上一个兄弟开始,直至指定元素结束 siblings():所有的兄弟 查找: 带有...使用end后将返回A位置 contents() 获得所有节点（子元素、文本） abc xxx 串联: add(e|e|h|o[,c]) 相当与 $("#id,.class...，如果显示就隐藏。...滑动：改变高度 slideDown ，显示（从上往下） slideUp，隐藏（从下往上） slideToggle() 切换 淡入淡出：改变透明度 fadeIn 显示 fadeOut 隐藏 fadeToggle
([speed,[easing],[fn]]) slideToggle([speed],[easing],[fn]) //滑动方式 $("#showDiv").slideDown("slow"); //...滑动方式 $("#showDiv").slideToggle("slow"); //滑动方式 $("#showDiv").slideUp("slow"); 淡入淡出显示和隐藏方式 fadeIn([speed...this：集合中的每一个元素对象 回调函数返回值： true：如果当前function返回为false，则结束循环(break)。...标准的绑定方式 jq对象.事件方法(回调函数)； 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。...当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2..... 注意：1.9版本 .toggle() 方法删除，jQuery Migrate（迁移）插件可以恢复此功能。
jQuery 给我们封装了很多动画效果，最为常见的如下： 显示隐藏：show() / hide() / toggle() ; 划入画出：slideDown() / slideUp() / slideToggle...() / slideToggle() ; 语法规范如下: ?...() { // 滑动切换 slideToggle() $("div").slideToggle(500); });... }); 小案例：下拉菜单略（详情参看源码）。... }).find(".big").stop().fadeIn().siblings(".small").stop().fadeOut(); // 其他兄弟宽度变为
使用jQuery处理事件 事件处理 一个栗子，单击p时背景变成灰色 由于es6的箭头函数不支持this的绑定，所以无法使用箭头函数，只能使用匿名函数 html 单击一个按钮的时候 $('#logoff').click(() => { $.event.trigger('logoff'); // 实现一个先全体元素广播一个事件 }) 如果元素要接收事件...slideDown(), slideUp(), slideToggle() slideUp() 是将高度动态变化到0，然后社会display属性为none，为向下 slideDown()正好相反。...为向上 slideToggle() 使用向上滑动和向下滑动，切换元素的可见性。...//快速淡出为半透明，等一等，然后向上滑动 $('img').fadeTo(100, 0.5).delay(200).slideUp(); 每一个队列都和文档元素相关联，每一个元素的队列都与其他元素的队列彼此独立
$(".test") 其他选择器 ?...slideUp() jQuery slideUp() 方法用于向上滑动元素。...>元素将会向上滑动隐藏 }); ``` #### jQuery slideToggle() jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换...- 如果元素向下滑动，则 slideToggle() 可向上滑动它们。 - 如果元素向上滑动，则 slideToggle() 可向下滑动它们。...> **默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
window.onload 定义入口函数 function 函数 document.getElementById 通过id来从整篇文档中找对应的元素（innerHTML控制标签内容，className控制class属性，其他的标签属性按原名称写...css属性） var 声明变量使用 alert 弹框 number 数值型 string 字符串 boolean布尔型 null 无 object 对象 undefined 没有定义 onclick 单击...（js中，在jQuery中是click） onmouseover鼠标滑过 onmouseout 鼠标离开 上面的内容如果哪一个单词忘记了具体的用法，可以点击链接查看具体内容：JavaScript入门 -...siblings 同级的 parent 父级的 children 子级的 addClass 添加类 removeClass删除类 hover 鼠标滑过 eq 找下标 animate 自定义动画函数 slideUp...隐藏（向上滑，就是把东西收起来，就隐藏了） slideDown 显示 （向下滑，向下展开，就显示了） slideToggle 一会显示一会隐藏 stop 停止（清除动画机制，在形成动画函数之前加stop
hide([speed,[easing],[fn]]) toggle([speed],[easing],[fn]) 滑动显示和隐藏方式 slideDown([speed],[easing],[fn]) slideUp...([speed,[easing],[fn]]) slideToggle([speed],[easing],[fn]) 淡入淡出显示和隐藏方式 fadeIn([speed],[easing],[fn])...false:如果当前function返回为true，则结束本次循环，继续下次循环(continue) $.each(object, [callback]) for…of: jquery 3.0 版本之后提供的方式...for(元素对象 of 容器对象) 事件绑定 jquery标准的绑定方式 jq对象.事件方法(回调函数)； 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。...事件切换：toggle jq对象.toggle(fn1,fn2…) 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2… 注意：1.9版本 .toggle() 方法删除,jQuery
滑动显示和隐藏方式 1. slideDown([speed],[easing],[fn]) 2. slideUp([speed,[easing],[fn]...]) 3. slideToggle([speed],[easing],[fn]) 3....回调函数返回值： * true:如果当前function返回为false，则结束循环(break)。...事件绑定 1. jquery标准的绑定方式 * jq对象.事件方法(回调函数)； * 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。...) * 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
(selector).show(speed,callback); 滑入(slideUp)与滑出(slideDown)以及切换(slideToggle),注意:slide相关动画不传speed参数也有动画效果...(200), normal(400), fast(600).如果传其他字符串,则默认为normal....() 表单元素的值发生变化 click() 鼠标单击 dblclick() 鼠标双击 当单击元素时,发生click事件....; }); 触发hello事件 element.trigger("hello"); 事件冒泡: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序...: 通过字体代替图标,font文件夹需要和css文件夹在同一目录 bootstrap下拉菜单: 1、dropdown-toggle 2、dropdown-menu bootstrap
useCheckMarks bool 如果为true，则使用复选标记而不是复选框来指示是否为多选项目选择了该项目。 此特定样式用于多选菜单项组的材料菜单下拉列表。...如果OptionGroup为空并且已定义emptyLabel，则下拉列表将包含其他组。 如果没有为空组定义emptyLabel，它将不会出现在列表中。...DropdownButtonComponent Selector: 一个专门用于下拉菜单的按钮。 默认情况下，此按钮呈现为带有三角形图标和下划线。...ariaExpanded bool 如果下拉列表已展开，则为True。 ariaLabelledBy String 另外描述按钮的元素的id。...trigger Stream 单击按钮或激活键盘时触发事件。
如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400 毫秒的延时。...如果元素是隐藏的，则使其可见 9、jQuery中淡入淡出切换fadeToggle fadeToggle()函数用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果。...如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。...，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置 - 如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置...- 如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
