2.jQuery的DOM操作

在这里插入图片描述
获取的元素都会被封装到一个类数组里,也可以叫它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:
操作元素的特性
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值