JQuery学习笔记（一）

最新推荐文章于 2020-02-12 23:14:49 发布

x_k

最新推荐文章于 2020-02-12 23:14:49 发布

阅读量351

点赞数 1

分类专栏：前端文章标签： helloworld JQuery

本文链接：https://blog.csdn.net/u011499992/article/details/52080877

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

书到用时方恨少！！！每次使用JQuery都因为一些小事情的遗忘造成时间的大量浪费，周末好好的看了一下基础学习视频。

HelloWorld

凡事少不了HelloWorld！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<!-- 导入JQuery库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	
	// 相当于 document.ready，{代码}
	$(function(){
		// 1.选取button
		// 2.添加onclick响应函数
		$("button").click(function(){
		// 3.弹出helloWorld
			alert("HelloWorld");
		});
	})

</script>

</head>
<body>
	<button>ClickMe</button>
</body>
</html>

全选、全不选

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		$("#checkAll").click(function(){
			var flag = this.checked;
			$(":checkbox[name='items']").attr("checked",flag);
		});
		
		$(":checkbox[name='items']").click(function(){
			$("#checkAll").attr("checked",
					$(":checkbox[name='items']").length == 
						$(":checkbox[name='items']:checked").length);
		})
	})
</script>
</head>
<body>
	
	<form id="myform" method="post" action="#">
		你爱好的运动是：
		<input type="checkbox" id="checkAll">全选/全不选<br>
		<input type="checkbox" name="items">足球
		<input type="checkbox" name="items">篮球
		<input type="checkbox" name="items">羽毛球
		<input type="checkbox" name="items">乒乓球
	</form>
</body>
</html>

DOM对象和JQuery对象

1.JQuery对象是通过JQuery($())包装DOM对象后产生的对象。

2.JQuery对象无法使用DOM对象的任何方法

DOM对象也不能使用JQuery里的任何方法

3.约定：如果获取的对象为JQuery对象，那么变量前加$。如:var $variable=JQuery对象

4.JQuery对象转成DOM对象

(1)JQuery对象时一个数组对象，可以通过[index]的方法得到对应的DOM对象。

var $jq = $("#jq");

var dom = $jq[0];

(2)使用JQuery中的get(index)方法得到相应的DOM对象

var $jq = $("#jq");

var dom = $jq.get(0);

5.对于一个DOM对象，只需要用$()把DOM对下你给包装起来，就可以获得DOM对象。

var dom = document.getElementById("dom");

var $jq = $(dom);

*********************click方法中使用的this为DOM对象*************************

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<!-- 导入JQuery库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	
	// 相当于 window.onload，{代码}
	$(function(){
		// 1.选取button
		// 2.添加onclick响应函数
		$("button").click(function(){
		// 3.弹出helloWorld
			alert("HelloWorld");
			// this为DOM对象,此处在遍历
			alert("DOM->" + this.firstChild.nodeValue);
			
			alert("JQuery->" + $(this).text());
			<!-- JQuery转DOM对象	-->
			// 获取JQuery对象
			var $btn = $("button");
		
			// JQuery对象为数组
			alert($btn.length);
			
			// 通过数组下标转为DOM对象
			alert($btn[0].firstChild.nodeValue);
			
			<!-- DOM对象转JQuery对象 -->
			var btn = document.getElementById("btn");
			alert($(btn).text());
		});
	});

</script>

</head>
<body>
	
	<button id="btn">ClickMe</button>
	<br>
	<button>ClickMe</button>

</body>
</html>