jQuery简介 使用 选择器（基础选择器、 过滤选择器、关系选择器）元素操作（Css设置、文本操作、表单值的操作、属性操作、类class属性的操作）相关尺寸 事件 节点操作

一.jQuery简介 版本选择

---

简介： Jquery是原生js的封装库 将原生js方法进行封装简化了原生js的操作

1.1.x版本
2.2.x版本
3.3.x版本
2.x 和3.x 不兼容低版本浏览器

---

二.Jquery的使用：

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

<script src="D:/html文件夹/jquery-1.8.3.min.js"></script>

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

console.log($); 

---

三.选择器

1.基础选择器

Id选择器器

$('#item1').css('border','1px solid pink');

标签选择器

$('li').css('background','pink');

类选择器

$('.logo').css('border','1px solid pink');

并列选择器

			$('#item1,#item3').css('color','#369');

子选择器

		$('.logo>img').css('border','1px solid red');

后代选择器器

$('.nav_top li').css('background','blue');

属性选择器

$('ul[class="nav_top"]').css('background','red');

---

2.过滤选择器

:first 获取第一个元素

$('li:first').css('background','red');

:last 获取最后一个元素

$('li:last').css('background','yellow');

eq 获取指定索引的元素

$('li:eq(1)').css('background','green');
$('li').eq(7).css('background','pink');
//获取第五张图片
$('.content li').eq(4).css('background','gold');

---

关系选择器

1.Children() 获取所有的子元素

$('body').children().css('border','1px solid #444');

2.Prev() 获取上一个同级元素

$('.item5').prev().css('background','#411');

3.Next()获取下一个同级元素

$('.item5').next().css('background','#511');

4.Siblings() 获取所有的同级元素
查找除了自己以外的所有同级元素

$('.item5').siblings().css('background','green');

5.Parent() 获取父元素

$('.item5').parent().css('background','pink');

6.Parents() 获取先辈元素
如果不传参数 获取所有的先辈元素 通过传参获取指定的先辈元素

$('.item5').parents('.content').css('border','1px solid red');

7.Find() 在父元素中查找指定的子元素
如果不传参数没有效果，必须要传参数

$('html').find('.item5').css('border','1px solid red');

---

四.元素操作

1.Css设置

使用是css()方法来操作样式

一次设置一个样式

格式： $(el).css(‘样式的key’,’设置的值’)

$('.box').css('width','200px');
$('.box').css('height','200px');
$('.box').css('background-color','red');

一次设置多个样式

格式： $(el).css({})

$('.box').css({width:'200px',height:'200px',backgroundColor:'green'});

---

2.文本操作

结果和原生的innerHTML innerText 一样
HTML 会解析标签，HTML 会连标签一起获取
innerHTML==>html()

Text 获取纯文本,Text 不会解析标签

innerText==>text()

---

3.表单值的操作

Value属性====》val()

$('input').val()

---

4.属性操作

Attr() 获取属性的值 传一个参数

console.log($('img').attr('src'));

设置属性的值 一次设置一个

$('img').attr('alt','这是');

一次设置多个属性的值

	$('img').attr({alt:'这个老师真漂亮',title:'你认识这个老师'});

removeAttr() 删除属性

$('img').removeAttr('src');

---

5.类class属性的操作：

addClass() 给.box追加类名 在原来的基础是追加 不会删除原来的类名

$('.box').addClass('item1 item2');

removeClass() 删除类名 如果不传参数会将所有的类名都删除掉

$('.box').removeClass('item2'); 

---

五.相关尺寸

1.获取元素相对文档的偏移位置 Offset()

---

返回的是一个包含top 和left属性的对象

console.log($('.box1').offset());
console.log($('.box2').offset());

---

2.获取文档的滚动距离

---

获取文档的滚动距离

ScrollTop()获取文档的垂直方向的滚动距离 返回的是一个数字

console.log($(document).scrollTop());

scrollLeft()文档的水平方向的滚动距离

console.log($(document).scrollLeft());

---

3.获取元素的宽度和高度

---

如果是多个元素对象获取的是第一个元素的宽高
元素的宽度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())

---

六.事件

---

基本绑定方法

格式：

//$(‘el’).事件类型()
$('button').click(function(){
		alert('ok');
	})

---

On方法

$('button').on('click',function(){
		alert('我是on');
	})

解除绑定

 $('button').off();

常用的事件：
Click
Mouseover
Mouseout
Mousemove

Focus
Blur
Change
Submit 当表单提交时自动触发 绑定给form标签

---

事件对象：

---

当触发某一个事件时 调用回调函数的时候，系统会自动传入一个event对象

Event主要记录了键盘和鼠标的信息

鼠标相对于浏览器窗口的位置
clientX
clientY

鼠标相对于文档的位置
pageX
pageY

---

事件冒泡

当父元素和子元素设置了相同的事件，在出发子元素的事件时会导致父元素的事件并发，因其页面效果混乱

解决办法：给事件最后添加return false

默认行为
例如a标签在没有绑定认任何事件时 会跳转 这个就是元素的默认行为

一般情况下 元素会先执行自定义的事件然后执行默认的行为

我们可以在自定事件最后添加return false阻止默认行为的执行
没加return false前

点击中间的圈

加上return false后，在点击中间的圈

---

七.节点操作

创建元素节点
将新元素插入到页面中

1.Append()将元素插入到指定元素内部的尾部

$('button').eq(0).click(function(){
			// 调用创建元素的函数
			var el = createEl();
			$('.wrap').append(el);
		})

插入前

插入后

---

2.Prepend()将元素插入到指定元素内部的前面

$('button').eq(1).click(function(){
			// 调用创建元素的函数
			var el = createEl();
			$('.wrap').prepend(el);
		})

插入前

插入后

---

3.After()将元素插入到指定元素外部的后面

$('button').eq(2).click(function(){
			var el = createEl();
			$('.wrap').after(el);
		})

插入前

插入后

每次都是插入指定元素后面的第一个

---

4.Before()将元素插入到指定元素外面的前面

$('button').eq(3).click(function(){
			var el = createEl();
			$('.wrap').before(el);
		})

插入前

插入后

也是每次在指定元素前面第一个插入

---

5.Empty()清空wrap内部的所有子元素

$('button').eq(4).click(function(){
			$('.wrap').empty();
		})

请空前

清空后

---

6.Remove()删除指定的元素

$('button').eq(5).click(function(){
			$('.wrap').remove();
		})

删除前

删除后

---

7.clone克隆(复制)将第一个button复制 并插入到wrap内；（不加true只是复制按钮，没有具体功能）

$('button').eq(6).click(function(){
			var newbtn = $('button:first').clone(true);
			$('.wrap').append(newbtn);
		})

克隆前

克隆后

加true有插入功能

可以传参数 默认是false 只克隆单纯的元素
如果传参为true 会将元素的事件一起复制

---

---

注意：如果直接将页面中的元素 插入指定位置，那么会讲原来的元素剪切掉

$('button').eq(7).click(function(){
			$('.wrap').append($('button').eq(0));
		})

插入前

插入后

直接把原来的元素剪切然后放进来，所以功能都能实现

---