JQuery笔记

最新推荐文章于 2024-09-17 11:48:00 发布

Fighting_No1

最新推荐文章于 2024-09-17 11:48:00 发布

阅读量422

点赞数

分类专栏： web前端文章标签： jquery js

本文链接：https://blog.csdn.net/fighting_no1/article/details/79313964

版权

web前端专栏收录该内容

45 篇文章 4 订阅

订阅专栏

JQuery笔记

jQuery 的功能概括：

html的元素选取
html的元素操作
html dom遍历和修改
js特效和动画效果
css操作
html事件操作
ajax异步请求方式

jQuery 版本 2 以上不支持 IE6，7，8 浏览器。如果需要支持 IE6/7/8，那么请选择1.9。你还可以通过条件注释在使用 IE6/7/8 时只包含进1.9。

<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

编写JS的流程：

布局：HTML+CSS
属性：确定要修改哪些属性
数据：确定要修改哪些显示数据
事件：确定用户做哪些操作
编写JS：在事件中，用JS来修改页面元素的样式和显示的数据

jQuery 选择器

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$(“p.intro”)	选取 class 为 intro 的 <p> 元素
$(“p:first”)	选取第一个 <p> 元素
$(“ul li:first”)	选取第一个 <ul> 元素的第一个 <li> 元素
$(“ul li:first-child”)	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$(“a[target=’_blank’]”)	选取所有 target 属性值等于 “_blank” 的 <a> 元素
$(“a[target!=’_blank’]”)	选取所有 target 属性值不等于 “_blank” 的 <a> 元素
$(":button")	选取所有 type=“button” 的 <input> 元素和 <button> 元素
$(“tr:even”)	选取偶数位置的 <tr> 元素
$(“tr:odd”)	选取奇数位置的 <tr> 元素

jQuery 效果方法

下面的表格列出了所有用于创建动画效果的 jQuery 方法。

方法	描述	参数说明
show(speed,easing,callback)	显示被选元素	speed ：可选。规定隐藏效果的速度。可能的值：毫秒、“slow”、"fast" easing :可选。规定在动画的不同点上元素的速度。默认值为 “swing”。可能的值：“swing” - 在开头/结尾移动慢，在中间移动快;“linear” - 匀速移动 callback :可选。hide() 方法执行完之后，要执行的函数。
hide(speed,easing,callback)	隐藏被选元素
toggle(speed,easing,callback)	hide() 和 show() 方法之间的切换
fadeIn(speed,easing,callback)	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut(speed,easing,callback)	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo(speed,opacity,easing,callback)	把被选元素逐渐改变至给定的不透明度	speed ：必需。 opacity :必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
fadeToggle(speed,easing,callback)	在 fadeIn() 和 fadeOut() 方法之间进行切换
slideDown(speed,easing,callback)	通过调整高度来滑动显示被选元素
slideUp(speed,easing,callback)	通过调整高度来滑动隐藏被选元素
slideToggle(speed,easing,callback)	slideUp() 和 slideDown() 方法之间的切换
animate({styles},speed,callback)	对被选元素应用"自定义"的动画	styles :必需。规定产生动画效果的一个或多个 CSS 属性/值。注意：当与 animate() 方法一起使用时，该属性名称必须是驼峰写法：您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。同时，色彩动画并不包含在核心 jQuery 库中。
clearQueue(queueName)	对被选元素移除所有排队函数（仍未运行的）	queueName :可选。规定队列的名称。默认是 “fx”，标准效果队列。
delay(speed,queueName)	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue(queueName)	移除下一个排队函数，然后执行函数
finish(queueName)	对被选元素停止、移除并完成所有排队动画
queue(queueName)	显示被选元素的排队函数
stop(stopAll,goToEnd)	停止被选元素上当前正在运行的动画	stopAll :可选。布尔值，规定是否停止被选元素的所有加入队列的动画。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 goToEnd :可选。布尔值，规定是否立即完成当前的动画。默认是 false。

animate()可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){ 
  $("div").animate({  
    left:'250px', 
    height:'+=150px', 
    width:'+=150px'  
  }); 
});

您甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：

$("button").click(function(){ 
  $("div").animate({  
    height:'toggle'  
  }); 
});

jQuery HTML/CSS 方法

下面用于处理 HTML 和 CSS 的 jQuery 方法适用于 HTML 和 XML 文档。除了：html() 方法。

HTML操作

html()：设置所有匹配元素或返回第一个匹配元素的内容（包括 HTML 标记）。
- 返回内容：
  $(selector).html()
- 设置内容：
  $(selector).html(content)
- 使用函数设置内容：
  $(selector).html(function(index,currentcontent))
  - index - 返回集合中元素的 index 位置
  - currentcontent - 返回被选元素的当前 HTML 内容。
text()：设置或返回所有匹配元素的文本内容（返回内容时会删除 HTML 标记）。语法同html()。
val() : 设置所有匹配元素或返回第一个匹配元素的属性值（针对表单元素）。语法同html()。
after() ：在被选元素后插入内容
- 设置内容：
  $(selector).after(content)
- 使用函数设置内容：
  $(selector).after(function(index,currentcontent))
before() : 在被选元素前插入内容。语法同after()。
append() ：在被选元素的结尾插入内容。语法同after()。
prepend() ：在被选元素的开头插入内容。语法同after()。
appendTo() | 在被选元素的结尾插入 HTML 元素
语法：$(content).appendTo(selector)
- content : 必需。规定要插入的内容（必须包含 HTML 标签）。
 **注意：**如果 content 是已存在的元素，它将从当前位置被移除，并在被选元素的结尾被插入。
- selector : 必需。规定把内容追加到哪个元素上。
 $("").appendTo("p");
 执行的结果为
 
prependTo() ：在被选元素的开头插入 HTML 元素。语法同appendTo()。
insertAfter() ：在被选元素后插入 HTML 元素。语法同appendTo()。
$("").insertAfter("p");
执行的结果为

insertBefore() ：在被选元素前插入 HTML 元素。语法同appendTo()。
replaceAll() ：把被选元素替换为新的 HTML 元素。语法同appendTo()。
replaceWith() ：把被选元素替换为新的内容。语法同after()。
clone() ：生成被选元素的副本，包含子节点、文本和属性
语法：$(selector).clone(true|false)
- true ：规定需复制事件处理程序。
- false ：默认。规定不复制事件处理程序。
wrap() ：在每个被选元素的周围用 HTML 元素包裹起来。语法同after()。
$("p").wrap("<div></div>");
执行的结果为
<div></div>
wrapAll() ：在所有被选元素的周围用 HTML 元素包裹起来
语法：$(selector).wrapAll(wrappingElement)
wrapInner() ：在每个被选元素的内容周围用 HTML 元素包裹起来。语法同after()。
$("p").wrapInner("");
执行的结果为

unwrap() ：移除被选元素的父元素
语法：$(selector).unwrap()
empty() ：从被选元素移除所有子节点和内容。语法同unwrap()。
detach() ：移除被选元素（保留数据和事件）。该方法会保留移除元素的副本，允许它们在以后被重新插入。语法同unwrap()。
remove() ：移除被选元素（包含数据和事件）。语法同unwrap()。

属性操作

attr() : 设置所有匹配元素或返回第一个匹配元素的属性/值。
- 返回属性的值：
  $(selector).attr(attribute)
- 设置属性和值：
  $(selector).attr(attribute,value)
- 使用函数设置属性和值：
  $(selector).attr(attribute,function(index,currentvalue))
- 设置多个属性和值：
  $(selector).attr({attribute:value, attribute:value,...})
removeAttr() ：从被选元素移除一个或多个属性。
语法：$(selector).removeAttr(attribute)
attribute : 必需。规定要移除的一个或多个属性。如需移除若干个属性，请使用空格分隔属性名称。
prop() ：设置或返回被选元素的属性/值。语法同attr()。
注意： prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。
removeProp() ：移除通过 prop() 方法设置的属性。
注意：不要使用该方法来移除诸如 style、id 或 checked 之类的 HTML 属性。
语法：$(selector).removeProp(property)
property : 规定要移除的属性的名称。

尺寸与位置

height() ：设置所有匹配元素或返回第一个匹配元素的高度。当设置高度时，单位为 px、em、pt 等。默认单位是 px。语法同html()。
innerHeight() ：返回第一个匹配元素的内部高度（包含 padding，不包含 border）
语法：$(selector).innerHeight()
outerHeight() ：返回第一个匹配元素的外部高度（包含 padding 和 border）
语法：$(selector).outerHeight(includeMargin)
includeMargin ：可选。布尔值，规定是否包含 margin。默认false，不包含 margin。
width() ：设置所有匹配元素或返回第一个匹配元素的宽度。语法同height()。
innerWidth() ：返回第一个匹配元素的内部宽度（包含 padding，不包含 border）。语法同innerHeight()。
outerWidth() ：返回第一个匹配元素的外部宽度（包含 padding 和 border）。语法同outerHeight()。
offset() ：设置所有匹配元素或返回第一个匹配元素的偏移坐标（相对于文档）。当用于返回偏移时，返回的是一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。
- 返回偏移坐标：
  $(selector).offset()
- 设置偏移坐标：
  $(selector).offset({top:value,left:value})
- 使用函数设置偏移坐标：
  $(selector).offset(function(index,currentoffset))
offsetParent() ：返回第一个定位的祖先元素
语法：$(selector).offsetParent()
position() ：返回第一个匹配元素的位置（相对于父元素），该方法返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。
语法：$(selector).position()
scrollLeft() ：设置所有匹配元素或返回第一个匹配元素的水平滚动条位置。当滚动条位于最左侧时，位置是 0。
返回水平滚动条位置：
$(selector).scrollLeft()
设置水平滚动条位置：
$(selector).scrollLeft(position)
position ：规定以像素为单位的水平滚动条位置。
scrollTop() ：设置所有匹配元素或返回第一个匹配元素的垂直滚动条位置。当滚动条位于最顶部时，位置是 0。语法同scrollLeft()。

CSS操作

css() ：设置所有匹配元素或返回第一个匹配元素的一个或多个样式属性。语法同attr()。
当用于返回属性时，简写的 CSS 属性（比如 “background” 和 “border”）不被完全支持，且当用于返回属性值时，在不同的浏览器中有不同的结果。
hasClass() ：检查被选元素是否包含指定的 class 名称
语法：$(selector).hasClass(classname)
addClass() ：向被选元素添加一个或多个类名，使用空格分隔类名。该方法不会移除已存在的 class 属性。
- 添加若干类名：
  $(selector).after(classname)
- 使用函数添加类：
  $(selector).after(function(index,currentclass))
removeClass() ：从被选元素移除一个或多个类。如需移除若干个类，请使用空格分隔类名称。语法同addClass()。
注意： 如果参数为空，则将移除所有类名称。
toggleClass() ：在被选元素中添加/移除一个或多个类之间切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。然而，通过使用 “switch” 参数，您能够规定只删除或只添加类。
- 添加若干类名：
  $(selector).after(classname,switch)
- 使用函数添加类：
  $(selector).after(function(index,currentclass),switch)
  switch : 可选。布尔值，规定是否仅仅添加（true）或移除（false）类。
[ $. e s c a p e S e l e c t o r ()] (h t t p : / / w w w . r u n o o b . c o m / j q u e r y / h t m l - e s c a p e S e l e c t o r . h t m l) ：转义 C S S 选择器中有特殊意义的字符或字符串。此方法对于一个 C S S 类名或一个 I D 包含的字符在 C S S 中具有特殊含义的情况下非常有用，如点或分号。语法： ‘$ .escapeSelector( selector )`
selector ： Selector类型一个包含选择器表达式的字符串，用来转义。
$.cssHooks ：提供了一种方法通过定义函数来获取和设置特定的CSS值

jQuery 遍历方法

first() ：返回被选元素的第一个元素
语法：$(selector).first()
last() ：返回被选元素的最后一个元素。语法同first()。
contents() ：返回被选元素的所有直接子元素（包含文本和注释节点）。语法同first()。
find() ：返回被选元素的后代元素
语法：$(selector).find(filter)
filter ：必需。过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。**注意：**如需返回多个后代，请使用逗号分隔每个表达式。 |
children() ：返回被选元素的所有直接子元素。该方法不会返回文本节点。
语法：$(selector).children(filter)
filter ：可选。规定缩小搜索子元素范围的选择器表达式。
siblings() ：返回被选元素的所有同级元素。语法同children()。
parent() ：返回被选元素的直接父元素。语法同children()。
next() ：返回被选元素的后一个同级元素。语法同children()。
prev() ：返回被选元素的前一个同级元素。语法同children()。
closest() ：返回被选元素的第一个祖先元素
返回使用 DOM context 查找的 DOM 树中的第一个祖先元素：
$(selector).closest(filter,context)
context ：可选。在其内可以找到匹配元素的 DOM 元素。
parents() ：返回被选元素的所有祖先元素
语法：$(selector).parents(filter)
filter ：可选。规定缩小搜索祖先元素范围的选择器表达式。**注意：**如需返回多个祖先，请使用逗号分隔每个表达式。
parentsUntil() ：返回介于两个给定参数之间的所有祖先元素
语法：$(selector).parentsUntil(stop,filter)
- stop ：可选。表示在哪里停止搜索匹配的祖先元素的选择器表达式、元素、jQuery 对象。
- filter ：可选。规定缩小搜索介于 selector 与 stop 之间的祖先元素范围的选择器表达式。**注意：**如需返回多个祖先元素，请使用逗号分隔每个表达式。 |
prevAll() ：返回被选元素之前的所有同级元素。语法同parents()。
prevUntil() ：返回介于两个给定参数之间的每个元素之前的所有同级元素。语法同parentsUntil()。
nextAll() ：返回被选元素之后的所有同级元素。语法同parents()。
nextUntil() ：返回介于两个给定参数之间的每个元素之后的所有同级元素。语法同parentsUntil()。
[ $. c o n t a i n s ()] (h t t p : / / w w w . r u n o o b . c o m / j q u e r y / m i s c - c o n t a i n s . h t m l) ：判断另一个 D O M 元素是否是指定 D O M 元素的后代语法： ‘$ .contains( container, contained )`
container ： Element类型，指定可能包含其他元素的祖辈容器元素。
contained ： Element类型，指定可能被其他元素包含的后代元素。
eq() ：返回带有被选元素的指定索引号的元素，索引号从 0 开头。
语法：$(selector).eq(index)
index ：必需。规定元素的索引。可以是整数或负数。**注意：**使用负数将从被选元素的结尾开始计算索引。
has() ：返回拥有匹配指定选择器的一个或多个元素在其内的所有元素
语法：$(selector).has(element)
element ：必需。规定匹配元素的选择器表达式或元素。**提示：**如需选取拥有多个元素在其内的元素，请使用逗号分隔
is() ：根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true
选择器表达式判断：
$(selector).is(selectorElement)
函数判断：
$(selector).is(function(index,element))
index() ：返回指定元素相对于其他指定元素的 index 位置。如果未找到元素，index() 将返回 -1。
语法：$(selector).index(element)
element ：可选。规定要获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。
add() ：把元素添加到匹配元素的集合中。该方法把元素添加到整个文档上，如果规定了 context 参数则只添加到上下文元素内部。
语法：$(selector).add(element,context)
- element ：必需。规定要添加到已存在的元素集合的选择器表达式、jQuery 对象、一个或多个元素、HTML 片段。 |
- context ：可选。规定选择器表达式在文档中开始进行匹配的位置。
addBack() ：把之前的元素集添加到当前集合中
not() ：从匹配元素集合中移除元素。该方法让您规定一个条件。不符合条件的元素将从选择中返回，符合条件的元素将被移除。
使用选择器表达式：
$(selector).not(criteria)
criteria : 可选。规定要从被选元素组合中移除的选择器表达式、jQuery 对象、一个或多个元素。**提示：**如需规定多个条件，请使用逗号分隔。
使用函数：
$(selector).not(function(index,element))
function(index,element) : 可选。为组合中的每个元素规定要运行的函数。如果返回 true，则移除元素，否则元素将被保留。注意： this 是当前的 DOM 元素。
filter() ：把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。语法同not()。
slice() ：把匹配元素集合缩减为指定范围的子集
语法：$(selector).slice(start,stop)
- start ：必需。规定开始选取元素的位置。
- stop ：可选。规定结束选取元素的位置。如果省略，则选取范围会在集合末端结束。
  索引号从 0 开始。**注意：**如果参数是负数，则表示从被选元素的末端开始选取元素，而不是从头开始。
each() ：为每个匹配元素执行函数
语法：$(selector).each(function(index,element))
**提示：**返回 false 可用于及早停止循环。
map() ：把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象
end() ：结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态

数据操作方法

方法	描述
$.type(obj )	确定JavaScript内置对象的类型，返回的是小写形式的类型名称。
$.isNumeric(value )	判断指定参数是否是一个数字值
$.isArray(obj )	判断指定参数是否是一个数组
$.isFunction(obj )	判断指定参数是否是一个函数
$.isEmptyObject(obj )	检查对象是否为空（不包含任何属性）
$.isPlainObject(obj )	判断指定参数是否是一个纯粹的对象
$.isWindow(obj )	判断指定参数是否是一个窗口
$.isXMLDoc(node )	判断一个DOM节点是否位于XML文档中，或者其本身就是XML文档
$.now()	返回当前时间
$.trim(str )	去除字符串两端的空白字符
$.parseHTML( htmlString [, context ] [, keepScripts ] )	将HTML字符串解析为对应的DOM节点数组 htmlString ： String类型，需要解析并转为DOM节点数组的HTML字符串 context ： Element类型，指定在哪个Document中创建元素，默认为当前文档的document keepScripts ： Boolean类型，指定传入的HTML字符串中是否包含脚本，默认为false
$.parseJSON( json )	将符合标准格式的JSON字符串转为与之对应的JavaScript对象
$.parseXML( xmlString)	将字符串解析为对应的XML文档
$.inArray( value, array [, fromIndex ])	在数组中查找指定值并返回它的索引值（如果没有找到，则返回-1）
$.grep( array, function(currentValue,index) [, invert ])	过滤并返回满足指定函数的数组元素 invert：默认值为false，指定是否反转过滤结果。如果参数invert为true，则结果数组将包含function返回false的所有元素。
$.merge( firstArray, secondArray )	合并两个数组内容到第一个数组
$.uniqueSort( array )	对DOM元素数组进行排序，并移除重复的元素
$.each( array/obj, function(index/key,value) )	遍历指定的对象和数组
$.map( array/obj, function(value, index/key) )	指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。函数返回值将作为结果数组中的一个元素，如果返回值为null或undefined，则不会被添加到结果数组中。
$.makeArray( obj )	将一个类似数组的对象转换为真正的数组对象
$.fn.extend( obj )	为jQuery扩展一个或多个实例属性和方法
$.extend()	将一个或多个对象的内容合并到目标对象

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

注意：

如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

语法

$.extend( target [, object1 ] [, objectN ] )

指示是否深度合并

$.extend( [deep ], target, object1 [, objectN ] )

警告：不支持第一个参数传递 false 。

参数	描述
deep	可选。 Boolean类型指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。
target	Object类型目标对象，其他对象的成员属性将被附加到该对象上。
object1	可选。 Object类型第一个被合并的对象。
objectN	可选。 Object类型第N个被合并的对象。