jq 基础语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

文档就绪事件

以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。

1.$(document).ready(function(){ // 开始写 jQuery 代码... });

2.$(function(){ // 开始写 jQuery 代码... });

Query 入口函数:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

选择器：

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器：

用户点击按钮后，所有 <p> 元素都隐藏：

实例

 
    $ 
    ( 
    document 
    ) 
    . 
    ready 
    ( 
    function 
    ( 
    ) 
    { 
     $ 
    ( 
    " 
    button 
    " 
    ) 
    . 
    click 
    ( 
    function 
    ( 
    ) 
    { 
     $ 
    ( 
    " 
    p 
    " 
    ) 
    . 
    hide 
    ( 
    ) 
    ;  
    } 
    ) 
    ; 
    } 
    ) 
    ; 
   

#id 选择器：

当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

实例

 
    $ 
    ( 
    document 
    ) 
    . 
    ready 
    ( 
    function 
    ( 
    ) 
    { 
     $ 
    ( 
    " 
    button 
    " 
    ) 
    . 
    click 
    ( 
    function 
    ( 
    ) 
    { 
     $ 
    ( 
    " 
    #test 
    " 
    ) 
    . 
    hide 
    ( 
    ) 
    ;  
    } 
    ) 
    ; 
    } 
    ) 
    ; 
   

文档就绪事件

元素选择器：

实例

#id 选择器：

实例

猜你喜欢