jQuery怎么使用？jQuery选择器有哪些？

本篇文章给大家带来的内容是介绍jQuery怎么使用？jQuery选择器有哪些？让大家了解jQuery文件库的使用，基本语法的使用，jQuery选择器。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

1. 使用方法

jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

网页需要使用到 jQuery 时，需要先在网页中引入 jQuery 的 js文件。

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
6cee78a5815e1ea034fd9f5df4179a0c
b2386ffb911b14667cb8f0f91ea547a7My Test JQuery6e916e0f7d1e588d4f442bf645aedb2f
    9b264bb87e5a392a4202120e2b17019f2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

2. jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。【相关视频教程推荐：jQuery教程】

基础语法形式：

 $(selector).action()

例：

$("p").hide()    // 隐藏所有 <p> 元素
$("#myInfo").hide() // 隐藏所有 id="myInfo" 的元素

写法：

所有 jQuery 函数位于一个 document.ready 的函数中。如下图。

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

    $(document).ready(function(){     
       // 代码部分写在这里     
    });

也可以简写成下面这样：

   $(function(){         
      // 这里写代码         
   });

举例：

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
6cee78a5815e1ea034fd9f5df4179a0c
b2386ffb911b14667cb8f0f91ea547a7My Test JQuery6e916e0f7d1e588d4f442bf645aedb2f
    9b264bb87e5a392a4202120e2b17019f2cacc6d41bbb37262a98f745aa00fbf0
    ea1aab715d1b735c8b112b6fff119ca8    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").html("Hello JQuery World");
                $("#myDiv1").css("background-color","green");
            });
        });
    2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    285f2ee1e472a25f04d29214b2020631点击65281c5ac262bf6d81768915a4a77ac0
    78a54985854ba9d1968e744276530244Hello16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

　　

3. 基本选择器

(1) 元素选择器: jQuery 元素选择器基于元素名选取元素。

举例：使用元素选择器选择所有e388a4556c0f65e1904146cc1a846bee元素，将其隐藏。

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
6cee78a5815e1ea034fd9f5df4179a0c
b2386ffb911b14667cb8f0f91ea547a7My Test JQuery6e916e0f7d1e588d4f442bf645aedb2f
    9b264bb87e5a392a4202120e2b17019f2cacc6d41bbb37262a98f745aa00fbf0
    ea1aab715d1b735c8b112b6fff119ca8    
        $(function(){
           $("button").click(function(){
                $("p").hide();
            });
         
        });
    2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    285f2ee1e472a25f04d29214b2020631点击65281c5ac262bf6d81768915a4a77ac0
    e388a4556c0f65e1904146cc1a846beep元素194b3e26ee717c64999d7867364b1b4a3
    e388a4556c0f65e1904146cc1a846beep元素294b3e26ee717c64999d7867364b1b4a3
    78a54985854ba9d1968e744276530244Hello16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

　　

(2) #id 选择器：jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器

举例：使用 #id 选择器选择 id="myDiv1"的元素，将其隐藏。

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
6cee78a5815e1ea034fd9f5df4179a0c
b2386ffb911b14667cb8f0f91ea547a7My Test JQuery6e916e0f7d1e588d4f442bf645aedb2f
    9b264bb87e5a392a4202120e2b17019f2cacc6d41bbb37262a98f745aa00fbf0
    ea1aab715d1b735c8b112b6fff119ca8    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").hide();
            });
        });
    2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    285f2ee1e472a25f04d29214b2020631点击65281c5ac262bf6d81768915a4a77ac0
    e388a4556c0f65e1904146cc1a846beep元素194b3e26ee717c64999d7867364b1b4a3
    e388a4556c0f65e1904146cc1a846beep元素294b3e26ee717c64999d7867364b1b4a3
    78a54985854ba9d1968e744276530244Hello16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

　　

(3) .class 选择器：jQuery 类选择器可以通过指定的 class 查找元素。

 举例：使用类选择器选择Class=“myClass1”的元素，将其隐藏。

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
6cee78a5815e1ea034fd9f5df4179a0c
b2386ffb911b14667cb8f0f91ea547a7My Test JQuery6e916e0f7d1e588d4f442bf645aedb2f
    9b264bb87e5a392a4202120e2b17019f2cacc6d41bbb37262a98f745aa00fbf0
    ea1aab715d1b735c8b112b6fff119ca8    
        $(function(){
           $("button").click(function(){
                $(".myClass1").hide();
            });
        });
    2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    285f2ee1e472a25f04d29214b2020631点击65281c5ac262bf6d81768915a4a77ac0
    e388a4556c0f65e1904146cc1a846beep元素194b3e26ee717c64999d7867364b1b4a3
    e388a4556c0f65e1904146cc1a846beep元素294b3e26ee717c64999d7867364b1b4a3
    78a54985854ba9d1968e744276530244Hello16b28748ea4df4d9c2150843fecfba68
    690022410a1995d4625bdc4d50bc75bc你好16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

　　

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

以上是jQuery怎么使用？jQuery选择器有哪些？的详细内容。更多信息请关注PHP中文网其他相关文章！