jquery入门简介

bruth_lee

于 2014-02-25 20:29:49 发布

阅读量658

点赞数

分类专栏： jquery 文章标签： web开发 jquery

本文链接：https://blog.csdn.net/lxy2010love/article/details/19918065

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、jquery介绍：

1、javascript是Netscape开发的一种脚本语言，实现了网页和用户实时、动态和交互的关系

2、web开发主要问题：1）不同浏览器实现不一致（web开发通病）；2）缺少开发和调式工具（现在firefox和chrome基本上可以满足开发者）

3、js主流版本：1）prototype-----www.prototypejs.org；2）dojo----http://dojotoolkit.org；3）YUI----http://developer.yahoo.com/yui；4）mootools----http://mootools.net/；5）ext js----http://www.extjs.com/

4、JQuery是js库之一，是由John resig在2006年开发的，主要包括核心库、UI和插件等

二、jquery优点：

1、轻量级：文件小

2、选择器太强了

3、事件处理机制

4、对dom对象的封装

5、强大的ajax

6、开源：开发人员可根据需要作相应的修改

三、入门：

引入jquery库：

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

1、hello world

$代表将document转化为jquery对象，执行ready事件
$(document).ready(function(){ //等待页面dom加载完毕后执行
    alert("Hello World!");
});

2、ready方法多次使用

<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
	alert("Hello World!");
});

//test2
$(document).ready(function(){
	alert("Hello again!");
});
</script>

3、dom对象和jquery对象转化

<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
	var domObj = document.getElementsByTagName("h3")[0]; // Dom对象
	var $jQueryObj = $(domObj);  //jQuery对象
	alert("DOM对象："+domObj.innerHTML);//弹出‘例子’
	alert("jQuery对象："+$jQueryObj.html());//弹出‘例子’
});
</script>
</head>
<body>
<h3>例子</h3>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
</body>

4、checkbox校验

<input type="checkbox" id="cr"/><label for="cr">我已经阅读了上面制度.</label>
<script type="text/javascript">
	$("#cr").click(function(){
		if($(this).is(":checked")){alert("感谢你的支持");}
	});
</script>

5、设置css样式

<div id="tt">test</div>
<div id="jx">
   点击下面有惊喜
   <p>测试1</p>
   <p>测试2</p>
</div>
<script type="text/javascript">
	$('#tt').css("color","red");
        $('#jx > p').click(function(){alert($(this).text());$(this).css({"color":"red","font-size":"1.2em"});});
</script>

Jquery就是如此的强大，不仅节省了大量的开发时间，而且感觉非常的有趣。