<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery学习</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/**
* jQuery是对JavaScript的封装，跨浏览器
* 前期jQuery主要侧重于对于节点的查询
* 后期jQuery增加了事件的处理以及ajax的操作
*/
//换色对比体验
function f () {
//JavaScript实现变色
//document.getElementsByTagName("h1")[0].style.color="red";
//jQuery实现变色
$('h1').css('color','red');
}
//1.基本选择器
function fn () {
//id选择器
$("#username").css('color','blue');
//标签选择器
$('h2').css('background-color','green');
//class选择器
$(".username").css('color','blue');
//通配符选择器
$('*').css('background-color','lightcyan');
//联合选择器
$('h2,#username,.username').css('font-size','20px');
}
//2.层次选择器
function f1 () {
//派生选择器(父子关系)--不考虑层次
//$('div span').css('color','red');
//直接子元素选择器(父子关系)--考虑层次
//$('div >span').css('background-color','lightcoral');
//直接兄弟选择器(兄弟关系)
//$('div +span').css('font-size','30px');
//后续全部兄弟关系结点选择器(兄弟关系)
$('div~span').css('font-family','微软雅黑');
}
//3.并且选择器
function f2 () {
//$('li').css('color','aquamarine');
//:first第一个和最后一个:last
//$('li:first').css('color','red');
//$('li:last').css('color','red');
//eq(下标索引号),索引从0开始
//$('li:eq(3)').css('color','red');
//gt(索引号)--greet than 结点索引值大于索引号；lt(索引号)--less than 结点索引值小于索引号
//$('li:gt(3)').css('background-color','pink');
//$('li:gt(1):lt(3)').css('color','red');
//even 匹配索引值为偶数的结点；odd 匹配索引值为奇数的结点
//$('li:odd').css('background-color','lightgreen');
//not(选择器)去除某个结点
//$('li:not(#sunquan)').css('color','blue');
//：header选择所有的h标签，如h1,h2....
/*$(':header').css('color','red');
$(':header.pear').css('background-color','lightcyan');*/
/**总结：
* 1.并且关系的多个选择器没有先后顺序，但是要避免产生歧义
* 2.并且选择器可以单独使用
* 3.并且选择器可以使用多个，每个选择器使用前要归位
* 4.各种选择器都可以构成并且关系
*/
}
</script>
</head>
<body>
<h1>jQuery学习</h1>
<input type="button" value="变色" οnclick="f()" />
<h2>选择器学习</h2>
<input type="text" id="username" value="qiuzhiwen" /><br /><br />
<input type="text" class="username" value="qiuzhiwen" /><br /><br />
<input type="text" class="username" value="qiuzhiwen" /><br /><br />
<input type="button" value="触发" οnclick="fn()" />
<div>
<span>刘备</span>
<p><span>张飞</span></p>
<span>关羽</span>
</div>
<span>刘禅</span>
<span>妲己</span>
<div>吕布</div>
<span>赤兔马</span><br /><br />
<input type="button" value="触发1" οnclick="f1()"/>
<h3 class="pear">并且选择器</h3>
<ul>
<li>赵玉</li>
<li>小乔</li>
<li>周瑜</li>
<li>黄盖</li>
<li>大乔</li>
<li id="sunquan">孙权</li>
</ul>
<input type="button" value="触发2" οnclick="f2()" />
</body>
</html>
