JQuery入门

JQuery概述

• 是一个快速的,简洁的JavaScript库主要作用是操作dom,能够写更少的代码,做更多的事情

JQuery优点

• 1.轻量级,核心文件比较小.加载速度会比较快
• 2.免费的,开源的
• 3.兼容性较强,基本兼容了主流浏览器
• 4.链式编程,隐式迭代
• 5.对事件动画支持,简化了dom操作
• 6.支持插件扩展

    // jquery的基本使用:
    // 1.等着页面dom加载完毕再去执行js代码
    $('div').hide();
    // 2.
    $(document).ready(function(){
        $('div').hide();
    })
    // 3.
    $(function(){
          $('div').hide();
    })
    // $() 作用选中html 
    // $ 是 jquery的别称 同时也是jquery的顶级对象
    // 在代码中可以使用jquery代替$,但一般为了方便可以直接使用$,相当于原生JavaScript中的window,把元素利用$包装成jquery对象,就可以使用jquery的方法
    // 参数：css选择器 | dom对象
    // 返回值：jq实例对象
    // jq实例对象，可以操作html

jquery对象和dom对象

//  1.dom对象:用原生js获取过来的对象就是dom对象
var myDiv = document.querySelector('div'); // myDiv 是dom对象

// 2.jquery对象:用jquery方式获取过来的对象是jquery对象.本质:通过$把dom元素进行了包装后产生的对象
$('div'); // $('div') 是一个jquery对象

// 3.jquery对象只能使用jquery方法.dom对象则使用原生的javascript属性和方法
myDiv.style.display = 'none';
myDiv.hide(); // myDiv是一个dom对象 不能使用jquery里面的hide方法
$('div').style.display = 'none';// 这种是错误的 在jquery里面是不能使用原生js的属性和方法

dom对象与jquery对象之间是可以相互转换的

• 转换原因: 因为原生js比jquery更大,原生的一些属性和方法jquery没有给封装.要想使用这些属性和方法需要把jquery对象转换为dom对象才能使用

// 1.dom对象转换为jquery对象
// 1.1 $('div')  直接获取
// 1.2 已经使用原生js 获取过来dom对象
var myDiv = document.querySelector('div');
$(myDiv);

// 2.jquery对象转化为dom对象
// myDiv.play();
$('div')[index].play()
$('div').get(0).play()