jquery动画

目录 JQuery介绍 JQuery优势 JQuery版本 JQuery对象 声明JQuery对象的语法 JQuery基本的语法 JQuery把文件导入模板中 查找标签 基本选择器 层级选择器 筛选器 基本筛选器 属性筛选器 表单筛选器 操作标签 样式操作 文本操作 文档处理 属性操作 克隆 位置操作 事件 事件的绑定 input监听默认的事件 阻止事件冒泡 JQuery介绍 JQuery是一个轻量级、兼容多浏览器的js库，相当于python中的模块。 JQuery使用户能够更方便的处理HTML Document、Evnets（事件触发器）、实现动画效果、方便进行Ajax（创建快速动态页面的技术）、交互，能够极大的简化js编程。它的总是就是：写很少的代码，做更多的事情 JQuery优势 一款轻量级的js框架。JQuery核心js文件才几十kb，不会影响页面的加载速度。 丰富的DOM选择器，JQuery的选择器用来很方便，比如要找到某个DOM对象的相邻的元素，js也是一行代码就能搞定。 链式表达式。JQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。JQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax（创建快速动态页面的技术）操作支持。JQuery简化了AJAX操作

jQuery: 是一个轻量级的、兼容多浏览器的JavaScript库。 使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery内容： 基本选择器 : id $('#id') 标签 $('tagName') class选择器 $('.className') 配合使用： $('div.cl') // 找到有c1 class类的div标签 所有元素 $('*') 组合选择器 $("#id, .className, tagName") 层级选择器： $("x y");// x的所有后代y（子子孙孙） $("x > y");// x的所有儿子y（儿子） $("x + y")// 找到所有紧挨在x后面的y $("x ~ y")// x之后所有的兄弟y 筛选器：(以索引值为准) :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not

1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。 1.1 显示动画 方式一： $("div").show(); 无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过 display: block; 实现的。 方式二： $('div').show(3000); 通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。 方式三： $("div").show("slow"); 参数可以是： slow 慢：600ms normal 正常：400ms fast 快：200ms 和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。 方式四： //show(毫秒值，回调函数; $("div").show(5000,function () { alert("动画执行完毕！"); }); 动画执行完后，立即执行回调函数。 总结： 上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。 1.2 隐藏动画 方式参照上面的show()方法的方式。如下： $(selector).hide(); $(selector).hide(1000); $(selector).hide("slow"); $(selector)

目录 jQuery介绍 jQuery的优势 jQuery内容 jQuery对象 jQuery基础语法结构 jQuery 使用注意事项 查找标签 基本选择器 层级选择器 jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件

目录 BOM window对象 window的子对象 navigator对象(了解) screen对象(了解) history对象(了解) location对象 弹出框 计时相关 DOM HTML DOM 树 查找标签 直接查找 节点操作 创建节点 添加节点 删除节点 替换节点 属性节点 获取值操作 class的操作 指定css操作 事件 常用事件 绑定方式 jQuery jQuery介绍 jQuery的优势 jQuery内容 BOM ​ BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。 ​ Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write() window对象 所有浏览器都支持 window 对象。它表示浏览器窗口 如果文档包含框架(frame或iframe标签), 浏览器会为HEML文档创建一个window对象, 并为每个框架创建一个额外的window对象 没有应用于window对象的公开标准,不过所有浏览器都支持该对象 所有JavaScript全局对象的属性

01. BOM & DOM 1.BOM Browser Object Model 是指浏览器对象模型，它使JavaScript有能力与浏览器对话 window对象 所有浏览器都支持window对象，它表示浏览器窗口。 Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。 所有javascript全局对象，函数以及变量均自动成为window对象的成员 全局变量时window对象的属性，全局函数是window对象的属性之一 HTML DOW 的 document 也是window对象的属性之一 window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 window.open() - 打开新的窗口 window.close() - 关闭当前窗口 window的子对象 navigator 对象 浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息 navigator.appName // web浏览器全称 navigator.appVersion // web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端和绝大部份信息 navigator

46 BOM JQuery开头 01. BOM & DOM 1.BOM Browser Object Model 是指浏览器对象模型，它使JavaScript有能力与浏览器对话 window对象 所有浏览器都支持window对象，它表示浏览器窗口。 Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。 所有javascript全局对象，函数以及变量均自动成为window对象的成员 全局变量时window对象的属性，全局函数是window对象的属性之一 HTML DOW 的 document 也是window对象的属性之一 window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 window.open() - 打开新的窗口 window.close() - 关闭当前窗口 window的子对象 navigator 对象 浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息 navigator.appName // web浏览器全称 navigator.appVersion // web浏览器厂商和版本的详细字符串 navigator.userAgent //

1.测试并提升你的jQuery选择器水平 这个 jQuery选择器实验室 非常酷，它能在线免费使用，当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段，然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。 点击上图查看清晰大图 2.测试jQuery包装集是否包含某些元素 　　如果你想测试一下某个jQuery包装集中是否包含某些元素，你首先可以尝试使用验证首个元素是否存在： if($(selector)[0]){...} // 或者这样 if($(selector).length){...} 来看看这个例子： //例子.如果你的页面有以下html代码 <ul id="shopping_cart_items"> <li><input class="in_stock" name="item" type="radio" value="Item-X" />Item X</li> <li><input class="unknown" name="item" type="radio" value="Item-Y" />Item Y</li> <li><input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li> </ul> <pre escaped="true

jquery swipper插件的一些弊端 touch触摸机制是swipper的 阻止click冒泡。拖动Swiper时阻止click事件。下面这个方法或许可以解决触摸机制的问题 <pre> <div class="swiper-slide" onclick="alert('你点了Swiper')"> <script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ preventLinksPropagation : false, }) </script> </pre> 2动画问题 swipper动画影响是全局的 每次操作会影响每个container ani 所以 动画只能用在1给地方是最稳定的 可以在适当的时候执行下 <pre> $('.ani').css('visibility', 'visible'); </pre> 3 在苹果手机上 无限点击会闪屏 这种情况只能做弹出层 不要写在swiper里面了 ps:swiper3.x 只适用于移动端 pc端兼容性较差ie10以下估计不兼容) 建议用swiper2.x Animate.css动画库也是 来源： https://www.cnblogs.com/newmiracle/p/11872563.html

jQuery是什么 <1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。 <2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! <3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 <4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。 <5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 注：jQuery 是一个 JavaScript 函数库 jQuery语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作 文档就绪函数：防止文档在完全加载（就绪）之前运行 jQuery 代码. $(document).ready(function(){ --- jQuery