<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqyery元素查找</title>
<!--引入本地js资源或者设置远程连接地址也可以。-->
<script src="jquery3.3.1.js"></script>
</head>
<body>
<h1>标题1</h1>
<h1 id="h">标题2</h1>
<h1 class="h">标题3</h1>
<a name="标题">标题4</a>
<a name="标志">标题4</a>
<!--
type: 输入框的类型；text表示是一个普通的文本输入框。
placeholder: 输入框的提示文字。
name: 指定这个input标签的名称。
value: 指定输入框的值。
-->
<input type="text" placeholder="请输入用户名" name="username" value="123456">
<script>
// $ 符号只能在jquery中使用，使用它代替了document对象。
// 1. 通过id查找元素
var h = $('#h');
// 2. 通过class查找元素
var h1 = $('.h');
// 3. 通过属性选择器，来查找定位元素
var h2 = $('[name="标签"]');
// 4. 通过标签名查找元素
var h3 = $('a');
// console.log(h, h1, h2, h3);
// 查找name属性等于"标题" 的a标签；
res = $('a[name="标题"]');
// 查找name属性以"标"开头 的a标签；
res1 = $('a[name^="标"]');
// 查找name属性中包含 "题" 的a标签；
res2 = $('a[name*="题"]');
// 以 "题" 结尾的a标签；
res2 = $('a[name$="题"]');
console.log(res);
console.log(res1);
// 2. 操作标签的属性
//给a标签添加一个href属性；
$('a').attr('href', 'https://www.baidu.com');
// 删除属性
$('.h').removeAttr('class');
// 修改属性(属性必须存在)
$('a').attr('href', 'https://www.zhihu.com');
// 获取属性值
console.log($('.h1').attr('id'));
// 添加类名，attr是覆盖，addClass是追加；
$('#h').attr('class', 'h1');
$('#h').addClass('text');
// 移除某一个类名。class属性还在。
$('#h').removeClass('text');
// 获取元素的文本内容；
var text = $('.h1').text();
console.log(text);
// 修改元素的文本内容；
$('.h1').text('修改后的内容');
$('.h1').html('<a>百度一下</a>');
// val()就是用来获取输入框的值的。
alert($('input').val());
// 原生js如何操作属性(增删改查(getAttribute()和setAttribute()和removeAttribute()))和文本内容(增删改查)innerText和innerHTML？
// jQuery如何操作属性(增删改查 attr()和removeAttr())和文本内容(增删改查)text()和html()？
// 原生Js和jQuery是如何操作class属性的？直接覆盖的和追加的。
</script>
</body>
</html>