当前位置: 萬仟网 > IT编程>开发语言>Jquery > jQuery基础知识梳理(三)

jQuery基础知识梳理(三)

2020年07月24日  | 萬仟网IT编程  | 我要评论
9.尺寸相关、滚动事件(1)获取和设置元素的尺寸width()、height() 获取元素width和heightinnerWidth()、innerHeight() 包括padding的width和heightouterWidth()、outerHeight() 包括padding和border的width和heightouterWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height(2)获取元素相对

10.尺寸相关、滚动事件
(1)获取和设置元素的尺寸
width()、height() 获取元素width和height
innerWidth()、innerHeight() 包括padding的width和height
outerWidth()、outerHeight() 包括padding和border的width和height
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
(2)获取元素相对页面的绝对位置
offset()
var X = $(’#DivID’).offset().top;
var Y = $(’#DivID’).offset().left;
获取相对(父元素)位置:
var X = $(’#DivID’).position().top;
var Y = $(’#DivID’).position().left;
(3)获取浏览器可视区宽度高度
$(window).width();
$(window).height();
(4)获取页面文档的宽度高度
$(document).width();
$(document).height();
(5)获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
(6)页面滚动事件
$(window).scroll(function(){

})
11 jQuery 属性操作
什么是属性操作?
所谓的属性操作就是操作一系列的元素的属性 ,例如元素li中的class style;元素a中的href 等等

 <li class="active" style="border-left: 1px solid gainsboro;"><a href="#" index="1" >电影</a></li>

1.jQuery的常用属性操作的三种 prop(),attr(),data()
(1)prop()设置或获取元素固有属性的属性值
element.removeProp() 方法 //删除元素的某一属性

$('a').prop('href');//获取元素固有属性的属性值   
$('a').prop('href','https://www.baidu.com/');//设置元素固有属性的属性值    

注:适合操作表单的属性 比如 disabled/checked/selected
(2)设置或获取元素的自定义属性attr()
element.removeAttr() 方法 //删除元素的某一属性

$('a').attr('index');//获取元素自定义属性的属性值
$('a').prop('index','2');//设置元素自定义属性的属性值

注:该操作适用于H5自定义属性

attr方法和prop方法区别
① 所有的DOM对象,都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点
② 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
③ 因为如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false
(3)数据缓存data() 这个里面的数据是存放在元素的缓存里面,把元素当成一个变量,在DOM中不显示

$('span').data('uname','lisa');  //给元素span中添加uname
console.log($('span').data('uname'));    //打印结果为Lisa

注:适用于H5里面获取自定义的属性

2.文本属性的操作 text()、html() 以及 val()
(1)html()获取与设置元素的内容(一般指的是双标签元素),等价于innerHTML属性
(2)text()获取与设置元素的文本内容(一般指的是双标签元素),等价于innerText属性
(3)val()获取与设置表单元素的value值,等价于value属性

实例
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			// 获取设置元素内容 html()
			console.log($('.content>p').html());
			console.log($('.content').html()); //可以获取到子元素与文本
			$('.content>p').html('属性操作');
			// 获取设置元素文本内容 text()
			console.log($('.content>h2').text());
			console.log($('.content').text());  //只能可以获取到文本
			$('.content>h2').text('二级标题');
			//获取设置元素表单元素 val()
			console.log($('.content>input').val());
			$('.content>input').val('请输入');
		});
	</script>
</head>
<body>
	<a href="" ></a>
	<div class="content">
		<p>文本属性操作</p>
		<h2>文本属性操作</h2>
		<input type="text" id="" value="请输入姓名" />
	</div>
</body>
</html>

注意:
① 如果我们需要操作双标签元素可以使用html也可以使用text,但是如果操作表单元素的value属性,使用val方法。
② html方法与text方法在获取数据时结果不同,html方法可以获取到子元素与文本信息,而text方法只能获取文本信息
③ html方法与text方法在设置数据时结果不同,html方法设置标签之间的内容时如果包含了html代码可以正常解析,但是text方法会把html代码当做普通文本直接输出。
12.元素的操作
遍历元素
(1) each()方法遍历元素有两种方式
方式一

/* 第一个参数: 当前遍历到的索引 第二个参数: 遍历到的元素 */ 
    $(selector).each(function(index,element){});

方式二

$.each(object, function(a,b ) { }, ['参数1', '参数2']);   //遍历对象(有附加参数)
$.each(object, function(index,element ) { });   //遍历对象
$.each(Array , function(a,b) { }, ['参数1', '参数2']);  //遍历数组(有附加参数)
$.each(Array , function(i,element ) { });  //遍历数组

(2)map()方法

 $.map(Array , function (element,i) {  }); 

$.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。
注意:

  1. 在jQuery 1.6 之前,该函数只支持遍历数组;从 1.6 开始,该函数也支持遍历对象。
  2. map()还会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名。
  3. 该函数返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中。
实例
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			//each()方法
			//回掉函数的第一个参数是索引,第二个参数是当前的元素(也可使用 "this" 选择器)
			//方式一
			$('ul li').each(function(index,element) {
				console.log(index);
				console.log(element);
				//text()设置元素内容
				console.log($(element).text('111'));
				//html()设置元素内容
				// console.log($(element).html('222'));
			}); 
			//方式二
			/* $.each($('ul>li'), function(index,element) {
				console.log(index);
				console.log(element);
				//text()设置元素内容
				console.log($(element).text('111'));
				//html()设置元素内容
				// console.log($(element).html('222'));
			}); */
			
			//map()方法
			// 第一个回调函数参数是遍历到的元素,第二个回调函数参数是当前遍历的索引,
			// 返回值: 将回调函数返回值收集起来组成一个新的数组
			/* var arr = [1, 3, 5, 7, 9];
			var $Arr = $.map(arr, function (element,index) {
			    console.log(index, element);
			    return element + index;
			});
			console.log($Arr); */    //$Arr = [1, 4, 7,10, 13];
		});
	</script>
</head>
<body>
	<ul>
		<li>01</li>
		<li>02</li>
		<li>03</li>
		<li>04</li>
		<li>05</li>
	</ul>
</body>
</html>

本文地址:https://blog.csdn.net/qq_38482933/article/details/107543066

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号-1