jQuery教程

jQuery 的基本使用

本文主要是介绍jQuery 的基本使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

@

目录
  • 1. jQuery 基本使用步骤
  • 2. jQuery 的入口函数
    • ① 两种写法
    • ② 入口函数作用
  • 3. jQuery 的顶级对象 '$'
  • 4. jQuery 对象和 DOM 对象
    • ① 区别
    • ② jQuery 对象和 DOM 对象转换
      • DOM 对象转换为 jQuery 对象: $(DOM对象)
      • jQuery 对象转换为 DOM 对象( 两种方式)


1. jQuery 基本使用步骤

  1. 下载
  2. 引入到head标签里
  3. 直接在js中使用



2. jQuery 的入口函数

① 两种写法

写法一:

$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});

(推荐)写法二:

$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;

② 入口函数作用

等着 DOM 结构渲染完毕即可执行入口函数内部的代码,不必等到所有外部资源加载完成(jQuery 自己完成了封装)。

相当于原生 js 中的 DOMContentLoaded事件,同样不同于load事件。



3. jQuery 的顶级对象 '$'

1.$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $

$(function() {
    //...
})

jQuery(function() {
    //...   
})

2.$ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用jQuery 的方法。

$(function() {
    //hide():隐藏节点对象
    $("div").hide();
})


4. jQuery 对象和 DOM 对象

① 区别

  • 用原生 JS 获取来的对象就是 DOM 对象,DOM 对象则使用原生的 JavaScirpt 方法

  • jQuery 方法获取的元素就是 jQuery 对象,只有 jQuery 对象才能使用 jQuery 方法

    jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。

请添加图片描述


② jQuery 对象和 DOM 对象转换

DOM 对象与 jQuery 对象之间是可以相互转换的。

因为原生 js 比 jQuery 更大,原生的一些属性和方法 jQuery没有封装在内. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

DOM 对象转换为 jQuery 对象: $(DOM对象)

//方式1:$('标签名')
$("div");//返回一个包含div Dom对象的 jQuery 对象

//方式2:$(element)
var Div = document.querySelector('div');
$(Div);//返回一个包含Div对象的 jQuery 对象

jQuery 对象转换为 DOM 对象( 两种方式)

/*
jElement: 它指的是一个 jQuery 对象
index: 它指的是是索引号
*/
//方式1:
jElement[index];
//方式2:
jElement.get(index);



这篇关于jQuery 的基本使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!