jQuery

最新推荐文章于 2022-05-30 10:44:08 发布

Mephisto180502

最新推荐文章于 2022-05-30 10:44:08 发布

阅读量243

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_33800083/article/details/90487534

版权

Web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript函数库，极大地简化了JS编程。

jQuery对象

jQuery提供的方法都是针对jQuery对象特有的，而且大部分方法的返回值类型也是jQuery类型的，所有方法可以连缀调用。

jQuery.action().action();

文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
   // 开始写 jQuery 代码...
});
或者
$(function(){
   // 开始写 jQuery 代码...
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

$(function(){
   // 开始写 jQuery 代码...
});

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

选择器
选择器分类	实例	选取
*	$("*")	所有元素
元素选择器	$("p")	在页面中选取所有 <p> 元素
id选择器	$("#test")	在页面中选取 id="test" 的元素
类选择器	$(".test")	在页面中选取所有 class="test" 的元素
自定义属性选择器	$("[test]")	在页面中选取带有test属性的元素
CSS选择器	$(“P”).css(“color”,”red”)	CSS选择器可用于改变HTML元素的CSS属性
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素注意：类名之间是没有空格的。如果中间有空格是要获取.intro下的带.demo的子孙代元素
.class,.class	$(".intro,.demo,.end")	选取 class 为 "intro"、"demo" 或 "end" 的所有元素注意：用逗号分隔每个 class。注意：不要使用数字开头的 class 属性！在某些浏览器中可能出问题。
层次选择器	$("div span")	选取<div>里的所有<span>元素【父子】
	$("div >span")	选取<div>下元素名是<span>的子元素【父子】
	$("#one +div")	选取id为one的元素的下一个<div>同辈元素等同于$(#one).next("div")
	$("#one~div")	选取id为one的元素后面的所有<div>同辈元素等同于$(#one).nextAll("div")
	$(#one).siblings("div")	获取id为one的元素的所有<div>同辈元素（不管前后）
	$(#one).prev("div")	获取id为one的元素的前面紧邻的同辈<div>元素
基本过滤器	$(‘p:first’)	选取页面元素内的第一个p元素
	$(‘p:last’)	选取页面元素内的最后一个p元素
	$(‘p:not(.select)’)	选取选择器不是select的p元素
	$("tr:even")	选取索引是偶数的tr元素(索引从0开始)
	$("tr:odd")	选取索引是奇数的tr元素(索引从0开始)
	$(‘tr:eq(index)’)	选取索引等于index的tr元素(索引从0开始,索引支持负数)
	$(‘tr:gt(index)’)	选取索引>index的tr元素(索引从0开始)
	$(‘tr:lt(index)’)	选取索引<index的tr元素(索引从0开始)
	$(‘input:focus’)	选取当前被焦点的元素
	$(‘:animated’)	选取正在执行动画的元素
内容过滤器	$(‘:contains(“百度”)’)	选取含有”百度”文本的元素
	$(‘:empty’)	选取不包含子元素或空文本的元素
	$("div:has(p)")或.has(p)	选取所有含有p标签的div元素
	$("td:parent")	选取所有带有子元素或包含文本的 <td> 元素
可见性过滤器	$(‘:hidden’)	选取所有不可见元素
	$(‘:visible’)	选取所有可见元素
子元素过滤器	$(‘li:first-child’)	查找 li 的第一个子元素
	$(‘li:last-child’)	查找 li 的最后一个子元素
	$(‘li:only-child’)	获取 li 唯一的子元素
	$(‘li:nth-child(index)’)	获取 li 指定索引的子元素
表单元素选择器	$(":input")	选择所有的表单输入元素，包括input, textarea, select 和 button
	$(":text")	选择所有的text input元素
	$(":password")	选择所有的password input元素
	$(":radio")	选择所有的radio input元素
	$(":checkbox")	选择所有的checkbox input元素
	$(":submit")	选择所有的submit input元素
	$(":image")	选择所有的image input元素
	$(":reset")	选择所有的reset input元素
	$(":button")	选择所有的button input元素
	$(":file")	选择所有的file input元素
	$(":enabled")	选择所有的可操作的表单元素
	$(":disabled")	选择所有的不可操作的表单元素
	$(":checked")	选择所有的被checked的表单元素
	$("select option:selected")	选择所有的select 的子元素中被selected的元素
属性过滤选择器	`引号一般可以加也可以不加，但在属性值为特殊符号或者包含空格的时候必须要加引号。`
	$("div[id]")	选择所有含有id属性的div元素
	$("input[name='newsletter']")	选择所有的name属性等于'newsletter'的input元素
	$("input[name!='newsletter']")	选择所有的name属性不等于'newsletter'的input元素
	$("input[name^='news']")	选择所有的name属性以'news'开头的input元素
	$("input[name$='news']")	选择所有的name属性以'news'结尾的input元素
	$("input[name*='man']")	选择所有的name属性包含'news'的input元素
	$("input[id][name$='man']")	选择所有的含有id属性并且name属性以man结尾的input元素

jQuery事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。

jQuery事件
方法	描述
$(selector).on(event,data,function,map)	向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数
$(selector).blur(function)	当元素失去焦点时发生 blur 事件
$(selector).change(function)	当元素的值改变时发生 change 事件
$(selector).click(function)	当单击元素时，发生 click 事件
$(selector).dblclick(function)	当双击元素时，触发 dblclick 事件
$(selector).delegate(childSelector,event,data,function)	使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）
$(selector).focus(function)	当元素获得焦点时，发生 focus 事件
$(selector).focusin(function)	当元素（或在其内的任意子元素）获得焦点时发生 focusin 事件
$(selector).focusout(function)	当元素（或在其内的任意子元素）失去焦点时发生 focusout 事件
$(selector).hover(inFunction,outFunction)	hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数
$(selector).keydown(function)	当键盘键被按下时发生 keydown 事件
$(selector).keypress(function)	keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件
$(selector).keyup(function)	当键盘键被松开时发生 keyup 事件
$(selector).trigger(event,eventObj,param1,param2,...)	trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）参数解析: 1.event:必需，规定匹配元素要触发的事件，可以是自定义事件，也可以是标准的事件。 2.param:可选，传递给事件处理函数的参数。
$(selector).triggerHandler(event,param1,param2,...)	triggerHandler() 方法触发被选元素上指定的事件

jQuery效果

语法	说明
$(selector).hide(speed,callback)	该方法可以隐藏 HTML 元素可选的 speed 参数规定隐藏的速度，可以取以下值："slow"、"fast" 或毫秒可选的 callback 参数是隐藏完成后所执行的函数名称
$(selector).show(speed,callback)	该方法可以显示 HTML 元素可选的 speed 参数规定显示的速度，可以取以下值："slow"、"fast" 或毫秒可选的 callback 参数是显示完成后所执行的函数名称
$(selector).toggle(speed,callback)	可以使用 toggle() 方法来切换 hide() 和 show() 方法可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒可选的 callback 参数是隐藏或显示完成后所执行的函数名称
$(selector).fadeIn(speed,callback)	jQuery fadeIn() 用于淡入已隐藏的元素可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒可选的 callback 参数是 fadeIn完成后所执行的函数名称
$(selector).fadeOut(speed,callback)	jQuery fadeOut() 用于淡出已隐藏的元素可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒可选的 callback 参数是 fadeOut完成后所执行的函数名称
$(selector).fadeToggle(speed,callback)	jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果

jQueryHTML

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery DOM 操作
语法	说明	示例
text()	返回所选元素的文本内容	$("p").text()
html()	返回所选元素的内容（包括 HTML 标记）	$("p").html()
val()	返回表单字段的值	$("input").val()
attr()	获取属性值	$("a").attr("action")
prop()	获取属性值	$("a").prop("href")
jQuery 1.6新增了一个prop()方法，attr()和prop()两者都可以用来设置或者读取某元素的属性值，但是他们之间也有很大区别，prop( )是针对Dom元素属性(property)，attr( )针对HTML元素属性(attribute)。 prop()函数的结果: 1.如果有相应的属性，返回指定属性值。 2.如果没有相应的属性，返回值是空字符串。 attr()函数的结果: 1.如果有相应的属性，返回指定属性值。 2.如果没有相应的属性，返回值是 undefined。对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。具有 true 和 false 两个属性的属性，如checked、selected、disabled等属性请使用prop()。
text()	设置所选元素的文本内容	$("<p></p>").text("Hello world!")
html()	设置所选元素的内容（包括 HTML 标记）	$("div").html("<p>Hello world!</p>")
val()	设置表单字段的值	$("input").val("RUNOOB")
attr()	设置属性值	$("a").attr("href","www.baidu.com")
text()、html() 、val()以及attr()拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。下面的例子演示带有回调函数的 text()： $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); });
clone()	clone() 方法生成被选元素的副本，包含子节点、文本和属性。	克隆所有的 <p> 元素，并插入到 <body> 元素的结尾：$("p").clone().appendTo("body");
$(selector).clone(true\|false); true 规定需复制事件处理程序。 false 默认。规定不复制事件处理程序。
append()	在被选元素的结尾（仍然在元素内部）插入指定内容	$("p").append("追加文本")
appendTo()	在被选元素的结尾（仍然在元素内部）插入指定内容。	$("<b>Hello World!</b>").appendTo("p");
提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。append能够使用函数给被选元素附加内容，语法为：`$(selector).append(function(index,html));`其中，function()是必需的，参数index和html都是可选的。index表示接收选择器的index位置，html表示接收选择器的当前html。
prepend()	在被选元素的开头插入内容	$("p").prepend("在开头追加文本")
after()	在被选元素之后插入内容	$("img").after("在后面添加文本")
before()	在被选元素之前插入内容	$("img").before("在前面添加文本")
remove()	删除被选元素（及其子元素）	$("#div1").remove()
empty()	从被选元素中删除子元素	$("#div1").empty()
过滤被删除的用元素 jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。下面的例子删除 class="italic" 的所有 <p> 元素： $("p").remove(".italic");
addClass()	向被选元素添加一个或多个类	$("div").addClass("important blue")
removeClass()	从被选元素删除一个或多个类	$("h1,h2,p").removeClass("blue")
toggleClass()	对被选元素进行添加/删除类的切换操作	$("h1,h2,p").toggleClass("blue")
hasClass('className')	判断selector里面是否包含有类className,返回一个布尔值	$("div").hasClass("blue")
css("propertyname")	返回被选元素的一个或多个样式属性	$("p").css("color")
css("propertyname","value")	设置被选元素的样式属性	$("p").css("color","yellow");
css({"propertyname":"value","propertyname":"value"});	设置被选元素的多个样式属性	$("p").css({"color":"yellow","font-size":"200%"})
jQuery遍历
parent()	返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历	$("span").parent() $("span").parent("div")
parents()	返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)	$("span").parents() $("span").parents("div")
parentsUntil()	返回介于两个给定元素之间的所有祖先元素	$("span").parentsUntil("div")
children()	返回被选元素的所有直接子元素
$("div").children("p.1")	可以使用可选参数来过滤对子元素的搜索	返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
find()	返回被选元素的后代元素，一路向下直到最后一个后代	$("div").find("span") 返回属于 <div> 后代的所有 <span> 元素
$("div").find("*")	例子返回 <div> 的所有后代	例子返回 <div> 的所有后代
$("div").find("input[type='radio']:checked").val()	查找<div>下的选中的radio单选框	查找<div>下的选中的radio单选框
siblings()	返回被选元素的所有同胞元素	$("h2").siblings()
$("h2").siblings("p")	也可以使用可选参数来过滤对同胞元素的搜索	返回属于 <h2> 的同胞元素的所有 <p> 元素
next()	返回被选元素的下一个同胞元素	$("h2").next()
nextAll()	返回被选元素的所有跟随的同胞元素	$("h2").nextAll()
nextUntil()	返回介于两个给定参数之间的所有跟随的同胞元素	$("h2").nextUntil("h6")
prev()	返回被选元素的上一个同胞元素	$("h2").prev()
prevAll()	返回被选元素的所有前面的同胞元素	$("h2").prevAll()
prevUntil()	返回介于两个给定参数之间的所有前面的同胞元素	$("h2").prevUntil()
jQuery遍历—过滤
first()	返回被选元素的首个元素	$("div p").first() 选取首个 <div> 元素内部的第一个 <p> 元素
last()	返回被选元素的最后一个元素	$("div p").last() 选择最后一个 <div> 元素中的最后一个 <p> 元素
eq()	返回被选元素中带有指定索引号的元素，索引号从 0 开始	$("p").eq(1) 选取第二个 <p> 元素
filter()	允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回	$("p").filter(".url") 返回带有类名 "url" 的所有 <p> 元素
not()	返回不匹配标准的所有元素	$("p").not(".url") 返回不带有类名 "url" 的所有 <p> 元素

jQuery 属性

方法	描述
context	在版本 1.10 中被废弃。包含被传递到 jQuery 的原始上下文
jquery	包含 jQuery 的版本号
jQuery.fx.interval	改变以毫秒计的动画运行速率
jQuery.fx.off	对所有动画进行全局禁用或启用
jQuery.support	包含表示不同浏览器特性或漏洞的属性集（主要用于 jQuery 的内部使用）
length	包含 jQuery 对象中元素的数目
jQuery.cssNumber	包含所有可以不使用单位的CSS属性的对象

jQuery 杂项方法

1. data() 方法

实例

向 <div> 元素附加数据，然后取回该数据：

$("#btn1").click(function(){
    $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
    alert($("div").data("greeting"));
});

从被选元素中返回附加的数据。

语法：

$(selector).data(name)

参数	描述
name	可选。规定要取回的数据的名称。如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。

向被选元素附加数据。

语法：

$(selector).data(name,value)

参数	描述
name	必需。规定要设置的数据的名称。
value	必需。规定要设置的数据的值。

使用带有名称/值对的对象向被选元素附加数据。

语法：

$(selector).data(object)

参数	描述
object	必需。规定包含名称/值对的对象。

2. each()方法

① $(selector).each() 方法用来遍历DOM节点，在dom处理上面用的较多。

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

实例

输出每个 <li> 元素的文本：

$("button").click(function(){
    $("li").each(function(){
        alert($(this).text())
    });
});

语法：

$(selector).each(function(index,element))

参数	描述
function(index,element)	必需。为每个匹配元素规定运行的函数。 index - 选择器的 index 位置。 element - 当前的元素（也可使用 "this" 选择器）。

② $.each(dataresource,function(index,element))方法用来遍历数组、JSON 对象，在数据处理上用的比较多

function traversalData(){
var json = 
     '[{"id":"1","tagName":"apple"},
      {"id":"2","tagName":"orange"},
      {"id":"3","tagName":"banana"},
      {"id":"4","tagName":"watermelon"}]';
 
//遍历JSON对象，JSON.parse() 把json字符串转化为一个对象
if(json.length >0){
    $.each(JSON.parse(json),function(index,obj) {
        alert(index+":"+obj.tagName);
    });
}

3. get()方法

get() 方法获取由选择器指定的 DOM 元素。

实例

获取第一个 <p> 元素的名称和值：

$("button").click(function(){
x=$("p").get(0);
$("div").text(x.nodeName + ": " + x.innerHTML);
});

语法：

$(selector).get(index)

参数	描述
index	可选。规定要获取哪个匹配的元素（通过 index 编号）。

4. index() 方法

返回指定元素相对于其他指定元素的 index 位置。这些元素可通过 jQuery 选择器或 DOM 元素来指定。

注意：如果未找到元素，index() 将返回 -1。

实例

获得被点击的 <li> 元素相对于它的同级元素的 index：

$("li").click(function(){
alert($(this).index());
});

语法：

$(selector).index()

$(selector).index(element)

参数	描述
element	可选。规定要获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。

5. param() 方法

创建数组或对象的序列化表示形式。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

实例

输出序列化对象的结果：

$("button").click(function(){
$("div").text($.param(personObj));
});

语法：

$.param(object,trad)

参数	描述
object	必需。规定要序列化的数组或对象。
trad	可选。布尔值，指定是否使用参数序列化的传统样式。

6. removeData() 方法

移除之前通过 data() 方法设置的数据。

实例

从 <div> 元素中移除之前附加的数据：

$("#btn2").click(function(){
$("div").removeData("greeting");
alert("Greeting is: " + $("div").data("greeting"));
});

语法：

$(selector).removeData(name)

参数	描述
name	可选。规定要移除的数据的名称。如果没有规定名称，该方法将从被选元素中移除所有已存储的数据。

7. toArray() 方法

以数组的形式返回 jQuery 选择器匹配的元素。

实例

把 <li> 元素转换为数组，然后输出该数组元素的 innerHTML ：

$("button").click(function(){
x=$("li").toArray()
for (i=0;i<x.length;i++)
{
alert(x[i].innerHTML);
}
});

语法：

$(selector).toArray()

8. pushStack() 方法

将一个DOM元素集合加入到jQuery栈。

实例

向 jQuery 栈中先压入一些元素，然后再删除它们，之后再退回到之前刚压入栈的状态。

<div></div>
<script>
$(function () { 
    $().pushStack( document.getElementsByTagName("div")).remove().end();
})
</script>

语法：

pushStack( elements, name, arguments )

参数	描述
element	Array类型将要压入 jQuery 栈的数组元素，用于生成一个新的 jQuery 对象
name	可选。 String类型生成数组元素的 jQuery 方法名
arguments	可选。 Array类型传递给 Query 方法的参数(用于序列化)

9. $.when() 方法

提供一种方法来执行一个或多个对象的回调函数。

实例

一个参数传递给 $.when() 被受理，执行回调函数

$(function () { 
    $.when( { testing: 123 } ).done(
    function(x) { alert(x.testing); } /* alerts "123" */
    );
})

语法：

$.when( deferreds )

参数	描述
deferreds	Deferred类型一个或多个延迟对象，或者普通的JavaScript对象

Mephisto180502

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery

jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript函数库，极大地简化了JS编程。jQuery对象jQuery提供的方法都是针对jQuery对象特有的，而且大部分方法的返回值类型也是jQuery类型的，所有方法可以连缀调用。jQuery.action().action();文档就绪事件您也许已经注意到在我们的实例中的所有 jQuery 函数...
复制链接

扫一扫