JQ的浅入浅出

什么是jQuery?

1. jQuery的官网 http://jquery.com/
2. jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。
3. js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。

总结： 我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

jQuery入口函

//第一种写法$(function() {    });
//第二种写法$(document).ready(function() {    });​

jQuery入口函数与js入口函数的对比：

1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

jQuery 选择器

1.jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
2.jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
元素选择器：

		

		$('*')  //获取所有元素
		$(this)  //获取当前元素 ----   点前面那个就是了
		$('li .children') // li 里面拥有的.children的类名
		$('ul:first') // 选取第一个ul元素 元素下标是从0开始
		$('ul li:first') //  选取ul的儿子li的第一个元素
		$('ul li:first-child') // 选取ul下的li的  每  一个第一个元素
		$("[href]") //选取带有 href 属性的元素
		$("li:even")//选取偶数位置的 <tr> 元素
		$("li:odd")//选取奇数位置的 <tr> 元素

语法	描述
$(this)	获取当前元素 ---- 点前面那个就是了
$(‘li .children’)	li 里面拥有的.children的类名
$(‘ul li:first’)	选取ul的儿子li的第一个元素
$(‘ul:first’)	选取第一个ul元素 元素下标是从0开始
$(‘ul li:first-child’).css(‘color’,‘red’)	选取ul下的li的每一个第一个元素
$("[href]")	选取带有 href 属性的元素
$(“li:even”)	选取偶数位置的
$(“li:odd”)	选取奇数位置的
$(’*’)	获取所有元素

元素 元素

jQuery的基本效果

使用jQuery的基本效果：

语法	描述
Show()	把隐藏的显示
Hide()	把显示的隐藏
Toggle()	切换显示和隐藏
slideUp()	上滑
slideDown()	下滑
slideToggle()	切换滑动

<style>
   #box{
       width: 200px;
       height: 200px;
       background-color: hotpink;
       display: none;
   }
</style>
<p>
   <button id="xs">显示</button>
   <button id="yc">隐藏</button>
   <button id="qh">切换</button>
   <button id="xh">下滑</button>
   <button id="sh">上滑</button>
   <button id="qhh">切换滑</button>
</p>
<div id="box"></div>

$(function () {
   $("#xs").click(function () {
      $("#box").show(1000);//显示对角线动画
   });
  $("#yc").click(function () {
     $("#box").hide(1000);//隐藏对角线动画
  });
  $("#qh").click(function () {
     $("#box").toggle(1000);//切换对角线动画
  });
  $("#xh").click(function () {
    $("#box").slideDown(1500);//下滑动画
  });
  $("#sh").click(function () {
    $("#box").slideUp(1500);//上滑动画，先显示再上滑
  });
  $("#qhh").click(function () {
    $("#box").slideToggle(1500);//切换滑动
  });
});

jQuery对象转换成DOM对象

1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
4. DOM对象与jQuery对象的方法不能混用。

DOM对象原声JS获取元素的的写法:

//原声JS获取元素的的写法	
window.onload = function () {
   var demo = document.getElementById("dem	o");
   alert(demo.innerHTML);
}

jQuery对象转换成DOM对象：【用[0]或者get(0)来转换】（面试题）

 //alert($("#demo").html());这个是JQ获取文字内容的写法
  //alert($("#demo").innerHTML);这样不对，因为innerHTML是DOM对象
  // alert($("#demo")[0].innerHTML);这样就把JQ对象转换为了DOM对象，[0]就可以
  alert($("#demo").get(0).innerHTML);//这样也可以,JQ对象转换为了DOM对象,利用get方法也可以转换。get(0)