翻译整理的jQuery使用查询手册_jquery
官方网站:http://jquery.com
jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!
下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip)
jQuery Downloads (http://jquery.com/src/)
下载完成后先加载到文档中,然后我们来看个简单的例子!
$(document).ready(function(){
$("a").click(function() {
alert("Hello world!");
});
});
script>
上边的效果是点击文档中所有a标签时将弹出对话框,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document全部下载完毕时执行函数。
在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签()的元素,$("#p")表示取id为"p"()的元素.
我将从以下几个内容来讲解jQuery的使用:
1:核心部分
2:DOM操作
3:css操作
4:javascript处理
5:动态效果
6:event事件
7:ajax支持
8:插件程序
一:核心部分
$(expr)
说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础
参数:expr:字符串,一个查询表达式或一段html字符串
例子:
未执行jQuery前:




p>threep>
a href="#" id="test" onClick="jq()" >jQuerya>
jQuery代码及功能:
alert($("div > p").html());
}
$("
Hello
}
Hello
$(elem)
说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
参数: elem:通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:
div>
p>twop>
div>p>threep>
a href="#" id="test" onClick="jq()">jQuerya>
alert($(document).find("div > p").html());
}
$(document.body).background("black");
}
$(elems)
说明:限制jQuery作用于一组特定的DOM元素
参数: elem:一组通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:





$(form1.elements ).hide();
}
$(fn)
说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!
参数:fn (Function):当文档载入时执行的函数!
例子:
$(document.body).background("black");
})
$(obj)
说明:复制一个jQuery对象,
参数:obj (jQuery): 要复制的jQuery对象
例子:
未执行jQuery前:
div>
p>twop>
div>
p>threep>
a href="#" id="test" onClick="jq()">jQuerya>
var f = $("div");
alert($(f).find("p").html())
}
each(fn)
说明:将函数作用于所有匹配的对象上
参数:fn (Function): 需要执行的函数
例子:
未执行jQuery前:
img src="1.jpg"/>
a href="#" id="test" onClick="jq()">jQuerya>
$("img").each(function(){
this.src = "2.jpg"; });
}
eq(pos)
说明:减少匹配对象到一个单独得dom元素
参数:pos (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:



alert($("p").eq(1).html())
}
标签的内容
get() get(num)
说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
参数:get (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:
p>So is thisp>
a href="#" id="test" onClick="jq()">jQuerya>
alert($("p").get(1).innerHTML);
}
标签的内容
index(obj)
说明:返回对象索引
参数:obj (Object): 要查找的对象
例子:
未执行jQuery前:
div id="test2">div>
a href="#" id="test" onClick="jq()">jQuerya>
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}
size() Length
说明:当前匹配对象的数量,两者等价
例子:
未执行jQuery前:
img src="test2.jpg"/>
a href="#" id="test" onClick="jq()">jQuerya>
alert($("img").length);
}
二:DOM操作
属性
我们以
herf() herf(val)
说明:对jQuery对象属性herf的操作。
例子:
未执行jQuery前
alert($("#test").href());
$("#test").href("2.html");
}
同理,jQuery还提供类似的其他方法,大家可以分别试验一下:
herf() herf(val) html() html(val) id() id (val) name() name (val) rel() rel (val)
src() src (val) title() title (val) val() val(val)
操作
after(html) 在匹配元素后插入一段html
$("#test").after("Hello");
}
after(elem) after(elems) 将指定对象elem或对象组elems插入到在匹配元素后

$("a").after($("#test"));
}

append(html)在匹配元素内部,且末尾插入指定html
$("#test").append("b>Hellob>");
}
appendTo(expr) 与append(elem)相反

$("a"). appendTo ($("#test"));
}
clone() 复制一个jQuery对象
$("#test").clone().appendTo($("a"));
}
empty() 删除匹配对象的所有子节点





$("#test").empty();
}
insertAfter(expr) insertBefore(expr)
按照官方的解释和我的几个简单测试insertAfter(expr)相当于before(elem),insertBefore(expr)相当于after (elem)
prepend (html) prepend (elem) prepend (elems) 在匹配元素的内部且开始出插入
通过下面例子区分append(elem) appendTo(expr) prepend (elem)
div>divdiv>
div>divdiv>
p>
div
p id="a">pp>
div>
div>divdiv>
p>
remove() 删除匹配对象
注意区分empty(),empty()移出匹配对象的子节点,remove(),移出匹配对象
wrap(htm) 将匹配对象包含在给出的html代码内

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網(https://www.shiseido.co.jp/sb/wonderland/)中�...

學習JavaScript不難,但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程,通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤,使用調試技巧。 5)優化性能,遵循最佳實踐。

探索前端中類似VSCode的面板拖拽調整功能的實現在前端開發中,如何實現類似於VSCode...

深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異,並解釋其背後的原因。 �...
