1使用jQuery

时间：2016-07-13 16:56:21 阅读：161 评论：0 收藏：0 [点我收藏+]

标签：

JQuery
jQuery是继Prototype之后有一个优秀的javascript库，是一个开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大的简化了javaScript开发人员遍历html文档，操作Dom，处理事件，执行动画和开发ajax的操作。其独特而又优雅的代码风格改变了Javascript程序员的设计思路和编写程序的方式。

*******************
为了使用JQuery，我们需要从官方（jquery.com）下载一个JQuery库文件。我们下载最新的未压缩版jquery-1.3.2.js
使用Jquery不需要安装，只要把下载的库文件放到网站上的一个公共位置即可。当我们想在某个页面上使用Jquery时，只需要在相关html文档中简单的引用该库文件的位置。如：
<script src="jquery-1.3.2.js" type="text/javascript"></script>
注意引用JQuery库文件的<script>标签，必须放在页面定义javascript的<script>标签之前.否则，我们编写的代码将引用不到Jquery框架。
******************

<body onload="emphasize();">
上面的语句在页面加载完成后，我们的代码就会执行。Jquery允许我们使用$(document).ready(),通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数。
上面的语句可以写成：
$(document).ready(emphasize);
不过定义的函数emphasize()只在加载时使用一次，所以在命名空间中占用了一个标识符。javascript有一个匿名函数。我们可以这样做；
$(document).ready(function(){
....
});
$(document).ready()在页面上所有的dom元素加载完成(包括struts的标签)后执行。
例如：
<HTML>
<HEAD>
<style type="text/css">

</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//将在页面加载时输出test字符串。
document.writeln("test");
});
</script>
</HEAD>
<BODY>

</BODY>
</HTML>

1工厂函数$()
在JQuery中，无论我们使用哪种类型选择符（css,xpath,还是自定义选择符）,都要从一个美元符号和一对圆括号开始。
$()函数会消除使用for()循环访问一组元素的需求，因为放到圆括号中的任何元素都将自动执行循环遍历，并且会被保存到一个JQuery对象中。可以在$()函数的圆括号中使用的参数几乎没有限制。
常用的如下：
标签名：$(‘p‘)会取得文档中所有的段落。
ID:$(‘#some-id‘)会取得文档中具有对应的some-id ID的一个元素。id也可以是一个变量的值jQuery("#"+selectArray[i]).length
类:$(‘.some-class‘)会取得文档中带有some-class类的所有元素。

标签名选择符和css类选择符结合使用：
$(‘#some-id.some-class‘)表示取得id=som-id且带有的some-class的元素。
例如：$(‘#button1.class1‘)

标签名和ID结合使用
$(‘#some-id 标签名‘)表示取得id=some-id中的于给定标签名相同的标签元素。id和标签名之间用空格分隔。例如：
$("#alltrade select option:selected")

$("*")，表示匹配所有元素。

注意多个标签名一起作为选择符使用中间用空格隔开。
$(‘table tbody tr:odd‘);//表示匹配<table>下的<tbody>的<tr>是奇数的行。
$(‘table tbody tr:even‘).addClass(‘even‘);//表示匹配<table>下的<tbody>的<tr>是偶数的行。

2CSS选择符
JQuery支持CSS规范1到规范3中的大多数选择符，这种对CSS选择符的支持，使得开发者在增强自己的网站时，不必为哪种浏览器坑内不会理解高级的选择符而担心你，只要该浏览器启用了Javascript。

.addClass()和.removeClass()方法
Jquery中的.addClass()方法的作用是将Css类应用到我们选择的页面部分。.addClass和.removeClass()方法唯一的参数就是要添加Css类名。

3XPath选择符
XPath(XML Path Language)是在XML文档中识别不同元素或元素值的一种语言。JQuery支持一组基本XPath选择符，而且在JQuery中，无论对什么类型的文档都可以使用XPath和Css选择符。

在设计属性选择符时，Jquery使用了XPath中惯例来标识属性，即将属性前放置在一对方括号中。例如，要选择所有带title属性的链接，可以使用下面的代码：
$(‘a[title]‘)
可以用来指定包含在另一个元素中的元素。例如，我们可以通过下面的选择符表达式，取得包含一个ol元素的所有div元素。
$(‘div:has(ol)‘)

为链接添加样式
属性选择符允许以类似正则表达式的语法来标识^匹配字符串开始位置和$匹配字符串结束位置。而且，也可以使用星号(*)表示字符串的任意位置。例如：下例中将<a>链接带有href属性并href的值以mailto:开头的内容使用灰色显示。
<HTML>
<HEAD>
<style type="text/css">
a.mailto{color:#cccccc;}//灰色
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//将<a>链接带有href属性并href的值以mailto:开头的内容使用灰色显示。
$("a[href^=‘mailto:‘]").addClass(‘mailto‘);
});
</script>
</HEAD>
<BODY>
<a href="mailto:hebinbin71722@126.com">email</a>
</BODY>
</HTML>
4自定义选择符
除了CSS和XPath选择符之外，Jquery还添加了独有的完全不同的自定义选择符。Jquery中的多数自定义选择符都可以让我们基于某个标准选出特定的元素。自定义选择符以一个冒号(:)开头，例如我们想要从匹配的带有horizontal类的div集合中，选择2个项，那么应该使用下面的代码：
$(‘div.horizontal:eq(1)‘}
注意因为javaScript数序采用从0开始编号的方式，所以eq(1)取得的是集合中第2个元素。

Jquery库中的两个十分有用的自定义选择符是:odd和:even，下面我们使用:odd和:even为一个表格的偶数行添加浅蓝色背景，奇数行添加浅黄色背景。:odd和:even选择符使用的都是javascript本身从0开始的编号方式，因此表格的第一行编号为0(偶数)，而表格的第2行编号是1(奇数) 。
<HTML>
<HEAD>
<style type="text/css">
*.odd{background-color:#ffffcc;}//浅蓝色背景。
*.even{background-color:#cceeff;}//浅黄色背景。
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(‘tr:odd‘).addClass(‘odd‘);//判断如果标签名为tr，且是偶数行则使用浅蓝色背景
$(‘tr:even‘).addClass(‘even‘);//判断如果标签名为tr，且是奇数行则使用浅黄色背景
});
</script>
</HEAD>
<BODY>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All‘s Well</td>
<td>Comedy</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
</table>
</BODY>
</HTML>

:contains(‘String‘)用来匹配包含给定文本内容的元素。例如：$("td:contains(‘Comedy‘)")用来匹配<td>中文本内容包含Comedy的元素。

:empty,匹配所有不包含子元素或文本的空元素。如：$("td:empty");将匹配这样的td:
<td></td>(不包含子元素或文本的空元素)

:parent，与:empty相反，它是匹配含有子元素或者文本的元素。

:has(selector)，匹配含有选择器所匹配的元素的元素。例如：
$("div:has(p)")//用于匹配在<div>元素中含有<p>元素的div

:not(selector),去除所有与给定选择器匹配的元素。

:eq(index)，匹配一个给定索引值index的元素。如$("tr:eq(1)")
:gt(index), 匹配所有大于给定索引值的元素，如$("tr:gt(1)")
:lt(index),匹配所有小于给定索引值的元素，如$("tr:lt(1)")
:even,匹配索引值是偶数的元素，从0开始计数。
:odd,匹配索引值是奇数的元素，从0开始计数。
:first，匹配找到的第一个元素
:last，匹配找到的最后一个元素。
:header,匹配如 h1, h2, h3之类的标题元素
:visible，匹配所有可见元素
:hidden，匹配所有不可见元素

5DOM遍历方法
很多情况下，取得某个元素的父元素或祖先元素都是基本的操作，而这正是JQuery的DOM遍历方法用武之地。有了这些方法，我们可以在DOM树中自由漫步。
.next()方法，取得最接近的下一个同辈元素。下例中表示取得文本中含有hery的<td>元素的下一个同辈元素。
$("td:contains(‘henry‘)").next().addClass(‘tdd‘);
<tr><td>henry</td><td>Tragedy</td><td>tyrt</td><td>fff</td></tr>

.prev([expr])方法，取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。expr是string类型。

.nextAll([expr])方法，查找当前元素之后所有的同辈元素。

.prevAll([expr])方法，查找当前元素之前所有的同辈元素

.siblings()，取得该元素的后的所有同辈元素。下例中表示取得文本中含有hery的<td>元素后的所有同辈元素。当然这些同辈元素和含有hery的<td>元素在同一个<tr>..</tr>中才有效，对于后面的<tr>中的<td>元素是无效的。
$("td:contains(‘henry‘)").siblings().addClass(‘tdd‘);

.parent()，取得该元素的父元素。
$("td:contains(‘henry‘)").parent().addClass(‘tdd‘);
取得包含henry的单元格的父元素，然后再在父元素的匹配所有索引值大于1的元素。
$("td:contains(‘henry‘)").parent().find(‘td:gt(1)‘).addClass(‘tdd‘);

.html()，取得第一个匹配元素的html内容。
.html("val"),设置每一个匹配元素的html内容。这个函数不能用于xml文档。如：
$("div").html("<p>Hello Again</p>"); //为div元素中添加了一个段落。

.text()方法，它表示取得所有匹配元素的内容，返回的结果是所有匹配元素包含的文本内容组合起来的文本。这个方法对html和xml文档都有效。但这个方法不能用于表单元素，获取表单元素的值。
.text("val")方法，设置所有匹配元素的文本内容。如$("p").text("new text.");//改变段落的文本内容。
$("#province option:selected").text()-----获得select元素中选中的<option>....</option>之间的内容。而不是<option>的value属性值。
$("#province option:selected").val()---获得select元素中选中的<option>的value属性值。

.find(expr)与.filter(expr)的区别
.find(expr)，从子集中搜索所有与指定表达式匹配的元素。expr这个表达式通$()中参数一样。
例如：从所有的段落开始，进一步搜索下面的span元素。
$("p").find("span")
如果这个span元素有id，则也可以$("p").find("#id")

.filter(expr)，在自身集合中筛选出与指定表达式匹配的元素。
$("p").filter(".selected"),将在所有段落中筛选使用了class="selected"的<p>元素。

例如：
<div class="css">
<p class="rain">测试1</p>
</div>
<div class="rain">
<p>测试2</p>
</div>

如果我们使用find()方法：
var $find = $("div").find(".rain");
alert( $find.html() ) ;
将会输出：测试1

如果使用filter()方法：
var $filter = $("div").filter(".rain");
alert( $filter.html() );
将会输出：<p>测试2</p>

已经看出它们的区别了。
find()会在div元素内寻找 class为rain 的元素。
而filter()则是筛选div的class为rain的元素。
一个是对它的子集操作，一个是对自身集合中筛选。

jQuery判断浏览器类型
jQuery.browser.safari，判断浏览器是是否是safari
jQuery.browser.opera，判断浏览器是否是opera
jQuery.browser.msie，判断浏览器是否是IE
jQuery.browser.mozilla，判断浏览器是否是mozilla

jQuery.inArray(value,array)
确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。
第一个参数可以是任何类型。
第二个参数是Array类型。

****************************
jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))或var v=document.getElementById("msg");var $v=$(v)
则为jquery对象，可以使用jquery的方法。
$()中可以包含dom对象也可以包含query对象，转换结果都是jquery对象。

jquery对象转换为dom对象
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出或jQuery本身提供，通过.get(index)方法，得到相应的DOM对象。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]
这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

.eq(index)方法返回的是jquery对象。

.get()方法取得所有匹配的Dom元素集合。返回的是元素数组，数组中是DOM对象而不是JQuery对象。

.get(index)方法取得其中一个匹配的元素，index表示取得第几个匹配的元素(从0开始)。返回的也是Dom对象。
***********************************
jquery1.3常用选择器的说明和应用
基本
1。$("#id") ---对象的id号；
2。$("div") --- 根据给定的元素名匹配所有元素;
3。$(".class") --- 根据给定的CSS类匹配元素;
4。$("*") --- 匹配所有元素;
5。$("div,span,div.class") -- 将每一个选择器匹配到的元素合并后一起返回。
层级
1。$("form input") --在给定的祖先元素下匹配所有的后代元素；
2。$("form > input") --- 在给定的父元素下匹配所有的子元素(和上面的不一样)；
3。$("prov + next") ----- 匹配所有紧接在 prev 元素后的 next 元素;
4。$("prov ~ next") ---匹配 prev 元素之后的所有 next 元素
简单
1。$("#id:first") -- 匹配找到的第一个元素
2。$("#id:last") -- 匹配找到的最后一个元素
3。$("input:not(:checked)") --去除所有与给定选择器匹配的元素
4。$("tr:even") --- 匹配所有索引值为偶数的元素，从 0 开始计数
5。$("tr:odd") -- 匹配所有索引值为奇数的元素，从 0 开始计数
6。$("tr:eq(1)") -- 匹配一个给定索引值的元素(第二行)
7。$("tr:gt(1)") -- 匹配所有大于给定索引值的元素(第二行以后所有行)
8。$("tr:lt(1)") ---- 匹配所有小于给定索引值的元素(和上面相反)
9。$(":header") - 匹配如 h1, h2, h3之类的标题元素
10。$("id:animated") ----匹配所有正在执行动画效果的元素
内容
1。$("div:contains(‘John‘)") ----匹配包含给定文本的元素
2。$("td:empty") - 匹配所有不包含子元素或者文本的空元素
3。$("div:has(p)") --匹配含有选择器所匹配的元素的元素(含p的div)
4。$("td:parent") - 匹配含有子元素或者文本的元素
可见性
1。$("tr:hidden") -- 匹配所有不可见元素，或者type为hidden的元素
2。$("tr:visible") -- 匹配所有的可见元素
属性
1。$("div[id]")--匹配包含给定属性的元素使用[](所有包含id的div)
2。$("input[name=‘value‘]")--匹配给定的属性是某个特定值的input标签元素
3。$("input[name!=‘value‘]")---匹配所有含有指定的属性,但属性不等于特定值的input标签元素。
4。$("input[name^=‘value‘]")----匹配给定的属性是以某些值开始的input标签元素
5。$("input[name$=‘value‘]")----匹配给定的属性是以某些值结尾的input标签元素
6。$("input[name*=‘value‘]")---匹配给定的属性是以包含某些值的input标签元素
7。$("input[id][name$=‘value‘]")--[selector1][selector2][selector3]复合属性选择器，需要同时满足多个条件时使用
子元素
8。$("a[name=‘value‘]")--匹配给定的属性是某个特定值的a标签元素

1。$("ul li:nth-child(2)")-----匹配其父元素下的第N个子或奇偶元素
2。$("ul li:first-child")-------匹配第一个子元素
3。$("ul li:last-child")-----匹配最后一个子元素
4。$("ul li:only-child")---如果某个元素是父元素中唯一的子元素那将会被匹配
5。$("ul:nth-child(index/even/odd)----匹配其父元素下的第N个子元素或奇偶元素。例如：
:nth-child(even),:nth-child(odd),:nth-child(2)
6。parent>child----在给定的父元素下匹配所有的子元素。parent和child的取值都是任何有效的Selector选择器。如：匹配表单中所有的子级input元素：
$("form > input")
7。prev + next-----匹配在prev的父元素中且prev元素后的所有next元素。prev和next的取值也是任何有效的Selector选择器。如：
$("label + input")表示匹配在label的父元素中且label元素后的所有input元素。
8。prev ~ siblings---匹配与prev同辈元素中的siblings元素。如：$("form ~ input")表示匹配与form元素同辈的input元素。

表单
1。$(":input")---匹配所有表单元素.
2。$(":text")--匹配所有的单行文本框
3。$(":password")--匹配所有密码框
4。$(":radio")--匹配所有单选按钮
5。$(":checkbox")--匹配所有复选框
6。$(":submit")--匹配所有提交按钮
7。$(":image")---匹配所有图像域
8。$(":reset")--匹配所有重置按钮
9。$(":button")--匹配所有按钮
10。$(":file")--匹配所有文件域
11。$("tr:hidden")--匹配所有不可见元素，或者type为hidden的元素
例如：$(‘#buton1:button‘)表示匹配id="button1"且type=button的按钮。

表单对象属性
1。$("input:enabled")--匹配所有可用元素
2。$("input:disabled")--匹配所有不可用元素
3。$("input:checked")--匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
4。$("select option:selected")--匹配所有选中的option元素(冒号:前不要有空格)

$(":focus")--获取当前的焦点元素。

**************

input:hidden是查找不可见的input元素，包含，textbox，radio，checkbox，button等和type="hidden"的表单元素。input[type=hidden]仅仅查找type="hidden"的表单元素。

is("input[type=hidden]"),判断是否为input hidden元素。

*****************
区别IE还是火狐
navigator.appName
navigator.appName用于区别不同的浏览器，对于IE输出为Micrsoft Internet Explorer
对于火狐输出：Netscape

****************
页面头部动态添加css或js文件：
$("head").append("<link rel=‘stylesheet‘ type=‘text/css‘ href=‘js/binSelect/binSelect.css‘></link>");
****************
jquery和DWR,此两个框架一起用会出现冲突，解决的方法很简单。给jquery加上命名空间，如：
var $j = jQuery.noConflict();以后jquery中在用到$的地方都用$j取代，这样就不会和dwr中的$冲突了。

如果jQuery类库和别的类库冲突的话，可以使用jQuery.noConflict()函数来将变量$的控制权移交出给其它的javaScipt库，那么使用$将代表其它的javascript库。

避免jQuery的$与其它插件的$冲突：
(function($) {
....
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
....
})(jQuery);

(function($) {
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};

})(jQuery);
上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

*************
jQuery(function(){

});
的功能和下面是一样的
jQuery(document).ready(function(){

});

********************
jQuery的val("value1")方法可以让select元素选中某个值为value1的option元素，这个在IE7和火狐中都没有问题，只有IE6中会报错，解决的办法是通过setTimeout提供一个延迟来执行这句就可以了。如：
setTimeout(function(){$("#select1").val(setAreaValue[2]);},1);

******************
如果有浏览器不执行jQuery的异步请求而使用之前缓存起来的数据，可以将这个异步请求的路径后面加上一个随机数。这样就不会使用缓存起来的数据而执行jQuery异步请求。

******************
jQuery.noConflict();
该方法释放 jQuery 对 $ 变量的控制。
jQuery不会与其他库的$对象发生冲突。在运行这个函数后，就只能使用jQuery变量访问jQuery对象.

创建一个新的别名用以在接下来的库中使用jQuery对象。
var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = ‘none‘;

***************************

一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。
Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等；

Dom Load是在整个document文档(包括了加载图片等其他信息)加载完成后就可以直接对dom进行操作，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等；

document.ready()和传统的方法<body onload="load()"> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素(例如图片)加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。
所以$(document).ready(function(){...});是在window.onload之前执行。

************************

is(expr|obj|ele|fn)返回值:Boolean
根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
如果没有元素符合，或者表达式无效，都返回‘false‘。

expr string字符串值，包含供匹配当前元素集合的选择器表达式。

jQuery object现有的jQuery对象，以匹配当前的元素。

element Expression一个用于匹配元素的DOM元素。

function(index) Function一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。
如：
$("input[type=‘checkbox‘]").parent().is("form")

var temp= $("#test").is(":hidden");//是否隐藏
var temp1= $("#test").is(":visible");//是否可见

*****************

找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。
$("div > p");

jQuery([selector,[context]])
jQuery 的核心功能都是通过这个函数实现的。默认情况下, 如果没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。在jQuery 1.3.2以后，其返回的元素顺序等同于在context中出现的先后顺序。如：
$("#exportXls",window.top.document)表示在window.top.document下面查找id为exportXls的元素。

1使用jQuery

标签：

原文地址：http://blog.csdn.net/bin71722/article/details/51889681

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行