2.jquery文件的引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery文件的引入</title>
</head>
<body>
<div id="box">
</div>
</body>
//导入jquery库,库文件会抛出构造函数或者对象
<script src="./jquery-3.2.1.js"></script>
<script type="text/javascript">
//如果不写window.onload(),浏览器会从上到下执行解析脚本，遇到js也直接执行
//引入jquery文件之后，$这个符号为jquery的构造函数
//书写jquery的方式 入口函数
//文档加载完毕之后，会准备加载回调函数
$(document).ready(function () {
});
//简写的形式
$(function () {})
</script>
</html>
3.jquery基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery基础选择器</title>
</head>
<body>
<ul>
<li id="brother">路飞学城1</li>
<li><a href="#">路飞学城2</a></li>
<li class="li3">路飞学城3</li>
<li>路飞学城4</li>
<li>路飞学城5</li>
</ul>
</body>
<script src="./jquery-3.2.1.js"></script>
<script type="text/javascript">
//使用jquery函数的时候必须有入口函数
$(document).ready(function () {
//基础选择器
//1.id选择器
// console.log($('#brother'));
$('#brother').css('color','red');
//2.标签选择器,设置多个值用对象key:value的方式
// $('a').css('color','yellow');
$('a').css({'color':'yellow','font-size':'24px'});
//3.类选择器
$('.li3').css('background','green');
//4.通配符选择器,使用不是很频繁
$('*').html(""); //清空整个界面的元素
})
</script>
</html>
4.jquery层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery层级选择器</title>
</head>
<body>
<ul>
<li id="brother">路飞学城1</li>
<li><a href="#">路飞学城2</a></li>
<li class="li3">路飞学城3</li>
<li>路飞学城4</li>
<li>路飞学城5</li>
</ul>
<div id="box">
<p id="father">天王盖地虎</p>
<p>哈哈哈哈哈</p>
<p>宝塔镇河妖</p>
<p>蘑菇放辣椒</p>
<div id="box2">
<p>小鸡炖蘑菇</p>
</div>
</div>
</body>
<script src="./jquery-3.2.1.js"></script>
<script type="text/javascript">
//使用jquery函数的时候必须有入口函数
$(document).ready(function () {
//1.后代选择器(子节点所有的相关标签)
$('#box p').css('color','red');
//2.子代选择器 子一代
$('#box2>p').css('color','yellow');
//3.批邻选择器 匹配所有紧接着选中元素的兄弟
$('#father+p').css('font-size','30px');
//4.兄弟选择器,同级的所有
$('#father~p').css('background','gray');
//5.获取第一个元素
$('li:first').css('font-size','50px');
//6.获取最后一个元素
$('li:last').css('font-size','3px');
//选择指定的一个元素，从0开始
$('li:eq(2)').css('font-size','10px');
})
</script>
</html>
5.基本过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery基本过滤选择器</title>
</head>
<body>
<ul>
<li>哈哈哈哈，基本过滤选择器</li>
<li>嘿嘿嘿</li>
<li>天王盖地虎</li>
<li>小鸡炖蘑菇</li>
</ul>
</body>
<script src="./jquery-3.2.1.js"></script>
<script type="text/javascript">
//使用jquery函数的时候必须有入口函数
$(function () {
//获取第一个：first,获取最后一个：last
//选择奇数，偶数，从0开始计算
$('li:odd').css('color','red'); //奇数下标
$('li:even').css('color','yellow'); //偶数下标
//选中特定索引值
$('li:eq(1)').css('font-size','100px');
//选中大于特定索引的元素
$('li:gt(1)').css('font-size','50px');
//选中小于特定索引的元素
$('li:lt(1)').css('font-size','12px');
})
</script>
</html>
6.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<p class="p1">我是一个段落</p>
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked"></input>
<input name="username1111" type='text' value="1"></input>
<input name="username2222" type='text' value="1"></input>
<input name="username3333" type='text' value="1"></input>
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button>
</form>
</div>
</body>
<script src="./jquery-3.2.1.js"></script>
<script type="text/javascript">
//使用jquery函数的时候必须有入口函数
$(function () {
//属性选择器
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$("li[id]").css('color','red');
//[attr=value] 匹配给定的属性是某个特定值的元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('color','darkgreen');
//匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','red');
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','yellow');
//匹配给定的属性是以包含某些值的元素
$("button[class*=btn]").css('background','#0000FF');
})
</script>
</html>
7.筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选选择器</title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
<span>我是第四个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="./jquery-3.2.1.js"></script>
<script type="text/javascript">
//获取第n个元素 数值从0开始
$('span:eq(0)').css('color','#FF0000');
$('span').eq(1).css('color','#FF0000');
//获取第一个元素：first :last 点语法：get方法(获取) set方法(设置)
$('span').first().css('color','blue');
$('span').last().css('color','green');
//6952006
$('span').parent('.p1').css({"width":'300px',height:'400px',background:'red'});
//查找所有的后代元素
$('div').find('button').css('background',"yellow");
</script>
</html>
8.筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选选择器</title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
<span>我是第四个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="./jquery-3.2.1.js"></script>
<script type="text/javascript">
//获取第n个元素 数值从0开始
$('span:eq(0)').css('color','#FF0000');
$('span').eq(1).css('color','#FF0000');
//获取第一个元素：first :last 点语法：get方法(获取) set方法(设置)
$('span').first().css('color','blue');
$('span').last().css('color','green');
//6952006
$('span').parent('.p1').css({"width":'300px',height:'400px',background:'red'});
//查找所有的后代元素
$('div').find('button').css('background',"yellow");
</script>
</html>
