jQuery 多种基础页面属性

来源：互联网发布：李宁在淘宝有多少店编辑：程序博客网时间：2024/06/01 10:42

完成效果：学习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的段落消失。

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的属性隐藏

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>

效果：

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>

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

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

0 0