28-jquery(2)-常用方法

最新推荐文章于 2024-07-04 12:16:35 发布

kwok266666

最新推荐文章于 2024-07-04 12:16:35 发布

阅读量156

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/kwok266666/article/details/117756054

版权

1. 获取节点的方法

has() 拥有，直接判定子节点中是否有符合条件的元素，有这样的子节点才执行
not() filter的反义词
filter() 查找符合条件的父节点
next() 查找当前兄弟节点中的下一个节点
prev() 查找当前兄弟节点中的上一个节点
find() 查找符合条件的子节点
eq() 通过下标获取指定的元素节点(从0开始)
index() 获取当前节点在兄弟节点中的下标(从0开始)
parent() 获取父节点
parents() 获取父节点们，包括祖先节点
closest() 必须传入参数，参数也是选择器，只获取父结点中第一个符合条件的元素，从自己开始去查找
siblings() 用来获取除当前节点外，所有的兄弟节点
nextAll() 之后的所有兄弟节点
prevAll() 之前的所有兄弟节点
parentsUntil() nextUntil() prevUntil() 直到某个节点为止（之间）
slice() 获取指定范围内获取到的元素节点

案例——编写选项卡

		<div id='div1'>
			<button class='active'>HTML5</button>
			<button>JavaScript</button>
			<button>JQuery</button>
			<div style='display: block'>万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C
				Recommendation、见本处参考资料原文内容：）。20...</div>
			<div>avaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早...</div>
			<div>jQuery 教程 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 本章节的每一篇都包含了在线实例
				通过本站的在线编辑器...</div>
		</div>

			$(function() {
				var aBtns = $("#div1").find("button");
				var aDivs = $("#div1").find("div");

				//给按钮添加点击事件
				aBtns.click(function() {
					aBtns.attr("class", '');
					aDivs.css("display", 'none');

					$(this).attr("class", 'active');
					aDivs.eq($(this).index()).css("display", 'block');
				})
			})

2. class、属性、文本获取

attr() 设置和修改行间属性
addClass() 增加class
removeClass() 移除class
text() 标签间纯文本，相当于innerText，赋值的话不解析标签
html() 标签间的内容，相当于innerHTML(含标签)，赋值的话会解析标签

3. 距离相关

width() 获取width
innerWidth() width+padding
outerWidth() width+padding+padding+border
outerWidth(true) width+padding+padding+border+margin
scrollTop() 获得滚动高度
pageX 带滚动距离
clientX 可视窗口为原点

offset() 直接获取当前元素，距离最左边的距离，margin不算数的
position() 直接获取当前元素，距离第一个有定位父节点的距离，margin算在内
offsetParent() 查找第一个有定位的父节点，如果父节点没有定位就继续往上去找，最终找到html节点

4. 节点的操作(注意主语和宾语)

insertBefore() 找到A节点插在B节点的前面
before() A节点的前面是B节点（和上面的区别在于位置换了）
insertAfter() 找到A节点插在B节点的后面
after()
appendTo() 找到A节点插在B节点子节点的末尾
append()
prependTo() 找到A节点插在B节点子节点的前面
prepend()
remove() 删除元素节点，返回值不会保留这个元素节点上之前的事件和行为
detach() 删除元素节点，返回值会保留这个元素节点上之前的事件和行为
clone() 默认只会克隆节点本身，并不会克隆我们元素节点的行为和事件；传入true则既会克隆节点本身，还会克隆元素节点的行为和事件。
wrap() 每一个获取到的元素节点单独包装，直接JQ创建节点的代码
wrapAll() 整体包装
wrapInner() 内部包装
unwrap() 删除上面一层包装，不包括body节点
add() 可以将多个选择器拼接在一起
empty() 删除它的所有子节点

5. 事件绑定：on和off

5.1. on() 进行事件绑定

(1)可以给一个事件添加一个函数

				$("#div1").on("click", function() {
					alert("hello");
				})

(2)可以同时给多个事件添加函数以空格隔开

				var i = 0;
				$("#div1").on("click mouseover", function(){
				   $(this).html(i++);
				})

(3)可以给不同的事件添加不同的函数

				$("#div1").on({
					click: function() {
						alert("点击");
					},
					mouseover: function() {
						$(this).css("backgroundColor", 'orange');
					},
					mouseout: function() {
						$(this).css("backgroundColor", 'blue');
					}
				})


				$("#div1").click(show);

				function show(){
				    alert("show");
				}

(4)事件委托，第二个参数是触发对象的选择器

		<ul>
			<li>1111</li>
			<li class='box'>2222</li>
			<li>3333</li>
			<li class='box'>4444</li>
			<li>5555</li>

		</ul>

				$("ul").on("click", "li.box", function(){
				   $(this).css("backgroundColor", 'red');
				})

(5)给事件传入对象，通过ev.data拿到参数

5.2. off() 取消事件绑定

(1) 取消所有事件上的所有函数

(2) 取消某一事件下的所有函数（例如一个click下可以有好几个函数，进行好几个操作）

(3) 取消某一事件下的指定函数

				$("#cancel").click(function(){
				   $("#div1").off(); //取消所有事件上的所有函数
				   $("#div1").off("click"); //取消某一个事件下的所有函数

				   $("#div1").off("click", show); //取消某一个事件下指定的函数
				})