选择符与遍历 (): 函数接受css选择符作为参数，充当一个工厂函数，返回对应元素的JQuery对象。...(‘a[href^=”mailto:”]‘): 选择所有URL以mailto:开头的超链接. (‘a[href=”.pdf”]‘): 选择所有URL以.pdf结尾的超链接....mouseover mouseup resize scroll select submit unload toggle(func1, func2): 单击时轮流执行func1和func2 toggleClass...slideToggle(): 相当于轮流执行slideUp()和slideDown()，可传入速度参数。 animate(): 自定义动画。...(), innerWidth()类似 animate()中指定多个css属性变化可以让动画并发，而用多个效果方法如animate,fadeIn等连缀则可以让动画排队显示。
jQery事件与特效 事件 方法 描述 执行时机 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的mouseover事件...鼠标指针移过时 mouseout( ) 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时 mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时...,fnN);//toggle()方法用于模拟鼠标连续click事件 toggleClass(className); //恭喜你們1.9之後被刪了 举例 $(".top-m .on").hover(function...( )和hide( )方法作用一样 $("input").click(function(){$("p").toggleClass("red");}) 元素显现与隐藏 语法 $(selector).show...callback]) $(selector).fadeOut([speed],[callback]) $(selector).slideUp ([speed],[callback]) $(selector).slideDown
B 2.3 属性选择器 $("标签[属性]") 语法 说明 [attribute] 包含某属性 [attribute=value] 指定属性等于指定值 [attribute^=value] 指定属性以指定值开头...[attribute$=value] 指定属性以指定值结尾 [attribute*=value] 指定属性值包含指定参数值 2.4 过滤选择器 标签名:过滤选择器； 作用：过滤指定标签； 语法 说明...节点追加到A节点的子节点中 $(A).appendTo(B) 将A节点追加到B节点的子节点中 $(A).prepend(B) 将B节点追加到A节点的子节点中 $(A).prependTo(B) 将A节点追加到...节点追加到A节点之后 $(A).insterAfter(B) 将A节点追加到B节点之后 $(A).before(B) 将B节点追加到A节点之前 $(A).insertBefore(B) 将A节点追加到B...() 立即延伸 slideDown(毫秒数) 慢慢延伸 slideDown(毫秒数，函数) 在动画效果结束后执行函数 slideUp() 立即收缩 slideUp(毫秒数) 慢慢收缩 slideUp(毫秒数
});}); jQuery名称冲突$符号 jQuery使用名为noConflict()方法来解决该问题 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件...$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 jQuery 隐藏/显示 hide()和show()方法来隐藏和显示HTML元素 $("#...)用于淡入已隐藏的元素 fadeOut() jQuery fadeOut() 方法用于淡出可见元素 fadeToggle() jQuery fadeToggle() 方法可以在 fadeIn() 与...() 用于向下滑动元素 slideUp() 用于向上滑动元素 slideToggle() 可以在 slideDown() 与 slideUp() 方法之间进行切换 $(selector).slideDown...image.png jQuery CSS addClass()--向被选元素添加一个或多个类 removeClass()--从被选元素删除一个或多个类 toggleClass()--对被选元素进行添加
(“over”); //去除样式 }) }) 3.动态切换样式 $funciotn(){ $(a.alink).click(function(){ This.toggleClass...直接获取、编辑内容 var sString = $(“p:frist”).text(); //获取第一个P标签的文本值 $(“p:last”).html(sString); //把值赋给最后一个P标签，以Html...形式赋给，也就是说可以包含Html标签 7.页面元素有克隆 (“img.eq(1)”).clone().appendTo((“p”)); //将第一个图片克隆到所有的P标签中 8.事件的监听 $(“img...――元素的显示与隐藏效果 $(“img”).hide(); $(“img”).hide(3000); //设置渐隐的时间，单位毫秒 $(“img”).show (); $(“img”).show (3000...); 还有更多特效如：fadeIn() fadeout() slideUp() slideDown() 11.JQuery的功能虑数 ·浏览器的检测 用$.browser方法 $.browser.verson
操作单个样式 //name：需要设置的样式名称 //value：对应的样式值 css(name, value); //使用案例 $("#one").css("background","gray");//将背景色修改为灰色...toggleClass(name); //例子 $(“div”).toggleClass(“one”); 【案例：tab栏切换案例.html】 【案例：旋转木马.html】 jQuery操作属性 attr...【演示动画例子】 三组基本动画 显示(show)与隐藏(hide)是一组动画：滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似淡入(fadeIn)与淡出...(fadeOut)与切换(fadeToggle) show([speed], [callback]); //speed(可选)：动画的执行时间 //1.如果不传，就没有动画效果。...// speed：执行动画时长（可选） // easing:执行效果，默认为swing（缓动） 可以是linear（匀速） // callback：动画执行完后立即执行的回调函数（可选） 动画队列与停止动画
') $el.addClass('className1 className2') $el.removeClass('className') $el.hasClass('className') $el.toggleClass...显示隐藏 $el.show() $el.hide() $el.toggle() //切换显示，隐藏的状态 $el.fadeIn() $el.fadeOut() $el.slideUp() $el.slideDown...function(){}) $el.change()// 脚本触发事件 动画 $.animate({ opacity: 0.6, left: '+=50', height: 'toggle'// 0 与...){}).fail(function(){}) 链式调用 $el.addClass('someClass') .html('xxx') .click() 工具方法 $.makeArray 将类似数组的对象转化成数组
() 演示 jQuery slideDown() 方法。... attr() 的回调函数：实质就是返回值 jQuery - 添加元素 添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法： append...我们将学习下面这些： addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作...简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。 使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。...关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有关的方法。
hide(speed,callback) show(speed,callback) 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。...它可以取以下值："slow"、"fast" 或毫秒 fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间） 可选的 callback 参数是该函数完成后所执行的函数名称...滑动 slideDown() 方法用于向下滑动元素 slideUp() 方法用于向上滑动元素 slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换...- 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 CSS类 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass...可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
(selector).toggle() – 对被选元素进行隐藏和显示的切换 (selector).slideDown() – 通过调整高度来滑动显示被选元素 (selector).slideToggle...() – 对被选元素进行滑动隐藏和滑动显示的切换 (selector).slideUp() – 通过调整高度来滑动隐藏被选元素 (selector).fadeIn() – 逐渐改变被选元素的不透明度，从隐藏到可见...(selector).first() – 将匹配元素集合缩减为集合中的第一个元素。 (selector).last() – 将匹配元素集合缩减为集合中的最后一个元素。...(selector).each() 对对象进行迭代，为每个元素执行函数 (selector).toArray() 以数组的形式返回 jQuery 选择器匹配的元素 (selector).text()...(selector).addClass() – 向被选元素添加一个或多个类 (selector).removeClass() – 从被选元素删除一个或多个类 (selector).toggleClass
='x']").css("color","red"); // 选取 href 属性以 www 开头的元素 $("[href^='www']").css("color","red");...// 选取 href 属性以 com 结尾的元素 $("[href$='com']").css("color","red"); // 选取 href 属性包含 a 的元素 $("...改变元素的宽和高（带动画效果） show(speed)：显示 hide(speed)：隐藏 toggle(speed) 等价于 show + hide：显示的隐藏，隐藏的显示 可选的 speed 参数规定隐藏...(speed)：显示 slideUp(speed)：隐藏 slideToggle(speed) 等价于 slideDown + slideUp 可选的 speed 参数规定隐藏/显示的速度，可以取以下值...toggleClass() 样式的切换；有->无，无->有 div{ width: 100px; height: 100px;
概述 * 是 javaScript 的框架 2. js与jq的互转 * js ---> jq $(js) * jq ---> js jq[索引]、jq.get(索引) # jq 可以看成是...class属性操作 * addClass() 添加class属性值 * removeClass() 删除class属性值 * toggleClass...CRUD ① append():父元素将子元素追加到末尾 * 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾 ② prepend():父元素将子元素追加到开头...默认显示和隐藏方式 ① show([speed],[easing],[fn]]) * speed：动画的速度。...滑动显示和隐藏方式 ① slideDown([speed],[easing],[fn]) ② slideUp([speed,[easing],[fn]]) ③ slideToggle
元素的显示与隐藏 使用hide()方法 使用hide()方法可以隐藏被选元素 $(document).ready(function () { $(".ex .hide...元素的淡入与淡出 使用hide()与show()方法 show和hide方法可以接受参数控制隐藏的过程.: show(speed,callback) speed参数规定显示或隐藏的速度: - slow..."#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); 使用fadeTo()方法 将所有匹配的不透明度以渐进的方式调整到指定的不透明度...元素的滑上与滑下 使用slideDown()方法 slideDown方法用于向下滑动元素: $(selector).slideDown(speed,callback); $...绑定与接触事件 绑定事件 绑定事件就是将页面中的元素事件类型与其在收到该事件之后期望进行的操作联系到一起。
prop ② 如果操作的是元素自定义的属性，则建议使用attr ☞ 对 class 属性操作 操作 说明 addClass() 添加class属性值 removeClass() 删除class属性值 toggleClass...当把元素隐藏后，可以使用 show() 方法将元素的 display 样式设置为先前的显示状态。提供了 toggle() 方法进行二者之间的切换。...1.4.2 fadeln() 方法和 fadeOut() 方法 与 show() 方法不相同的是，fadeln() 方法和 fadeOut() 方法只改变元素的不透明度。...fn]) 1.4.3 slideUp() 方法和 slideDown() 方法 slideUp() 方法和 slideDown() 方法会改变元素的高度。...如果一个元素的 display 属性值为"none"，当调用 slideDown() 方法时，这个元素将由上至下延伸显示。slideUp() 方法正好相反，元素将由下到上缩短隐藏。
jQuery 对象和 DOM 对象转换 DOM 对象与 jQuery 对象之间是可以相互转换的。.../ 1.添加类 $("div").addClass("current"); // 2.删除类 $("div").removeClass("current"); // 3.切换类 $("div").toggleClass...block;"> 商品介绍模块内容 规格与包装模块内容...显示隐藏 显示隐藏动画，常见有三个方法：show() / hide() / toggle() ；语法规范如下: show hide toggle 代码演示 <button...滑入滑出 滑入滑出动画，常见有三个方法：slideDown()、slideUp()、slideToggle()；语法规范如下: slideDown slideUp slideToggle 1.5.3
在新窗口打开外部链接 找到文本元素 切换可视与隐藏的触发器 Ajax 调用的错误处理 链式操作 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法...如果需要更简单的方式，还可以使用 toggleClass 方法： $('.btn').hover(function () { $(this).toggleClass('hover'); }); 注意...下面的代码是禁止默认行为的一个小诀窍： $('a.no-link').click(function (e) { e.preventDefault(); }); 淡入淡出/滑动开关 淡入淡出与滑动是我们经常使用...或许你只是想在用户点击某物时展现一个元素，使用 fadeIn 和 slideDown 都很棒。...ajaxError(function (e, xhr, settings, error) { console.log(error); }); 插件链式调用 jQuery 支持链式调用插件，以减缓反复查询
1.2.6. jQuery 对象和 DOM 对象转换 DOM 对象与 jQuery 对象之间是可以相互转换的。....显示元素 show() 隐藏元素 hide() 代码实现略。.../ 1.添加类 $("div").addClass("current"); // 2.删除类 $("div").removeClass("current"); // 3.切换类 $("div").toggleClass...(详情参考源代码) 1.5. jQuery 效果 jQuery 给我们封装了很多动画效果，最为常见的如下： 显示隐藏：show() / hide() / toggle() ; 划入画出：slideDown...显示隐藏 显示隐藏动画，常见有三个方法：show() / hide() / toggle() ; 语法规范如下: ?
$(selector).fadeTo(speed,opacity,callback); //淡出显示到 指定的透明度 $(selector).slideDown(speed,callback); /...toggleClass() 从匹配的元素中添加或删除一个类。 val() 设置或返回匹配元素的值。 4.元素添加 before_area1 <element ............contents 添加到 append_area3 位置 $(selector).prepend(contents); // 将 contents 添加到 append_area2 位置...// 将 contents 添加到 append_area4 位置 这里的content可以是字符串表示的元素，也可以是元素变量，并且可以多元素添加。...='#']") 所有 href 属性的值不等于 "#" 的元素 [attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
$("#elementId").toggleClass("activeClass"); // 如果 #elementId 元素当前有 "activeClass" 类，则移除它，否则添加它 事件处理拓展...- 详细解释与示例 focus(): 当元素获得焦点时触发，常用于输入框的交互。...#elementId 元素中 fadeIn() / fadeOut(): 处理淡入淡出效果，常用于显示或隐藏内容。...(): 实现滑动隐藏和显示效果。...$("#elementId").slideUp(1000); // 元素将在1秒内向上滑动隐藏 $("#elementId").slideDown(1000); // 元素将在1秒内向下滑动显示 以上就是关于
5、悬停切换类 假设你希望当用户将鼠标悬停在可点击的元素上时，它会改变颜色。...更简单的方法是使用toggleClass 方法： $('.btn').hover(function () { $(this).toggleClass('hover'); }); 注：可能在这种情况下，CSS...如果你只是想在用户点击之后展示一个元素的话，那么用fadeIn 和slideDown 方法就很完美。...不过，还有一种更灵活的方法是遍历一组元素，然后将高度设置为最高的那个元素的高度： var $columns = $('.column'); var height = 0; $columns.each(function...ajaxError(function (e, xhr, settings, error) { console.log(error); }); 15、链式插件调用 jQuery允许“链式”插件的方法调用，以减轻反复查询
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
