随笔- 92  评论- 0  文章- 0 

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 元素,并对选取的元素执行某些操作。
  基础语法形式: $(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>

  

 

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>

  


(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>

  

 
(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>

  

 

posted on 2018-11-10 10:13 在代码的世界里游走 阅读(...) 评论(...) 编辑 收藏