jQuery 语法实例

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

$(this).hide(): 演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。
$("p").hide(): 演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。
$(".test").hide(): 演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。
$("#test").hide()演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。当引入放在<head></head>标签里：为了防止文档在完全加载（就绪）之前运行 jQuery 代码。我们写上一个函数：$(document).ready(function(){　　　　　　　　　　　　　　　　　　//在里面继续写内容，这是当文档全部加载就绪，运行jQuery})selector　　选择器根据标签当作选择器　　$("p") 选取 <p> 元素。根据class找到选择器　　$(".p") 选取 <p> 元素。根据ID找到选择器　　　　$("#p") 选取 <p> 元素。根据css选择器　　　　　　 $("p").css("background-color","red");　　　　//所有P事件方法：$(document).ready(function)　　将函数绑定到文档的就绪事件（当文档完成加载时）$(selector).click(function)　　　　触发或将函数绑定到被选元素的点击事件$(selector).dblclick(function)　　　　触发或将函数绑定到被选元素的双击事件$(selector).focus(function)　　　　　　触发或将函数绑定到被选元素的获得焦点事件$(selector).mouseover(function)　　　　触发或将函数绑定到被选元素的鼠标悬停事件========================jQuery效果：====================显示隐藏：　$(selector).hide(speed,callback);　　　　　　//隐藏$(selector).show(speed,callback);　　　　　　//显示切换：$(selector).toggle(speed,callback);　　　　　　　　//切换淡入淡出：　　　　　　$(selector).fadeIn(speed,callback);　　　　　　　　　//淡入效果　　　　　　$(selector).adeOut(speed,callback);　　　　　　　　//淡出效果　　　　　　$(selector).fadeToggle(speed,callback);　　　　　　//切换　　　　　　$(selector).fadeTo(speed,opacity,callback);　　　　//给定不透明度滑动：　　　$(selector).slideDown(speed,callback);　　　　　　//向下滑动$(selector).slideUp(speed,callback);　　　　　　　　//向上滑动$(selector).slideToggle(speed,callback);　　　　　　　//切换动画：$(selector).animate({params},speed,callback);　　　　　　//创建自定义动画停止：$(selector).stop(stopAll,goToEnd);　　　　　　　　　　　　//在动画或效果完成前对它们进行停止。回调函数：$(selector).hide(speed,callback);　　　　　　　　　　　　//当动画 100% 完成后，即调用 Callback 函数。

Chaining：链接

　　　　　　$("#p1").css("color","red").slideUp(2000).slideDown(2000);============================jQuery获取内容和属性==================

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

获取属性：attr（）

attr与css的区别：attr是获取或设置元素的某个属性值，css是设置或获取元素style里面的属性的

=====================添加新的元素/内容=================

append() - 在被选元素的结尾插入内容　　
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

========================删除元素/内容======================

remove() - 删除被选元素（及其子元素）　　　　 //方法也可接受一个参数，允许您对被删元素进行过滤。
empty() - 从被选元素中删除子元素

======================对css元素进行操作===================

addClass() - 向被选元素添加一个或多个类 //添加多个类，中间用空格隔开
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

css() 方法设置或返回被选元素的一个或多个样式属性。

返回指定的 CSS 属性的值：

　　　　　　　　　　　　　　css("propertyname");　　　　　　//返回首个匹配元素

设置指定的 CSS 属性：

　　　　　　　　　　　　　　css("propertyname","value");　　　　　　//将为所有匹配元素设置值

设置多个 CSS 属性：

　　　　　　　　　　　　　　css({"propertyname":"value","propertyname":"value",...});

===============================处理元素和浏览器窗口的尺寸====================

width()　　 //方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()
innerWidth()　　 //方法返回元素的宽度（包括内边距）。
innerHeight()
outerWidth() //方法返回元素的宽度（包括内边距和边框）。
outerHeight()
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

====================================向上遍历DOM树============================

parent() //返回被选元素的直接父元素。
parents() //返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil() //返回介于两个给定元素之间的所有祖先元素。（不包括最后一个）

===========================向下遍历==========================

children() //返回被选元素的所有直接子元素。
find() //返回被选元素的后代元素，一路向下直到最后一个后代。（不包括最后一个）

============================同胞元素======================

siblings() //返回被选元素的所有同胞元素。
next() //返回被选元素的下一个同胞元素。
nextAll() //返回被选元素的所有跟随的同胞元素。
nextUntil() //返回介于两个给定参数之间的所有跟随的同胞元素。（不包括最后一个）
prev()
prevAll()
prevUntil()

==============================过滤==========================

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素。

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

=================================.each（）===========================

对 jQuery 对象进行迭代，为每个匹配元素执行函数。

each() 方法规定为每个匹配元素规定运行的函数。

提示：返回 false 可用于及早停止循环。

$(selector).each(function(index,element))　　　　function(index,element)　　　　为每个匹配元素规定运行的函数。

index 选择器的index位置　　　　　　element （当前元素，也可以使用“this”选择器）

例子：

<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>

转载于:https://www.cnblogs.com/liuwei1/p/10300549.html

2019.1.21jQuery相关推荐

2019.01-02 总结
2019.01-02 总结 2019 年即将过去两个月了,整个 2019 年也即将过去 1/6,本来是在 01 月底进行总结,但是由于各种事情耽误,所以延迟到现在对前两个月进行回顾,看看哪里还需要改善 ...
回顾 2018，展望 2019
1. 概述今天是 2019 年第一天,趁着元旦 3 天假期时间,对即将过去的这一年做个总结回顾,看下这一年得到了什么,失去了什么,并对来年做个新的规划,看下需要采取哪些措施提升自己. 2. 2018 ...
NLP相关论文上新-2019
文章目录 2019.07 0724 0725 0726 0729 0730 0731 2019.08 0801 0802 0815 个人觉得有价值.有帮助的论文 2019.07 0724 计算机视觉和 ...
2019年终总结：好好爱自己
前言: 回顾培养计划学过的东西,自己给个评分,标准(独立,拼尽全力,内心满足),但这一块很多是不由我自己控制的回顾内心成长的过程,给满分,因为真的尽全力的在做,没有遗憾和后悔. 专业学习阶段: 00 ...
2019个嵌入式市场研究，持续的C/C++优势
2019个嵌入式市场研究,持续的C/C++优势 2019 Embedded Markets Study reflects emerging technologies, continued C/C++ ...
CVPR目标检测与实例分割算法解析：FCOS（2019），Mask R-CNN（2019），PolarMask（2020）
CVPR目标检测与实例分割算法解析:FCOS(2019),Mask R-CNN(2019),PolarMask(2020) 目标检测:FCOS(CVPR 2019) 目标检测算法FCOS(FCOS: ...
2019春第二次课程设计实验报告
2019春第二次课程设计实验报告一.实验项目名称: 贪吃蛇游戏编写: 二.实验项目功能描述: 这个实验主要是实现游戏的正常运行,实现的目标是对小蛇移动的控制, 同时对小蛇数据的保存,如何实现转弯的效 ...
挥手送别 2019，翘首期待 2020
1. 2019 年度总结回头看看 2019 年初做的计划,发现有好多都没有实现,像管理.英语.锻炼身体等,都由于种种原因没有坚持下来,或者说都没有达到预期的效果. 英语学习 2019 年初尝试 [英 ...
中山大学计算机学院运动会,喜讯！我院获2019中大校运会教工组团体第二名
11月2日,中山大学2019年运动会在南校园举行,来自全校68个院系.附属医院.部门共3200余名师生参加比赛.由37名职工运动员组成的中山七院代表队参加教工组田径赛.趣味田径及球类等全部15项比赛, ...

2019.1.21jQuery

jQuery 语法实例

Chaining：链接

2019.1.21jQuery相关推荐

最新文章

热门文章