Jquery基础

转x33g5p2x  于2021-09-25 转载在 jQuery  
字(21.4k)|赞(0)|评价(0)|浏览(574)

Jquery基础

介绍

在学Jquery前 你必须会javascript 因为下面很多案例我都会拿javascript来举例

而且Jquery 底层其实就是基于javascript进行封装的

使用Jquery前 必须在页面中导入 Jquery库文件

<script src="./jquery-3.4.1.js"></script>

链接：https://pan.baidu.com/s/1D6n3OHGqS60WlXUp2F9PVA
提取码：1234

测试导入文件是否成功

<script src="./jquery-3.4.1.js"></script>
		<script>
			$(document).ready(function(){
				alert("啊啊")
			})
		</script>

如果成功弹出对话框 那么 就代表 你jquery库文件导入成功

之后就可以使用jQuery语法了

jQuery语法结构

分为三个部分 工广函数 ,选择器, 方法

$()工广函数

$()工广函数 等价于jQuery() $()作用是将DOM对象转换为jQuery对象只有将DOM对象转换为jQuery对象后才能使用jQuery

例如 document是一个DOM对象 当使用( d o c u m e n t ) 包 裹 起 来 时 就 变 成 了 j Q u e r y 对 象 了 他 能 使 用 j Q u e r y 中 的 (document)包裹起来时就变成了jQuery对象了 他能使用jQuery中的(document)包裹起来时就变成了jQuery对象了他能使用jQuery中的(document).ready方法 等同于window.onload() 作用都是在页面渲染前运行

他们不一样的是:

js同一个网页中不能同时编写多个 window.onload 只会执行最后一个 而jQuery可以同时编写多个$(document).ready都会执行
1.
js的window.onload 会在$(document).ready前执行
1.
javaScript 的对象能 直接在$()中使用 对象不用使用” ”括起来 只有选择器 才用” ”括起来
1.
jQuery $(document).ready(function(){ }); 可以简写 $(function(){ }); 效果等同

选择器

jQuery支持所有的选择器比如 类选择器 ,标签选择器 id选择器, 后代选择器等

id选择器

$(“/#name”) 获取id为name的元素

标签选择器

$(“div”) 获取所有div标签 返回数组

class选择器

$(“.name”) 获取所有 class=name的元素 返回数组

等等 请参考 Jquery选择器大全 在我博客中可以搜索到

方法

jQuery中提供了一系列的方法,在这些方法中一类重要的方法就是事件处理方法

主要用于来绑定DOM元素的事件和事件处理方法 在jQuery中许多基础事件如

鼠标事件,键盘事件,和表单事件等 ,都可以通过这些方法进行绑定,比如: click() 可以发现 少了个on 其他的事件也是如此 我们可以参考Jquery事件大全在我博客中可以搜索到

字符串过长 换行 输出 不影响原来的结构 结尾使用\ 等同于使用+拼接

<div></div>
		<button id="kk">点击添加内容</b>
			<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script> $("#kk").click(function() { var c = "<ul> <li>买上商品 后查不到物流信息怎么办?</li>\ <li>申请退款后</li></ul>"; $("div").html(c) }) </script>

jQuery样式添加和删除

设置样式

$(节点).css(“属性”,“值”)

设置多个样式

$(节点).css({“属性”:“值”,“属性”:“值”})

通过样式属性 获取对应的值

var str=$(节点).css(“属性”)

删除css添加的样式

$(节点).css(“属性”,""); //为空就行

设置Class样式

特别重要 : 如果元素内存在行内样式 那么你Class样式内相同的配置将会失效 因为行内优先于 内部和外部样式

比如 Class内将边框设置为红色 而 元素行内样式边框是蓝色 那么 Class里的红色边框不会设置到元素上

还是元素本身的行内样式上蓝色边框 所以有时候你发现使用addClass 设置样式 发现无效就是这个原因

解决办法使用上面的 css() 来设置 css() 设置的就是行内样式

$().addClass(“class选择器”)

多个 class样式 使用 空格 隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

	.class_1{
		font-size: 40px;
		color: blue;
	}
	.class_2{
		position: absolute;
		left: 100px;
	}
	
		</style>
	</head>
	<body>	
		<p>hello</p>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script>
			$("p").addClass("class_1 class_2")
		</script>

	</body>
</html>

删除Class样式

$(“div”).removeClass(“class_1”)

删除多个样式用空格隔开 “class_1 class_2”

切换样式

$(“div”).toggleClass(class) 如果元素内含有名称为class 的样式 就删除 否则 就添加此样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> /* 初始样式 */ .class_1{ width: 100px; height: 100px; border: 1px salmon solid; } /* 用于切换的样式 */ .class_2{ width: 200px; height: 200px; background-color: aquamarine; } </style>
	</head>
	<body>	
	<div class="class_1"></div>
	<button>点击切换样式</button>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script> $("button").click(function(){ $("div").toggleClass("class_2") }) </script>

	</body>
</html>

判断是否含指定样式hasClass

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
	.content{
		position: absolute;
		left: 100px;
	}
		</style>
	</head>
	<body>	
		<button id="but">点击</button>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script>
						$("#but").click(function(){					
			
							$(this).addClass("content");
			
							var c=$(this).hasClass("content");
			
							alert(c);//true
			
							var c1=!$(this).hasClass("content");
			
							alert(c1);//false 
			
						})
		</script>

	</body>
</html>

this 和显示隐藏切换

$(this).hide()隐藏

$(this).show() 显示

如果附带参数 毫秒 那么 就会显示动画效果 淡入淡出

<button id="show">点击显示</button>
		<button id="hide">点击隐藏</button>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script> $("#show").click(function(){ $("#hide").show(1000) }) $("#hide").click(function(){ $(this).hide(1000) }) </script>

toggle() 显示和隐藏

意思就是如果是显示状态那么隐藏 如果是隐藏状态 那么就显示

带参数就是动画 毫秒

<button id="show">点击显示</button>
		<button id="hide">点击隐藏</button>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script> $("#show").click(function(){ $("#hide").toggle(1000) }) $("#hide").click(function(){ $(this).toggle(1000) }) </script>

jQuery程序的代码风格

1.$的使用

​ 在jQuery程序中使用最多的是美元符号无论是页面元素的选择器,还是功能函数前缀,都必须使用该符号,他是jQuery程序的标志,即$=jQuery

在项目开发中因为某些原因 不止使用 jQuery 库 还是用了其他库 而这些库里也有些在使用$符号 就会和Jquery产生冲突

解决办法

  1. 在jquery中使用让渡 将$让给其他库使用 而自己只能 使用jQuery代替

​ jQuery.noConflict(); 后续代码就不能使用$了

  1. 使用jQuery专属区 在专属区内还可以继续使用$
jQuery.noConflict();
jQuery(document).ready(function ($) {
   $("#import").click(function () {
     alert("阿萨")
   })
})

2.链接操作

​ 在对DOM元素进行多个操作时,为了避免过度使用临时变量不必要的重复代码,在大多数jQuery 代码中采用一种链接是编程模式 简单来说就是在上一个对象基础上继续使用 不在创建新的对象 就跟一条链子一样

列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>

		<h2>什么是收益人</h2>
		<p>
			111111111111
		</p>

		<script src="./jquery-3.4.1.js" type="text/javascript"></script>
		<script> $(document).ready(function() { $("h2").click(function() { // 修改 h2背景 通过next 获取h2 下一个元素p 修改p的字体颜色 $(this).css("background", "#ccffff").next().css("color", "red") }) }); </script>
	</body>
</html>

jQuery对象与DOM对象的相互转换

在实际开发jQuery过程中 jQuery和DOM对象相互转换是非常常见的

一般jQuery 的变量 是$开头的

var n a m e = name=name=(“id”);

而 DOM 正常变量

var name=document.getElementById(“id”);

jQuery对象是一个类似数组的对象,可以通过[index] 或者get(index) 来使用

在实际中多数都是DOC转换为jQuery

通过[index]

var $name=$("#ll");	
		//jQuery转换成DOM对象
		var na_me=$name.get(0);
		alert(na_me.checked) //输出内容

通过get(index)

var $name=$("#ll");	
   		//jQuery转换成DOM对象
   		var na_me=$name[0];
   		alert(na_me.checked) //输出内容

将DOM转换成jQuery对象

<!-- 将DOM转换成jQuery对象 -->
		<script>
			var txtName=document.getElementById("ba");
			var $txtName=$(txtName);
			$txtName.css("color","red")		
			
		</script>

节点内容操作

不带参的使用(读)

html() 返回文本内容

内容是: 当前标签内的所有文本内容和子节点的名称 属性 …

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>

		<div>
			hello
			<p id="p_1">da1</p>
			<p id="p_2">da2</p>
			<p class="class_1">da1</p>
		</div>

		<script src="./jquery-3.4.1.js" type="text/javascript"></script>
		<script> console.log($("div").html()) </script>
	</body>
</html>

控制台的结果:

hello

<p id=“p_1”>da1</p>

<p id=“p_2”>da2</p

<p class=“class_1”>da1</p>

text() 返回文本内容

内容是: 当前节点的文本内容 和子节点的文本内容 不包括 节点名称 和属性

将上面代码修改下

console.log($("div").text())

控制台的结果:

hello
da1
da2
da1

带参的使用(写)

html(“xxx”) 可以将文本内容解析为 html 内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>

		<div id="div_1"></div>
		<div id="div_2"></div>
		<script src="./jquery-3.4.1.js" type="text/javascript"></script>
		<script> $("#div_1").html("<h1 style='color: aqua;'>1111</h1>") </script>
	</body>
</html>

text(“xxx”) 只是文本内容 不能解析 html内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>

		<div id="div_1"></div>
		<div id="div_2"></div>
		<script src="./jquery-3.4.1.js" type="text/javascript"></script>
		<script> $("#div_1").html("<h1 style='color: aqua;'>1111</h1>") </script>
	</body>
</html>

返回节点名称

jQuery 的 get(index) 方法允许选择一个实际的 DOM 元素并且对其直接操作，

而不是通过 jQuery 直接访问 tagName 属性 这样是不行的

( t h i s ) . g e t ( 0 ) 与 (this).get(0) 与(this).get(0)与(this)[0] 等价

tagName获取到的节点名称 都是大写

<p id="p_1">da1</p>

		<script src="./jquery-3.4.1.js" type="text/javascript"></script>
		<script>
			console.log($("#p_1").get(0).tagName)
			console.log($("#p_1")[0].tagName)
		</script>

控制台显示

P
P

节点操作

创建节点

大家都知道 使用JavaScript 创建节点非常麻烦 但是jquery 就非常简单了 就和直接写节点没啥区别了

jquery通过$(“html结构”) 来创建节点 直接返回创建的节点对象

演示案例:

<div style="border:1px salmon solid; height: 100px; width: 200px;">   </div>

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script> //使用 jquery 的方式创建节点 包括 属性 ... var div = $("<p style='color: sandybrown;'>jquery 的方式创建节点 </p>"); //将创建好的节点 添加到上面的div中 $("div").append(div) </script>

插入节点

因为text 和html 是覆盖的方式 如果不想覆盖标签内的内容

还可以 使用对象方式 然后插入进指定的 节点

属性解析
$(A).append(B)将B插入进A里面 最后
内部插入$(A).appendTo(B)将A 插进B里 最 后
$(A).prepend(B)将B插入进A里面 最前
$(A).prependTo(B)将A 插进B里 最前
属性解析
$(A).after(B)将B插入在元素外之后
外部插入$(A).insertAfter(B)将A插入在元素外之 后
$(A).before(B)将B插入在元素外之 前
$(A).insertBefore(B)将A插入在元素外之 前

日常版

<div id="objectArrayDiv" ></div>
		<script src="./jquery-3.4.1.js" type="text/javascript"></script>
		<script> //将B插入进A里面最 后 $("#objectArrayDiv").append("<p style=\"color: antiquewhite;\">hello</p>") </script>

高级版

<div id="objectArrayDiv"></div>
		<script src="./jquery-3.4.1.js" type="text/javascript"></script>
		<script> var $table=$("<table border='1'></table>") .append("<tr><th>ID</th> <th>用户名</th> <th>密码</th> </tr>") .appendTo($("#objectArrayDiv")); var userArray=[{"id":1,"name":"da","pwd":"123"},{"id":2,"name":"da1","pwd":"1234"}] $(userArray).each(function () { $table.append("<tr><td>"+this.id+"</td> <td>"+this.name+"</td> <td>"+this.pwd+"</td> </tr>") }) </script>

解析

一眼看过去 是 有点迷惑 这个$table 是谁的引用 通过解析就能明白了

$("<table border=‘1’></table>") 是将创建了 table标签 并且 变成 jQuery的引用

正因为成为引用对象 就可以使用节点的 插入方法 向里面插入数据

重点 就是 appendTo 是将前面的 插入 后面的标签内

正因为是 前面插入后面 现在的引用 就是后面的 jQuery引用了

所以 现在 的$table 是 objectArrayDiv标签的引用了

删除节点

jQuery提供了 三种方法删除节点remove() ,detach(), empty() 其中detach使用频率不高

remove 和detach 相同点是 将元素删除了但是他的对象还是存在的(被保存过的对象)

//清除本节点和本节点内所有节点

var $name=$("#gg").remove();  	 
 alert($name.html()) //删除 后还是能通过对象 来使用此节点
//清除本节点和本节点内所有节点
var $name=$("#gg").detach()
alert($name.html()) //删除 后还是能通过对象 来使用此节点

不同之处 就是detach 会保留自身的 绑定事件,附加的数据 (其实也没什么用) 而remove 就直接都全部删除了

//empty() 方法移除被选元素的所有子节点和内容
var $name=$("#gg").empty()

严格来说emoty()不是删除节点而是清空节点
注意：该方法不会移除元素本身，或它的属性。 而是清空节点所有内容(包括子节点)

替换节点

$(A).replaceWith(B)   	 //B节点 将 A节点 替换
$(A).replaceAll(B)  	//A节点 将 B节点 替换

案例演示

<div id="hh">
			<ul>
				<li>阿萨达</li>
				<li>规范非</li>
				<li>发撒</li>
			</ul>
		</div>

		<button id="aa">替换</button>

		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script> var $c = $("<li>aaaaaaaa</li>") $("#aa").click(function() { //将$c替换 "li:eq(0)" $("li:eq(0)").replaceWith($c) //相反 // $($c).replaceAll("li:eq(0)") }) </script>

复制节点

$().clone() 其中clone(true)时复制事件处理 为 falss 相反 默认为 false

案例演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> ul{ padding: 0px; } li{ line-height: 50px; list-style: none; } hr{ border: 1px dashed silver; } </style>
	</head>
	<body>
		<div id="hh">
			<ul>
				<hr>
				<li>阿萨达</li>
				<hr>
				<li id="kl">规范非</li>
				<hr>
				<li>发撒</li>
				<hr>
			</ul>
		</div>

		<div id="ll">
			<ul>
			</ul>
		</div>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script> //当点击时候 添加背景 $("li:eq(0)").click(function() { $(this).css("background", "salmon") }) //当点击时候 添加背景 $("li:eq(1)").click(function() { $(this).css("background", "darksalmon") }) //当点击时候 添加背景 $("li:eq(2)").click(function() { $(this).css("background", "darkgoldenrod") }) //复制了 节点内的结构,样式,属性,文本,事件 然后插入到#ll中 $("li:eq(0)").clone(true).appendTo($("#ll")) //复制了节点内的结构,样式,属性,文本, 不复制事件 然后插入到#ll中 $("li:eq(1)").clone(false).appendTo($("#ll")) //如果不加参数 就默认为 false 不复制事件 $("li:eq(2)").clone().appendTo($("#ll")) </script>
	</body>
</html>

包裹节点

wrap() 方法使用指定的 HTML 元素来包裹每个被选元素。

<p id="P_id"> aaaa</p>
			<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script>
			$("#P_id").wrap("<div style='color:red'></div>");
			</script>

节点属性(获取和设置)

获取属性的值

$().attr(“?”)

var ss= $("#k").attr('id');

注意事项 比如 我把id对象给改了 那么他下面的代码 在操作id 的时候 都要使用修改后的id

//修改前 id=k 
 $("#k").attr("id","s")  //修改id值为 s
 $("#s").attr("id");

设置属性

$().attr(“属性”,“值”)

$().attr({“属性”:“值”,“属性”:“值”})

单个添加
$("#k").attr("value","撒大声地")
多个添加
$("#k").attr({id:"v",name:"ll"});

删除元素属性

$().removeAttr(‘属性’)

演示案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

		ul{
				padding: 0px;
		}
		li{				
				line-height: 50px;
				list-style: none;
				
		}
		hr{
			border: 1px dashed silver;
		}
		
		</style>
	</head>
	<body>
		<div id="hh">
			<ul>
				<hr>
				<li id="in">阿萨达</li>
				<hr>

				<li id="kl">规范非</li>
				<hr>
				<li>发撒</li>
				<hr>
			</ul>
		</div>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script>
		
			//设置 属性 修改id值 设置样式 
			$("li:eq(0)").attr({
				id: "oo",
				style: "color: #C0C0C0"
			})

			//获取 属性值 原来的id 是 in 现在是oo
			var $c = $("li:eq(0)").attr('id')
			// alert($c)

			//删除节点属性 将行内样式删除了 
			//$("li:eq(0)").removeAttr('style')
		</script>
	</body>
</html>

遍历节点

演示的HTML

<div>
		<p>武汉长乐教育</p>
		<span>在哪才能真正学习会PHP技术？</span>
		<a href="#"><p>欢迎前来试听</p></a>
		</div>

children()方法

无参: 获取元素的所有子类元素 第一层 返回数组 带参: 获取元素的所有子类元素 第一层 结果集中指定的元素 返回数组

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script>
				//获取div元素下的所有 第一层 子元素
				var $child1 = $("div").children();
				for (var i = 0; i < $child1.length; i++) {
					console.log($child1[i].tagName)  
				}
				
			console.log("\n\n--------------------------------------\n\n")
				//获取div元素 下 第一层 p子类元素
				var $child2 = $("div").children("p");
				for (var i = 0; i < $child2.length; i++) {
					console.log($child2[i].tagName)    
				}
				
			</script>

控制台结果:

P
SPAN
A

P

next()方法

无参: 获取下一个同辈的元素 不能添加参数

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script>
				var $a = $("div span").next(); //获取下一个同辈的元素
				console.log($a.get(0).tagName)	
			</script>

控制台结果:

A

prev()方法

无参: 获取上个同辈的元素 不能添加参数

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script>
				var $a = $("div span").prev(); 
				console.log($a.get(0).tagName)	
			</script>

控制台结果:

P

siblings()方法

无参: 获取被选元素的所有同辈元素 不包括他本身 返回数组 带参: 获取被选元素的所有同辈元素结果集中的指定元素 返回数组

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script>
				var $a = $("div span").siblings(); 
				for (var i = 0; i < $a.length; i++) {
					console.log($a[i].tagName)
				}
			</script>

控制台结果:

P

A

closest() 方法

一直向上找符合条件的元素，返回一条，从近到远 如果自己符合就返回自己 不能使用无惨方法

注意 是垂直向上 不会水平去找

看下面这张图

我从p节点开始向上找 能满足条件的就这 些节点 p(他本身) -> a -> div

而span和 span同辈p 不能满足查询条件 因为上面说了不能水平查询

你可以自己改变下closest() 的参数试试就知道可

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script>
				var $a = $("div a p").closest("a"); 
				console.log($a.get(0).tagName)
				console.log($a.text())
			</script>

parent()方法

返回父级元素，返回一条

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script>
				var $a = $("p").parent(); 
				console.log($a.get(0).tagName)
			</script>

控制台结果:

DIV

parents()方法

无惨: 获得指定元素的所有父节点 一直到html 返回数组 , 带参: 获得指定元素的所有父节点 一直到html 的结果集中的指定节点 返回数组

<script>
				var $a = $("a p").parents(); 
				for (var i = 0; i < $a.length; i++) {
					console.log($a[i].tagName)
				}
			</script>

控制台结果:

A

DIV

BODY

HTML

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script>
				var $a = $("a p").parents("div"); 
				for (var i = 0; i < $a.length; i++) {
					console.log($a[i].tagName)
				}
			</script>

控制台结果:

DIV

find()方法

带参: 返回被选元素 的指定 所有后代元素(子、孙、曾孙…) 。 返回数组 不能使用无惨方法

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script>
				var $a = $("div").find("p"); 
				for (var i = 0; i < $a.length; i++) {
					console.log($a[i].tagName)
				}
			</script>

控制台结果:

P

P

filter()

filter用于对数组进行过滤。

filter()方法创建一个新的数组，将满足条件的对象返回 使用this 可以引用当前要进行过滤的对象

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script>
				
				$('p').filter(function(index){ //index是当前要进行过滤对象的下标
					return index!=0
				}).css('background-color', 'red');
			</script>
$('p').filter(':even').css('background-color', 'red');

eq(index)

选取多个元素中的指定元素 从0开始 如果就他自己 那么就是eq(0)

$("p").eq(1).css("background-color","yellow");

first()

获取匹配元素集合中的第一个元素。

$("p").first().css("color","red")

last()

获取匹配元素集合中的第最后一个元素。

$("p").last().css("color","red")

each()

遍历对象 也就是跟 for(var I in obj){ }效果一样 但是 each()是直接可以操作节点 当返回 false 停止遍历

// 遍历一维数组
					var arr=new Array("1+a","2+a","3+a","4+a");	
					$.each(arr, function(index,val){      
						alert(index+"_\-\_"+val);   	
					});
// 遍历 键值对 
					var obj = { "one":1, "two":2, "three":3};      
	 　　				$.each(obj, function(key, val) {      
	      　 			alert(key+"\xa0\xa0"+val);    
	 　				　});
//index是下标 , element是对象
				$("p").each(function(index,element){
					// 使用element.tagName 获取标签名称
					alert(index+"-"+element.tagName)
					//当返回 false 停止遍历
					//return false;
				})

end()

end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

我们来看一段代码

$("div").find("span").css("color","red").end().css("border", "2px red solid");

我们找到div里面的span元素 给他设置字体颜色

然后使用end() 将当前span对象还原为最开始的 div对象 然后设置div对象的 边框

is()

判断元素集合中是否存在 指定的元素 如果存在则返回 true 否则false

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script>
				var $a = $("div").find("p").is("p")
				alert($a)
			</script>

not()

从匹配元素集合中删除元素。

var $child1 = $("div").children().not("p"); 
				for (var i = 0; i < $child1.length; i++) {
						console.log($child1[i].tagName)  
				}

结果 就剩下了 SPAN 和A 把 P 从元素集合中删除了

contents()

contents() 方法获得匹配元素集合中所有元素的子节点，包括文本和注释节点。 一般配置过滤器filter使用

然后我们就可以使用元素类型来判断 到底哪个使我们需要的

节点类型说明值
元素节点每一个HTML标签都是一个元素节点，如 <div> 、 <p>、<ul>等1
属性节点元素节点（HTML标签）的属性，如 id 、class 、name 等。2
文本节点元素节点或属性节点中的文本内容。3
注释节点表示文档注释，形式为 。8
文档节点表示整个文档（DOM 树的根节点，即 document ）9

找到段落中的所有文本节点，并用粗体标签包装它们。

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script>
			$("p").contents().filter(function(){ return this.nodeType = 3; }).wrap("<b/>");
			</script>

元素宽高和在窗体位置

获取元素的宽和高

方法介绍演示
height()设置或者获取元素的高度 不加单位默认为pxvar b=$(“li”).eq(1).height() $(“li”).eq(1).height(“40”)
width()设置或者获取元素的宽度 不加单位默认为pxvar b=$(“li”).eq(1).width() $(“li”).eq(1).width(“40”)

不加参数是获取指定元素的宽或者高 加参数是设置指定元素的宽或者高

使用css("?")获取的值 和height() ,width() 不同的区别 css()方法 获取高度的值与样式有关 可能会得到auto,也可能得到60px子类的字符串

而height()方法获得的高度值与页面中的实际值有关 与样式设置无关 且不带单位 宽度也是一样

获取元素的 在窗体的位置

方法介绍
offset()设置或者返回以像素(px)为单位的top和left坐标,此方法只对可见元素有效 获取的是实际的位置而不是 css中定义的位置
offsetParent()返回最近的已定位祖先元素,定位元素指的是 使用 position 设置为relative ,absolute 或fixed() 的元素
position()返回第一个匹配元素相对于父元素的偏移量
scrollLeft(参数 )参数可选,设置或返回匹配元素相对滚动条左偏移
scrollTop(参数)参数可选,设置或返回匹配元素相对滚动条下偏移

offset()

设置: $("/#ss").offset({top:400})

获取: var c1=$("/#ss").offset().top;

offsetParent()

$(“li”).offsetParent().css(“background-color”,“red”)

position()

var x=$(“div”).position();

var c=x.left;

scrollLeft(参数)

设置:$(window).scrollLeft(100);

获取: var x=$(window).scrollLeft();

scrollTop(参数)

设置:$(window).scrollTop(100);

获取:var x=$(window).scrollTop();

案例:

使元素随着 滚动条的滚动 而变化位置 也就是所谓的广告栏 案例

<style> nav{
			position: absolute;
			top: 100px;
			left: 50px;
		}
		</style>
<nav style="display:block;">
            	<!-- 更换你的图片 -->
			<img src="./shuaige.jpg" width="100" height="100" />
		</nav>

		<div style="border: 2px sandybrown solid;width:1000px;height:1000px;">

		</div>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script>
			//广告栏
			//原来的 位置
			var left1 = parseInt($("nav").offset().left);
			var top1 = parseInt($("nav").offset().top);

			//每次滚动条 变化都会 加载 
			$(document).scroll(function() {
				//获取滚动条的位置
				var top_t = parseInt($(window).scrollTop());
				var top_l = parseInt($(window).scrollLeft());
				//重新设置位置 
				//原来的为加上每次滚动条每次移动的位置就是 现在的位置
				$("nav").offset({
					top: (top_t + top1)
				});
				$("nav").offset({
					left: (top_l + left1)
				});
			})
		</script>

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_45203607/article/details/120247945

内容来源于网络，如有侵权，请联系作者删除！

jqueryJavaScript前端html5css3

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com