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产生冲突

解决办法

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

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

使用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_2”>da2</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

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()	设置或者获取元素的高度不加单位默认为px	var b=$(“li”).eq(1).height() $(“li”).eq(1).height(“40”)
width()	设置或者获取元素的宽度不加单位默认为px	var 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>

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

Jquery基础

Jquery基础

介绍

jQuery语法结构

$()工广函数

选择器

方法

jQuery样式添加和删除

this 和显示隐藏切换

jQuery程序的代码风格

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

节点内容操作

不带参的使用(读)

带参的使用(写)

返回节点名称

节点操作

创建节点

插入节点

删除节点

替换节点

复制节点

包裹节点

节点属性(获取和设置)

遍历节点

children()方法

next()方法

prev()方法

siblings()方法

closest() 方法

parent()方法

parents()方法

find()方法

filter()

eq(index)

first()

last()

each()

end()

is()

not()

contents()

元素宽高和在窗体位置

相关文章

热门标签

最新文章

目录