周知的jQuery基本操作

前言

jQuery官网上最亮眼的有这么一句英文"write less,do more."，翻译就是“写的少，做的多”，通俗讲就是人狠话不多，这个点在它的使用上有很好的体现，像使用原生操作DOM的接口一般单词很长，不方便记忆，而jQuery的DOM操作极大地简化。因为jQuery中有很多可复用函数，在不断的更新中，积累了很多插件库，极大地简化了JavaScript的开发
下面来看看

选择器
核心全局函数
$() === jQuery()

ƒ ( selector, context ) 作用：传参，获取元素

传参传什么？
1.css selector
2.jquery unique selector
3.null undefined ‘’ 容错机制:不报错
4.dom
5.$(function(){})
6. selector和context

		<div class="demo" id="div" data-qwe="ya">div</div>
		<div class="demo" id="div" data-qwe="ya">div</div>
		<div class="wrapper" data-qwe="ya96">
			<ul>
				<li>1</li>
				<li>2</li>
			</ul>
		</div>
		<ul>
			<li>1</li>
			<li>2</li>
		</ul>
		<script src="jquery-1.11.3.js"></script>
		<script>
//			1.css selector
			$('.wrapper~ul').css({backgroundColor:'red'});
		
//			2.jquery unique selector  
			$('div[data-qwe$=123]').css({backgroundColor:'orange'})

//			3.null undefined ''
			var demo = undefined;
			demo.remove();
			$('demo').css({backgroundColor:'red'});
			
//			4.dom
			var demo = document.getElementsByClassName("demo")[0];
			$(demo).css({width:'100px',height:'100px',backgroundColor:'red'});

//			5.$(function(){}) 
			window.onload = function(){
			}
			DOMContentLoaded
			$(function(){			
			})
			$(document).ready()
				
//			6. selector和context
			$('ul','.wrapper').css({width:'100px',height:'100px',backgroundColor:'red'});
			$('.wrapper>ul')
			console.log($('.demo'));
		</script>

层级选择器

元素都是以树结构进行排列的。每一个节点都有父节点，子节点，兄弟节点。选择时可将这种层级关系作为选择的条件。
$(“parent > child”) : 匹配父元素parent的所有直接子元素child
$(“parent descent”) : 匹配parent后面的所有后代
$(pre + next) : 选择pre元素后面的第一个兄弟节点
$(pre ～ siblings) : 选择pre后面的所有兄弟

Jquery精髓

1.链式调用

$('div').find('h3').eq(2).html('Hello').end().eq(0).html('World');

2.循环操作
3.选择元素

筛选元素的进一步方法

• get()
  返回值为原生的dom节点
  参数是索引，可以是正数和负数
  也可以不写参数：返回的是真数组
  将jQuery对象转换为原生DOM对象
• eq()
  返回值为jquery对象
  参数是索引，可以是正数和负数
  也可以不写参数：返回为空

jQuery对象和JS对象相互转换

//将jQuery对象转换为JS对象
const $obj=$("*");
$obj[0];  //JS对象
$obj.get(0);  //JS对象
$obj.eq(0)  //jQuery对象

//将JS对象转换成jQuery对象
const obj=document.getElementsByTagName("*");
$(obj);  //jQuery对象