jQuery 是 JavaScript 的一个函数库。方便、主流
jQuery的开发步骤：
（1） 导入jQuery 库
（2） 在
<script src="../js/jquery-3.1.0.min.js" type="text/javascript"></script>
<script>
$(function(){
写jQuery代码；
});
</script>
（3）jQuery对象 vs DOM对象
1.jQuery对象 和 DOM对象 不可混用，不能使用另一方的属性和方法
2.jQuery对象 是一个 DOM数组对象。所以可以用 下标的方式 转为 DOM对象
var $btn = $("button");
var btn = $btn[0];
3.jQuery对象 使用 $() 包装 DOM对象后 产生的对象
例：进行遍历的时候（jQuery对象 遍历的方式使用 each，在each 内部的 this 是正在得到的 DOM 对象，而不是一个 jQuery对象。 ）
$("select : seclected").each(function(){
//alert(this.value); 如果想用jQuery的属性和方法，用$() 包装起来。
alert($(this).value);
});
（4）jQuery 选择器（综合使用，威力巨大）
选取被选中的 select 的option 需要使用 选取子节点的方式
$("select[name="test"] :selected").each(function(){ //注意绿色和橘色之间是有空格（黄色）的
//jq代码
});
选择器搞不定，可以借助方法
（5）jQuery对象的方法
一、格式：$(selector).action();
$ : jQuery的缩写
selector: 选择器
action(): 对元素的操作
<script>
$(document).ready(function(){
alert("jQuery代码");
});
</script>
二、获取元素的值和修改元素的内容
<script>
$(document).ready(function(){
/*
* 获取元素的值（不带参）
* */
//js
var jsValue = document.getElementById('first').innerHTML;
var jsValue1 = document.getElementById('first').innerText;
//jq
var jQValue = $('#first').html();
var jsValue = document.getElementById('first').innerHTML;
var jsValue1 = document.getElementById('first').innerText;
//jq
var jQValue = $('#first').html();
var jQValue1 = $('#first').text();
/*
* 设置元素的内容（带参）
* */
//js
document.getElementById('first').innerHTML = '修改内容';
document.getElementById('first').innerHTML = '<h2>添加的h2标签</h2>';
//jq
$('#first').html('修改内容');
$('#first').html('<h2>添加的h2标签</h2>');
});
</script>
三、onload和ready的对比
jq: 文档就绪函数，为了防止文档在完全加载（就绪）之前运行jQuery代码
$(document).ready(function(){
//jq代码；
});
js:
window.onload = function(){
//js代码
}
区别（面试可能会问）：
1、加载时间不同。
ready：只要页面的DOM加载完成就可以完成。
onload：包括页面所有资源（图片、js、dom树等）加载完成之后执行。
2、编写的个数不同。
onload：只能写一个，执行一次，后面会覆盖前面，以最后一个为准。
ready：可以同时编写多个，并且每个都可以得到执行。
3、简写形式。
onload：没有简写形式。
$(document).ready()：等价于 $(function(){})
ps:
有一个大型的图库网站，为网页中所有图片添加某些行为，例如单击图片后让它隐藏或显示。
如果使用window.onload方法来处理，那么用户必须等到每一幅图片都加载完毕后，才可以进行操作。
如果使用jQuery中的$(document).ready()方法来进行设置，只要DOM就绪时就可以操作了，不需要等待所有图片下载完毕
例：
<script>
//1. js(只能写一个)
window.onload = function(){
alert(1);
}
window.onload = function(){
alert(2);
}
window.onload = function(){
alert(3);
}
window.onload = function(){
alert(1);
}
window.onload = function(){
alert(2);
}
window.onload = function(){
alert(3);
}
//2.jq（可以写多个）
$(document).ready(function(){
alert(4);
});
$(document).ready(function(){
alert(5);
});
$(document).ready(function(){
alert(6);
});
$(function(){
alert(7)
});
alert(4);
});
$(document).ready(function(){
alert(5);
});
$(document).ready(function(){
alert(6);
});
$(function(){
alert(7)
});
</script>
四、jQuery对象(jq对象是个数组)
1. $ == jQuery console.log(jQuery); console.log($); 一样结果
例：
console.log(jQuery);
console.log($);
var jqObj = $('p');
var jqObj = jQuery('p');
2. js 和 jq 对象的相互转化
注: 原生js代码不能和jQuery混合使用
原生DOM对象是可以和jQuery对象互相转变的
例：
// 先获取
var jqObj = $('p');
var jsObj = document.getElementById('two'); //如果是集合的话不能转，集合里的对象可以转
// 再转换
var newjqObj = $('jsObj'); //原生DOM对象 转变为 jQuery对象 使用 $() 进行包装
var newjsObj = jqObj.get(0); //jQuery对象 转变为 原生DOM对象 通过数组的下标
// 输出
console.log("-----------"+jqObj);
console.log("-----------"+jsObj);
console.log("-----------"+newjqObj);
console.log("-----------"+jqObj);
console.log("-----------"+jsObj);
console.log("-----------"+newjqObj);
console.log("-----------"+newjsObj);
3. 放弃$，避免多库冲突
可以重新赋个值，$$ 就相当于 jQuery
var $$ = jQuery.noConflict();
var jqObj = $$('p');
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery对象的转换</title>
<script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p id="p4">段落4</p>
</body>
<script>
console.log(jQuery);
var $$ = jQuery.noConflict();
var jqObj = $$('p');
var jsObj = document.getElementById('p4');
var newjqObj = $$(jsObj);
var newjsObj = jqObj.get(0);
console.log("------------"+jqObj);
console.log("------------"+jsObj);
console.log("------------"+newjqObj);
console.log("------------"+newjsObj);
/*
* $ == jQuery
*
* */
/*
* 总结：
* 1. 原生js代码不能和jQuery混合使用
* 2. 原生DOM对象是可以和jQuery对象相互转变的。
* */
$(function(){
/*
* 1.jQuery对象转变为原生DOM对象
* */
var con = $('p').get(1).innerHTML;
console.log(con)
/*
* 2.原生DOM对象转变为jQuery对象
* */
var con4 = document.getElementById('p4');
console.log($(con4).html());
});
</script>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery对象的转换</title>
<script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p id="p4">段落4</p>
</body>
<script>
console.log(jQuery);
var $$ = jQuery.noConflict();
var jqObj = $$('p');
var jsObj = document.getElementById('p4');
var newjqObj = $$(jsObj);
var newjsObj = jqObj.get(0);
console.log("------------"+jqObj);
console.log("------------"+jsObj);
console.log("------------"+newjqObj);
console.log("------------"+newjsObj);
/*
* $ == jQuery
*
* */
/*
* 总结：
* 1. 原生js代码不能和jQuery混合使用
* 2. 原生DOM对象是可以和jQuery对象相互转变的。
* */
$(function(){
/*
* 1.jQuery对象转变为原生DOM对象
* */
var con = $('p').get(1).innerHTML;
console.log(con)
/*
* 2.原生DOM对象转变为jQuery对象
* */
var con4 = document.getElementById('p4');
console.log($(con4).html());
});
</script>
</html>
