不过，需要记住一件重要的事情：当使用 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
事件 | |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
目录 一、默认方式显示和隐藏 二、滑动方式显示和隐藏 三、淡入淡出方式显示和隐藏 四、案例：广告的自动显示和隐藏 ---- Hello，你好呀，我是灰小猿！一个超会写bug的程序猿！...首先来看一个简单的动画效果图： 我之前也和小伙伴们讲过使用jQuery框架可以很好的对html中元素的属性等进行操作，所以上面显示和隐藏的也只是一个div，而并不是一个图片。...* linear：动画执行时速度是匀速的 fn：在动画完成时执行的函数，每个元素执行一次。 同时在这里提醒一点就是，以上的三个参数是可有可无的，如果不对其进行设置，那么将以默认值执行。...并不是的，jQuery中也充分的考虑到了这一点，所以在有一个既能实现显示又能实现隐藏的方法 toggle([speed],[easing],[fn]) 当调用该方法的时候，元素就会被隐藏掉，类似于...--引入jquery--> <script type="text/<em>javascript</em>" src="..
回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏的图片 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)
("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...事件冒泡的作用 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
六、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:在动画完成时执行的函数，每一个元素执行一次
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
用来指定切换效果，默认是"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(); //让表单提交 });
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-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应用入门 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元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
