jQuery对象其他操作学习笔记

原创 2018年04月15日 19:10:02

1.is(select),返回值为true或false

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>each</title>
</head>
<body>
	<div class="box" id="box">
		<div class="box1" id="box1">
			<div class="box2" id="box2">
				<p>我是p标签</p>
				<ul class="box3" id="box3">
					<li class="li1" id="li1">我是li1</li>
					<li class="li2" id="li2">我是li2</li>
					<li class="li3" id="li3">我是li3</li>
					<li class="li4" id="li4">我是li4</li>
					<li class="li5" id="li5">我是li5</li>
					<li class="li6" id="li6">我是li6</li>
				</ul>
			</div>
		</div>
	</div>
	<script src="../jquery/jquery-3.3.1.js"></script>
	<script>
		$(function(){
			console.log($("#box2").children().is("p"));//返回值为true或false,如果id=box2的子元素中有p元素,则返回true,否则为false。
			console.log($("#box3").find("#li3").css("color","red").find("#li6").css("color","orange"));//由于没有用在find("#li3").css("color","red")加end(),所以原来的jQuery对象遭到破坏,破坏后的对象中后代元素没有id=li6元素,所以找不到,颜色不会发生变化。
		})
	</script>
</body>
</html>

运行结果如下:
2.end( )对破坏性操作进行返回

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>end</title>
</head>
<body>
	<div class="box" id="box">
		<div class="box1" id="box1">
			<div class="box2" id="box2">
				<p>我是p标签</p>
				<ul class="box3" id="box3">
					<li class="li1" id="li1">我是li1</li>
					<li class="li2" id="li2">我是li2</li>
					<li class="li3" id="li3">我是li3</li>
					<li class="li4" id="li4">我是li4</li>
					<li class="li5" id="li5">我是li5</li>
					<li class="li6" id="li6">我是li6</li>
				</ul>
			</div>
		</div>
	</div>
	<script src="../jquery/jquery-3.3.1.js"></script>
	<script>
		$(function(){
			console.log($("#box3").find("#li3").css("color","red").end().find("#li6").css("color","orange"));//由于没有用在find("#li3").css("color","red")加end(),所以原来的jQuery对象遭到破坏,破坏后的对象中后代元素没有id=li6元素,所以找不到,颜色不会发生变化。加入end()之后就相当于从破坏后返回到以前。此时能找到id=li6的元素并添加样式。
		})
	</script>
</body>
</html>


结果如下图所示
3.addBack把破坏前的jQuery对象也添加进来
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>addBack</title>
</head>
<body>
	<div class="box" id="box">
		<div class="box1" id="box1">
			<div class="box2" id="box2">
				<p>我是p标签</p>
				<ul class="box3" id="box3">
					<li class="li1" id="li1">我是li1</li>
					<li class="li2" id="li2">我是li2</li>
					<li class="li3" id="li3">我是li3</li>
					<li class="li4" id="li4">我是li4</li>
					<li class="li5" id="li5">我是li5</li>
					<li class="li6" id="li6">我是li6</li>
				</ul>
			</div>
		</div>
	</div>
	<script src="../jquery/jquery-3.3.1.js"></script>
	<script>
		$(function(){
			console.log($("#li3").nextUntil("#li5").addBack().css("color","orange"));//不加addBack之前id=li3的元素字体不会变色,加了之后addBack()就会把破坏前的jQuery对象也加进来。
		})
	</script>
</body>
</html>

运行结果如下图所示

Jquery对象常用方法

Jquery对象常用的方法:$(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”...
  • u011225629
  • u011225629
  • 2016-03-18 10:58:40
  • 5530

jQuery文档对象的操作

1、创建属性:在DOM规范中,属性节点比较特殊,用户无法通过node对象提供的方法遍历或者定位属性节点,必须使用element对象定义的特定方法来创建和访问属性节点。jQuery创建属性节点和创建文本...
  • m0_37412958
  • m0_37412958
  • 2017-12-13 14:50:10
  • 168

html()方法使用jQuery对象

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> /...
  • ld513508088
  • ld513508088
  • 2014-05-26 23:22:48
  • 1567

jQuery对象的链式操作

jQuery对象的链式操作 首先来看一个例子: $(“#myphoto”).css(“border”,”solid 2px#FF0000”).attr(“alt”,” good”); 对一个jQ...
  • dingyan954
  • dingyan954
  • 2012-03-22 08:11:47
  • 3977

jquery对象访问 介绍及如何使用

前言本篇是继上篇jQuery核心函数之后介绍如何访问jQuery对象。jquery对象访问each(callback)size()lengthselectorcontextget()get(index...
  • u010989191
  • u010989191
  • 2016-05-01 23:05:11
  • 6945

$.each()迭代jQuery和非jQuery对象 .each()方法

迭代jQuery和非jQuery对象 jQuery提供了一个对象迭代器实用程序.each()以及一个jQuery集合迭代器.each()。这些不可互换。另外,还有一些有用的方法可以调用.each(...
  • qq_32279193
  • qq_32279193
  • 2017-12-29 11:31:21
  • 117

DOM对象与jquery对象有什么不同?

转自:http://zhidao.baidu.com/link?url=2Iq0Y-gMe2Z82cmXVR4IJgCDvVO2gpfHga67PLEbx9hAEuibnt57ivxCYWHAQUUO...
  • suyu_yuan
  • suyu_yuan
  • 2016-09-09 14:31:19
  • 436

JQuery基础知识----jQuery 对象,选择器

1.jQuery 对象和 DOM 对象     •jQuery对象就是通过jQuery($())包装DOM对象后产生的对象     •jQuery对象是 jQuery独有的. 如果一个对象是 jQu...
  • oChangWen
  • oChangWen
  • 2016-10-05 23:54:09
  • 1362

20170726 jQuery操作表格(table)的常用方法、技巧汇总

以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 复制代码代码如下: $('#table1 tr').hover(function(){     $(...
  • xcwc1995
  • xcwc1995
  • 2017-07-26 18:36:16
  • 473

JQuery对象操作(附对应JS方法)

JQuery作为一种JS库,继承并优化了JS访问DOM对象的特性,更加方便的操作DOM对象,在本文,结合《JQ内核详解》这本书,罗列了一系列JQ中对文档对象的操作方法,并附有对应的JS方法,作为一份参...
  • lyshiba
  • lyshiba
  • 2011-10-17 17:15:17
  • 5755
收藏助手
不良信息举报
您举报文章:jQuery对象其他操作学习笔记
举报原因:
原因补充:

(最多只允许输入30个字)