不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用paddingLeft 而不是 padding-left,使用 marginRight...而不是 margin-right,等等。...$(“button”).click(function(){ var div=$(“div”); //定义一个div 表示$(“div”) 对该元素有多个操作是的简便写法 div.animate...stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。...”).click(function(){ //无参数的暂停,一次点击,暂停一个animate动画,点击两次暂停两个动画 $(“div”).stop(); }); $(“#stop2
,再用给定的选择器表达式去过滤; 3,前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。...使用end后将返回A位置 contents() 获得所有节点(子元素、文本) abc xxx 串联: add(e|e|h|o[,c]) 相当与 $("#id,.class...事件处理和委派 Jquery对象.事件(fn) on:绑定多个事件 one: 绑定一次事件 one() bind和unbind bind:绑定事件,一直使用,直到解绑 例如:$btn1.bind(“click...],[fn]):切换 若有则淡出,若无则淡入 <!...":"1px solid #000", "margin":5, }).appendTo($("body")); } //div变化 function showDiv(){ //把第一个div滑出完成之后将其淡入到最后一个
jQuery 安装: 下载jQuery库,下载地址 production version 用于实际的网站中 development version 用于测试和开发 jQuery库是一个JavaScript...停止动画 Stop()方法适用于所有jQuery效果函数 $(selector).stop(stopAll,goToEnd); $("#stop").click(function(){ $("#...方法 $("#p1").css("color","pink").slideUp(2000).slideDown(2000); jQuery 获取和jQuery 设置 text()--设置或返回所选元素的文本内容...image.png jQuery CSS addClass()--向被选元素添加一个或多个类 removeClass()--从被选元素删除一个或多个类 toggleClass()--对被选元素进行添加...eq() 返回被选元素中带有指定索引号的元素 索引号从0开始,因此首个元素的索引号是0而不是1 Filter()方法 Not()方法 不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
不要去相信那些所谓的专家,所谓的老师,让你不去下苦功夫,而可以走捷径都是为了骗你的钱。...幸亏我们不是英语专业的学生,我们只需要记忆的便是常用的一些计算机英语即可,这些单词敲过无数遍,难道看起来,它还是陌生人吗?...---- head 头部 body 身体 h 这是标题,比如一级标题h1,h1~h6 p 段落 div 区块(最常用的标签之一,里面可以放任何内容) span 存放的是特殊效果的文字和小图片 img 图片...(alt里面放置的是网络不好时的替换文本,src填写的是路径,title填写的是提示文本) a 超链接(herf内容是跳转地址,当然此处有一个工作中常用的功能,那便是跳转网站新建一个标签,不用占本网站的位置...,radio是单选框,checkbox是复选框,file是上传文件,textarea是文本域(也就是前面禁止拖拽功能实现的地方,也许是本身的一个小bug吧,需要去掉),submit提交,button普通的按钮
库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。...常见的JavaScript 库:jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等,这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript...1.1.2 jQuery的概念 jQuery总体概况如下 : jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码...// 简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。...stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。 总结: 每次使用动画之前,先调用 stop() ,在调用动画。 1.5.6.
fadeIn([s],[e],[fn]) 淡入动画 $("button").eq(0).click(function () { $("div").fadeIn(1000, function...("淡入完毕"); }) }); 自定义动画 有时候jQuery中提供的集中简单的固定动画无法满足我们的需求, 所以jQuery还提供了一个自定义动画方法来满足我们复杂多变的需求 animate...{ alert("自定义动画执行完毕"); }); 动画队列 多个动画方法链式编程,会等到前面的动画执行完毕再依次执行后续动画 $("div").slideDown(1000).slideUp...> --> 1 2 3 </div
目录 一、默认方式显示和隐藏 二、滑动方式显示和隐藏 三、淡入淡出方式显示和隐藏 四、案例:广告的自动显示和隐藏 ---- Hello,你好呀,我是灰小猿!一个超会写bug的程序猿!...首先来看一个简单的动画效果图: 我之前也和小伙伴们讲过使用jQuery框架可以很好的对html中元素的属性等进行操作,所以上面显示和隐藏的也只是一个div,而并不是一个图片。...* linear:动画执行时速度是匀速的 fn:在动画完成时执行的函数,每个元素执行一次。 同时在这里提醒一点就是,以上的三个参数是可有可无的,如果不对其进行设置,那么将以默认值执行。...并不是的,jQuery中也充分的考虑到了这一点,所以在有一个既能实现显示又能实现隐藏的方法 toggle([speed],[easing],[fn]) 当调用该方法的时候,元素就会被隐藏掉,类似于...--引入jquery--> <script type="text/<em>javascript</em>" src="..
事件 | |dblclick() |触发、或将函数绑定到指定元素的 double click 事件 | |delegate() |向匹配元素的当前或未来的子元素附加一个或多个事件处理器...每个元素只能触发一次该处理器。...:last").addClass("myClass");//最后一个标签 }); 内容过滤选择器 :contains(text) 选取包含text文本内容的元素;区分大小写 :empty 选取不含子元素或者文本节点的空元素...,过滤被删除的元素(即指定删除) removeClass() 删除元素的class加载 empty() 删除被选元素的子元素 jQuery CSS 获取/设置 addClass() 向被选元素添加一个或多个...Class类 removerClass() 从被选元素中删除指定的一个或多个Class类 toggleClass() 对被选元素的add/remove进行切换式的操作 css() 设置/获取被选元素的Class
("div").css({fontSize:"30px",color:"red"}); 特别注意 选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个...,即0-9 \D 匹配一个非数字,即除了0-9 \w 匹配一个单词字符(字母、数字、下划线) \W 匹配任何非单词字符。...等价于[^A-Za-z0-9_] \s 匹配一个空白符 \S 匹配一个非空白符 \b 匹配单词边界 \B 匹配非单词边界 ....出现零次或一次(最多出现一次) + 出现一次或多次(至少出现一次) * 出现零次或多次(任意次) {n} 出现n次 {n,m} 出现n到m次 {n,} 至少出现n次 5、任意一个或者范围 [abc123...事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。
回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏的图片 Hover 上的 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度...禁用 input 字段 有时你也许想让表单的提交按钮或其文本输入框变得不可用,直到用户执行了一个特定行为(例如确认 “我已经阅读该条款” 的复选框)。...下面的代码是禁止默认行为的一个小诀窍: $('a.no-link').click(function (e) { e.preventDefault(); }); 淡入淡出/滑动开关...如果文本不存在,该元素将会隐藏: var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); 视觉改变触发 当用户焦点在另外一个标签上,或重新回到标签时,触发 JavaScript: $(document).on('visibilitychange', function (e)
六、CSS 模块 1. style 样式 方法 描述 css(styleName) 根据样式名得到对应的值 css(styleName, value) 设置一个样式 css(多个样式对) 设置多个样式.../JS/jquery-3.5.1.js" type="text/javascript"> var $div1... 淡出/淡入切换 <script src=".....点击btn3, 慢慢<em>淡入</em> 3....点击btn3, 淡出/<em>淡入</em>切换,动画结束时提示“动画结束了” */ var $<em>div</em>1 = $(".div1"); $("#btn1").click(function () {
概念: * 一个JavaScript框架,简化JS开发。...* jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。...","pink");//方式2,这种可以检测单词是否拼写正确 }) div1......包含多个属性条件的选择器 $(function () { //<input type="button" value...linear" * swing:动画执行时效果是:先慢,中间快,最后又慢 * linear:动画执行时速度是匀速的 3.fn:在动画完成时执行的函数,每一个元素执行一次
用来指定切换效果,默认是"swing",可用参数"linear" swing:动画执行时效果是 先慢,中间快,最后又慢 linear:动画执行时速度是匀速的 fn:在动画完成时执行的函数,每个元素执行一次...$("#showDiv").fadeIn("slow"); //淡入淡出方式 $("#showDiv").fadeOut("slow"); //淡入淡出方式 $("#showDiv").fadeToggle...jq对象.each(callback) 语法: jquery对象.each(function(index,element){}); index:就是元素在集合中的索引 element:就是集合中的每一个元素对象...this:集合中的每一个元素对象 回调函数返回值: true:如果当前function返回为false,则结束循环(break)。...$("#name").focus(); //让文本输入框获得焦点 表单对象.submit(); //让表单提交 });
slow")或表示动画时长的毫秒值; 2)easing:用来指定切换效果,默认是"swing",效果是先慢,中间快,最后又慢;参数"linear",匀速; 3)fn:在动画完成时执行的函数,每个元素执行一次...:pink"> div显示和隐藏 ?.../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"> <script type="text/<em>javascript</em>...鼠标走了...") });*/ // alert("我要获得焦点了...") // $("#name").focus();//让文本输入框获得焦点
对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用...ul-->li形式) 4.然后是一个透明背景层,放在图片底部 5.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 6.然后是一个按钮层,用来定位图片组的index...> 51 52 <script type="text/<em>javascript</em>" src="....class的来说,<em>多个</em>class应该会出错) //通过class获取节点 function getElementsByClassName(className){ var...> 51 52 53 var curIndex = 0, //当前index 54
jquery-1.12.4.js:未压缩版本,适用于学习与开发环境,源码清晰,易阅读。...: Expected 'EOF', got '#' at position 3: ('#̲one'); …(’啦啦,我是一个div’); //4.3 如果参数是一个dom...end(); // 筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态。.... // var age = 18; // console.log("我的名字是age"); //思考题: //为什么是给li标签设置鼠标移入事件,而不是给...> $(function () { //1.淡入 fadeIn $('#fadeIn').click(function () { //让id为div1的这个元素淡入
jQuery 是一个快速、简洁的 JavaScript 框架,封装 JavaScript 常用的功能代码,提供一种简便的 JavaScript 设计模式,优化 HTML 文档操作、事件处理、动画设计和...$(".item+div") 选取 Class 为 item 的下一个 兄弟元素 兄弟元素选择器 集合元素 $("#item~div") 选取 ID 为 item 的元素后面的所有 元素 :even 集合元素 $("input:even") 选取索引是偶数的 元素 :odd 集合元素 $("input:odd")...:input 集合元素 $(":input") 选取所有 ,, 和 元素 :text 集合元素 $(":text") 选取所有的单行文本框....addClass('cls'); 移除多个类 .removeClass('cls1, cls2'); 创建节点 var $li = $("苹果"); 删除节点 .remove()
jQuery应用入门 jQuery是一个JavaScript库,极大的简化了JavaScript编程。...height: "150" }); }); }); 另外,jQuery还为用户提供了对元素的属性进行移除的方法,即removeAttr()方法,可以从被选元素移除一个或多个方法...function () { $("p").toggleClass("main"); }); }); CSS属性操作 jQuery提供css()方法,用来获取或设置匹配的元素的一个或多个样式属性...- fast - normal - 或者直接写数字,单位是毫秒,2000 callback是回调函数 使用fadeIn()方法 jQuery通过控制不透明度的变化来实现淡入效果,并在动画完成之后出发一个回调函数...切换与触发事件 切换事件 有两个方法用于事件的切换,一个是hover,一个是toggle 当需要设置鼠标悬停和鼠标移除的事件中进行切换时,使用K方法: <script type="text/<em>javascript</em>
jQuery是一个Javascript函数库,轻量级,“写得少,做的多!”...5.停止动画: stop()方法用于停止动画效果,适用于所有jQuery效果函数,包括滑动,淡入淡出,自定义动画。...插入后:hello tomorrow是使用append():插入到div里面了,并与div里面的元素内容相联合;而hello yesterday是使用after():插入待div外面,即div元素的后面...例如:$('p').remove('.test1'); empty():从被选元素中删除子元素(被选元素没有被删除,相当于留了一个外壳) 4.获取/设置css类: addClass():向被选元素中添加一个或多个类...; removeClass():向被选元素中删除一个或多个类; toggleClass():切换addClass()和removeClass(); css():设置或获取css属性。
fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 自定义动画:animate() ; 注意: 动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行...jQuery为我们提供另一个方法,可以停止动画排队:stop() ; 1.1....(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。 1. 淡入淡出切换效果语法规范 fadeToggle([speed,[easing],[fn]]) 2....事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。... $(function () { // 鼠标经过某个小li 有两步操作: $(".
领取专属 10元无门槛券
手把手带您无忧上云