正文

jQuery 简单归纳总结

IP云
IP云V管理员/2 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

jQuery语法是为HTML元素的选取编制的，能够对元素运行某些操作。

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

+美元符号定义 jQuery

+选择符（selector）“查询”和“查找” HTML 元素

+jQuery 的 action() 运行对元素的操作

演示样例：

$("p").hide()--隐藏全部段落

$(this).hide()--隐藏当前元素





jQuery选择器：

元素选择器：

$("p")--选取<p>元素

$("p.intro")--选取全部class=“intro”的<p>元素

$("p#intro")--选取全部id=“ontro”的<p>元素





属性选择器：

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取全部带有 href 属性的元素。

$("[href='#']") 选取全部带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取全部带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取全部 href 值以 ".jpg" 结尾的元素





CSS选择器：

$("p").css("background-color","red");





jQuery 名称冲突：

jQuery使用$符号作为jQuery的简称方式。

某些其它JavaScript库(比方Prototype)也是用相同的符号。

那么此时，jQuery使用noConflict()的方法来解决此问题。

Var jq=jQuery.noConflict(); //帮助你使用自己的名称来使用jQuery





jQuery是为事件处理专门设计的。

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});





jQuery hide()和show()

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

speed隐藏动作所运行速度。它能够取值：“slow”.“fast”和毫秒值

callback隐藏后回调函数





jQuery toggle():显示被隐藏的元素，隐藏已显示的元素





jQuery效果：淡入淡出

淡入：$(selector).fadeIn(speed,callback)

淡出：$(selector).fadeOut(speed,callback)

淡入淡出切换：$(selector).fadeToggle(speed,callback)

渐变为给定不透明度：$(selector).fadeTo(speed,opacity,callback)

speed:动作运行速度。

它能够取值：“slow”.“fast”和毫秒值

opacity:參数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。





jQuery滑动效果

向下滑动：$(selector).slideDown(speed,callback);

向上滑动：$(selector).slideUp(speed,callback);

上下切换：$(selector).slideToggle(speed,callback);

可选的 speed 參数规定效果的时长。它能够取下面值："slow"、"fast" 或毫秒。





jQuery 动画 animate()

语法：$(selector).animate({params},speed,callback);

patams：必须參数,定义形成的动画css属性

speed ：可选參数,规定效果的时长。它能够取下面值："slow"、"fast" 或毫秒。

注：默认情况下。全部 HTML 元素的位置都是静态的。而且无法移动。

如需对位置

进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或

absolute。





jQuery：stop()--停止函数，动画或效果。

语法：$(selector).stop(stopAll,goToEnd);

可选的 stopAll 參数规定是否应该清除动画队列。默认是 false，

即仅停止活动的动画，同意不论什么排入队列的动画向后运行。

可选的 goToEnd 參数规定是否马上完毕当前动画。默认是 false。





Chaining能够把动作方法链接起来：

$("#p1").css("color","red")

.slideUp(2000)

.slideDown(2000);



jQuery拥有可操作HTMML元素的属性的强慷慨法。

三个简单有用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包含 HTML 标记）

val() - 设置或返回表单字段的值

attr() - 获取链接中href属性的值

ps：括号无值为获取，有值为设置





jQuery-加入元素

append() - 在被选元素的结尾插入内容(内部)

prepend() - 在被选元素的开头插入内容(内部)

after() - 在被选元素之后插入内容(外部)

before() - 在被选元素之前插入内容(外部)





jQuery-删除元素

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素





jQuery-获取并设置CSS类

addClass() - 向被选元素加入一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行加入/删除类的切换操作

css() - 设置或返回样式属性，可设置多个css属性。例如以下：

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





jQuery-尺寸

width() 方法设置或返回元素的宽度（不包含内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包含内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（包含内边距）。

innerHeight() 方法返回元素的高度（包含内边距）。

outerWidth() 方法返回元素的宽度（包含内边距和边框）。

outerHeight() 方法返回元素的高度（包含内边距和边框）。

jQuery-遍历

向上遍历 DOM 树

这些 jQuery 方法非常实用。它们用于向上遍历 DOM 树：

parent() 方法返回被选元素的直接父元素。

parents() 方法返回被选元素的全部祖先元素，它一路向上直到文档的根元素 (<html>)。

能够使用可选參数来过滤对祖先元素的搜索。

parentsUntil() 方法返回介于两个给定元素之间的全部祖先元素。

例:

$(document).ready(function(){

$("span").parents("ul");

});

向下遍历 DOM 树

以下是两个用于向下遍历 DOM 树的 jQuery 方法：

children()方法返回被选元素的全部直接子元素。

能够使用可选參数来过滤对子元素的搜索。

find()方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function(){

$("div").children("p.1");

});

在 DOM 树中水平遍历

有很多实用的方法让我们在 DOM 树进行水平遍历：

siblings()方法返回被选元素的全部同胞元素。

next()方法返回被选元素的下一个同胞元素。

nextAll()方法返回被选元素的全部尾随的同胞元素。

nextUntil()方法返回介于两个给定參数之间的全部尾随的同胞元素。

prev()

prevAll()

prevUntil()





jQuery 遍历-过滤

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

$(document).ready(function(){

$("div p").first();

});

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

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

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

匹配的元素会被返回。

not() 方法返回不匹配标准的全部元素。与 filter() 相反。





jQuery - AJAX

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台载入数据。并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

jQuery - AJAX load() 方法(简单但强大的AJAX方法)，

从server载入数据，并把返回的数据放入被选的元素中。

语法： $(selector).load(URL,data,callback);

必需的 URL 參数规定您希望载入的 URL。

可选的 data 參数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 參数是 load() 方法完毕后所运行的函数名称。

实例：

$("button").click(function(){

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

alert("外部内容载入成功！");

if(statusTxt=="error")

alert("Error: "+xhr.status+": "+xhr.statusText);

});

});





jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从server上请求数据。

语法：

$.get(URL,callback);

实例：

$(document).ready(function(){

$("button").click(function(){

$.get("/example/jquery/demo_test.asp",function(data,status){

alert("数据：" + data + "\n状态：" + status);

});

});

});





jQuery $.post() 方法

$.post() 方法通过HTTP POST 请求从server上请求数据

语法：

$post(URL,data,callback);

必需的 URL 參数规定您希望请求的 URL。

可选的 data 參数规定连同请求发送的数据。

可选的 callback 參数是请求成功后所运行的函数名。

实例：

$("button").click(function(){

$.post("demo_test_post.asp",

{

name:"Donald Duck",

city:"Duckburg"

},

function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

});

相关阅读

目录[+]