网站推广.NET

网站推广.NET

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

来源:互联网

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

1. 使用方法

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

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

nbsp;html&gt;<meta><title>My Test JQuery</title>    <script></script>

2. jQuery 语法

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

基础语法形式:

 $(selector).action()

例:

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

写法:

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

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

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

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

也可以简写成下面这样:

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

举例:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>My Test JQuery</title>    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>    <script type="text/javascript" >            $(function(){           $("button").click(function(){                $("#myDiv1").html("Hello JQuery World");                $("#myDiv1").css("background-color","green");            });        });    </script></head><body>    <button type="button">点击</button>    <p id="myDiv1">Hello</p></body></html>

  

3. 基本选择器

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

举例:使用元素选择器选择所有

元素,将其隐藏。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>My Test JQuery</title>    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>    <script type="text/javascript" >            $(function(){           $("button").click(function(){                $("p").hide();            });                 });    </script></head><body>    <button type="button">点击</button>    <p>p元素1</p>    <p>p元素2</p>    <p id="myDiv1">Hello</p></body></html>

  

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

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

举例:使用 #id 选择器选择 的元素,将其隐藏。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>My Test JQuery</title>    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>    <script type="text/javascript" >            $(function(){           $("button").click(function(){                $("#myDiv1").hide();            });        });    </script></head><body>    <button type="button">点击</button>    <p>p元素1</p>    <p>p元素2</p>    <p id="myDiv1">Hello</p></body></html>

  

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

举例:使用类选择器选择Class=“myclass1”的元素,将其隐藏。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>My Test JQuery</title>    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>    <script type="text/javascript" >            $(function(){           $("button").click(function(){                $(".myClass1").hide();            });        });    </script></head><body>    <button type="button">点击</button>    <p>p元素1</p>    <p>p元素2</p>    <p id="myDiv1">Hello</p>    <p Class="myClass1">你好</p></body></html>

  

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

jquery选择器有哪些