网站优化要做哪些,课程设计做淘宝网站的目的,网站首页设计报价多少,wordpress是是什么技术文章目录 简介安装语法选择器元素选择器#id 选择器.class 选择器事件常用事件方法 效果显示隐藏淡入淡出滑动动画停止动画获取内容和属性添加元素删除元素操作css父辈 #x1f49b;#x1f49b;孔子云#xff1a;温故而知新#xff0c;可以为师矣#x1f49b;#x1f49b… 文章目录 简介安装语法选择器元素选择器#id 选择器.class 选择器事件常用事件方法 效果显示隐藏淡入淡出滑动动画停止动画获取内容和属性添加元素删除元素操作css父辈 孔子云温故而知新可以为师矣 第一次学习的时候云里雾里通过对前端半年多的学习再来学习一下jQuery希望可以有收获并用在以后的开发中。
简介
什么是jQuery jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的写的少做的多的 JavaScript 库。
jQuery 库包含以下功能
HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities
安装
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
head
script srchttps://cdn.staticfile.org/jquery/1.10.2/jquery.min.js
/script
/head语法
jQuery 语法是通过选取 HTML 元素并对选取的元素执行某些操作。
基础语法 $(selector).action()
美元符号定义 jQuery选择符selector“查询和查找” HTML 元素jQuery 的 action() 执行对元素的操作 案例$(this).hide() - 隐藏当前元素
选择器
jQuery 中所有选择器都以美元符号开头$()
元素选择器
$(p)#id 选择器
$(#test).class 选择器
$(.test)事件
$(p).click(function(){// 动作触发后执行的代码!!
});常用事件方法
click() click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中当点击事件在某个 元素上触发时隐藏当前的 元素
$(p).click(function(){$(this).hide();
});dblclick() 当双击元素时会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件或规定当发生 dblclick 事件时运行的函数
$(p).dblclick(function(){$(this).hide();
});mouseenter() 当鼠标指针穿过元素时会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件或规定当发生 mouseenter 事件时运行的函数
$(#p1).mouseenter(function(){alert(您的鼠标移到了 idp1 的元素上!);
});效果
显示隐藏
hide() 和 show()
$(#hide).click(function(){$(p).hide();
});$(#show).click(function(){$(p).show();
});淡入淡出
fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值“slow”、“fast” 或毫秒。. 可选的 callback 参数是 fading 完成后所执行的函数名称 fadeOut() 淡出可见元素
$(selector).fadeOut(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值“slow”、“fast” 或毫秒。 可选的 callback 参数是 fading 完成后所执行的函数名称 fadeToggle() 在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeToggle(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值“slow”、“fast” 或毫秒。 可选的 callback 参数是 fading 完成后所执行的函数名称。 fadeTo() 允许渐变为给定的不透明度值介于 0 与 1 之间。
$(selector).fadeTo(speed,opacity,callback);必需的 speed 参数规定效果的时长。它可以取以下值“slow”、“fast” 或毫秒。 fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度值介于 0 与 1 之间 滑动
slideDown() 向下滑动元素。
$(selector).slideDown(speed,callback);slideUp() 向上滑动元素
$(selector).slideUp(speed,callback);slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换
$(selector).slideToggle(speed,callback);动画
$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值“slow”、“fast” 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称 停止动画
stop()
$(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false即仅停止活动的动画允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 获取内容和属性
text() - 设置或返回所选元素的文本内容
$(#btn1).click(function(){alert(Text: $(#test).text());
});html() - 设置或返回所选元素的内容包括 HTML 标签 val() - 设置或返回表单字段的值
添加元素
append() - 在被选元素的结尾插入内容
$(p).append(追加文本);prepend() - 在被选元素的开头插入内容
$(p).prepend(在开头追加文本);after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
$(img).after(在后面添加文本);$(img).before(在前面添加文本);删除元素
remove() - 删除被选元素及其子元素
$(#div1).remove();empty() - 从被选元素中删除子元素
$(#div1).empty();操作css
addClass() - 向被选元素添加一个或多个类 $(div).addClass(important);removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性
父辈
parent() parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
$(document).ready(function(){$(span).parent();
});parents() parents() 方法返回被选元素的所有祖先元素它一路向上直到文档的根元素 ()。 parentsUntil()
