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

jquery学习2--关于jquery构造器

2012-02-02 09:28 288 查看

构造器是JQuery框架的核心，其有jQuery()函数来实现（也可简写为$(),所以一般情况下使用后者）,此函数是JQuery的核心，jquery的一切操作都会构建在这个函数之上。

注意：使用jQuery()这种格式的时候，jQuery这个单词要写对，就Q需要大写，其他要小写，错一个字母都不可以。

jQuery()函数可以接受四种类型的参数：

第一：jQuery(html):根据html标记字符串，动态的创建由jquery包含的Dom元素

假设现在我们的html文件的<body>标签里什么都没有，我们使用jquery向body标签中添加一个div，并且div中的内容是“这是添加的一个div，哈哈”。

代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" language="javascript" src="js/jquery-1.7.min.js"></script>
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript" language="javascript">
$("<div>这是添加的一个div，哈哈。</div>").appendTo("body");
</script>
</body>
</html>

打开浏览器，显示效果如下：

同样的上面的这一句：$("<div>这是添加的一个div，哈哈。</div>").appendTo("body");

可以改为：jQuery("<div>这是添加的一个div，哈哈。</div>").appendTo("body");

显示效果是一模一样的。

第二：jQuery(elements):这个参数的函数可以将dom对象转换成jQuery对象，然后调用Jquery对象的属性和方法来控制该dom元素的样式。

下面的示例代码就是将上面div中的内容的颜色改为红色，大小改为24px；

var div = $("div");
div.css("color","red");
div.css("font-size","24px");

测试结果截图：

第三：jQuery(callback):它是$(document).ready()的缩写，表示绑定一个在dom文档加载完毕后要执行的函数。

下面的代码示例分别用上面的两种写法来执行两个函数，弹出两个提示框。

$(document).ready(function(){
alert("先执行吧！");
});
$(function(){
alert("这是页面加载完毕后执行的函数！");
});

测试执行截图：

第四：jQuery(expression,[context]):根据css选择器字符串在页面中匹配元素，或者使用context参数指定匹配的范围。

下面的示例代码是将页面的p标签中的span标签中的内容的颜色设置成红色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

</head>

<body>
<div><span>文本块1</span></div>
<p><span>文本块2</span></p>
<script language="javascript" type="text/javascript">
//var red = $("span","p");
var red = jQuery("p span");
red.css("color","red");

</script>
</body>
</html>

测试截图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航