jQuery 多种基础页面属性-蒲公英云

jQuery 多种基础页面属性

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

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

1.基本语法

$(selector).action()

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

比如：

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

$(“p”).hide() – 隐藏所以

元素.

$(“.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的段落消失。

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

效果：

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>