争怎路由网/网站教程/内容

jQuery如何使用？jQuery选择器有哪一些？

网站教程2024-05-10 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是介绍jQuery怎么使用？jQuery选择器有哪些？让大家了解jQuery文件库的使用，基本语法的使用，jQuery选择器。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

1. 使用方法

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

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

<!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>
</head>
<body>
</body>
</html>

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>
    <div id="myDiv1">Hello</div>
</body>
</html>
jQuery怎么使用？jQuery选择器有哪些？　　jQuery怎么使用？jQuery选择器有哪些？
3. 基本选择器
(1) 元素选择器: jQuery 元素选择器基于元素名选取元素。
举例：使用元素选择器选择所有<p>元素，将其隐藏。
<!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>
    <div id="myDiv1">Hello</div>
</body>
</html>
jQuery怎么使用？jQuery选择器有哪些？　　jQuery怎么使用？jQuery选择器有哪些？
(2) #id 选择器：jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器
举例：使用 #id 选择器选择 id="myDiv1"的元素，将其隐藏。
<!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>
    <div id="myDiv1">Hello</div>
</body>
</html>
jQuery怎么使用？jQuery选择器有哪些？　　jQuery怎么使用？jQuery选择器有哪些？
(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>
    <div id="myDiv1">Hello</div>
    <div Class="myClass1">你好</div>
</body>
</html>
jQuery怎么使用？jQuery选择器有哪些？　　jQuery怎么使用？jQuery选择器有哪些？
总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。
以上就是jQuery怎么使用？jQuery选择器有哪些？的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:jQuery怎样运用？jQuery选择器有哪些？
 
相关阅读