初识jQuery

最新推荐文章于 2019-06-12 16:44:09 发布

原创最新推荐文章于 2019-06-12 16:44:09 发布 · 573 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

jQuery 专栏收录该内容

3 篇文章

订阅专栏

什么是jQuery？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互 -------- 百度百科

说白了jQuery是一个JavaScript框架，主要是对DOM对象进行了封装。它的语法简单，使用更加方便。

学习jQuery其实就是学习jQuery对象的方法而已

jQuery的特点？

小巧，开源，免费；
功能强大，易于扩展；
实现了浏览器的兼容。

jQuery如何使用？

第一种方式(将jQuery文件下载到本地)：

//jQuery的使用只需要在<head></head>中加上下面这句话即可
//src标识jquery.min.js文件存放在了哪里(与平时<img />标签中src用法相同)
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

第二种方式(使用CDN资源，前提是客户端可以联网) ：

//在html文件的<head>标签中加上下面这句话(1.6.4表示的是jQuery的版本)
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>

使用建议：在项目调试阶段使用本地的文件，上线之后使用CDN资源。这样可以减轻"我方"服务器的压力。

jQuery对象和普通DOM对象的区别：

DOM对象使用原生的js获取或创建对象；

jQuery对象使用jQuery中的方式获取或创建对象；

但是，两种对象其实都是指同一个或者同一种标签，只是用的不同的身份而已。

jQuery对象中的一些简单方法：

1.jQuery对象和普通DOM对象之间的转换：

<body>
	<input type="text" value="23" id="txt" />	
</body>
<script type="text/javascript">

	//使用原生js 通过id得到<input>元素的引用
	var x = document.getElementById("txt");
    alert(x.value);

    //使用jQuery获取id="txt"的对象
	var y = $("#txt");

    //使用jQuery输出得到的对象的value值 只有jQuery对象才可以使用val()方法
    alert(y.val());

    //将jQuery对象转换成DOM对象
	var z = y.get(0);
	alert(z.value);

    //将普通的DOM对象转换成jQuery对象 $()其实就是jQuery()的缩写
    var m = $(x);
    alert(m.val());
</script>

2. 根据id找对象：

var x = $("#txt");// 使用jQuery获取id为txt的对象

3.根据标签名字找对象：

var x = $("div");//找到<div>标签

4.根据.calss属性找对象：

var x = $(".class");

5.获取或设置对象的innerHTML属性：

<body>
	<!--<input type="text" value="23" id="txt" />-->
	<h1 id="cc">  23   </h1>
	<input type="button" value="累加"  onclick="add()"/>
</body>
<script type="text/javascript">
	function add()
	{
                 //innerHTML：表示的是标签中间的内容
                 //value：表示的是标签内部value属性的值
		var x = $("#cc").html();//获得<h1>标签的innerHTML属性(代表着标签体中的内容)
		x++;
		$("#cc").html(x);
	}
</script>

6.设置对象的行内样式和对象的class属性:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			.cc{
				background: red;
				height: 100px;
				border-bottom: 4px dashed yellowgreen;
				margin-bottom: 5px;
			}
		</style>
	</head>
	<body>
		<div>aa</div>
		<div>aa</div>
		<div id="thrit">aa</div>
	</body>
	<script type="text/javascript">

		//给所有的div标签加上.cc这个class属性
		$("div").addClass('cc');

        //删除第一个div标签的.cc这个class属性
		$("div:first").removeClass('cc');
        
        //给设置有.cc这一class属性的标签加上style属性，也就是行内样式
		$(".cc").css('font-size','30px');
        
        //给id="thrit"的标签设置行内样式
        $("#thrit").css({background:'red',height:'200px'});
	</script>
</html>

7.show( ) 显示标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<img src="img/1.png" />
		</div>
		<input type="button" id="btn" value="按钮"/>
	</body>
	<script type="text/javascript">
		// 给id="btn"的标签添加click监听事件
		$("#btn").click(function(){
			$("#box").show();//显示此标签内容 因为本来加载出来就显示，所以这里没有什么肉眼可见的效果
		})
		
	</script>
</html>

之前使用标签的onclick属性加入监听事件的缺点：大型项目开发的时候是团队协作，队员难免有js中函数名重复的情况发生，一旦这种情况发生，就要必定有人做出修改。而修改的时候是既要修改html中onclick属性中的函数名，还要修改js中的函数名，修改两次的话势必造成效率的降低。现在是在js中这一处写，到时候修改的时候只需要修改这一处就ok

8.hide( ) 隐藏标签：

<!--上边的代码和7中的相同  以下代码实现了点击一下隐藏照片的效果-->
<script type="text/javascript">
	// 给id="btn"的标签添加click监听事件
	$("#btn").click(function(){
		$("#box").hide();//隐藏此标签内容
	})	
</script>

9.toggle( ) 显示和隐藏转换：

<!--上边的代码和7中的相同  以下代码实现了点击一下隐藏照片，再点击一下就显示的效果-->
<script type="text/javascript">
	$("#btn").click(function(){
		$("#box").toggle();
	})
</script>

10.prop( )方法获取标签指定的属性值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="text" id="txt" value="23" />
		<input type="button" id="btn" />
	</body>
	<script type="text/javascript">
        //当点击按钮时：输出id="txt"的标签的value属性的值
		$("#btn").click(function(){
			alert($("#txt").prop('value'))
		})
		
	</script>
</html>

11.text()方法获取或设置对象的innerText属性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<div>hello</div>
			<h1>world</h1>
		</div>
	</body>
	<script type="text/javascript">
		var  x=$("#box").html()
		var y=$("#box").text()
		alert(x);//会将<div>.....</h1>这些全部内容输出
		alert(y);//只会输出hello world
		
	</script>
</html>