JQuery 高级 一、动画 1、三种默认方式显示和隐藏元素 show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed,...linear:动画执行时速度是匀速的 fn:在动画完成时执行的函数,每个元素执行一次。...setTimeout(执行一次定时器) 分析发现JQuery的显示和隐藏动画效果其实就是控制display属性值 使用 show/hide方法来完成广告的显示 (3)代码实现 Jquery插件,在插件里面定义了两个方法,分别是check()和uncheck(),然后再给两个单击按钮绑定不同的方法事件。...最后的效果: ? 2、$.extend(object) 增强JQuery对象自身的功能,属于全局级别的插件,例如:$/jQuery ----
JQuery基础: 1. 概念: * 一个JavaScript框架,简化JS开发。...* jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。...JQuery对象和JS对象区别与转换: 1.JQuery对象在操作时,更加方便; 2.JQuery对象和JS对象方法不通用; 3.两者相互转换: * JQuery --> JS : JQuery...首元素选择器 * 语法: :first 获得选择的元素中的第一个元素 2. 尾元素选择器 * 语法: :last 获得选择的元素中的最后一个元素 3....* linear:动画执行时速度是匀速的 3.fn:在动画完成时执行的函数,每一个元素执行一次。
5.如果要实现左右滚动无限循环的效果,就需要在图片列表开头和结尾分别添加最后一张图和第一张图 就像一张胶卷,每次展示一张图片,通过移动胶卷来切换可视的图片。...imgCt.children("li").last().clone(), $first = $imgCt.children("li").first().clone(); //在图片列表开头和结尾分别添加最后一张图和第一张图...,停止自动轮播 $(".carousel").on("mouseenter",function(){ clearInterval(clock) }) //当鼠标离开时...imgCt.children("li").last().clone(), $first = $imgCt.children("li").first().clone(); //在图片列表开头和结尾分别添加最后一张图和第一张图...,停止自动轮播 $(".carousel").on("mouseenter",function(){ clearInterval(clock) }) //当鼠标离开时
广告显示和隐藏 抽奖 插件:增强JQuery的功能 实现方式: 动画 三种方式显示和隐藏元素 默认显示和隐藏方式 show([speed,[easing],[fn]]) 参数: speed:动画的速度...linear:动画执行时速度是匀速的 fn:在动画完成时执行的函数,每个元素执行一次。...对象.each(function(index,element){}); index:就是元素在集合中的索引 element:就是集合中的每一个元素对象 this:集合中的每一个元素对象 回调函数返回值:...for(元素对象 of 容器对象) 事件绑定 jquery标准的绑定方式 jq对象.事件方法(回调函数); 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...-- 停止按钮 --> <input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size
使用大公司CDN好处: 许多用户在访问其它站点时,已经从百度、新浪、谷歌和微软加载过jQuery。当用户访问我的站点时,会从缓存中加载jQuery,这样可以有效减少加载时间!...,change(元素值(适用于表单字段)发生改变时),focus(元素获得焦点),blur(元素失去焦点)事件; 文档/窗口事件:load(元素已加载触发,在jQuery1.8中废除。...html():设置或获取所选元素的内容(包括HTML标记) val():设置或获取表单字段的值 -- 获取属性: attr():设置或获取属性值 ps1:以上函数不传入参数时是获取;传入参数时是设置...ps2:以上函数均有最后一个参数设置为回调函数。回调函数有两个值:当前选中元素下标,旧值。...4.遍历--过滤 first():返回被选元素的第一个元素 last():返回被选元素的最后一个元素 eq():返回被选元素中带有指定索引号的元素;索引号从0开始;如:$('p').eq(1):返回第二个
JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1....* linear:动画执行时速度是匀速的 3. fn:在动画完成时执行的函数,每个元素执行一次。...语法: jquery对象.each(function(index,element){}); * index:就是元素在集合中的索引...* element:就是集合中的每一个元素对象 * this:集合中的每一个元素对象 2....分析发现JQuery的显示和隐藏动画效果其实就是控制display 3.
$(‘li:last’) 获取最后一个li元素 :eq(index) $(“li:eq(2)”) 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。...属性名和属性值用冒号隔开, 属性可以不用加引号 $(this).css({ "color":"white","font-size":"20px"}); 一般来说通过在style中编写样式,通过添加类的方式添加样式...停止动画排队:stop() ; 这样就可以在动画执行的时候停止动画 3.2.1 显示隐藏 显示隐藏:show() / hide() / toggle() ; 关于参数 参数都可以省略,无动画直接显示...中有hover()事件,功能类似于css中的hover hover(function,function) 传入2个参数,第一个参数是鼠标移入是触发的函数,第二个是鼠标移出时触发的函数 只写一个参数时...包括 padding、border、margin 返回值是数字型的 如果参数是数字,则修改样式 参数不写单位 4.4.2 jQuery 位置操作 offset()设置获取元素偏移 获取的位置是相对于文档的偏移坐标
__proto__ = Base.prototype; Base.call(obj); 23、Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?...37、Jquery与jQuery UI 有啥区别? *jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。...比如:varstr=$("a").attr("href"); *for (var i = size; i length; i++){} for 循环每一次循环都查找了数组(arr) 的.length...属性,在开始循环的时候设置一个变量来存储这个数字,可以让循环跑得更快: for(var i = size, length = arr.length; i length; i++) {} 40、如何判断当前脚本运行在浏览器还是...闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环) 43、JQuery一个对象可以同时绑定多个事件,这是如何实现的?
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。...而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。...第一种方法:$('p').size(); 第二种方法:$('p').length 以上两种方法都可以。...console.log('size:', $('li').size()) console.log('length:', $('li').length) console.log($('li...如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。
基本过滤选择器 ——1.1 :first和:last(取第一个元素或最后一个元素) $(document).ready(function () { $('span:first')...和G2所在div是父子关系时,G1和G2都会变色。...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素,:last-child表示最后一个子元素。...——5.2 :only-child 当某个元素有且仅有一个子元素时,:only-child才会生效。...,从最后一个很粗的红色边框(实际是两个元素的边框重叠了)也可以看出来。
三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数: 1. speed:动画的速度。...* linear:动画执行时速度是匀速的 3. fn:在动画完成时执行的函数,每个元素执行一次。...语法: jquery对象.each(function(index,element){}); * index:就是元素在集合中的索引 * element:就是集合中的每一个元素对象...* this:集合中的每一个元素对象 2....事件绑定 1. jquery标准的绑定方式 * jq对象.事件方法(回调函数); * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。...而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。...第一种方法:$('p').size(); 第二种方法:$('p').length 以上两种方法都可以。...类数组对象有 length 属性,其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。 参数: obj:类型Object,类数组对象。...如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。
最后一个动画结束的回调方法。...'); } }); 14、jQuery中停止动画stop 动画在执行过程中是允许被暂停的,当一个元素调用.stop()方法,当前正在运行的动画(如果有的话)立即停止 语法: ....,第二个第三个继续 - stop(true):停止第一个、第二个和第三个动画 - stop(true ture):停止动画,直接跳到第一个动画的最终状态 15、jQuery中each方法的应用 jQuery...jQuery.trim()函数用于去除字符串两端的空白字符 这个函数很简单,没有多余的参数用法 需要注意: - 移除字符串开始和结尾处的所有换行符,空格(包括连续的空格)和制表符(tab) - 如果这些空白字符在字符串中间时...,它们将被保留,不会被移除 alert("值的长度:" + $.trim($("#results2").val()).length) 18、jQuery中DOM元素的获取get方法 jQuery是一个合集对象
DOM相关内容在jQuery框架中基本实现了全覆盖,所以只需要掌握jQuery框架的使用方式即可 ###jQuery框架 这是一个通过js语言所写的框架,对原生js语言进行封装,作用:提高开发效率...jQuery框架就是一个普通的js文件,通过外部引入方式 把该文件引入即可....为abc元素的 所有兄弟元素 过滤选择器 $(“div:first”) 匹配第一个div $(“div:last”) 匹配最后一个div $(“div:eq(n)”) 匹配下标为n的div 从0开始 $...() 弟弟们 .nextAll() 所有兄弟 .siblings() 父元素 .parent() 子元素们 .children() 过滤选择器 第一个 div:first 最后一个 div:last... var i = 0; //开启定时器每隔1秒调用- -次myfn方法 //直接调用方法写括号,把方法作为参数传递时不写括号
基本过滤选择器 ——1.1 :first和:last(取第一个元素或最后一个元素) $(document).ready(function () { $('span:first').css('color...和G2所在div是父子关系时,G1和G2都会变色。...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素,:last-child表示最后一个子元素。...——5.2 :only-child 当某个元素有且仅有一个子元素时,:only-child才会生效。...,从最后一个很粗的红色边框(实际是两个元素的边框重叠了)也可以看出来。
JQuery语法 (selector).action() 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作...() 方法返回元素的宽度(包括内边距和边框) outerHeight() 方法返回元素的高度(包括内边距和边框 JQuery遍历 祖先 parent() 方法返回被选元素的直接父元素 parents()...find() 方法返回被选元素的后代元素,一路向下直到最后一个后代 同胞 siblings() 方法返回被选元素的所有同胞元素 next() 方法返回被选元素的下一个同胞元素 nextAll() 方法返回被选元素的所有跟随的同胞元素...nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素 过滤 first() 方法返回被选元素的首个元素 last() 方法返回被选元素的最后一个元素 eq() 方法返回被选元素中带有指定索引号的元素...("button").click(function(){ jQuery("p").text("jQuery 仍然在工作!")
介绍和概述 JQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。...对象和JS对象转换 JQuery对象在操作时,更加方便。...语法::first 获得选择的元素中的第一个元素 尾元素选择器 语法: :last 获得选择的元素中的最后一个元素 非元素选择器 语法: :not(selector) 不包括指定内容的元素 偶数选择器...div 元素的背景色为 红色" id="b1"/> 最后一个 div 元素的背景色为 红色" id="b2"/>...-> 内容 val(): 获取/设置元素的value属性值 注意:在设置元素内容时,前两个方法都是直接将标签一并替换掉。
: clearTimeout停止单次定时器 clearInterval停止多次定时器 匿名函数没有名字,工作中,会先定义一个变量储存定时器,定时器是对象型,命名的时候和time相关。...工作中在清除后,一般会在清除后面加一行代码,就是将原先的变量重新定义为null 单次定时器也要停止,虽然视觉上它停止了,但是实际上还没停止,启动之后,还是要停止。 一个区域打开的和关闭的是一个定时器 动画移动原理: <!...null } oSlide.onmouseout = function(){ // setInterval(fnMove, 50) -- 速度越来越快 -- 定时器累加现象:一个区域保证停止和打开的是同一个定时器...onclick 在jq里面是click 目标------$(选择器) -----jq的选择函数----查找标签的作用 jQuery中的选择器和css里面的选择器一样。
, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery(expression, [context]) 在核心函数jQuery中传入表达式,对页面中元素进行选择..." + $(this).html()); }); // 通过size() / length 打印页面中 class属性为 itcast 的元素数量 // alert($(".itcast").size(...③:基本过滤选择器 :first 选取第一个元素 $("tr:first") :last 选取最后一个元素 $("tr:last") :not(selector) 去除所有与给定选择器匹配的元素 $("...这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。...区别 eq :first-child 选取第一个子元素 :last-child 选取最后一个子元素 :only-child 选取唯一子元素,它的父元素只有它这一个子元素 练习7: ² 选择id属性mytable
属性过滤选择器 ——4.1 [attribute](取拥有attribute属性的元素) 下面的代码,最后一个a标签没有title属性,所以它仍然会带下划线 元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素,:last-child表示最后一个子元素。...这里有个问题:如果一个元素没有子元素,:first-child和:last-child会返回null吗?...——5.2 :only-child 当某个元素有且仅有一个子元素时,:only-child才会生效。...,从最后一个很粗的红色边框(实际是两个元素的边框重叠了)也可以看出来。