想让你的页面动起来吗？一起来学 JS和JQUERY 吧！（提高篇）

一、 获取 html 标签对象

1、js获取 html 标签对象
	1）根据选择器获取
	（1）根据id选择器获取唯一对象
		var e = document.getElementByld(idStr);
	（2）根据class选择器获取对象数组
		var arr = document.getElementsByClassName(classStr);
	（3）根据标签选择器获取对象数组
		var arr = document.getElementsByTagName(tagName);
	（4）根据表单元素的name属性获取对象数组
		var arr = document.getElementsByName(formElName);
	2）根据家族关系获取  var ref = ...;
	（1）获取子元素数组：var childs = ref.children;
	（2）获取兄弟元素：
		var prevEl = ref.previousElementSibling;
		var nextEl = ref.nextElementSibling;
	（3）获取父级元素：var parentEl = ref.parentElement;
	
2、jquery 获取 html 标签对象
	1）根据选择器获取 ：
		var $obj = $(selector);
	2）根据家族关系获取  var $ref = ...;
	（1）获取子元素数组：
		var $objChilds = $ref.children(selector);
		var $descendents = $(document).find(selector);//后代检索
	（2）获取兄弟元素：
	前置元素：
		var $bigBros = $ref.prev(selector);//前一个（带有selector选择器）的元素
		var $bigBros= $refprevAll([selector]);//前所有（带有selector选择器）的元素
		var $bigBros= $refprevUntil([selector]);//前n个（到selector结束之前）的元素
	后置元素：
		var $littleBros = $ref.next(selector);//后一个（带有selector选择器）的元素
		var $littleBros= $refnextAll([selector]);//后所有（带有selector选择器）的元素
		var $littleBros= $refnextUntil([selector]);//后 n 个（到selector结束之前）的元素
	其他兄弟：
		var $otherBros = $ref.siblings([selector]);//除了自己以外的带有selector的元素
	（3）获取父级元素：
	父级元素：
		var parent = $ref.parent([selector]);
	父辈元素：
		var parent = $ref.parents(selector);

二、创建 html 标签对象

1、js创建 html 标签对象
		var newEl = document.creatElement(elName);
2、jquery 创建 html 标签对象
		var $newEI = $(`<div id="..." clas="..." ...></div>`);

三、操作 html 标签对象

1、js操作 html 标签对象	var el = ...;
	1）操作值
	（1）表单元素的值：var val = =el.value;	el.value = new_value;
	（2）非表单元素的文本：var txt = el.innerText;	el.innerText = new _text;
	（3）非表单元素的内部结构：var srtuctor = el.innerHTML;	el.innerHTML = new_srtuctor ;
	2）操作属性
	（1）var attrVal = el.attr;		el.attr = new_attr;例：el.type="text";
	3）操作样式
	（1）具体样式：el.style.xxxYyy = "value";
	（2）类选择器：
		el.className = "cname";
		el.classList .add("cname,...");
		el.classList.remove("cname,...");
		var bool = el.classList.contains("cname,..");
		el.classList.toggle(cname);//切换
	4）操作子元素
	（1）添加子元素：el.appendChild(tagEl);
	（2）删除元素：el.remove();
	5）事件、事件函数、事件绑定事件函数
		a.事件
		（1）onclick
		（2）onkeydown
		（3）onkeyup
		（4）onkeypress
		（5）onfocus
		（6）onblur
		（7）onmouseenter	onmouseover
		（8）onmouseleave	onmouseout
		（9）onmousemove
		（10）onscroll
		b.事件函数：就是没有参数和返回值的普通函数
		c.如何捆绑：标签对象.事件=函数；
2.jquery操作 html 标签对象	var $el = ...;
	1)操作值
	（1）表单元素的值：var val = $el.val() ;	$el.val(new_value);
	（2）非表单元素的文本：var txt = $el.itext;	$el.text(new_tet);
	（3）非表单元素的内部结构：var srtuctor = $el.html;	  $el.html(new_srtuctor );
	2)操作属性
	（1）var attrVal = $el.attr("attr_name");		$el.attr(attr_name,new_attr);
	3)操作样式
	（1）具体样式：
		$el.css("cssName","cssValue");
		$sl.css({"cn1":"cv1",..."cnn":"cvn"});
	（2）类选择器：
		var bool = $el.hasClass("classSeclect");
		$el.addClass("classSelector");
		$el.removeClass("classSelector");
		$el.toggleClass("classSelector");//有则删除，无则增加
	4)操作子元素
	（1）添加子元素：$el.append(tagEl);
	（2）删除元素：$el.remove();
	5)事件、事件函数、事件绑定事件函数
		a.事件函数
		（1）click
		（2）keydown
		（3）keyup
		（4）keypress
		（5）focus
		（6）blur
		（7）mouseenter	mouseover
		（8）mouseleave	mouseout
		（9）mousemove
		（10）scroll
		b.事件函数：就是没有参数和返回值的普通函数
		c.如何捆绑：
		静态绑定：绑定之前必须要有标签
		（1）$(selector).click(function);
		（2）$(selector).hover(enterFunc,leaveFunc);
		动态绑定
		（3）$(document).on(eventName,selector,eventFunc);