您的位置：首页 > Web前端 > JQuery

jQuery 多种基础页面属性

2016-10-12 21:14 513 查看
完成效果：学习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选择器[b]：[/b]

代码：



<!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>
效果：点击最底层的文字，会依次弹出三个对话框。

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














内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jQuery
相关文章推荐
新的分享
章节导航