<body>
<i class="i">风</i>
<i class="i">花</i>
<i class="i">雪</i>
<i class="i">月</i>
<b>下雨了</b>
<input type="button" value="点击" id="btn" name="ipt">
<div id="div">
<p class="p">获取id名</p>
<p class="p">云淡风轻</p>
<p class="p">绵绵细雨</p>
</div>
<input type="button" value="我是val()方法" id="btn" name="ipt">
<script src="./jquery-1.12.4.js"></script>
<script>
// 很多人分不清楚document语句什么情况之下使用？而且经过我做的试卷有很多卷子都有这个题，所以我进行一下总结
// 我所说的类名、id名包括标签名都是选择器的一种
// 首先它具有时效性、唯一性
// 1.document.getElementById() //顾名思义 getElementById指的就是 id名，只能获取带有id的属性名
var doc = document.getElementById('div');
// console.log(doc);
// 2.document.getElementByName() //这个获取的所有的name属性
var doc = document.getElementsByName('ipt');
// console.log(doc); //获取到的是一个类数组也就是伪数组 NodeList(2) [input#btn, input#btn]
// 3.document.getElementsByTagName() 方法的字符串可以不区分大小写 // 获取所有的标签名
// var doc = document.getElementsByTagName('input');
var doc = document.getElementsByTagName('input')[0]; //可以指定某一个下标，先前说了它的返回值就是一个类数组。所以可设置下标
// console.log(doc)[1]; //也可以在控制台打印时设置下标
// 4.document.getElementsByClassName() //获取到的是元素的类名 也就是class选择器
var doc = document.getElementsByClassName('p')[2]; //可以在这里添加下标返回指定的某个类名
// console.log(doc); //返回的也是一个类数组，不能再控制台打印时添加下标，否则会报错
/*--------------------------------------------------------------------------------------------------------------------------------*/
// 万能选择器
// 特点是多样性 它的返回值是选择器的第一个元素，如果没有就返回null,是没有name属性的
// 多个选择器可以使用逗号隔开
// 首先我们试试id选择器
var doc = document.querySelector('btn');
// console.log(doc); //返回的null
// 标签名
var doc = document.querySelector('div > p');
// console.log(doc); //返回的是div标签里的第一个p标签
// 类名
var doc = document.querySelector('i');
// console.log(doc); //返回的是第一个i标签
// 通配符
var doc = document.querySelector('*');
// console.log(doc); //返回的是整个html页面的标签
/*------------------------------------------------------------------------------------------------- */
// 万能选择器----方法2
var doc = document.querySelectorAll('btn');
// console.log(doc); //返回值是类数组
// 标签名
var doc = document.querySelectorAll('div > p');
// console.log(doc); //返回的是类数组 div标签里的所有p标签
// 类名
var doc = document.querySelectorAll('i');
// console.log(doc); //返回的是i标签
// 通配符
var doc = document.querySelectorAll('*');
// console.log(doc); //返回的是整个html页面的标签
/*-----------------------------------------------------------------------------------*/
// html()、val()、text()之间的区别
// 首先html() 它的方法是设置或者返回被选择元素的内容 文本 + html标记
// 它返回的是匹配到的第一个元素的内容，设置内容时，则重写所有的匹配元素的内容
$(function() {
$('b').html("淘宝 + < i > 下雪了 < /i>)"); // 设置内容 添加了一个html标记
})
// text()它的返回值也是和html()的返回值一样，不同的是它会删除html标记，也不能写入html标记
$(function() {
$('i').text(); // 返回内容
})
// val()方法返回的是表单内容,例如下拉菜单 input表单 自定义的value属性 form表单
$(function() {
$('btn').val();
})
</script>
</body>