jQuery复习—包装集

jQuery包装器

Part1:jQuery包装器的用法

一、通过包装器方法选择和包装将要操作的DOM元素

$()函数返回特殊的JavaScriopt对象(收集到了JavaScirpt元素并添加了拓展功能),它包含与选择器相匹配的DOM元素数组,这个数组中的元素是按照在文档中的顺序排列的。这个对象拥有大量有用的预定义方法,可作用于已收集的元素集合。

特点:

(1):jQuery包装器方法,当执行完毕后(比如隐藏操作)会返回相同的一组元素,以便为另一个操作做准备。

例子:$("div.notLongForThisWorld").hide().addClass("removed");

(2):每一个方法都作用在于最初的选择器相匹配的元素集上,所以没必要遍历元素集。jQuery已经在后台完成了这一切。

二、为全局使用函数提供命名空间

var trimmed = $.trim(something);

三、从HTML标记创建DOM元素

$("<p>HI there</p>")

四、创建在DOM就绪后执行的代码

$(document).ready(function(){

});

$(function(){

});

五、Dom对象和jQuery对象的相互转换

(1)jQuery对象是一个类类似数组的对象,可以通过[index]和get[index]得到对应的Dom对象

(2)对于一个Dom对象,只需要用$() 把Dom对象包装起来,就可以获得一个jQuery对象。

Part2:管理包装集

一、确定包装集的大小

(1)length属性

$("ul").length

(2)size()方法

$("ul").size();

二、从包装集中获取元素

1)获取Dom元素

1)[index]

2)get(index) 获取包装集中的一个或全部匹配元素。如果不指定参数,则包装集中的所有元素就以JavaScript数组形式返回。如果提供了index参数,则会返回index所对应的元素

3)以数组的形式获取所有的元素

toArray()

2)获取jQuery元素

1)eq(index) 获取包装集中index参数的对应元素,并返回只包含此元素的包装集

2)first() 获取包装集中的第一个元素,并返回只包含此元素的新包装集。

3)last() 获取包装集中的最后一个元素,并返回只包含此元素的新包装集。

3)获取元素的索引 index(element);

例子:

var $li = $("li");

var n = $li.index("li#li_1");

三、分解元素包装集

1)添加更多元素到包装集 add(expression,context)

expression: 可以是选择器、HTML片段、DOM元素或DOM元素组

例子:

1、匹配带有alt或title特性的所有<img>元素

$("img[alt],img[title]")

或:
$("img[alt]").add("img[title]");

2、对所有拥有alt特性的<img>元素应用粗边框,然后对所有拥有alt或title特性的<img>应用一定程度的透明效果。

$(‘img[alt]‘)

.addClass(‘thickBorder‘)

.add(‘img[title]‘)
  .addClass(‘seeThrough‘)

2)整理包装集中的内容

1)删除与表达式相匹配的元素 not(expression)

$(‘img[title]‘).not(‘[title
* = puppy]‘);

2)删除与表达式不匹配的元素 filter(expression)

$(‘img‘).filter(‘[title*=dog]‘);

3)获取包装集的子集

1)slice(begin,end)

$(‘*‘).slice(0,4);

2)原始包装元素所有子节点上的选择器或是要测试的元素: has(test)

例子:

$(‘div‘).has(‘img[alt]‘);

4)遍历包装集

1)map(callback)

为包装集中的每一个元素调用回调函数,并将返回值收集到jQuery对象实例中

例子:下面代码会返将页面上所有的<div>元素的id值收集到一个JavaScript数组中

var allIds = $(‘div‘).map(function(){

return
(this.id ===undefined)? null: this.id;

}).get();

2)each()  遍历匹配集里所有的元素,为每一个元素调用传入的迭代函数

$(function() {

$([1,2,3]).each(function(){

alert(this);

});

})

时间: 2024-10-25 12:48:12

jQuery复习—包装集的相关文章

jquery的 包装集

jquery的包装集: jquery包装集 指: 通过 $("exp")会筛选出页面中满足表达式的一组元素,这一组元素就属于jquery包装集的元素, 包装集是一个集合, 常用的方法:获取包装集中元素的个数(length或者size()),通过下标获取包装集中的某个元素(get(index)这时会转换成js对象,不能使用jquery的方法,要用$()再包装),获取 元素的包装集中的位置(index(ele));        

4月12日学习笔记——jQuery管理包装集

创建新的元素 (1)使用 HTML DOM 创建元素 1 //使用 Dom 标准创建元素 2 var select = document.createElement("select"); 3 select.options[0] = new Option("加载项 1", "value1"); 4 select.options[1] = new Option("加载项 2", "value2"); 5 sel

jQuery 包装集

一.创建元素 1.jQuery内部使用document.createElement创建元素 实例: //jQuery 源代码 方法一: $("<div></div>").css({ 'width': '100px', 'height': '50px', 'padding': '10px', 'border': '3px solid red' }).html('我是jQuery动态创建的div').appendTo('body'); 方法二: $("&l

从零开始学习jQuery (三) 管理jQuery包装集

本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等. 二.前言 本系列的2,3篇上面列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明. 本章内容很少, 主要讲解动态创建元素和操作jQuery

JQuery包装集size,length,index,slice,find,filter,is,children,next,nextAll,parent,parents,closest,siblings,add,end,andSelf的用法

在使用Jquery包装集的知识之前首先要注意三个概念(当前包装集.新包装集.包装集内部元素)的区别. 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <

JQuery——第2课、事件,包装集

一.jQuery事件 什么是事件? 页面对不同访问者的响应叫做事件. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法. 实例: 在元素上移动鼠标. 选取单选按钮 点击元素 在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件". 常见的JQuery事件: 1.click() 当按钮点击事件被触发时会调用一个函 2.ready() 在文档完全加载完后执行函数 3.dblclick() 当双击元

jQuery 包装集 选择器

1.Dom对象和jQuery包装集转换 在传统的javascript开发中,我们都是首先获取Dom对象,比如: var div = document.getElementById("testDiv");var divs = document.getElementsByTagName("div"); 我们经常使用 document.getElementById 方法根据id获取单个Dom对象, 或者使用 document.getElementsByTagName 方法

Dom对象和jQuery包装集

Dom对象 在传统的JavaScript开发中,我们经常都是首先获取Dom对象,比如: document.getElementById("dv1"); 我们经常使用getElementById方法来获取Dom对象.在事件触发函数中,我们还可以通过this来获取引用事件触发对象.或者,我们也可以通过event.target或event.srcElement来获取引发事件的Dom对象. 注意,此处,我们获得的都是Dom对象. jQuery包装集 jQuery包装集可以说是Dom对象的扩充.

jQuery包装集

1.过滤 Filtering 名称 说明 举例 eq( index ) 获取第N个元素 获取匹配的第二个元素:  $("p").eq(1) filter( expr ) 筛选出与指定表达式匹配的元素集合. 保留带有select类的元素:  $("p").filter(".selected") filter( fn ) 筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false