一、 jQuery简介

• 一个优秀的 Javascript 框架
• 兼容多浏览器的轻量级 Javascript 库，还兼容各种浏览器
• 免费、开源
• 核心理念是 write less，do more、

版本

jQuery1.x：经典版本，兼容 IE6，7，8。
jQuery2.0：改进版本，及后续版本将不再支持 IE6，7，8 浏览器。

功能

• 更方便地处理 HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 Ajax 交互
• 语法设计可以使开发者更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能

jQuery文件

jQuery1.x.js：jQuery 源文件；学习 jQuery 或者 debug 的时候使用。
jQuery1.x.min.js：jQuery 压缩之后的文件；正常项目中使用

二、 使用jQuery

• 引入文件：
  <script type="text/javascript" src="/static/js/jQuery-1.11/jquery-1.11.3.min.js"></script>

三、 jQuery对象

• jQuery 对象其实就是对 DOM 对象进行了包装
• 但是我们调用 jQuery 对象的方法，事实上底层代码还是操作的是 DOM 对象。

$ 表示 jQuery对象，即 $ === jQuery

对象的转换

            var btn = document.getElementById("btn"); //找页面元素 JS   DOM对象
            var $btn = $('#btn'); // 找页面元素 jQuery
            console.log($btn);

            // DOM对象转成jQuery对象
            console.log($(btn));

            // jQuery对象转成DOM对象这个很少用
            console.log($btn.get(0));

            //尽量使用jQuery方法操作页面元素，绑定事件等等.
            console.log($ === jQuery);

四、 jQuery常用方法

$('*')   // 通配选择全部元素
$('#id属性值')
$('元素名')
$('.class属性值')
$('[属性名=属性值]')
$(':selected')

----  常用方法
$('#msg').html()   // 获取元素的内容
$('li').size()         // 获取元素数量
$('.selected').css('color','red');         // 获取元素样式，设置或修改样式（找到多少改多少）
$('#msg,.selected').size()    // ,相当于或，相加
$('#gender').val()     // 获取value值

----- jQuery 层次获取器
$('ul li')    // 获取所有ul下的所有li元素
$('#myul > li')    // 获取id为myul下的所有子li元素
$('label ~ input')    // 获取所有label元素后的input元素
$('label + input')    //   获取紧跟着label元素后的input元素

--- jQuery 过滤选择器
$('input[name=id]').val()    // 获取隐藏 input 的 value 属性值,根据name找
$('option:selected')    // 获取选中的 option

--- jQuery 事件绑定
<button onclick=”clickT()”></button>            // 标签中使用on事件属性    
$('#btn1').click(function(){...})    // 点击事件    （批量绑定）

--- jq DOM 操作
$('#div1').append($('#span');      // 内部插入节点(插入子节点)   
$('#after').after($('#span'));           // 外部插入节点(插入兄弟节点)
$('#ul').empty();          // 断子绝孙
remove | detach()   // 自杀,儿子孙子没了

--- jq 属性操作的方法
$('#btn').removeClass('other')      // 移除class
$('#btn').addClass('other');          // 添加class
$('#btn').toggleClass('other');     // 交替执行移除添加class
$('#btn').hasClass('other')          // 是否有该class值


$('#gender').css('color')    // rgb值
$('#gender').attr('style')    // 获取样式
$('#gender').attr('checked')   // 获取checked属性     checked
$('#gender').prop('checked')     // 获取checked属性 true 更形象   (prop 方法针对 checked 属性 selected属性)
$('#s1 > option:eq(2)').prop('selected','ture')      // 设置选中
$('#gender').data('option')      // data方法，针对data-开头的属性，获取，若值是JSON格式，自动转成JS对象 


console.log(this); // this指飞就是事件源 DOM对象
console.log($(this)); // 事件源DOM对象=> jQuery 对象
window.onload = $(function (){...})        // 重写会覆盖
$(function () { var name = 'ad'; console.log(name);  })          // 重写不会覆盖