jQuery 多种基础页面属性

末蓝、 2022-07-16 09:00 227阅读 0赞

**完成效果：学习jQuery，了解其基础属性，并能完成与Html代码相同的功能。**

**1.基本语法**

$(selector).action()

*   $ 符合定义这是一个jQuery语句
 *   (selector) 用来选择某个HTML元素，其语法和CSS的selector语法一样。
 *  action() 定义操作该HTML元素的方法。

比如：

$(this).hide() – 隐藏当前元素.

$(“p”).hide() – 隐藏所以 <p> 元素.

$(“.test”).hide() -隐藏所以类名为test的元素.

$(“\#test”).hide() - 隐藏ID为test的元素。

文档准备好代码：

$(document).ready(function(){  
      
       // jQuery methods go here...  
      
     });

简化代码：

$(function(){  
      
       // jQuery methods go here...  
      
     });

**2.id选择器：**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="../jquery/jquery-1.4.2.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("#test").hide();
                });
            });
        </script>
    
    </head>
    
    <body>
    <h2>这是头部</h2>
    <p>这是段落</p>
    <p id="test">这是另一个段落</p>
    <button>点击我</button>
    </body>
    
    </html>

效果：点击按钮后，只有id为test的段落消失。

**![Center][]![Center 1][]**

**3.Class选择器：**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="../jquery/jquery-1.4.2.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $(".test").hide();
                });
            });
        </script>
    
    </head>
    
    <body>
    <h2 class="test">这是头部</h2>
    <p class="test">这是段落</p>
    <p >这是另一个段落</p>
    <button>点击我</button>
    </body>
    
    </html>

**效果：点击按钮后，所有类名称为test的属性隐藏**  
![Center 2][]

**3.单击隐藏：**

**代码：**

$("p").click(function(){  
      $(this).hide();  
    });

**4.双击隐藏：**

**代码：**

$("p").dblclick(function(){  
      $(this).hide();  
    <strong><span style="font-size:18px;">});  </span></strong>

**5.获得焦点**

$("input").focus(function(){  
      $(this).css("background-color","#cccccc");  
    });

6.失去焦点

$("input").blur(function(){  
      $(this).css("background-color","#ffffff");  
    });

**7.鼠标进入图片和离开图片事件**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-1.10.2.min.js"></script>
        <script>
            $(function () {
                $("img").hover(function () {
                    alert("鼠标移动到图片上");
                },function () {
                    alert("鼠标从图片上移出");
                })
            });
        </script>
    </head>
    <body>
    <img src="../image/1.jpg" id="img">
    </body>

**效果：**

**![Center 3][]**

**![Center 4][]  
  
8.在div中增加新的文字，并设置新增加的点击后仍可增加新的。**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-1.4.2.min.js"></script>
        <style>
            .clickme{
                width: 150px;
                height: 50px;
                background-color: orange;
            }
        </style>
        <script>
            $(function () {
                $('.clickme').live('click', function() {
                    alert("增加一个新的");
                    $('body').append('<div class="clickme">Another target</div>');
                });
            })
        </script>
    </head>
    <body>
    <div class="clickme">
        点我点我点我啊
    </div>
    </body>
    </html>

**效果：**

**![Center 5][]![Center 6][]  
9.冒泡事件**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-1.4.2.min.js"></script>
        <script>
            $(function () {
               $('#div1').click(function () {
                   alert("点击了外层的div");
               })
                $('#div2').click(function () {
                    alert("点击了内层的div");
                })
                $('a').click(function (evt) {
                    alert("点击了超链接")
                })
            })
        </script>
    </head>
    <body>
    <div id="div1"style="background-color: orange;width:200px;height: 200px">
        <div id="div2" style="background-color: blue;width:150px;height: 150px">
            <p>
                <a href="#" style="color: white">点击我</a>
            </p>
        </div>
    </div>
    </body>
    </html>

**效果：点击最底层的文字，会依次弹出三个对话框。**

**若想实现点击哪个出现哪个，则需要在方法里面加入return false**

**![Center 7][]![Center 8][]  
![Center 9][]![Center 10][]**

[Center]: https://img-blog.csdn.net/20161012200917427?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220716/2af4edfbf6b64cee91865fea6a057ebd.png
[Center 2]: /images/20220716/1217b05c80bd40f7a21e7f94a0b8de19.png
[Center 3]: /images/20220716/44d995f370d94ce894ff99671ec736de.png
[Center 4]: /images/20220716/8b34bbb68b47417580a860e5284ed52a.png
[Center 5]: https://img-blog.csdn.net/20161012210113023?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 6]: /images/20220716/dfe4cb36047c4ffe85e6723ff4356a30.png
[Center 7]: https://img-blog.csdn.net/20161012210742672?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 8]: /images/20220716/9932b09c58a64658a3f1deab8b7573fa.png
[Center 9]: https://img-blog.csdn.net/20161012210810688?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 10]: /images/20220716/3889153cc04f4c6dba71d8e82208750a.png