jquery

来源：互联网发布：如何入侵centos系统编辑：程序博客网时间：2024/05/17 02:47

1. jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

可以通过下载Jquery库然后在页面中导入，如果不想下载，也可以通过引入在线库，有google和microsoft的在线库，引入的方式如下：

Google：<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/

jquery/1.4.0/jquery.min.js"></script>

Microsoft：<scripttype="text/javascript"src="http://ajax.microsoft.com/ajax/jquery

/jquery-1.4.min.js"></script>

从google或者microsoft中加载jquery的好处，许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

2. 所有 jQuery 函数位于一个 document ready 函数中这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：试图隐藏一个不存在的元素；获得未完全加载的图像的大小。

3. jQuery 选择器

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器：

$("p").hide();

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

jQuery属性选择器：

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

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

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

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

jQuery CSS 选择器：

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

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

jQuery 事件：

$(document).ready(function) 将函数绑定到文档就绪事件（当文档完成加载时）

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

4. jQuery hide() 和 show()

$("p").show();

$("p").hide(1000);

jQuery toggle()：显示被隐藏的元素，并隐藏已显示的元素。

5. jQuery 的淡入淡出

jQuery fadeIn() 方法：

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

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

jQuery fadeOut() 方法和jQuery fadeToggle() 方法类似。

6. jQuery 滑动方法

slideDown()、slideUp()、slideToggle()，这三个函数的括号内都可以放入slow等。

7. jQuery 链式操作

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

.slideUp(2000)

.slideDown(2000);

8. jQuery DOM 获取操作

text() - 设置或返回所选元素的文本内容，不包括HTML标签

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

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

attr()- 用于获取属性值

9. jQuery DOM 设置操作

text() - $("#test1").text("Helloworld!");

html() - $("#test2").html("<b>Helloworld!</b>");

val() -$("#test3").val("Dolly Duck");

attr()- 用于设置属性值

这四个函数每个函数都有回调函数。

10. jQuery - 添加元素

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

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

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

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

注：这些函数不仅能够添加一个，也可同时添加多个。

$("p").append(txt1,txt2,txt3);

11. jQuery - 删除元素

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

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

也可以过滤被删除的元素，如$("p").remove(".italic");只删除class= italic的元素。

12. jQuery - 获取并设置 CSS 类

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

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

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

css() - 设置或返回样式属性

如，$("#div1").addClass("importantblue"); $("h1,h2,p").removeClass("blue");

13. jQuery - css() 方法

获取样式：$("p").css("background-color");

设置样式：

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

$("p").css({"background-color":"yellow","font-size":"200%"});

14. jQuery - 尺寸

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

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

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

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

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

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

如$("#div1").width(500).height(500);

jquery支持链式操作，而且jquery是风格统一的，一个方法支持，类似的方法都支持。

15. jQuery 遍历 - 祖先

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

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

parentsUntil()方法返回介于两个给定元素之间的所有祖先元素，但不包括边界。

如$("span").parents("ul").css({"color":"red","border":"2pxsolid red"});此时对所有祖先都执行同样的操作。

16. jQuery 遍历 -后代

children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

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

如：$("div").find("span").css({"color":"red","border":"2pxsolid red"});

17. jQuery 遍历 -同胞

siblings() 方法返回被选元素的所有同胞元素。也可以使用可选参数来过滤对同胞元素的搜索。下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：$("h2").siblings("p");

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

nextAll() 方法返回被选元素的所有跟随的同胞元素。即该元素下面的所有兄弟。

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

prev()、prevAll()、prevUntil()方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素。

18. jQuery 遍历 -过滤

first()：$("div p").first();：将选取首个 <div> 元素内部的第一个 <p> 元素

last()：$("divp").last ();：将选取最后一个<div> 元素内部的最后一个<p> 元素

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

filter() 和 not()：$("p").filter(".intro");将返回带有类名 "intro" 的所有 <p> 元素，not()

远胜于正好相反。

19. ajax介绍

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

20. ajax之load方法

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

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

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

示例：

$("#div1").load("demo_test.txt");将txt文件中的内容放到div1中。

$("#div1").load("demo_test.txt#p1");将txt文件中id为p1的内容放到div1中。

21. jQuery - AJAX get() 和 post() 方法

get：

$.get(URL,callback);

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

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

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

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

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

});

第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

Post：

$.post(URL,data,callback);其中data为请求传的参数，其余和get相同。

Get与post比较：

有关 GET 请求的其他一些注释：

GET 请求可被缓存

GET 请求保留在浏览器历史记录中

GET 请求可被收藏为书签

GET 请求不应在处理敏感数据时使用

GET 请求有长度限制

GET 请求只应当用于取回数据

有关 POST 请求的其他一些注释：

POST 请求不会被缓存

POST 请求不会保留在浏览器历史记录中

POST 不能被收藏为书签

POST 请求对数据长度没有要求

22. jQuery - noConflict() 方法

如果其他JavaScript 框架也使用 $ 符号作为简写怎么办？

方法一：

$.noConflict();

jQuery(document).ready(function(){

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

jQuery("p").text("jQuery 仍在运行！");

});

方法二：您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用

var jq = $.noConflict();

jq(document).ready(function(){

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

jq("p").text("jQuery 仍在运行！");

});

参考资料：w3school网站

0 0