Jquery学习--菜鸟教程
jQuery 是为事件处理特别设计的,页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
写法:$("p").click(function(){
$(this).hide();
});
当鼠标指针穿过元素时,会发生 mouseenter 事件;当鼠标指针离开元素时,会发生 mouseleave 事件。
hover()方法用于模拟光标悬停事件。
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件;当在元素上松开鼠标按钮时,会发生 mouseup 事件。
当元素获得焦点时,发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
blur()当元素失去焦点时,发生 blur 事件。
jQuery 效果
隐藏和显示:hide() 和 show()---可以使用 toggle() 方法来切换 hide() 和 show() 方法;
$(selector).toggle(speed,callback);可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
淡入淡出:(就是显示、隐藏更好的效果)
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()方法允许渐变为给定的不透明度(值介于 0 与 1 之间)
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
滑入滑出:
- slideDown()
- slideUp()
- slideToggle()
动画
animate() 方法用于创建自定义动画:$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。当使用 animate() 时,必须使用 驼峰式 标记法书写所有的属性名,如必须 使用 paddingLeft 而不是 padding-left
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
stop() 方法用于动画或效果完成前对它们进行停止,stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
Callback 函数(回调函数写在这些动画效果方法中)在当前动画 100% 完成之后执行。
通过 jQuery,可以把动作/方法链接在一起。允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)
获取、设置内容和属性
三个简单实用的用于 DOM 操作的 jQuery 方法:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值(获得输入字段的值)
text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串
- attr() 方法用于获取属性值
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
attr 和 prop 的区别介绍:
对于 HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法。
对于 HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 attr 方法。
实例 1:
<a href="https://www.runoob.com" target="_self" class="btn">菜鸟教程</a>
这个例子里 <a> 元素的 DOM 属性有: href、target 和 class,这些属性就是 <a> 元素本身就带有的属性,也是 W3C 标准里就包含有这几个属性,或者说在 IDE 里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用 prop 方法。
<a href="#" id="link1" action="delete" rel="nofollow">删除</a>
这个例子里 <a> 元素的 DOM 属性有: href、id 和 action,很明显,前两个是固有属性,而后面一个 action 属性是我们自己自定义上去的,<a> 元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时,建议使用 attr 方法。
添加元素
添加新内容的四个 jQuery 方法:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
append() 和 prepend() 方法,after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。
那有木有考虑过append/prepend和after/before有什么区别呢?
append
<p><span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>
结果是这样的:
<p><span class="s1">s1</span><span class="s2">s2</span>
</p>
after
<p><span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>
结果是这样的:
<p><span class="s1">s1</span>
</p>
<span class="s2">s2</span>
总结:
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。
删除元素/内容
- remove() - 删除被选元素(及其子元素) 方法也可接受一个参数,允许过滤被删元素
- empty() - 从被选元素中删除子元素
获取并设置 CSS 类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回选元素的一个或多个样式属性css({"propertyname":"value","propertyname":"value",...});
尺寸方法
- width()设置或返回元素的宽度(不包括内边距、边框或外边距)
- height()设置或返回元素的高度(不包括内边距、边框或外边距)
- innerWidth()返回元素的宽度(包括内边距)
- innerHeight()返回元素的高度(包括内边距)
- outerWidth()返回元素的宽度(包括内边距和边框)
- outerHeight()返回元素的高度(包括内边距和边框)
遍历
用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。遍历方法中最大的种类是树遍历(tree-traversal)。
向上遍历 DOM 树
- parent()法返回被选元素的直接父元素
- parents()返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
- parentsUntil()方法返回介于两个给定元素之间的所有祖先元素$("span").parentsUntil("div");
向下遍历 DOM 树
- children()返回被选元素的所有直接子元素
- find()被选元素的后代元素,一路向下直到最后一个后代
在 DOM 树中水平遍历
- siblings()返回被选元素的所有同胞元素,可以使用可选参数来过滤对同胞元素的搜索$("h2").siblings("p");
- next()返回被选元素的下一个同胞元素,该方法只返回一个元素
- nextAll()方法返回被选元素的所有跟随的同胞元素
- nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
- prev()返回的是前面的同胞元素(在 DOM 树中沿着同胞之前元素遍历,而不是之后元素遍历)
- prevAll()
- prevUntil()
过滤
- first()返回被选元素的首个元素
- last() 返回被选元素的最后一个元素
- eq()返回被选元素中带有指定索引号的元素
允许您基于其在一组元素中的位置来选择一个特定的元素
- filter() 不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回$("p").filter(".url");(返回带有类名 "url" 的所有 <p> 元素)
- not() 返回不匹配标准的所有元素
允许您选取匹配或不匹配某项指定标准的元素
对于first()的补充说明:
如果首个元素存在嵌套的情况,有两中情况,会有不同的结果如下:
1.情况一:
<div><p>我是外面的 div 内容</p> <!-- first()指定对象 --><div><p>我是里面的 div 内容</p></div>
</div><div><p>...</p>
</div>
$("div p").first(); 指的是 <p> 我是外面的 div 内容 <p>
2.情况二:
<div><div><p>我是里面的 div 内容</p> <!-- first()指定对象 --></div><p>我是外面的 div 内容</p>
</div><div><p>...</p>
</div>
$("div p").first(); 指的是 <p> 我是里面的 div 内容 <p>
总结:也就是说,遇到嵌套的情况时优先级是从里到外 ,从前到后。last() 也是同理,顺序是 从里到外,从后到前。
jQuery - AJAX
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML),在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示
load() 方法
load() 方法从服务器加载数据,并把返回的数据放入被选元素中
$(selector).load(URL,data,callback)
必需的 URL 参数规定您希望加载的 URL。也可以把 选择器添加到 URL 参数,意味着将元素的内容加载到指定的 元素中
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
get() 和 post() 方法
get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
$.get() 方法通过 HTTP GET 请求从服务器上请求数据
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。回调函数的第一个参数存被请求页面的内容,第二个参数存请求的状态
$.post() 方法通过 HTTP POST 请求向服务器提交数据
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
其他一些 JavaScript 库包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS,其中某些框架也使用 $ 符号作为简写(就像 jQuery),如果您在用的两种不同的框架正在使用相同的简写符号,有可能导致脚本停止运行。
noConflict() 方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了,您可以通过全名替代简写的方式来使用 jQuery;也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。
如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery"
Jquery学习--菜鸟教程相关推荐
- jQuery学习(菜鸟教程)
1.jquery安装 <head> <script src="jquery-1.10.2.min.js"></script> </head ...
- Jquery 学习-菜鸟教程
jquery效果和元素选择 //元素选择$(this).hide();$("p.test") //隐藏所有class="test"的<p>元素$(& ...
- php validate,jQuery Validate | 菜鸟教程
jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方 ...
- python学习 -- 菜鸟教程+B站视频
人生苦短,我学python.ei,我不学,我玩web,多活两年多活两年,哈哈哈 谈一下专业课的学习,不是不支持看视频入门,但所有内容的学习必须回归到 书和文档的阅读 ! 真心的,越早学习文档越好**& ...
- Kotlin学习(菜鸟教程)
class FirstKotlin : AppCompatActivity() {//val从不修改的变量 var 可修改的变量val age = 18var num: Int = 18//变量默认不 ...
- jQuery 选择器 _ 菜鸟教程
jQuery 选择器 | 菜鸟教程 菜鸟教程 – 学的不仅是技术,更是梦想! jQuery 选择器 请使用我们的 jQuery 选择器检测器 来演示不同的选择器. 选择器 实例 选取 * $(&quo ...
- Java菜鸟教程系列 学习笔记总结 基础篇(1)
基础语法 本博客通过学习菜鸟教程Java专栏,并整理得出的Java基础知识. 命名规范 1.项目名全部小写 2.包名全部小写 3.类名首字母大写,如果类名由多个单词组成,每个单词的首字母都要大写.如: ...
- JQuery学习(来自菜鸟教程)
jQuery jQuery 语法 基础语法: $(*selector*).*action*() 美元符号定义 jQuery 选择符(selector)"查询"和"查找&q ...
- jQuery概述(查阅菜鸟教程随笔)
jQuery 是一个 JavaScript 库. jQuery 实例 在本教程中,您将通过教程以及许多在线实例,学到如何通过使用 jQuery 应用 JavaScript 效果. jQuery 在线实 ...
最新文章
- 公示 | 清华大学大数据研究中心“RONG”奖学金获奖名单
- 19.VS属性管理器窗口不见了怎么办?
- Py之utils:utils库的简介、安装、使用方法之详细攻略
- 记一次曲折的后台getshell过程
- 【数学基础】参数估计之贝叶斯估计
- 远程桌面连接一个域网的计算机,怎样远程控制局域网的另一台电脑(远程桌面)win10...
- Java基础学习总结(178)——时候替换你的logback/log4j1了,使用性能更强大配置更简单的log4j2
- 一名不加班的运维,怎能不会善待混合云容器
- 京东E卡查询绑定助手电脑版APP
- 校园学生疫情防范监控小程序 毕业设计-附源码281444
- csgo显示连接任何官方服务器失败,csgo连接任意官方服务器失败怎么办_csgo连接官方服务器失败解决方法...
- C/C++指针的经典笔试面试题
- python定义公民类、变量有身份证号_Python趣解身份证号码的奥秘!
- 海思平台项目经验总结
- 物体移动时,面朝移动方向旋转
- 计算机配置高低怎么看,怎么查看电脑配置?(查看电脑配置高低的三种方法!)...
- ATTCK框架以及使用场景
- 中文的括号和英文的括号区别_小括号、中括号、大括号,英文怎么说?
- html vb病毒,HTML_用vbs实现的一款Worm.Win32.VB.fw病毒专杀,在写了《Worm.Win32.VB.fw分析与清 - phpStudy...
- Zcash使用工具nheqminer用cpu挖矿