jquery动画 | 易学教程

jQuery动画效果

阅读更多关于 jQuery动画效果

jQuery动画效果 1.显示动画无参数,让指定的元素显现出来,底层通过display:block实现 $("div").show(); 通过控制元素的宽高,透明度,display属性,逐渐显示,例如3秒后显示完毕 $('div').show(3000); 参数 slow 慢:600ms normal 正常 400ms fast 快:200ms 动画执行完毕后立即执行回调函数 //show(毫秒值，回调函数; $("div").show(5000,function () { alert("动画执行完毕！"); ); 2.隐藏动画 $(selector).hide(); $(selector).hide(1000); $(selector).hide("slow"); $(selector).hide(1000, function(){}); 3.开关式显示隐藏动画 $('#box').toggle(3000,function(){}); 显示和隐藏的拉回切换采用的是toggle()方法,就是先执行show(),再执行hide() $('#btn').click(function(){ $('#box').toggle(3000,function(){ $(this).text('盒子出来了'); if ($('#btn').text()=='隐藏') { $('

前端---JQuery初识

阅读更多关于前端---JQuery初识

---恢复内容开始--- BOM JQuery认识 JQuery基本选择器 JQuery高级选择器 1.j avascript基础部分包括三个部分 : 　　ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。　　 DOM ：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。　　 BOM ：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。　　DOM是BOM的一部分。 window对象: 　　window对象是javascript中的顶级对象　　全局变量、自定义函数也是window对象的属性和方法 BOM常见的内置方法和内置对象: 　　 (1) window.open(url,target) 　　参数解释: url :要打开的地址　　　　　　target:新窗口的位置.可以是_biank,_self,_parent父框架 <script> setTimeout(function () { window.open('www.baidu.com','_self') //_self 表示在当前页面打开,不写会跳转一个新页面 },2000)</script>　(2)location 对象属性　　window.location 可以简写成location.他相当于浏览器地址栏

前端--初识jQuery

阅读更多关于前端--初识jQuery

jQuery 一.jQuery介绍 1.jQuery是一个轻量级.兼容多浏览器的js库. 2.jQuery使用户能够更方便地处理HTML Document,Events,实现动画效果,方便的进行Ajax交互,能够极大的简化js编程,它的宗旨就是"Write less,do more." - 版本 - 1.x 兼容IE8。。。 - 3.x 最新- .min.xx 压缩的：生产环境用 - 没有压缩的（没有.min.xx）：开发用二.为什么要用jQuery? 写起来简单,省事,开发效率高,兼容性好三.什么是jQuery? jQuery是一个兼容多浏览器的js库(类似于python中的模块) 四.如何使用jQuery? 1.导入<script src = "jquery-3.3.1.js"></script>或者<script src = "jquery-3.3.1.min.js"></script> 2.语法规则:$(" ") 五.js和jQuery的区别? jQuery就是js写的 js是基础,jQuery是工具六.选择器: 1.基础选择器　　--ID选择器 $("#id的值") 　　--类选择器(class) $(".class的值") 　　--标签选择器(html标签) $("标签的名字") 　　--所有标签　 $("*") 　　--组合选择器 $("xx,xxx") 2

jQuery自定义滚动条样式插件mCustomScrollbar

阅读更多关于 jQuery自定义滚动条样式插件mCustomScrollbar

如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的 jQuery 插件比较不错的，有两个： jScrollPane 和 mCustomScrollbar 。关于 jScrollPane，大家见过的可能比较多，但是这个插件太过于古老而且功能不强大，效果在几年前非常不错，但是放在现在就不好说了。所以我选择了后者： mCustomScrollbar 。下图是两者官方示例的简单对比：本文就是介绍如何使用 mCustomScrollbar 这个插件，大部分的内容是翻译自 mCustomScrollbar 官方的介绍页面，但是根据自己的理解做了部分的调整和修改，同时增加一些自己在使用中的一些技巧。关于 mCustomScrollbar mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件，它可以让你灵活的通过 CSS 定义网页的滚动条，并且垂直和水平两个方向的滚动条都可以定义，它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等。总之，你知道非常好用就是了，:-) 下载 | 演示如何使用 mCustomScrollbar mCustomScrollbar

初步学习jquery学习笔记（三）

阅读更多关于初步学习jquery学习笔记（三）

jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(8000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> <style> #panel,#flip{ text-align: center; padding: 5px; background-color:#e5eecc; border: solid 1px

初步学习jquery学习笔记（二）

阅读更多关于初步学习jquery学习笔记（二）

jQuery事件 jquery是为事件处理而设计的什么是事件? 页面对不同访问者的相应叫做事件。事件处理程序指的是html中发生某些事件所调用的方法实例: 在元素上移动鼠标选取单选按钮点击元素触发:产生事件的过程，比如点击按钮常见的dom事件鼠标事件键盘事件表单事件文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload hover jQuery中事件以及语法在jquery中，大多数dom事件都有一个等效的方法页面中指定一个点击事件 $("p").click();//指定一个点击事件 //定义触发后的事件 $("p").click( function(){ //动作触发后执行的代码 } ) 常见jQuery中事件以及方法 $(document).read() $(doucument).read()方法允许我们在文档完全加载后执行函数) click() click()方法是当按钮点击事件被触发会调用的一个函数，该函数在用户点击html元素的时候执行 $("p").click(function(){ $(this).hide(); }) dbclick() 当双击元素时候

jQuery实现DIV层的收缩展开效果

阅读更多关于 jQuery实现DIV层的收缩展开效果

有的时候我们需要这样一个效果，当鼠标悬浮在一个位置上时，这个悬浮事件会触发一个动画，jQuery实现的动画可以使得整体效果流程优美 <!DOCTYPE html> < head > < title > jQuery实现DIV层的收缩展开效果-纵向 </ title > < meta charset = "utf-8" > < script src = "C:/jquery/jquery-2.1.4.min.js" type = "text/javascript" charset = "utf-8" > </ script > < style > .text { line-height : 22 px ; padding : 0 6 px ; color : #666 ; } /*展开时看到的div详情*/ .box h1 { padding-left : 10 px ; height : 22 px ; line-height : 22 px ; /*line-heigt的属性值与height属性值设置成同一个值，实现文字垂直居中*/ background : #f1f1f1 ; font-weight : bold ; } .box { position : relative ; border : 1 px solid #e7e7e7 ; /*设置边框，突出显示隐藏层*/ } <

JavaWeb总结

阅读更多关于 JavaWeb总结

JavaWeb总结第1章 jsp 1.1 什么是jsp Jsp 全名为Java Server Pages，它是由 Sun Microsystems 公司倡导、许多公司参与一起建立的一种动态网易技术标准，它是在传统的静态网页HTMl文件中插入Java程序段和JSP标记，形成JSP文件。用JSP开发的Web应用是跨平台的，可在多个操作系统上运行。 1.2 jsp三大指令指令可以拥有很多属性，他们都以键值对的形式存在，并且以逗号隔开属性描述 buffer 指定out对象使用缓冲区的大小 autoFlush 控制out对象的缓存区 contentType 指定当前JSP页面的MIME类型和字符编码 errorPage 指定当JSP页面发生异常时需要转向的错误处理页面 isErrorPage 指定当前页面是否可以作为另一个JSP页面的错误处理页面 extends 指定servlet从哪一个类继承 import 导入要使用的Java类 info 定义JSP页面的描述信息 isThreadSafe 指定对JSP页面的访问是否为线程安全 language 定义JSP页面所用的脚本语言，默认是Java session 指定JSP页面是否使用session isELIgnored 指定是否执行EL表达式 isScriptingEnabled 确定脚本元素能否被使用 1.2.1Page指令 <

vue-cli + webpack 多页面实例应用

阅读更多关于 vue-cli + webpack 多页面实例应用

文章转载自: http://www.pythonheidong.com/blog/article/3054/ 常用学习资源 JS参考与基础学习系列 [MDN]JS标准参考 es6教程 JS标准参考教程编程类中文书籍索引深入理解JS系列前端开发仓库《JavaScript 闯关记》 JavaScript 初学者教程（指南） JS讲义李炎恢JavaScript教程第一季逐行分析jQuery源码的奥秘 JS常用框架、库、插件 [vue] vue官网 [vue] 饿了么element UI [vue] vue-router路由 [vue] vuex状态管理 [vue] mint-ui移动端UI组件 [vue] VUX [vue] vue相关UI组件收集 [vue] Ant Design of Vue (UI组件) 报表UI组件viser-vue axios请求 ajax：Fetch jQuery中文文档 webpack中文文档深入浅出 Webpack zeptojs中文版 bootstrap官网 echarts 微信组件weui weui github官网实例推荐团队与博客 w3cplus w3school 前端观察汤姆大叔博客腾讯Web前端 Alloy 团队 Blog 张鑫旭博客牧云云博客 qq前端月报 JS基础与技能 JS设计模式腾讯全端 AlloyTeam

前端全套视频HTML+CSS+JS+jQuery笔记（十）

阅读更多关于前端全套视频HTML+CSS+JS+jQuery笔记（十）

4. jQuery 4.1 jQuery概念及特点 4.2 jQuery的封装原理 function函数名仍然能够被覆盖问题：只执行一次，且无法接收返回值用全局区域的值去记录局部变量的值所以使用jQuery，$都能直接使用jQuery的内容 4.3 jQuery的选择器参考链接： jquery选择器返回只有一个元素的数组，val()方法是数组的； value方法是html元素的返回一个数组，看input框有几个加了[1]，由一个数组转为了一个html元素，所以不能使用val()，要使用value :first 仍是一个数组不要表头，td[属性] 4.4 jQuery操作元素属性 4.5 jQuery操作元素内容可解析；相当于js的 innerHtml 相当于js的 innerText 4.6 jQuery操作元素样式使用json对象修改css属性注意这是追加属性，不会覆盖。 4.7 jQuery操作文档结构在后面追加文本内容把u1内的内容放到div中放到前面外部插入，可以用来在每个验证框后插入吗？需要试验 4.8 jQuery操作事件注意：使用js方式是覆盖；而使用jQuery是追加，也可以添加多个事件把click整个事件解绑一次性筷子事件简写方式，都是页面载入 4.9 jQuery动画效果 toogle(毫秒)与当前状态相反；hide

订阅 jquery动画