JQuery
======


JQuery是一个高效的JS库，用于操作dom对象。 设计宗旨: write less do more, 是JavaScript Query的缩写。

DOM操作， 事件处理等等。

优点： 轻量级，跨浏览器兼容，链式编程。

最新版本3.x (3.7.0)


是js功能封装，功能非常强大。例如js中一次修改div的多个值 

JQery 是 javascript 功能封装，功能非常强大。官方网站：https://jquery.com/



例如js中一次修改div的多个值 

::

  $('div').css('backgroud-color', 'blue').width(150).height(100).html("hello");
  
  
  
 

hello
------
<script src="juery.min.js"></script>

$('div').hide();


1，等在正文加载完成后在执行：

   $(document).ready(function(){
	 $('div').hide()
   }

2，jQurey入口函数

	$(function(){
		//页面加载完成后执行。
	}
3， $是JQuery的别称。可以认为是JQuery的顶级对象。
	jQuery(function(){
		//页面加载完成后执行。
	}
	
4， $('div') 获取到的是jQuery对象，与DOM对象不同。只能用Jquery方法。


5， DOM与JQuery互转

* 使用$符号将DOM对象转换为JQuery对象。$(myDom)
* JQuery对象转换为DOM对象$('div')[0] 或 $('div').get(0)

console.log() 输出到控制台。
	

选择器
-------


选择DOM元素，然后进行操作。和css有点类似。

 $('选择器')
 
* ID选择器    获取指定ID的元素， 例如 $("#id")
* 类选择器   获取指定class的元素，例如 ：$(".classname")    
* 标签选择器 获取同一类标签的所有元素 $('div')
* 并集选择器  获取多个元素， 例如$('div, li')
* 交集选择器  $('li.p')

* 子代选择器 下一代，使用大于号， 例如 $('ul>li')

* 后代选择器 子代及更下一代，使用空格，例如： $('ul li')



$(document) 表示所有元素。

* ID选择器， 例如选取 id="d123" 的元素：$("#d123"), 相同的 id 值只能在文档中出现一次。id以字母开头
 

方法 :

* siblings 兄弟元素，除了自身
* nextAll 自身后面的兄弟元素。
* prevAll 自身前面的兄弟元素。
* eq(index) 某一个。index指定索引。
* hasClass  检查当前元素是否是某个特定的类，如果有，返回true

class选择器
-------------

class 选择器选取带有指定 class 的所有元素。 class 引用 HTML 元素的 class 属性。

例如有多个输入框，为相同的class，可以同时选择，然后循环获取数据。


例如 ::

	var name = $('.class_name').val();
 
获取class名称为inputa的标签，并将其数据放到numArr数组当中 ::

	var numArr = [];
	var objs = $('.inputa');
	console.log(objs)
	for (let i = 0; i < objs.length; i++) {
		console.log(objs.eq(i).val()); // 将文本框的值添加到数组中
		numArr.push(objs.eq(i).val());
	}
	console.log(numArr)
	

筛选选择器
------------

使用冒号":"

* first 第一个  $(ul:first)
* last  最后一个 $(ul:last)
* eq(index)  等于        $(ul:eq(2)) 第二个。 索引号从0开始。
* odd 奇数
* even 偶数  

hasclass("aaa") 是否有aaa 类名。


父子节点
----------

* 父节点 parent()
* 子节点 children()
* 所有后代选择器 find()

 
隐式迭代
----------

把匹配的所有元素内部进行循环，调用其方法。

修改背景颜色，可以多个对象一起设置。可以认为是隐式迭代。
::

   $('div').css("background", "blue")
   $('p').css("color", "red")||||||| .r1796

css方法(样式操作)
------------------

* css("color") 返回属性值。

* css("color", "red") 设置

* css({width:400, height:300, color: "red"})   以对象方式来设置


* addClass("current") 增加类名, current为类名，和相同名字的css绑定。

* removeClass("current") 删除类名。

* toggleClass("current")   切换类名。


示例
------

* 当前元素高亮，其他元素清除高亮

::

		// 隐式迭代，所有的按钮均注册click事件函数。
		$("button").click(function(){
			$(this).css("background", "red");
			$(this).siblings("button").css("background", "");
		})
		




显示及动画
------------

* show 显示

* hide 隐藏 可以动画效果。
    
	hide(1000)
	
* toggle  切换


滑动

* slideDown() 下拉滑动

* slideUp() 上拉滑动

* slideToggle 切换滑动



* hover([over],out) 鼠标经过和离开的事件切换 

::

  $("div").hover(function(){}, 
	function(){})

* stop() 停止动画， 动画默认有排队，使用stop()来停止动画。

淡入淡出

* fadeIn()  淡入 

* fadeOut() 淡入出

* fadeTonggle()  淡入淡出切换

* fadeTo 渐进调整透明度 fadeTo(1000, 0.8) $("div").fadeTo(1000,0.8)


* animate 自定义效果  $("div").animate({left:200,top:100})



参考资料 
---------


* jquery官方：https://jquery.com/