学习jQuery(1)

学习jQuery

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

 

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

美元符号定义 jQuery   $

选择符（selector）“查询”和“查找” HTML 元素

jQuery 的 action() 执行对元素的操作

 

实例

$(this).hide()

演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()

演示 jQuery hide() 函数，隐藏 id="test" 的元素。

$("p").hide()

演示 jQuery hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()

演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

 

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在接下来的学习文章中，您将学习到更多有关选择器的语法和实验案例。

 

实验一：利用jquery选择器更改页面元素，html代码如下，要求点击按钮后，页面上的文字标题顺序从上到下递增。

                    

                               

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>实验一</title>

<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>

</head>

        

<body>

<h1>这是标题1</h1>

<h2 id="text1">这是标题1</h2>

<h3 class="text2">这是标题1</h3>

<p>这是标题1</p>

<button>click</button>

        

<script type="text/javascript">

         $(document).ready(function(){

                  $(":button").click(function(){

                          $("#text1").text("这是标题2");

                          $(".text2").text("这是标题3");

            $("p").text("这是标题4");

             })

         })

         </script>

         </body>

</html>

 

当该方法用于设置值时，它会覆盖被选元素的所有内容。

$(selector).text(content)

实验二：利用jquery选择器更改页面元素，html代码如下，要求点击按钮后，该诗词的最后一句“这次第，怎一个愁字了得！”加到原来的网页后，如图。

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>实验2</title>

<!--适应移动端-->

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--引用jquery库-->

<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>

</head>

 

<body>

<div>

         <h5>声声慢，寻寻觅觅，</h5>

         冷冷清清，凄凄惨惨戚戚。<br>

乍暖还寒时候，最难将息。<br>

三杯两盏淡酒，怎敌他、晚来风急？<br>

雁过也，正伤心，却是旧时相识。<br>

满地黄花堆积。憔悴损，如今有谁堪摘？<br>

守著窗儿， 独自怎生得黑？<br>

梧桐更兼细雨，到黄昏、点点滴滴。<br>

  <p id="show"></p>

</div>

<input type="button" value="添加">

<script type="text/javascript">

  $(function () {

      $(":button").on("click",function () {

          $("#show").text("这次第，怎一个愁字了得！")

      })

  })

</script>

 

</body>

</html>

 .show()可以通過設置全局關閉 所有jQuery效果

实验三：利用jquery选择器更改页面元素，html代码如下，要求点击按钮后，隔行变色表单。

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>实验3</title>

<!--适应移动端-->

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--引用jquery库-->

<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>

         <script type="text/javascript">$(function () {

        $(document).ready(function () {

            $("button").click(function () {

                $("table tr:even").css("background","#FFC0CB");

                $("table tr:odd").css("background","#87CEFA");

            });

        });

    });

    </script>

</head>

 

<body>

<table border="1">

    <tr>

        <th>id</th>

        <th>name</th>

        <th>adress</th>

    </tr>

    <tr>

        <td>1</td>

        <td>张三</td>

        <td>北京</td>

    </tr>

    <tr>

        <td>2</td>

        <td>李四</td>

        <td>上海</td>

    </tr>

    <tr>

        <td>3</td>

        <td>丁一</td>

        <td>广州</td>

    </tr>

    <tr>

        <td>4</td>

        <td>小杜</td>

        <td>厦门</td>

    </tr>

    <tr>

        <td>5</td>

        <td>小艾</td>

        <td>长沙</td>

    </tr>

</table>

<button>click</button>

</body>

 

</html>

 

  想学jquery的可以跟着进度来，会持续更新实验案例!!

posted @ 2021-03-17 19:04  大鹅小子  阅读(219)  评论(0)    收藏  举报