Jquery

最新推荐文章于 2022-11-16 10:54:32 发布

after tomorrow

最新推荐文章于 2022-11-16 10:54:32 发布

阅读量282

点赞数

jQuery 是一个 JavaScript 库。
Google 和 Microsoft 对 jQuery 的支持都很好。
如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
使用 Google 的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
使用 Microsoft 的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
否则需要下载后引用
<head>
<script src="jquery.js"></script>
</head>

替代方案
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。
谷歌和微软的服务器都存有 jQuery 。
如需从谷歌或微软引用 jQuery，请使用以下代码之一：
Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
提示：通过 Google CDN 来获得最新可用的版本：
如果您观察上什么的 Google URL - 在 URL 中规定了 jQuery 版本 (1.8.0)。
如果您希望使用最新版本的 jQuery，也可以从版本字符串的末尾（比如本例 1.8）删除一个数字，谷歌会返回 1.8 系列中最新的可用版本（1.8.0、1.8.1 等等），
或者也可以只剩第一个数字，那么谷歌会返回 1 系列中最新的可用版本（从 1.1.0 到 1.9.9）。
Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
提示：使用谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。
同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

1、例子：<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>

<body>
<p>If you click on me, I will disappear.</p>
</body>

</html>

分析：
（1）$(document).ready(function(){});
注册事件的函数，和普通的dom不一样，不需要在元素上标记onXX这样的事件，可以简写为$(functon(){})
对于Body.Onload事件，是在加载完所有页面内容才会触发，我的意思是所有内容,包括图片，flash等.如果页面的这些内容很多会让用户等待很长时间.
而对于$(document).ready()方法，这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.
jQuery 事件
下面是 jQuery 中事件方法的一些例子：
Event 函数绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
(2) $(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
jQuery 选择器的分类：
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
实例
$("p").css("background-color","red");
更多的选择器实例
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

过滤器

:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素

:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
（3）通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
语法：
$(selector).hide(speed,callback);

$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
实例
$("button").click(function(){
$("p").hide(1000);
});
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
实例
$("button").click(function(){
$("p").toggle();
});

2、获得内容和设置- text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值value的值

$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});

$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});

添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
实例
$("p").append("Some appended text.");

如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
下面的例子删除 class="italic" 的所有 <p> 元素：
实例
$("p").remove(".italic");

返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
下面的例子将返回首个匹配元素的 background-color 值：
实例
$("p").css("background-color");
设置 CSS 属性
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值：
实例
$("p").css("background-color","yellow");

节点遍历

祖先：这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
parent()
parents()
parentsUntil()

后代
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
jQuery内置函数map和each的用法
$.map的运用
var arr1 = [0, 3, 5];
var arr2 = $.map(arr1, function (item) { return item * 2 });
alert(arr2);
结果:0 6 10
不能处理字典风格的，只能处理普通的数组

$.each的运用都能处理
普通数组
var arr1 = [0, 3, 5];
$.each(arr1,function (i) {
alert(arr1[i]);
});
结果:0，3，5

json对象
var jsonData = {"tom": 20, "jerry": 21 };
$.each(jsonData,function (key, value) {
alert(key + "_" + value);
});
结果:tom_20, jerry_21
写一个参数就是key
如果是普通数组，推荐使用无参
$.each(jsonData,function () {
alert(this);
});

===================jQuery选择器===================

1. 基础选择器 Basics
1.根据标签名进行选择

var input_query=$("input");
2.根据id值选取

var text11_query=$("#text11");
3.根据class值进行选取

var text11_query=$(".text11");
4.同时选择多个符合条件的JQuery包装集用,号分隔条件

var text_query=$("#text11,.text12");
5.选择所有DOM元素

var all_query=$("*");
2.层次选择器 Hierarchy
1.从所有tr标签中获取其下面的所有id值为text11的元素

var text11_query=$("tr #text11");
2.获取所有td标签下的所有直接input子元素

var input_query=$("td>input");
3.获取id为text11元素后面的class为button11元素，只获取一个符合条件的元素。text11与button11在地位上属于同级关系

var button11_query=$("#text11+.button11");
4.获取id为text11元素后面的所有class为button11的元素

var button11_query=$("#text11~.button11");
3.基本过滤器 Basic Filters
1.获取第一个input元素

var input_query=$("input:first");
2.获取最后一个input元素

var input_query=$("input:last");
3.获取所有未被选中的input元素

var input_query=$("input:not(:checked)");
4.第一个input元素算一，查找所有第奇数个的input元素

var input_query=$("input:even");
5.从第二个input算起，查找所有第偶数个的input元素

var input_query=$("input:odd");
6.查找索引为1的input元素，索引值从0算起

var input_query=$("input:eq(1)");
7.查找索引大于0的所有input元素

var input_query=$("input:gt(0)");
8.查找索引小于2的所有input元素

var input_query=$("input:lt(2)");
9.获取页面所有<h>标题元素

var h_query=$(":header");
10.获取所有正在执行动画效果的元素

var animated_query=$(":animated");
4. 内容过滤器 Content Filters
1.查找所有html内容含有"你好世界！"的h1元素

var h1_query=$("h1:contains('你好世界！')");
2.获取所有不含子标签或html内容为空的td元素

var td_query=$("td:empty");
3.查找所有含有input子元素的td元素

var td_query=$("td:has(input)");
4.查找所有含有子标签或有html内容的td元素

var td_query=$("td:parent");
5.可见性过滤器 Visibility Filters
1.查找所有隐藏的input元素

var input_query=$("input:hidden");
2.查找所有可见的input元素

var input_query=$("input:visible");
6.属性过滤器 Attribute Filters
以下id,name等属性名，也可换成其他属性名，或自定义的属性名
1.查找所有含有id属性的input元素

var input_query=$("input[id]");
2.查找name值为text11的input元素

var input_query=$("input[name='text11']");
3.查找name值不等于text11的所有input元素

var input_query=$("input[name!='text11']");
4.查找name值以text开头的input元素

var input_query=$("input[name^='text']");
5.查找name值以11结尾的所有input元素

var input_query=$("input[name$='11']");
6.查找name值中含有ext的所有input元素

var input_query=$("input[name*='ext']");
7.查找所有含有id属性并且name值中含有ext的input元素

var input_query=$("input[id][name*='ext']");
7.子元素过滤器 Child Filters
1.查找所有在父元素中的所有子元素中排第2的input元素
nth-child()里参数可选even在这里算偶数，odd在这里算奇数，n任意数即选取所有有父元素的input元素，数字是直接选排在第几个的input元素，第一个input元素算一

var input_query=$("input:nth-child(2)");
2.查找所有在父元素中的所有子元素中排第一的input元素

var input_query=$("input:first-child");
3.查找所有在父元素中所有子元素中排最后一个的input元素

var input_query=$("input:last-child");
4.查找所有在父元素中是唯一子元素的input元素

var input_query=$("input:only-child");
8.表单选择器 Forms
1.查找所有input元素

var input_query=$(":input");
2.查找所有文本框元素

var text_query=$(":text");
3.查找所有密码框元素

var password_query=$(":password");
4.查找所有复选框

var checkbox_query=$(":checkbox");
5.查找所有提交按钮元素

var submit_query=$(":submit");
6.查找所有图像域元素

var image_query=$(":image");
7.查找所有重置按钮元素

var reset_query=$(":reset");
8.查找所有按钮元素

var button_query=$(":button");
9.查找所有文件域元素

var file_query=$(":file");
9.表单过滤器 Form Filters
1.查找所有可用的input元素

var input_query=$("input:enabled");
2.查找所有不可用的input元素

var input_query=$("input:disabled");
3.查找所有选中的单选复选框

var input_query=$("input:checked");
4.查找所有选中的下拉框

var option_query=$("option:selected");

AJAX
:如果没有ajax，在优酷看视频时，点击顶、踩、评论时，页面就会被刷新，视频会被打断
json
：数据交换格式