01.jQuery选择器过滤.html 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQuery</title>
	<script src="js/jquery.min.js">
	</script>
	<script>
	$(function(){
	// 使用标签选择器选择标签
	$("div").css({"color": "red"});
	// has在选择器中进行筛选子标签p，最终是div标签
	$("div").has("p").css({"color": "blue"});
	//eq()下标,从0开始
	$("div").eq(2).css({"color": "green"});
	})
	</script>
</head>
<body>
	<div>
	第一个div
	</div>
	<div>
		第二个div
		<p>好好学习</p>
	</div>

	<div>
	第三个div
	</div>
</body>
</html>

第一个div

第二个div

好好学习

第三个div

02.选择集转移.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQuery</title>
	<script src="js/jquery.min.js">
	</script>
	<script>
	$(function(){
		//使用类选择器,选择文字3这个标签
		$Li = $(".class_3")
		//选择集转移,选择这个标签前一个标签prev()
		$Li.prev().css({"color":"blue"});
		//选择集转移,选择这个标签前边所有的标签 prevAll()
		$Li.prevAll().css({"color":"red"});
		//选择集转移,选择这个标签后边一个标签next()
		$Li.next().css({"color":"pink"});
		//选择集转移,选择这个标签后边所有的标签nextAll()
		$Li.nextAll().css({"color":"orange"});
		//选择集转移,选择兄弟和他同一级别的其他标签 siblings()
		$Li.siblings().css({"color":"purple"});
		//选择父标签, parent()
		$Li.parent().css({"background":"yellow"});
		//孩子标签,自己的内容不会发生改变 children()
		$('ul').children().css({"background":"green"});
		//find()在子标签中查找满足,最终使用的是子标签find()
		$('#id_div').find(".class_p").css({"color":"skyblue"});
	})
	</script>
</head>
<body>
	<ul>
		<li>text1</li>
		<li>text2</li>
		<li class="class_3">text3</li>
		<li>text4</li>
		<li id="id_5">text5</li>
		<li>text6</li>
		<li>text7</li>
		<li>text8</li>
	</ul>
	<br>
	<hr>
	<div id="id_div">
	这是一个div
	<p>good good  study</p>
	<p class="class_p">day day up</p>
	<p>hahaha</p>
	这是一个div
	</div>
</body>
</html>

03.获取和设置标签内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQuery</title>
	<script src="js/jquery.min.js">
	</script>
	<script>
	$(function(){
		//获取标签中的内容html()标签中的内容,
		alert($("div").eq(0).html());
		//设置标签中的内容
		$("div").eq(0).html("修改后的标签");
		//只需要文本,不需要标签text()
		alert($("div").eq(1).text());
		//追加内容 append()
		$("div").eq(1).append('<hr><a href="https://www.baidu.com">百度</a>');
	})
	</script>
</head>
<body>
	<div>
		这是第一个div
	</div>
	<div>
		这是第二个div
		<a href="https://www.baidu.com">百度</a>
	</div>
</body>
</html>

04.获取和设置标签属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQuery</title>
	<script src="js/jquery.min.js">
	</script>
	<script>
	$(function(){
		//获取a标签
		//获取href属性prop()
		alert($('a').prop("href"));
		//设置a标签的属性prop()
		$('a').prop({"href":"https://mail.qq.com/"});
		//获取input标签
		//获取和设置value值.可以使用prop方法
		alert("获取input的的value属性：" + $("input").val());
		//获取value值的简单方法val()
		//设置value值
		$("input").val("23002");
	})
	</script>
</head>
<body>
	<p>
		<a href="https://www.baidu.com/" style="width:200px">百度</a>
	</p>
	<p>
		<input type="text" name="name" value="100">
	</p>
</body>
</html>

05.jQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQuery</title>
	<script src="js/jquery.min.js">
	</script>
	<script>
	$(function(){
		//1.click()
		//点击哪个i标签,就改变这个i标签的背景色$(li'). click()
		//$(this)鼠标点击哪个标签,$(this)就是哪个标签对象(js的对象
		// click事件一般和 button结合使用,获取 input标签中的内容
		//获 input取标签的值
		$("li").click(
		function(){
			$(this).css({"background": "red"});
		});
		$("#btn").click(function(){
			alert($("#input").val());
		});
		//2.blur()失去焦点(输入框)
		$("#input").blur(function(){
			$(this).css({"background":"red"});
		});
		//3.focus获得焦点(输入框)
		$("#input").focus(function(){
			$(this).css({"background":"green"});
		});
		//4.mouseover()鼠标进入
		$("#input").mouseover(function(){
			$(this).css({"background":"blue"});
		});
		//5.mouseout()鼠标离开
		$("#input").mouseout(function(){
			$(this).css({"background":"yellow"});
		});
	})
	</script>
</head>
<body>
	<div class="box">
		<ul>
			<li>text1</li>
			<li>text2</li>
			<li>text3</li>
		</ul>
		<p>
			<input type="text" name="name" id="input" value="请输入">
		</p>
		<p>
			<input type="button" value="点我啊" id="btn">
		</p>
	</div>
</body>
</html>

06.冒泡事件 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQuery</title>
	<style>
		.box1{
			width:200px;
			height:200px;
			background:pink;
		}
		.box2{
			width:100px;
			height:100px;
			background:purple;
		}
		
		
	</style>
	<script src="js/jquery.min.js">
	</script>
	<script>
	// 阻止冒泡事件
	$(function(){
		$("div").click(function(event){
			event.stopPropagation();
		});
	});
	</script>
	<script>
	//事件冒泡,子标签的事件,会向父级标签进行传递
	$(function(){
		$("div").click(function(){
			alert($(this).html());
		});
	});
	</script>
</head>
<body>
	<div class="box1">
		这是div1
		<div class="box2">
			这是div2
		</div>
	</div>
</body>
</html>

07.事件代理

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQuery</title>
	<script src="js/jquery.min.js">
	</script>
	<script>
		$(function(){
			//事件代理,设置标签,只绑定一次 delegate(li','click'', function()
			$('ul').delegate('li', 'click', function(){
				$(this).css({"background":"red"});
			});
		//将来工作中的标签,可能是通过代码添加的代码添加的标签没有绑定
		$("ul").append('<li>标签4</li>');
		$("ul").append('<li>标签5</li>');
		});
	</script>
</head>
<body>
	<ul>
		<li>标签1</li>
		<li>标签2</li>
		<li>标签3</li>
	</ul>
</body>
</html>

08.js对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQuery</title>
	<script src="js/jquery.min.js">
	</script>
	<script>
		// 1.方法1使用new Object创建
		//创建对象
		var oPerson = new Object();
		// 添加属性
		oPerson.name = "老王";
		oPerson.age = 18;
		// 添加方法
		oPerson.func = function(){
			alert("1.new Object方法:" + this.name);
		};
		// 调用
		oPerson.func();
		// 2.方法2，使用自面量方法创建
		var oPerson2 = {
			"name": "老王",
			"age": 18,
			func:function(){
				alert("2.字面量方法：" +  this.name);
			}
		};
		oPerson2.func();
	</script>
</head>
<body>
</body>
</html>