获取的元素都会被封装到一个类数组里,也可以叫它jQuery对象集合/jQuery元素集合。
jQuery对象,jQuery集合,jQuery对象集合,jQuery元素集合这四个可以理解为同一个东西。
我们除了获取之外,还可能需要检查数量,父子邻居关系,过滤元素的集合,遍历等等。
我们先来给页面添加东西,例如创建html元素。
//来个百度超链接
$( function(){
var link1 = $("<a>",{
text:'baidu',
href : "http://www.baidu.com",
target: '_blank',
title: 'go to baidu'
});
link1.appendTo('body');
//方法2
var link2=$("<a>baidu</a>').attr({
href : "http://www.baidu.com",
target: '_blank',
title: 'go to baidu'
});
link2.appendTo('body');
//appendTo()追加
})
接下来讲下区别:
<div id="div">div</div>
$(function (){
var DOMObject = document.getElementById( 'div');
var jQueryObject = $("#div");
console.log(DOMObject);
console.log(jQueryObject);
//检测
console.log(DOMObject.nodeType) ;//打印1
console.log(jQueryObject.jquery);//打印版本号
//各自都没有对应的属性
console.log(DOMObject.jquery) ;//打印undefined
console.log(jQueryObject.nodeType);//打印undefined
//转换
console.log($(DOMObject)) ;
console.log(jQueryObject.get(0));
})
$(‘xx’).length 元素的数量
提取元素
[index]返回DOM元素
get([index])返回DOM元素或元素集合
如果get()里的index为负值,则会从后往前来获取元素,越界的会返回undefined
eq(index)返回jQuery对象
如果不加索引,则什么也不返回,除此和get()一样
以下两者结果一样:
console.log(elements.eq(0))推荐使用eq方法
console.log($('li:eq(0)"))筛选器eq性能比eq方法低
first()
last()
以上两个不用加参数,同上性能比筛选器高
toArray()
把jQuery对象直接转换为DOM元素的一个数组
和不加参数的get一模一样
还有index()等方法,最好通过查看jQuery文档学习
通过关系查找jQuery对象
例如想获取id="info"的3个div父元素
<div id="box">
<div>
<div>
<p id="info">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
获取父元素
$(function(){
var element = $('#info').parents('div');
console.log(element);
})
获取子元素
$(function(){
var element = $('#box').children();
console.log(element);
//children方法不返回文本节点,下面的方法和上面一样
var element2 = $('#box > *');
console.log(element2);
//返回文本节点
var element3 = $('#box').contents();
console.log(element3);
//find,通过选择器来筛选后代元素,包括子,孙,等等
var element4 = $('#box').find('p');
console.log(element4);
})
children和contents都是直接子元素
parent获取直接父元素;parents所有父,爷等等;parentsUntil到哪一代(不包括)为止,必须加参数
$(function(){
console.log($('#info').parent('#box2'))
console.log($('#info').parents('#box2'))
console.log($('#info').parentsUntil('#box1'))
})
closest是从本身开始,逐级向上开始进行元素匹配,找到就停止。只会返回0个或1个元素
parents从父元素开始找,会一直找直到根元素,放到一个集合里面,再拿选择器来筛选。还可能返回多个
通过兄弟姐妹关系获取对象
前3个next,nextAll,nextUntil和parent非常类似,分别是取得当前元素紧邻的同辈元素,所有同辈元素,以及到哪一个(不包括),直到遇到匹配的为止。
pre那3个刚好和next相反。
$(function(){
console.log($('#info').next('li'))
console.log($('#info').nexts('li'))
console.log($('#info').nextsUntil('.item7'))
})
siblings是取出所有同辈元素,但不包含本身
筛选和遍历jQuery对象
对jQuery集合增加元素
.add(selector)
$(function () {
console.log($('.item1, .item2'))
console.log($('.item1 ').add('.item2'))
})
//两者都一样,不过习惯后者,更方便
过滤元素
.not(selector) 筛选出删除的
.filter(selector) 筛选出匹配的
.has(selector)保留含有selector的元素
$(function () {
console.log($('li').not('.item4'))
console.log($('li').filter('.item4'))
})
//他们的参数不一定是选择器,可以是一个函数,根据函数的返回值来是否删除,例如:
$(function () {
console.log($('li').not(function(index){
return $(this).hasClass('item4')
}))
console.log($('li').filter(function(index){
return $(this).hasClass('item4')
}))
console.log($('li').has('ol'))
})
获取子集
$(function () {
console.log($('li').slice(3,5))//左闭右开,从0开始,若为负数则从尾部开始
})
转换元素
比如要获取元素的ID
map(callback):将一个对象转换为另一个jQuery对象
$(function () {
console.log($('li').map(function(index,domElement){
return this.id;//return domElement.id;
//假如返回null或undefined,相当于我们跳过了它
}))
})
遍历元素
each(iterator)
$(function () {
console.log($('li').each(function(index,domElement){
this.title=this.innerText;
}))
})
//也可以有选择的跳过
$(function () {
console.log($('div').each(function(index,domElement){
if(this.id==='box1'){ //严格相等
return true;//假如return false 则退出了,不会执行下面语句
}
this.title=this.innerText;
}))
})
is(selector):判断有没有selector,有返回true,否则false
$(function () {
console.log($('#box3').children().is('p'))
})
end():回到最近的一个破坏性操作之前
破坏性操作:任何对jQuery对象进行改变的操作
$(function () {
console.log(
$('#box3' ).find( '.item4 ' )
.css( 'color', 'red ')
.end()
.find( '.item6 ' )
.css('color', 'blue ' )
) //给两个同级元素加不同颜色
})
如果end()方法前一次操作不是破坏性操作,则返回的空,什么都没有
原理:相当于堆栈,调用一次end弹出来一次
addBack([selector])
$(function (){
console.log($('.item4')
.nextUntil('.item6')
.addBack()
.css('color','orange'))
})//item4和item5都为orange
操作元素的特性、属性和数据
元素的特性和属性的区别:
特性attributes 属性properties
<img id="logo" src="logo .jpg"
alt="jQuery logo" class="img-jquery" title="jQuery logo"/>
<input type="checkbox" id="check"
tabindex="1" style="width: 50px; height: 50px; "
title="Check this! " description="just a checkbox" checked/>
$(function (){
var img = document.getElementById( 'logo ');
console.log(img.attributes)//获取img的全部特性
console.log(img.getAttributes('class'))
console.log(checkbox.tabIndex)//属性值
console.log(checkbox.getAttributes('style'))//特性
console.log(checkbox.style)//属性值
console.log(checkbox.getAttributes('checked'))//空白
console.log(checkbox.checked)//true
})
对于像checked一样的,我们要尽量用属性来获取它的值。
特性的值总是字符串
属性的值可以为字符串,布尔型,number型,对象等等
$(function (){
var checkbox = document.getElementById( 'check ');
console.log(checkbox.getAttribut('check'))
console.log(checkbox.title)
console.log(checkbox.getAttribute('title')===checkbox.title)//true
checkbox.title='new title';//设置属性
console.log(checkbox.getAttribut('check'))
console.log(checkbox.title)
console.log(checkbox.getAttribute('title')===checkbox.title)//true
checkbox.setAttribute('title','other title');//设置特性
console.log(checkbox.getAttribut('check'))
console.log(checkbox.title)
console.log(checkbox.getAttribute('title')===checkbox.title)//true
//设置特性或属性的先后顺序没有关系,,同步改变,这是因为浏览器解析中元素的属性和特性会保持动态链接。但是:...例如checked
console.log(checkbox.getAttributes('checked'))//空白
console.log(checkbox.checked)//true
//如果把html里的checked写成checked='true'(其实改不改效果一样)
console.log(checkbox.getAttributes('checked'))//true
console.log(checkbox.checked)//true
//此时就不会同步了
checkbox.checked=false
console.log(checkbox.getAttributes('checked'))//true
console.log(checkbox.checked)//false
//假如改成:
checkbox.setAttribute('checked','false');
console.log(checkbox.getAttributes('checked'))//false
console.log(checkbox.checked)//true
})
内建:比如description就不是内部的,是我们写的
$(function (){
var checkbox = document.getElementById( 'check ');
checkbox.description='new '
console.log(checkbox.getAttributes('checked'))//原来的
console.log(checkbox.description)//new
//同样的,假如把上3行改成如下
checkbox.setAttribute('description','new');
console.log(checkbox.getAttributes('checked'))//new
console.log(checkbox.description)//undefined,因为刚开始是我们写的,其实这个属性压根不存在,即使我们在html上写了
})
还有例如图片的src class
$(function (){
var img = document.getElementById( 'logo ');
console.log(img.getAttributes('src'))//页面中写的地址
console.log(img.src)//绝对地址
img.src='../img/logo.jpg'
console.log(img.getAttributes('src'))//../img/logo.jpg
console.log(img.src)//同步变换但会转换成绝对地址
console.log(img.getAttributes('class'))//页面中的
console.log(img.class)//undefined,因为class是保留字,要写成className才会返回相应的值
})
每日一词:duly及时,按时;适当地;
NEXT:
操作元素的特性