jQuery 基础入门

JavaScript框架简介

jQuery的优势

轻量级 （Lightweight）
强大的选择器
出色的DOM操作封装
可靠的事件处理机制
出色的浏览器兼容性
jQuery 理念: 写得少, 做得多

jQuery的使用

下载：http://jquery.com提供了最新的jQuery框架下载。通常只需下载最小的jQuery包（Minified）即可。目前最新的版本jquery-1.12.3.min.js文件只有55.9 KB
引用：

将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。

第一个jQuery程序

* document是dom对象，$(dom)把dom对象包起来变成jquery对象
* 调用jquery的ready（）方法，该方法是文档加载完成后调用
* 接收一个回调函数参数，类似dom时间中的onload方法
* 监听类似于多个线程在监听,谁先调用未知

jQuery 对象

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#tab”).html();
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法
【编程习惯】建议约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery 对象
var variable = DOM 对象

jQuery 对象转成 DOM 对象

jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM方法的时候, 有如下两种处理方法:
(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.
$("#msg")[0]
(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象
$("#msg").get(0)

DOM 对象转成 jQuery 对象

对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象. 例如：
$(document.getElementById(“msg”))

转换后就可以使用 jQuery 中的方法了

jQuery对象与dom对象的转换举例

以下几种写法都是正确的：$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用jQuery的方法 

jQuery的选择器

基本选择器

基本选择器示例(修改样式)

可以放入多个dom对象

一个参数获取属性值 两个参数设置属性值
通过id选择器调用可以设置多个选择器用，隔开。 放入数组中 jquery设置样式不需要加px
注意驼峰命名

/*************基本标签*****************************************/
				//一个参数获取属性值 两个参数设置属性值

				//通过id选择器调用可以设置多个选择器用，隔开。 放入数组中 jquery设置样式不需要加px
				$("#nav").css("width", 300)
					.css("height", 300)
					.css("background-color", "#ccc");

				$("#nav,#nav2").css({
					width: 500,
					height: 500,
					backgroundColor: "red" //注意驼峰命名
				});

				//通过标签选择器 自动循环赋值
				$("li").css({
					color: "blue"
				});
				//相当于
				var lis = document.getElementsByTagName("li");
				for (var i = 0; i < lis.length; i++) {
					lis[i].style.color = "pink";
				}

				//类选择器 *相当于选择所有
				$(".test").css({
					color: "black"
				});
				//相当于
				var lis = document.getElementsByClassName("test");
				for (var i = 0; i < lis.length; i++) {
					lis[i].style.color = "yellow";
				}

				//统一可以使用	document.querySelectorAll()

				//选择所有标签
				$("*").css({fontSize:20});

层次选择器

				/*************层级标签*****************************************/
				
				$("#myTalbe tr:first").css({backgroundColor:"red"});
				// $("#myTalbe tr:eq(0)").css({backgroundColor:"#abc"});
				$("#myTalbe tr:gt(0):even").css({backgroundColor:"#eee"});
				$("#myTalbe tr:gt(0):odd").css({backgroundColor:"#ccc"});

层次选择器示例

过滤选择器

基本过滤选择器

				/*************层级标签*****************************************/
				$("li:first").css({color:"red"});//所有li标签第一个标签
				$("li:last").css({color:"red"});//所有li标签最后一个标签
				$("li:not(.test)").css({color:"red"});//除了class为test的标签
				$("li:even").css({
					color: "red"
				}); //所有偶数标签
				$("li:odd").css({
					color: "green"
				}); //所有奇数标签

基本过滤选择器示例

内容过滤选择器

内容过滤选择器示例

可见性过滤选择器示例

可见性过滤选择器示例

属性过滤选择器

子元素过滤选择器