8.20 Python前端 Web Jquery

一、正则表达式剩余特殊元字符

^ 限制开头
$限制结尾

二、Jquery简介

jquery是原生js的封装库，将原生js方法进行封装简化原生js的操作

jquery的使用：

导入库文件 在header标签导入库文件

在代码中打印$如果没有报错代表导入成功

三、选择器

基础选择器

     id选择器

     标签选择器

     类选择器

     并列选择器

     后代选择器

     属性选择器

// $('#item1').css('border','1px solid pink');
			// $('.logo').css('border','1px solid pink');
			// $('li').css('background','pink');
			// // 后代选择器
			// $('.nav_top li').css('background','blue');
			// // 子选择器
			// $('.logo>img').css('border','1px solid red');
			// // 并列选择器
			// $('item1,#item3').css('color','#369');
			// // 属性选择器
			// $('ul[class="nav_top"]').css('background','red');

过滤选择器

     获取第一个元素 ：first

     获取最后一个元素 ：last

     获取指定索引的元素 eq

// 获取第一个元素
			$('li:first').css('background','red');
			// 获取最后一个元素
			$('li:last').css('background','yellow');
			// 获取指定索引元素
			// eq通过索引获取元素
			$('li:eq(1)').css('background','green');
			$('li').eq(7).css('background','pink');

关系选择器

     获取所有的子元素

     children（）

     获取上一个同级元素

     prev（）

     获取下一个同级元素

     next（）

     获取所有的同级元素

     siblings（）

     获取父元素

     parent（）

     获取先辈元素

     parents（）

     在父元素中查找指定子元素

     find（）

     

// 获取所有子元素 children
			$('body').children().css('border','1px solid #444');
			// 获得上一个同一级元素
			$('.item5').prev().css('background','#411');
			// 后的下一个同一级元素
			$('.item5').next().css('background','#511');
			// 获得所有统级元素 siblings
			$('.item5').siblings().css('background','green');
			// 获得父元素
			$('.item5').parent().css('background','pink');
			// 获得先辈元素
			$('.item5').parents('.content').css('border','1px solid red');
			// 在父元素中查找指定子元素
			$('html').find('.item5').css('border','1px solid red');

四、元素操作

css设置

使用css（）方法来操作样式：

一次设置一个样式

$(el).css('key','值')

一次多个样式

$(el).css({})

// 设置css样式
		// 一次一个
		// $('.box').css('width','200px');
		// $('.box').css('height','200px');
		// $('.box').css('background-color','red');
		// 一次多个样式
		$('.box').css({width:'200px',height:'200px',backgroundColor:'green'});

文本操作

innerHTML ===>html()

innerText=====>text()

// 文本内容的操作结果和原生的innerHTML innerText一样
		$('.box').html('<em>lllll</em>');
		$('.box').text('<b>qqqqqqqqq</b>');

表单值的操作

value属性val（）

属性操作

Attr()

删除

removeAttr()

// 表单值的操作
		// 获取
		console.log($('input').val());
		// 设置
		$('input').val('zzzzzzzzzzzz');

		// 属性操作
		// 获取
		console.log($('img').attr('src'));
		// 设置 一次一个
		$('img').attr('alt','qwerqwer');
		// 一次多个
		$('img').attr({alt:'rewqrewq',title:'hahahah'});
		// 删除属性
		$('img').removeAttr('src');

		// class属性操作
		// 给box最加类名 在原来的基础上追加 不会删除原来的类名
		$('.box').addClass('item1 item2');
		// 删除类名 如果不传参数会将所有的类名删掉
		$('.box').removeClass('item2');

五、相关尺寸

获取元素相对文档的偏移位置

offset（）

获取文档的滚动距离

scrollTop（）

scrollLeft（）

获取元素的宽度和高度

// 获取元素相对文档的偏移位置
		// offset()返回一个包含top和left属性的对象
		console.log($('.box1').offset());
		console.log($('.box2').offset());
		// 获取文档的滚动距离
		// scrollTop()获取文档的垂直方向的滚动距离，返回一个数字
		console.log($(document).scrollTop());
		// scrollLeft文档的水平方向的滚动距离
		console.log($(document).scrollLeft());

		// 获取元素的宽高
		// width()和height() 如果是多个元素对象，获取的是第一个元素的宽高
		// innerWidth innerHeight获取包含内间距 不包含边框
		// outerWidth outerHeight获取包含内间距包含内边框
		console.log($('.box1').width());
		console.log($('.box1').height());
		console.log($('box1').innerHeight(),'innerHeight');
		console.log($('box1').outerHeight(),'outerHeight');

		// 获取浏览器窗口的大小
		console.log($(window).width());
		// 获取文档宽高
		console.log($(document).width());
		console.log($(document).height());