jQuery的用法

简介: 1. jQuery的引入2. jQuery的入口函数3. 小结

1. jQuery的引入

<scriptsrc="js/jquery-1.12.4.min.js"></script>


2. jQuery的入口函数

我们知道使用js获取标签元素,需要页面加载完成以后再获取,我们通过给onload事件属性设置了一个函数来获取标签元素,而jquery提供了ready函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的 window.onload 更快

入口函数示例代码:

<scriptsrc="js/jquery-1.12.4.min.js"></script><script>window.onload=function(){
varoDiv=document.getElementById('div01');
alert('原生就是获取的div:'+oDiv);
    };
$(document).ready(function(){
var$div=$('#div01');
alert('jquery获取的div:'+$div);
    });
</script><divid="div01">这是一个div</div>


入口函数的简写示例代码:

<scriptsrc="js/jquery-1.12.4.min.js"></script><script>window.onload=function(){
varoDiv=document.getElementById('div01');
alert('原生就是获取的div:'+oDiv);
    };
/*$(document).ready(function(){
var$div=$('#div01');
alert('jquery获取的div:'+$div);
    });
*///上面ready的写法可以简写成下面的形式:$(function(){
var$div=$('#div01');
alert('jquery获取的div:'+$div);
    }); 
</script><divid="div01">这是一个div</div>


3. 小结

  • 引入jQuery
  • 获取标签元素需要在入口函数来完成,它的速度比原生的 window.onload 更快
  • jQuery入口函数有两种写法:
//完整写法$(document).ready(function(){
       ...
  });
//简化写法$(function(){
       ...
  });


目录
相关文章
|
6月前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
57 5
|
JavaScript 前端开发 API
【前端用法】jQuery在线引用地址(全)
【前端用法】jQuery在线引用地址(全)
1536 0
|
5月前
|
JavaScript 前端开发
必知的技术知识:jQuery中queue和dequeue的用法
必知的技术知识:jQuery中queue和dequeue的用法
23 0
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
86 0
|
6月前
|
JavaScript 程序员
让我们一起抄代码,JQuery 用法整理
让我们一起抄代码,JQuery 用法整理
52 0
|
存储 JavaScript 前端开发
【前端每日一问002】jquery中each与data方法的用法与概念
【前端每日一问002】jquery中each与data方法的用法与概念
101 0
|
JavaScript
jQuery $.makeArray()方法的用法
jQuery $.makeArray()方法的用法
260 0
jQuery  $.makeArray()方法的用法
|
JavaScript 前端开发
jQuery $.inArray()方法的用法
在 jQuery 中,我们可以使用$.inArray()方法来判断某个值是否存在于数组中。
640 0
jQuery $.inArray()方法的用法
|
JavaScript
jQuery的addClass、siblings、removeClass、each、html、eq、show/hide用法
jQuery的addClass、siblings、removeClass、each、html、eq、show/hide用法
207 0
jQuery的addClass、siblings、removeClass、each、html、eq、show/hide用法