jQuery学习点滴

jQuery学习点滴

　　　在学习之余对jquery提供的方法进行分类总结，下文有些抄摘w3cschool，

只为以后使用起来方便查找！

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

示例

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

$("p").hide() - 隐藏所有段落

$("p.test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素

 

文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

 

--- jQuery functions gohere ----

 

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

• 试图隐藏一个不存在的元素
• 获得未完全加载的图像的大小

jQuery 选择器

jQuery元素选择器

jQuery使用 CSS 选择器来选取 HTML 元素。写法与css语法一致

$("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" 结尾的元素。

$("[href^='.jpg']")选取所有 href 值以 ".jpg" 开始的元素。（important）

 

jquery复杂选择器

语法参见：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

第一、    根据类名、元素名、对象ＩＤ组合定位选择器，写法与css选择器类似

$（”div.txt span”）取得类名为div下的span

注意：定位同时具有两个类名的对象

$(".intro.demo")

所有 class="intro" 且 class="demo" 的元素

与属性结合定位

$("div.txt[title]:eq(1)")　带有title属性的div,且第２个

第二、    根据元素的位置顺序来定位，

用于定位第１个first、最后一个last、奇数odd、偶数even、或第Ｎ个以前lt、或第Ｎ个以后gt、或第Ｎ个eq。主要用于状态转换

第三、    “和”选择器，中间用逗号隔开

$(“p,div.txt”)选择p元素和有txt属性的div

第四、    对input进行定位，写法与其它元素如p或div的写法不同，并且能根据input是否可用、选择状态来定位

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

第五、     其它选择器

:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素
:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

 

jQueryCSS 选择器

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

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

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

jQuery 事件方法

基础写法

注意：第一、触发事件　第二、绑定事件　

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

触发实例：

$("button#demo").click()

上面的例子将触发id="demo" 的 button 元素的 click 事件。

绑定实例：

$("button#demo").click(function(){$("img").hide()})

上面的例子会在点击id="demo" 的按钮时隐藏所有图像。

主要事件方法

1. toggle()方法

定义和用法：用不同函数轮流响应click事件

toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

实例

切换不同的背景色：

$("p").toggle(

  function(){

 $("body").css("background-color","green");},

  function(){

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

  function(){

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

);

2. each()方法

定义和用法

each() 方法规定为每个匹配元素规定运行的函数。

如：对每个li执行此函数，函数功能是输出它的文本

$("li").each(function(){

    alert($(this).text())

  });

3.   bind() 方法

定义和用法

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数

$(selector).bind(event,data,function)

当点击鼠标时，隐藏或显示 p 元素：（data是可选参数）

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

  $("p").slideToggle();

});

传data例子：是将data作为event的成员传入

var message = 'Spoon!';

$('#foo').bind('click', {msg: message}, function(event) {

  alert(event.data.msg);

});

 

另外一个用法：

          假如要编写一个可以自由拖动的div层，则当鼠标移动时，div层也随之移动，那么则div层须绑定到鼠标的移动事件，当事件发生时，会将事件参数e传递给绑定的函数，由绑定的函数去计算div层的移动位置。

 

4.   grep() 方法

对数组进行过滤后返回数组
grep(array,callback,invert)

·        array：待过滤数组;

·        callback：处理数组中的每个元素，并过滤元素，该函数中包含两个参数，第一个是当前数组元素的值，一个是当前数组元素的下标，即元素索引值。此函数应返回一个布尔值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？），其中 a 代表数组元素，i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”

·        invert：布尔型可选项，默认值false，值为true或false， 如果 “invert”为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当”invert” 为 true，则返回过滤函数中返回 false 的元素集。

 

解释完grep()的用法，现在来举个小例子：
var arr=$.grep([0,1,2,3,4,5,6],function(n,i){
return n>2
});
上面的例子返回[3,4,5,6]，但是我们给invert的值为true，例如
var arr=$.grep([0,1,2,3,4,5,6],function(n,i){
return n>2
},ture);
所以现在返回的是[0,1,2]，也就是被callback函数过滤掉的元素

jQuery 效果 　

具体效果和例子查看http://www.w3school.com.cn/jquery/jquery_effects.asp

函数	描述
$(selector).hide()	隐藏被选元素
$(selector).show()	显示被选元素
$(selector).toggle()	切换（在隐藏与显示之间）被选元素
$(selector).slideDown()	向下滑动（显示）被选元素
$(selector).slideUp()	向上滑动（隐藏）被选元素
$(selector).slideToggle()	对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()	淡入被选元素
$(selector).fadeOut()	淡出被选元素
$(selector).fadeTo()	把被选元素淡出为给定的不透明度
$(selector).animate()	对被选元素执行自定义动画

 

jQueryHTML 操作 　

对html元素进行操作，注意append和prepend是针对元素本身，而before和after是针对元素的前后，

主要方法：

1.对css属性操作

增加类属性：addClassßàremoveClass

增加属性：attr()ßàremoveAttr

判断属性是否存在：hasClass()

切换类属性：toggleClass()

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

对设置和移除所有 <p> 元素的 "main" 类进行切换，有则移除，没有则设置

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

  $("p").toggleClass("main");

});

2.对html元素操作

对元素内部前后操作：append()，appendTo(),prepend(),prependTo()

对元素外部前后操作：after()，before(),insertAfter(),insertBefore()

对元素包裹操作：wrap()wrapAll()，wrapinner()ßàunwrap()，

       包裹元素可以具有id或class属性

              $("p").wrapAll(“<div></div>”))：将所有p的外层仅增加一个div

$("p").wrap (“<div></div>”))：将每个p的外面增加div

wrapinner():对元素的内部头尾增加包裹元素

$("p").wrapInner("<b></b>");

结果：<p>xx</p> à<p><b>xx</b></p>

 

取元素属性：

$(this).attr("dim")

3.对元素删除复制操作：

clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。（注意只是子节点）
remove()	移除所有匹配的元素。（注意连元素本身也删除）
replaceAll()	用匹配的元素替换所有匹配到的元素。 $("p").replaceAll("<b>Hello world!</b>"); 用粗体文本替换每个段落：
replaceWith()	用新内容替换匹配的元素。

 

4.取元素内容

val()：设置或取得元素的值，一般对input操作

text()：取元素内容

html()：元素集合中的 HTML 内容

如：<divid="div1"><p>ab</p><b>cd</b></div>

alert($("#div1").text());输出abcd

  alert($("#div1").html()); 输出<p>ab</p><b>cd</b>

jQuery CSS 操作

CSS 属性	描述
css()	设置或返回匹配元素的样式属性。
height()	设置或返回匹配元素的高度。
offset()	返回第一个匹配元素相对于文档的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一个匹配元素相对于父元素的位置。
scrollLeft()	设置或返回匹配元素相对滚动条顶部的偏移。
scrollTop()	设置或返回匹配元素相对滚动条左侧的偏移。
width()	设置或返回匹配元素的宽度。

 

jQueryAJAX 　

第一、元素ajax

请求	描述
$(selector).load(url,data,callback)	把远程数据加载到被选的元素中
$.ajax(options)	把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type)	使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type)	使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback)	使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback)	加载并执行远程的 JavaScript 文件

(url) 被加载的数据的 URL（地址）

(data) 发送到服务器的数据的键/值对象

(callback) 当数据被加载时，所执行的函数

(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 请求的所有键/值对选项

 

第二、JQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数	描述
jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

jQuery遍历

1.同级元素前后定位：

1.        Prev：只定位上一个同级元素

2.        prevAll： 定位前面的所有同级元素

3.        prevUntil(selector,filter)：定位 前面的元素，直到遇到select选择器，

如：$("#term-2").prevUntil($(“#term”),"span"),定位前面的所有同级span元素，直到遇到id为term的元素则停止

4.   .siblings()：同时定位前后所有同级元素，

5.        next、.nextAll()、nextUntil同上

2.子/后代元素定位：

1.  children():方法返回匹配元素集合中每个元素的子元素（注意是子元素而不是后代）

2.  Contents();方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点。

区别：如：div元素为：<div>abcd<b>efg</b></div>

则children是取得div中的<b>子元素，而contents是取得文本abcd和<b>子元素两个

3.   Find：定位后代元素

$("p").find("span")：定位每个p的后代span，（包括间接在p下面的span）

 

3.父元素定位

1.        Parent:获得当前匹配元素集合中每个元素的父元素(注意是父元素而不是祖先元素)

2.        Parents:获得当前匹配元素集合中每个元素的祖先元素(注意是祖先，即父元素以上直到body)

3.        .parentsUntil()：道理同prevUntil

4.        offsetParent():获得被定位(即具有position属性)的最近祖先元素

5.        closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上

如：$( e.target ).closest("li")

取得事件发生元素的每一个li祖先元素

4.增加元素集元素

1.    add() 方法把堆栈中之前的元素集添加到当前集，

如：$(“div”).add($(“p”))

2.    .andself:把堆栈中之前的元素集添加到当前集合中

如：$("li").nextAll().andSelf()

根据li定位后面的同级li，并将之前的 li中入元素集中

 

5.本元素集过滤

1.  .eq：按索引定位

2.  .first

3.  .last

4.   .slice()：将匹配元素集合缩减为指定范围的子集

如$(“p”).slice(2,4)：索引位置从2至4的p

5.  .filter:将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。

如：$(“li”).filter(“.demo”)具有demo类属性的li

6.  .has: 根据元素的后代是否有某元素来过滤

如：$('li').has('ul')后代元素有ul的li

7.       .not: 从匹配元素集合中删除元素。

.is():此函数用于检测元素是否有某些特征

如：$(“li”).is(“.demo”)判断li是否有demo类属性

判断ul点击时，点击的是不是li元素，是则变红色

如：<ul><span>fdfdf</span><li>dfd</li></ul>

$("ul").click(function(event) {

  var $target = $(event.target);

  if ( $target.is("li") ) {

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

  }

});

6.杂项

1.   End: 方法结束当前链条中的最近的筛选操作

<ul >

 <li class="foo">list item 1</li>

 <li>list item 2</li>

<li class="bar">list item 3</li>

</ul>

$('ul).find('.foo').css('background-color', 'red')

.end().find('.bar').css('background-color', 'green');

说明：首先定位ul集合，然后定位每个元素下的foo，即此时集合变成了foo,然后设置背景，进行end操作，即取消了集合中定位foo（最后一次筛选）,则此时集合又恢复为ul集合。再进行find(.bar),即在ul中再定位bar

2.  Map:

3.  Each: