jQuery的基础入门

一 认识jQuery

  Query是JavaScript Query的缩写形式。jQuery是一款非常优秀的JavaScript库.jQuery的设计理念是“Write Less, Do More“，即写的更少，做的更多！使用jQuery可以大大简化我们的JS代码，从而提高开发效率。
  你可以从jQuery官方网站下载需要的版本，然后从本地引入到自己的项目，也可以使用CDN引入。
  引用方法如下：

<script src="jquery-1.12.4.js"></script>
<!--本地引入-->
 <script src="//code.jquery.com/jquery-1.12.4.js"></script>
<!--CDN引入-->

二 jQuery核心

   1， 符号$
jQuery实际上是一个函数对象。事实上，jQuery通过全局变量jQuery引用该函数对象，$符号是jQuery变量的一个别名，为了写的更少，我们通常都使用$符号表示该对象。

window.jQuery === window.$; //true
 jQuery === $;// true
 typeof($);// 'function'

  2，参数
  $核心函数可以接收3种类型的参数，分别是函数引用、字符串、DOM对象。
  3，静态方法

三 jQuery 属性和节点

  1，选择器

	$('p');//标签选择器
	$('.class');//类选择器
	$('#id');//id选择器
	$('[type=text]');//属性选择器
	$('input[type=email]');//组合选择器
	$(#id p);//后代选择器
	$(#id p:first-child);//筛选选择器
	//....这里不一一列举了

另外jQuery还提供了一些通过层级结构查找元素的方法。

	$('div').find('span');//查找div内部的span，等同于$('div span')
	$('li').first();//获取匹配的元素中的第一个
	$('li').last();//获取匹配的元素中的最后一个
	$('div').next();//获取所有匹配到的div的下一个兄弟元素的集合
	$('div').prev();//获取所欲匹配到的div的上一个兄弟元素的集合
	$('div').parent();//获取匹配到的div的共同父元素
	$('div').children();//获取div的子元素集合
	$('div').siblings();//获取div的兄弟元素集合

  2，属性操作
  获取DOM元素之后，jQuery把它们包装成jq对象，然后你就可以通过jQuery提供的方法修改相应的DOM元素了，包括CSS，文本，属性节点，HTML结构等等。
  属性及属性节点相关：

	$('div').attr('name','test');//设置属性名：name，属性值：test
	$('div').attr('name');//获取属性name的值
	$('div').removeAttr('name');//删除属性name
	
	$('div').prop('name','test');
	$('div').prop('name');
	$('div').removeProp('name');
	//prop的用法和attr一模一样，唯一不同的是prop既可以操作DOM元素的属性，也可以操作它的属性节点

  当属性没有被显示的设置时，通过attr()方法获取将返回undefined，而prop()方法可以返回true或者false，所以，如果你要检索和更改DOM属性，比如元素的checked，selected，或disabled状态，推荐使用prop()方法，其他时候都使用attr方法。

  class类相关：

	$('div').addClass('test');//添加类，如需添加多个类，使用空格隔开即可
	$('div').removeClass('test');//删除类，如需删除多个类，也用空格隔开即可
	$('div').toggleClass('test');//切换类，如果DOM元素已经有该类了，那么就删除，如果没有则添加

  文本及结构相关：

	$('div').html();//获取第一个匹配到的div的内容
	$('div').html('<p>我是段落</p>');//设置所有匹配到的div的内容
	$('div').text();//获取所有匹配元素的文本内容
	$('div').text('hello');//设置所有匹配到的div的文本内容
	$('input').val();//获取匹配元素value值
	$('input').val('hello');//获取匹配元素value值

  css相关：

	$('div').css('background-color','red');//设置元素的单个css属性
	$('div').css({
	    width:'200px',
	    height:'200px',
	    background-color:'red'
	});//通过对象设置多个css属性

  3，节点
  jQuery也提供了节点的增、删、改、查相关方法。

	$("div").append("<p>Hello</p>");//在div内部的末尾插入元素
	$("div").prepend("<p>Hello</p>");//在div内部的开头插入元素
	$("div").after("<p>Hello</p>");//紧挨着div的后面插入元素
	$("div").before("<p>Hello</p>");//紧挨着div的前面插入元素
	$("div").remove();//删除div元素，但是会保留文本
	$("div").empty();//清空div中的所有内容